Skip to content

K
kiaisoft_tuananh_nuxt
Commit 5b7e2bf2 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

CRUD products

parent 30845731
Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 80 deletions
pages/home/categories.vue
View file @ 5b7e2bf2
......@@ -25,7 +25,7 @@
/>
<label>Parent :</label>
<b-form-select v-model="parent_id">
<option v-for="item in categories" :value="item.id">
<option v-for="item in categories" :value="item.id" v-if="item.parent_id == null">
{{item.name}}
</option>
</b-form-select>
......
pages/home/products.vue
View file @ 5b7e2bf2
......@@ -24,13 +24,11 @@
required
/>
<label>Category ID :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Category ID"
v-model="category_id"
size="sm"
/>
<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
......@@ -74,7 +72,7 @@
>
Variant (+)
</button>
<div v-for="(variant, index) in variants" :key="index">
<div v-for="(variant, index) in variants" :key=" 'B' +index">
<div class="flex justify-start ml-2 mt-4">
<input
v-model="variant.color"
......@@ -93,11 +91,11 @@
/>
<button
type="button"
class="btn-danger ml-2 rounded-md mt-2 border px-3 py-2 bg-red-600 text-white"
class="ml-2 rounded-md mt-2 "
@click="remove(index)"
v-show="index != 0"
>
Remove
<b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon>
</button>
</div>
</div>
......@@ -108,7 +106,184 @@
<button @click="getInfo(); createProduct();" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">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
type="text"
class="form-control mb-2"
v-model="sName"
size="sm"
disabled
/>
<label>Category ID :</label>
<input
type="text"
class="form-control mb-2"
v-model="sCategoryId"
size="sm"
disabled
/>
<label>Price :</label>
<input
type="text"
class="form-control mb-2"
v-model="sPrice"
size="sm"
disabled
/>
<label>Description :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Description"
v-model="sDescription"
size="sm"
disabled
/>
<label>Stock :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Stock"
v-model="sStock"
size="sm"
disabled
/>
<label>Image :</label>
<div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image"></b-img>
</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 @click="$bvModal.hide('modal-show')" class="btn btn-danger btn-sm m-1">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
type="text"
class="form-control mb-2"
placeholder="name"
v-model="eName"
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
type="text"
class="form-control mb-2"
placeholder="Ordering"
v-model="ePrice"
size="sm"
required
/>
<label>Description :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Description"
v-model="eDescription"
size="sm"
required
/>
<label>Stock :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Stock"
v-model="eStock"
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..."
></b-form-file>
<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
type="button"
class="ml-2 rounded-md mt-2 "
@click="removeVariant(index)"
v-show="index != 0"
>
<b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon>
</button>
</div>
</div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')" class="btn btn-danger btn-sm m-1">Close</button>
<button @click="updateProduct()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
<!-- table -->
<div>
<v-data-table
......@@ -125,19 +300,15 @@
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="editCategory(item.id)" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="editProduct(item)" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteProduct(item.id,item)" :id ="item.id"> mdi-delete </v-icon>
<v-icon small @click="showProduct(item.id)" :id ="item.id"> mdi-account-details </v-icon>
<v-icon small @click="showProduct(item); " :id ="item.id"> mdi-account-details </v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template>
</v-data-table>
</div>
</div>
</template>
......@@ -161,7 +332,7 @@ export default {
return {
name: '',
id: '',
category_id: '',
category_id: null,
price: '',
stock: '',
description: '',
......@@ -170,8 +341,7 @@ export default {
{
color: "",
size: "",
quantity: "",
quantity: "",
},
],
dialog: false,
......@@ -193,11 +363,35 @@ export default {
],
products: [],
product: [],
eID: '',
eName:'',
eOrdering:'',
eParent_id:'',
eImage: null,
categories: [],
sName: '',
sCategoryId: '',
sPrice: '',
sDescription: '',
sStock: '',
sImages: null,
sVariants: [
{
color: "",
size: "",
quantity: "",
},
],
eId: '',
eName: '',
eCategoryId: '',
ePrice: '',
eDescription: '',
eStock: '',
eImages: null,
eVariants: [
{
color: "",
size: "",
quantity: "",
},
],
message: [],
editedIndex: -1,
editedItem: {
......@@ -234,11 +428,27 @@ export default {
created() {
this.initialize();
this.getProducts();
this.getCategories();
},
methods: {
initialize() {
this.products= [];
this.product= [];
this.categories= [];
this.sName= '';
this.sCategoryId= '',
this.sPrice= '',
this.sDescription= '',
this.sStock= '',
this.sImages= null,
this.sVariants= [
{
color: "",
size: "",
quantity: "",
},
];
},
editItem(item) {
this.editedIndex = this.products.indexOf(item);
......@@ -276,6 +486,14 @@ export default {
}
this.close();
},
getCategories() {
axios
.get("http://127.0.0.1:8000/api/categories/")
.then((response) => (this.categories = response.data.data))
.catch(function (error) {
console.log(error);
});
},
getProducts() {
axios
.get("http://127.0.0.1:8000/api/products/")
......@@ -317,14 +535,6 @@ export default {
});
});
},
// fileSelected(event){
// console.log(event)
// const file = event.target.files[0];
// this.url = URL.createObjectURL(file);
// this.image = file;
// console.log(file)
// console.log(this.image)
// },
deleteProduct(ID,index) {
const self = this;
this.editedIndex = this.products.indexOf(index);
......@@ -343,58 +553,69 @@ export default {
}
}
},
showProduct(ID) {
async showProduct(item) {
const ID = item.id;
try {
const resp = await fetch(`http://127.0.0.1:8000/api/products/${ID}`, {
method: "GET",
headers: {
"Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token")
}
}).then((response) => {
return response.json();
});
this.sName = resp.data.name;
this.sPrice = resp.data.price;
this.sCategoryId = resp.data.category_id;
this.sDescription = resp.data.description;
this.sStock = resp.data.stock;
this.sVariants = resp.data.variants;
this.sImages = resp.data.images;
console.log(this.sVariants);
console.log(this.sImages);
} catch (error) {
console.log(error)
}
this.$bvModal.show('modal-show')
},
editProduct(item) {
this.$bvModal.show('modal-edit');
this.eId = item.id;
this.eName = item.name;
this.eCategoryId = item.category_id;
this.ePrice = item.price;
this.eStock = item.stock;
this.eDescription = item.description;
this.eVariants = item.variants;
},
updateProduct(ID) {
const self = this;
try{
axios
.get(`http://127.0.0.1:8000/api/products/${ID}`,{
.post(`http://127.0.0.1:8000/api/products/update/${this?.eId}`,{
name: this.eName,
price: this.ePrice,
category_id: this.eCategoryId,
description: this.eDescription,
images: this.eImages,
variants: this.eVariants,
}, {
headers: {
"Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token")
}
} )
.then((response) => (this.product = response.data.data))
.then(response => {
self.$toast.success('User updated successfully!',{
duration: 3000
});
console.log(response);
})
} catch(error){
console.log(error)
}
console.log(this.product)
},
// getID(item) {
// console.log(this.products.indexOf(item))
// },
// editCategory(userID) {
// this.$bvModal.show('modal-edit');
// this.eID = userID;
// console.log(this?.eID);
// console.log(this.eName);
// },
// updateCategory(userID) {
// const self = this
// console.log(this.eName);
// console.log(this.eOrdering);
// console.log(this?.eID);
// try{
// axios
// .post(`http://127.0.0.1:8000/api/products/update/${this?.eID}`,{
// name: this.eName,
// ordering: this.eOrdering,
// parent_id: this.eParent_id,
// image: this.eImage }, {
// headers: {
// "Content-Type": "multipart/form-data",
// "Authorization": this.$auth.$storage.getUniversal("token")
// }
// } )
// .then(response => {
// self.$toast.success('User updated successfully!',{
// duration: 3000
// });
// console.log(response);
// })
// } catch(error){
// console.log(error)
// }
// }
addMore() {
this.variants.push({
color: "",
......@@ -402,9 +623,19 @@ export default {
quantity: "",
});
},
addMoreVariant() {
this.eVariants.push({
color: "",
size: "",
quantity: "",
});
},
remove(index) {
this.variants.splice(index, 1);
},
removeVariant(index) {
this.eVariants.splice(index, 1);
},
getInfo() {
console.log(this.name)
console.log(this.price)
......@@ -415,8 +646,6 @@ export default {
console.log(this.variants)
}
},
};
</script>
......
pages/home/users.vue
View file @ 5b7e2bf2
......@@ -183,7 +183,7 @@
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click=" editUser(item.id);" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small class="mr-2" @click=" editUser(item);" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteUser(item.id, item)" :id ="item.id"> mdi-delete </v-icon>
</template>
<template v-slot:no-data>
......@@ -223,7 +223,7 @@ export default {
},
{ text: "id", value: "id" },
{ text: "email", value: "email" },
{ text: "status", value: "status", sortable: false },
{ text: "status", value: "id", sortable: false },
{ text: "created_at", value: "created_at" },
{ text: "updated_at", value: "updated_at" },
{ text: 'Actions', value: 'actions', sortable: false },
......@@ -360,9 +360,11 @@ export default {
}
}
},
editUser(userID) {
editUser(user) {
this.$bvModal.show('modal-edit');
this.eID = userID;
this.eID = user.id;
this.eEmail = user.email;
this.eName = user.name;
console.log(this?.eID);
},
updateUser(userID) {
......
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