fat: add create product logic
This commit is contained in:
Vlad Stan
parent
5ad070684d
commit
5328ce170c
10 changed files with 446 additions and 17 deletions
|
|
@ -99,11 +99,153 @@
|
|||
</div>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="payment">
|
||||
<div v-if="stall"></div>
|
||||
<q-tab-panel name="products">
|
||||
<div v-if="stall">
|
||||
<div class="row items-center no-wrap q-mb-md">
|
||||
<div class="col-3 q-pr-lg">
|
||||
<q-btn
|
||||
unelevated
|
||||
color="green"
|
||||
icon="plus"
|
||||
class="float-left"
|
||||
@click="showNewProductDialog()"
|
||||
>New Product</q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col-6 col-sm-8 q-pr-lg"></div>
|
||||
<div class="col-3 col-sm-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="config">
|
||||
<q-tab-panel name="orders">
|
||||
<div v-if="stall"></div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
<q-dialog v-model="productDialog.showDialog" position="top">
|
||||
<q-card v-if="stall" class="q-pa-lg q-pt-xl" style="width: 500px">
|
||||
<q-form @submit="sendProductFormData" class="q-gutter-md">
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="productDialog.data.name"
|
||||
label="Name"
|
||||
></q-input>
|
||||
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="productDialog.data.description"
|
||||
label="Description"
|
||||
></q-input>
|
||||
<!-- <div class="row"> -->
|
||||
<!-- <div class="col-5">
|
||||
<q-select
|
||||
filled
|
||||
dense
|
||||
multiple
|
||||
v-model.trim="productDialog.data.categories"
|
||||
:options="categories"
|
||||
label="Categories"
|
||||
class="q-pr-sm"
|
||||
></q-select>
|
||||
</div> -->
|
||||
<!-- <div class="col-7"> -->
|
||||
<q-select
|
||||
filled
|
||||
multiple
|
||||
dense
|
||||
emit-value
|
||||
v-model.trim="productDialog.data.categories"
|
||||
use-input
|
||||
use-chips
|
||||
multiple
|
||||
hide-dropdown-icon
|
||||
input-debounce="0"
|
||||
new-value-mode="add-unique"
|
||||
label="Categories (Hit Enter to add)"
|
||||
placeholder="crafts,robots,etc"
|
||||
></q-select>
|
||||
<q-toggle
|
||||
:label="`${productDialog.url ? 'Insert image URL' : 'Upload image file'}`"
|
||||
v-model="productDialog.url"
|
||||
></q-toggle>
|
||||
<q-input
|
||||
v-if="productDialog.url"
|
||||
filled
|
||||
dense
|
||||
v-model.trim="productDialog.data.image"
|
||||
type="url"
|
||||
label="Image URL"
|
||||
></q-input>
|
||||
<q-file
|
||||
v-else
|
||||
class="q-pr-md"
|
||||
filled
|
||||
dense
|
||||
capture="environment"
|
||||
accept="image/jpeg, image/png"
|
||||
:max-file-size="3*1024**2"
|
||||
label="Small image (optional)"
|
||||
clearable
|
||||
@input="imageAdded"
|
||||
@clear="imageCleared"
|
||||
>
|
||||
<template v-if="productDialog.data.image" v-slot:before>
|
||||
<img style="height: 1em" :src="productDialog.data.image" />
|
||||
</template>
|
||||
<template v-if="productDialog.data.image" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="imageCleared"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.number="productDialog.data.price"
|
||||
type="number"
|
||||
:label="'Price (' + stall.currency + ') *'"
|
||||
:step="stall.currency != 'sat' ? '0.01' : '1'"
|
||||
:mask="stall.currency != 'sat' ? '#.##' : '#'"
|
||||
fill-mask="0"
|
||||
reverse-fill-mask
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.number="productDialog.data.quantity"
|
||||
type="number"
|
||||
label="Quantity"
|
||||
></q-input>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn
|
||||
v-if="productDialog.data.id"
|
||||
unelevated
|
||||
color="primary"
|
||||
type="submit"
|
||||
>Update Product</q-btn
|
||||
>
|
||||
|
||||
<q-btn
|
||||
v-else
|
||||
unelevated
|
||||
color="primary"
|
||||
:disable="!productDialog.data.price
|
||||
|| !productDialog.data.name
|
||||
|| !productDialog.data.quantity"
|
||||
type="submit"
|
||||
>Create Product</q-btn
|
||||
>
|
||||
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto"
|
||||
>Cancel</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
async function stallDetails(path) {
|
||||
const template = await loadTemplateAsync(path)
|
||||
|
||||
const pica = window.pica()
|
||||
|
||||
Vue.component('stall-details', {
|
||||
name: 'stall-details',
|
||||
template,
|
||||
|
|
@ -16,8 +18,21 @@ async function stallDetails(path) {
|
|||
data: function () {
|
||||
return {
|
||||
tab: 'info',
|
||||
stall: null
|
||||
// currencies: [],
|
||||
stall: null,
|
||||
products: [],
|
||||
productDialog: {
|
||||
showDialog: false,
|
||||
url: true,
|
||||
data: {
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
categories: [],
|
||||
image: null,
|
||||
price: 0,
|
||||
quantity: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -96,6 +111,97 @@ async function stallDetails(path) {
|
|||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
imageAdded(file) {
|
||||
const image = new Image()
|
||||
image.src = URL.createObjectURL(file)
|
||||
image.onload = async () => {
|
||||
let fit = imgSizeFit(image)
|
||||
let canvas = document.createElement('canvas')
|
||||
canvas.setAttribute('width', fit.width)
|
||||
canvas.setAttribute('height', fit.height)
|
||||
output = await pica.resize(image, canvas)
|
||||
this.productDialog.data.image = output.toDataURL('image/jpeg', 0.4)
|
||||
this.productDialog = {...this.productDialog}
|
||||
}
|
||||
},
|
||||
imageCleared() {
|
||||
this.productDialog.data.image = null
|
||||
this.productDialog = {...this.productDialog}
|
||||
},
|
||||
sendProductFormData: function () {
|
||||
var data = {
|
||||
stall_id: this.stall.id,
|
||||
name: this.productDialog.data.name,
|
||||
description: this.productDialog.data.description,
|
||||
categories: this.productDialog.data.categories,
|
||||
|
||||
image: this.productDialog.data.image,
|
||||
price: this.productDialog.data.price,
|
||||
quantity: this.productDialog.data.quantity
|
||||
}
|
||||
this.productDialog.showDialog = false
|
||||
if (this.productDialog.data.id) {
|
||||
this.updateProduct(data)
|
||||
} else {
|
||||
this.createProduct(data)
|
||||
}
|
||||
},
|
||||
updateProduct: function (data) {
|
||||
var self = this
|
||||
let wallet = _.findWhere(this.stalls, {
|
||||
id: self.productDialog.data.stall
|
||||
}).wallet
|
||||
LNbits.api
|
||||
.request(
|
||||
'PUT',
|
||||
'/nostrmarket/api/v1/products/' + data.id,
|
||||
_.findWhere(self.g.user.wallets, {
|
||||
id: wallet
|
||||
}).inkey,
|
||||
data
|
||||
)
|
||||
.then(async function (response) {
|
||||
self.products = _.reject(self.products, function (obj) {
|
||||
return obj.id == data.id
|
||||
})
|
||||
let productData = mapProducts(response.data)
|
||||
self.products.push(productData)
|
||||
//SEND Nostr data
|
||||
try {
|
||||
await self.sendToRelays(productData, 'product', 'update')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
self.resetDialog('productDialog')
|
||||
//self.productDialog.show = false
|
||||
//self.productDialog.data = {}
|
||||
})
|
||||
.catch(function (error) {
|
||||
LNbits.utils.notifyApiError(error)
|
||||
})
|
||||
},
|
||||
createProduct: async function (payload) {
|
||||
try {
|
||||
const {data} = await LNbits.api.request(
|
||||
'POST',
|
||||
'/nostrmarket/api/v1/product',
|
||||
this.adminkey,
|
||||
payload
|
||||
)
|
||||
this.products.unshift(data)
|
||||
this.$q.notify({
|
||||
type: 'positive',
|
||||
message: 'Product Created',
|
||||
timeout: 5000
|
||||
})
|
||||
} catch (error) {
|
||||
console.warn(error)
|
||||
LNbits.utils.notifyApiError(error)
|
||||
}
|
||||
},
|
||||
showNewProductDialog: async function () {
|
||||
this.productDialog.showDialog = true
|
||||
}
|
||||
},
|
||||
created: async function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue