nostrmarket/static/components/shipping-zones/shipping-zones.html
2023-03-01 14:57:18 +02:00

97 lines
2.7 KiB
HTML

<div>
<q-btn-dropdown
split
unelevated
color="primary"
icon="public"
@click="openZoneDialog()"
>
<q-list>
<q-item clickable v-close-popup @click="openZoneDialog()">
<q-item-section>
<q-item-label>New Shipping Zone</q-item-label>
<q-item-label caption>Create a new shipping zone</q-item-label>
</q-item-section>
</q-item>
<q-item
v-for="zone of zones"
:key="zone.id"
clickable
v-close-popup
@click="openZoneDialog(zone)"
>
<q-item-section>
<q-item-label>{{zone.name}}</q-item-label>
<q-item-label caption>{{zone.countries.join(", ")}}</q-item-label>
</q-item-section>
</q-item>
</q-list></q-btn-dropdown
>
<q-dialog v-model="zoneDialog.showDialog" position="top">
<q-card class="q-pa-lg q-pt-xl" style="width: 500px">
<q-form @submit="sendZoneFormData" class="q-gutter-md">
<q-input
filled
dense
label="Zone Name"
type="text"
v-model.trim="zoneDialog.data.name"
></q-input>
<q-select
filled
dense
multiple
:options="shippingZoneOptions"
label="Countries"
v-model="zoneDialog.data.countries"
></q-select>
<q-select
v-if="!zoneDialog.data.id"
style="width: 100px"
filled
dense
v-model="zoneDialog.data.currency"
type="text"
label="Unit"
:options="currencies"
></q-select>
<q-input
filled
dense
:label="'Amount (' + zoneDialog.data.currency + ') *'"
fill-mask="0"
reverse-fill-mask
:step="zoneDialog.data.currency != 'sat' ? '0.01' : '1'"
type="number"
v-model.trim="zoneDialog.data.cost"
></q-input>
<div class="row q-mt-lg">
<div v-if="zoneDialog.data.id">
<q-btn unelevated color="primary" type="submit">Update</q-btn>
<q-btn
@click="deleteShippingZone()"
class="q-ml-md"
unelevated
color="pink"
>Delete</q-btn
>
</div>
<div v-else>
<q-btn
unelevated
color="primary"
:disable="!zoneDialog.data.countries || !zoneDialog.data.countries.length"
type="submit"
>Create Shipping Zone</q-btn
>
</div>
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
>Cancel</q-btn
>
</div>
</q-form>
</q-card>
</q-dialog>
</div>