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
Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 80 deletions
pages/home/categories.vue
View file @ 5b7e2bf2
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
/> />
<label>Parent :</label> <label>Parent :</label>
<b-form-select v-model="parent_id"> <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}} {{item.name}}
</option> </option>
</b-form-select> </b-form-select>
......
pages/home/products.vue
View file @ 5b7e2bf2
...@@ -24,13 +24,11 @@ ...@@ -24,13 +24,11 @@
required required
/> />
<label>Category ID :</label> <label>Category ID :</label>
<input <b-form-select v-model="category_id">
type="text" <option v-for="item in categories" :value="item.id">
class="form-control mb-2" {{item.name}}
placeholder="Category ID" </option>
v-model="category_id" </b-form-select>
size="sm"
/>
<label>Price :</label> <label>Price :</label>
<input <input
...@@ -74,7 +72,7 @@ ...@@ -74,7 +72,7 @@
> >
Variant (+) Variant (+)
</button> </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"> <div class="flex justify-start ml-2 mt-4">
<input <input
v-model="variant.color" v-model="variant.color"
...@@ -93,11 +91,11 @@ ...@@ -93,11 +91,11 @@
/> />
<button <button
type="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)" @click="remove(index)"
v-show="index != 0" v-show="index != 0"
> >
Remove <b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon>
</button> </button>
</div> </div>
</div> </div>
...@@ -108,7 +106,184 @@ ...@@ -108,7 +106,184 @@
<button @click="getInfo(); createProduct();" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> <button @click="getInfo(); createProduct();" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template> </template>
</b-modal> </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 --> <!-- table -->
<div> <div>
<v-data-table <v-data-table
...@@ -125,19 +300,15 @@ ...@@ -125,19 +300,15 @@
</v-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <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="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>
<template v-slot:no-data> <template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn> <v-btn color="primary" @click="initialize"> Reset </v-btn>
</template> </template>
</v-data-table> </v-data-table>
</div> </div>
</div> </div>
</template> </template>
...@@ -161,7 +332,7 @@ export default { ...@@ -161,7 +332,7 @@ export default {
return { return {
name: '', name: '',
id: '', id: '',
category_id: '', category_id: null,
price: '', price: '',
stock: '', stock: '',
description: '', description: '',
...@@ -171,7 +342,6 @@ export default { ...@@ -171,7 +342,6 @@ export default {
color: "", color: "",
size: "", size: "",
quantity: "", quantity: "",
}, },
], ],
dialog: false, dialog: false,
...@@ -193,11 +363,35 @@ export default { ...@@ -193,11 +363,35 @@ export default {
], ],
products: [], products: [],
product: [], product: [],
eID: '', categories: [],
eName:'', sName: '',
eOrdering:'', sCategoryId: '',
eParent_id:'', sPrice: '',
eImage: null, sDescription: '',
sStock: '',
sImages: null,
sVariants: [
{
color: "",
size: "",
quantity: "",
},
],
eId: '',
eName: '',
eCategoryId: '',
ePrice: '',
eDescription: '',
eStock: '',
eImages: null,
eVariants: [
{
color: "",
size: "",
quantity: "",
},
],
message: [], message: [],
editedIndex: -1, editedIndex: -1,
editedItem: { editedItem: {
...@@ -234,11 +428,27 @@ export default { ...@@ -234,11 +428,27 @@ export default {
created() { created() {
this.initialize(); this.initialize();
this.getProducts(); this.getProducts();
this.getCategories();
}, },
methods: { methods: {
initialize() { initialize() {
this.products= []; this.products= [];
this.product= []; this.product= [];
this.categories= [];
this.sName= '';
this.sCategoryId= '',
this.sPrice= '',
this.sDescription= '',
this.sStock= '',
this.sImages= null,
this.sVariants= [
{
color: "",
size: "",
quantity: "",
},
];
}, },
editItem(item) { editItem(item) {
this.editedIndex = this.products.indexOf(item); this.editedIndex = this.products.indexOf(item);
...@@ -276,6 +486,14 @@ export default { ...@@ -276,6 +486,14 @@ export default {
} }
this.close(); 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() { getProducts() {
axios axios
.get("http://127.0.0.1:8000/api/products/") .get("http://127.0.0.1:8000/api/products/")
...@@ -317,14 +535,6 @@ export default { ...@@ -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) { deleteProduct(ID,index) {
const self = this; const self = this;
this.editedIndex = this.products.indexOf(index); this.editedIndex = this.products.indexOf(index);
...@@ -343,58 +553,69 @@ export default { ...@@ -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; const self = this;
try{ try{
axios 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: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token") "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){ } catch(error){
console.log(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() { addMore() {
this.variants.push({ this.variants.push({
color: "", color: "",
...@@ -402,9 +623,19 @@ export default { ...@@ -402,9 +623,19 @@ export default {
quantity: "", quantity: "",
}); });
}, },
addMoreVariant() {
this.eVariants.push({
color: "",
size: "",
quantity: "",
});
},
remove(index) { remove(index) {
this.variants.splice(index, 1); this.variants.splice(index, 1);
}, },
removeVariant(index) {
this.eVariants.splice(index, 1);
},
getInfo() { getInfo() {
console.log(this.name) console.log(this.name)
console.log(this.price) console.log(this.price)
...@@ -415,8 +646,6 @@ export default { ...@@ -415,8 +646,6 @@ export default {
console.log(this.variants) console.log(this.variants)
} }
}, },
}; };
</script> </script>
......
pages/home/users.vue
View file @ 5b7e2bf2
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
</v-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <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> <v-icon small @click="deleteUser(item.id, item)" :id ="item.id"> mdi-delete </v-icon>
</template> </template>
<template v-slot:no-data> <template v-slot:no-data>
...@@ -223,7 +223,7 @@ export default { ...@@ -223,7 +223,7 @@ export default {
}, },
{ text: "id", value: "id" }, { text: "id", value: "id" },
{ text: "email", value: "email" }, { text: "email", value: "email" },
{ text: "status", value: "status", sortable: false }, { text: "status", value: "id", sortable: false },
{ text: "created_at", value: "created_at" }, { text: "created_at", value: "created_at" },
{ text: "updated_at", value: "updated_at" }, { text: "updated_at", value: "updated_at" },
{ text: 'Actions', value: 'actions', sortable: false }, { text: 'Actions', value: 'actions', sortable: false },
...@@ -360,9 +360,11 @@ export default { ...@@ -360,9 +360,11 @@ export default {
} }
} }
}, },
editUser(userID) { editUser(user) {
this.$bvModal.show('modal-edit'); this.$bvModal.show('modal-edit');
this.eID = userID; this.eID = user.id;
this.eEmail = user.email;
this.eName = user.name;
console.log(this?.eID); console.log(this?.eID);
}, },
updateUser(userID) { 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