feat: manage shipping zones
This commit is contained in:
Vlad Stan
parent
dcda99830e
commit
31c5a82cb9
8 changed files with 444 additions and 20 deletions
|
|
@ -5,10 +5,10 @@
|
|||
color="primary"
|
||||
icon="public"
|
||||
label="Shipping Zones"
|
||||
@click="createShippingZone"
|
||||
@click="openZoneDialog()"
|
||||
>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup @click="createShippingZone">
|
||||
<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>
|
||||
|
|
@ -19,13 +19,80 @@
|
|||
:key="zone.id"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="editShippingZone"
|
||||
@click="openZoneDialog(zone)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>XXX</q-item-label>
|
||||
<q-item-label caption>xxxxxxxxxxxxx</q-item-label>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,188 @@ async function shippingZones(path) {
|
|||
const template = await loadTemplateAsync(path)
|
||||
Vue.component('shipping-zones', {
|
||||
name: 'shipping-zones',
|
||||
props: ['adminkey', 'inkey'],
|
||||
template,
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
zones: []
|
||||
zones: [],
|
||||
zoneDialog: {
|
||||
showDialog: false,
|
||||
data: {
|
||||
id: null,
|
||||
name: '',
|
||||
countries: [],
|
||||
cost: 0,
|
||||
currency: 'sat'
|
||||
}
|
||||
},
|
||||
currencies: [],
|
||||
shippingZoneOptions: [
|
||||
'Free (digital)',
|
||||
'Flat rate',
|
||||
'Worldwide',
|
||||
'Europe',
|
||||
'Australia',
|
||||
'Austria',
|
||||
'Belgium',
|
||||
'Brazil',
|
||||
'Canada',
|
||||
'Denmark',
|
||||
'Finland',
|
||||
'France',
|
||||
'Germany',
|
||||
'Greece',
|
||||
'Hong Kong',
|
||||
'Hungary',
|
||||
'Ireland',
|
||||
'Indonesia',
|
||||
'Israel',
|
||||
'Italy',
|
||||
'Japan',
|
||||
'Kazakhstan',
|
||||
'Korea',
|
||||
'Luxembourg',
|
||||
'Malaysia',
|
||||
'Mexico',
|
||||
'Netherlands',
|
||||
'New Zealand',
|
||||
'Norway',
|
||||
'Poland',
|
||||
'Portugal',
|
||||
'Romania',
|
||||
'Russia',
|
||||
'Saudi Arabia',
|
||||
'Singapore',
|
||||
'Spain',
|
||||
'Sweden',
|
||||
'Switzerland',
|
||||
'Thailand',
|
||||
'Turkey',
|
||||
'Ukraine',
|
||||
'United Kingdom**',
|
||||
'United States***',
|
||||
'Vietnam',
|
||||
'China'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createShippingZone: async function () {
|
||||
console.log('### createShippingZone', createShippingZone)
|
||||
openZoneDialog: function (data) {
|
||||
data = data || {
|
||||
id: null,
|
||||
name: '',
|
||||
countries: [],
|
||||
cost: 0,
|
||||
currency: 'sat'
|
||||
}
|
||||
this.zoneDialog.data = data
|
||||
|
||||
this.zoneDialog.showDialog = true
|
||||
},
|
||||
editShippingZone: async function () {}
|
||||
createZone: async function () {
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'POST',
|
||||
'/nostrmarket/api/v1/zone',
|
||||
this.adminkey,
|
||||
{}
|
||||
)
|
||||
this.zones = data
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
getZones: async function () {
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
'/nostrmarket/api/v1/zone',
|
||||
this.inkey
|
||||
)
|
||||
this.zones = data
|
||||
console.log('### data', data)
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
sendZoneFormData: async function () {
|
||||
console.log('### data', this.zoneDialog.data)
|
||||
this.zoneDialog.showDialog = false
|
||||
if (this.zoneDialog.data.id) {
|
||||
await this.updateShippingZone(this.zoneDialog.data)
|
||||
} else {
|
||||
await this.createShippingZone(this.zoneDialog.data)
|
||||
}
|
||||
await this.getZones()
|
||||
},
|
||||
createShippingZone: async function (newZone) {
|
||||
console.log('### newZone', newZone)
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'POST',
|
||||
'/nostrmarket/api/v1/zone',
|
||||
this.adminkey,
|
||||
newZone
|
||||
)
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Zone created!'
|
||||
})
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
updateShippingZone: async function (updatedZone) {
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'PATCH',
|
||||
`/nostrmarket/api/v1/zone/${updatedZone.id}`,
|
||||
this.adminkey,
|
||||
updatedZone
|
||||
)
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Zone updated!'
|
||||
})
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
deleteShippingZone: async function () {
|
||||
try {
|
||||
await LNbits.api.request(
|
||||
'DELETE',
|
||||
`/nostrmarket/api/v1/zone/${this.zoneDialog.data.id}`,
|
||||
this.adminkey
|
||||
)
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Zone deleted!'
|
||||
})
|
||||
await this.getZones()
|
||||
this.zoneDialog.showDialog = false
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
async getCurrencies() {
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'GET',
|
||||
'/nostrmarket/api/v1/currencies',
|
||||
this.inkey
|
||||
)
|
||||
|
||||
this.currencies = ['sat', ...data]
|
||||
} catch (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
}
|
||||
},
|
||||
created: async function () {
|
||||
await this.getZones()
|
||||
await this.getCurrencies()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue