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 @@
<v-col
cols="12"
>
<v-select
<v-treeview
v-model="category_id"
:items="categories"
item-text="name"
:selection-type="independent"
:multiple-active="false"
shaped
hoverable
activatable
item-value="id"
label="Category"
/>
</v-col>
<v-col cols="12">
......@@ -298,12 +301,14 @@
<v-col
cols="12"
>
<v-select
<v-treeview
v-model="eCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
:selection-type="independent"
:multiple-active="false"
shaped
hoverable
activatable
/>
</v-col>
<v-col cols="12">
......@@ -416,295 +421,6 @@
</v-card-actions>
</v-card>
</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>
<v-data-table
:headers="headers"
......@@ -748,7 +464,7 @@ export default {
return {
name: '',
id: '',
category_id: null,
category_id: [],
price: '',
stock: '',
description: '',
......@@ -814,7 +530,7 @@ export default {
],
eId: '',
eName: '',
eCategoryId: '',
eCategoryId: [],
ePrice: '',
eDescription: '',
eStock: '',
......@@ -1056,14 +772,18 @@ export default {
fd.append('category_id', this.eCategoryId)
fd.append('description', this.eDescription)
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}][color]`, this.eVariants[i].color)
fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
fd.append(`variants[${i}][size]`, this.eVariants[i].size)
}
if (this.eImages) {
for (let j = 0; j < this.eImages.length; j++) {
fd.append(`images[${j}]`, this.eImages[j])
}
}
const currentPostIndex = this.editedIndex
try {
this.$axios
......@@ -1109,6 +829,13 @@ export default {
},
seeVariant () {
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