Skip to content

K
kiaisoft_tuananh_nuxt
Commit 02efe224 authored by vietanh-0511's avatar vietanh-0511
Browse files
Options

update product UI

parent 86679059
Show whitespace changes
Inline Side-by-side
Showing with 28 additions and 301 deletions
pages/products/index.vue
View file @ 02efe224
...@@ -46,12 +46,15 @@ ...@@ -46,12 +46,15 @@
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-treeview
v-model="category_id" v-model="category_id"
:items="categories" :items="categories"
item-text="name" :selection-type="independent"
:multiple-active="false"
shaped
hoverable
activatable
item-value="id" item-value="id"
label="Category"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -298,12 +301,14 @@ ...@@ -298,12 +301,14 @@
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-treeview
v-model="eCategoryId" v-model="eCategoryId"
:items="categories" :items="categories"
item-text="name" :selection-type="independent"
item-value="id" :multiple-active="false"
label="Category" shaped
hoverable
activatable
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
...@@ -416,295 +421,6 @@ ...@@ -416,295 +421,6 @@
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<!-- <b-modal id="modal-create" title="create Product" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label for="input-live">Name :</label>
<b-form-input
id="input-live"
v-model="name"
type="text"
class="form-control mb-2"
placeholder="name"
aria-describedby="input-live-help input-live-feedback"
max="255"
min="1"
trim
/>
<b-form-invalid-feedback id="input-live-feedback">
Enter at least 3 letters
</b-form-invalid-feedback>
<label>Category ID :</label>
<b-form-select v-model="category_id">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Price :</label>
<input
v-model="price"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Description :</label>
<input
v-model="description"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
required
>
<label>Stock :</label>
<input
v-model="stock"
type="text"
class="form-control mb-2"
placeholder="Stock"
size="sm"
required
>
<label>Image :</label>
<b-form-file
v-model="images"
multiple
:state="Boolean(images)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
<button
type="button"
class="btn-primary flex justify-start ml-2 mt-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="addMore()"
>
Variant (+)
</button>
<div v-for="(variant, index) in variants" :key=" 'B' +index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="variant.color"
placeholder="Color"
class="w-full py-2 border border-indigo-500 rounded"
>
<input
v-model="variant.size"
placeholder="Size"
class="w-full py-2 border border-indigo-500 rounded"
>
<input
v-model="variant.quantity"
placeholder="Quantity"
class="w-full py-2 border border-indigo-500 rounded"
>
<button
v-show="index != 0"
type="button"
class="ml-2 rounded-md mt-2 "
@click="remove(index)"
>
<b-icon icon="dash-circle-fill" class="h5" variant="danger" />
</button>
</div>
</div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-create')">
Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createProduct()">
Submit
</button>
</template>
</b-modal> -->
<!-- modal-show -->
<!-- <b-modal id="modal-show" title="PRODUCT" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Name :</label>
<input
v-model="sName"
type="text"
class="form-control mb-2"
size="sm"
disabled
>
<label>Category ID :</label>
<input
v-model="sCategoryId"
type="text"
class="form-control mb-2"
size="sm"
disabled
>
<label>Price :</label>
<input
v-model="sPrice"
type="text"
class="form-control mb-2"
size="sm"
disabled
>
<label>Description :</label>
<input
v-model="sDescription"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
disabled
>
<label>Stock :</label>
<input
v-model="sStock"
type="text"
class="form-control mb-2"
placeholder="Stock"
size="sm"
disabled
>
<label>Image :</label>
<div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image" />
</div>
<label>Variant :</label>
<div v-for="(variant, index) in sVariants" :key="'A' +index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="variant.color"
placeholder="Color"
class="w-full py-2 border border-indigo-500 rounded"
disabled
>
<input
v-model="variant.size"
placeholder="Size"
class="w-full py-2 border border-indigo-500 rounded"
disabled
>
<input
v-model="variant.quantity"
placeholder="Quantity"
class="w-full py-2 border border-indigo-500 rounded"
disabled
>
</div>
</div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-show')">
Close
</button>
</template>
</b-modal> -->
<!-- modal-edit -->
<!-- <b-modal id="modal-edit" title="Edit Product" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Name :</label>
<input
v-model="eName"
type="text"
class="form-control mb-2"
placeholder="name"
max="255"
min="1"
size="sm"
required
>
<label>Category ID :</label>
<b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Price :</label>
<input
v-model="ePrice"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Description :</label>
<input
v-model="eDescription"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
required
>
<label>Stock :</label>
<input
v-model="eStock"
type="text"
class="form-control mb-2"
placeholder="Stock"
size="sm"
required
>
<label>Image :</label>
<b-form-file
v-model="eImages"
multiple
:state="Boolean(eImages)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
<button
type="button"
class="btn-primary flex justify-start ml-2 mt-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="addMoreVariant()"
>
Variant (+)
</button>
<div v-for="(variant, index) in eVariants" :key="index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="variant.color"
placeholder="Color"
class="w-full py-2 border border-indigo-500 rounded"
>
<input
v-model="variant.size"
placeholder="Size"
class="w-full py-2 border border-indigo-500 rounded"
>
<input
v-model="variant.quantity"
placeholder="Quantity"
class="w-full py-2 border border-indigo-500 rounded"
>
<button
v-show="index != 0"
type="button"
class="ml-2 rounded-md mt-2 "
@click="removeVariant(index)"
>
<b-icon icon="dash-circle-fill" class="h5" variant="danger" />
</button>
</div>
</div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-edit')">
Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="updateProduct()">
Submit
</button>
</template>
</b-modal> -->
<!-- table -->
<div> <div>
<v-data-table <v-data-table
:headers="headers" :headers="headers"
...@@ -748,7 +464,7 @@ export default { ...@@ -748,7 +464,7 @@ export default {
return { return {
name: '', name: '',
id: '', id: '',
category_id: null, category_id: [],
price: '', price: '',
stock: '', stock: '',
description: '', description: '',
...@@ -814,7 +530,7 @@ export default { ...@@ -814,7 +530,7 @@ export default {
], ],
eId: '', eId: '',
eName: '', eName: '',
eCategoryId: '', eCategoryId: [],
ePrice: '', ePrice: '',
eDescription: '', eDescription: '',
eStock: '', eStock: '',
...@@ -1056,14 +772,18 @@ export default { ...@@ -1056,14 +772,18 @@ export default {
fd.append('category_id', this.eCategoryId) fd.append('category_id', this.eCategoryId)
fd.append('description', this.eDescription) fd.append('description', this.eDescription)
for (let i = 0; i < this.eVariants.length; i++) { for (let i = 0; i < this.eVariants.length; i++) {
if (typeof this.eVariants[i].id !== 'undefined') {
fd.append(`variants[${i}][id]`, this.eVariants[i].id) fd.append(`variants[${i}][id]`, this.eVariants[i].id)
}
fd.append(`variants[${i}][color]`, this.eVariants[i].color) fd.append(`variants[${i}][color]`, this.eVariants[i].color)
fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity) fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
fd.append(`variants[${i}][size]`, this.eVariants[i].size) fd.append(`variants[${i}][size]`, this.eVariants[i].size)
} }
if (this.eImages) {
for (let j = 0; j < this.eImages.length; j++) { for (let j = 0; j < this.eImages.length; j++) {
fd.append(`images[${j}]`, this.eImages[j]) fd.append(`images[${j}]`, this.eImages[j])
} }
}
const currentPostIndex = this.editedIndex const currentPostIndex = this.editedIndex
try { try {
this.$axios this.$axios
...@@ -1109,6 +829,13 @@ export default { ...@@ -1109,6 +829,13 @@ export default {
}, },
seeVariant () { seeVariant () {
console.log(this.variants) console.log(this.variants)
},
fetchCategories (item) {
return this.$axios
.get('/categories/')
.then(res => res.json())
.then(json => (item.children.push(...json)))
.catch(err => console.warn(err))
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment