Skip to content

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

index products

parent 0a773156
Hide whitespace changes
Inline Side-by-side
Showing with 318 additions and 31 deletions
components/DynamicInput.vue → components/CreateProductModal.vue
View file @ c83e5638
<template> <template>
<div class="hello"> <div>
<h1>{{ msg }}</h1> <b-button v-b-modal.modal-edit >New Category</b-button>
<b-modal id="modal-edit" title="Edit Category" class="modal fade" >
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form @submit.prevent="getInfo"> <form @submit.prevent="getInfo">
<label>Name :</label> <label>Name :</label>
...@@ -11,6 +12,7 @@ ...@@ -11,6 +12,7 @@
v-model="name" v-model="name"
max="255" max="255"
min="1" min="1"
size="sm"
required required
/> />
<label>Category ID :</label> <label>Category ID :</label>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
class="form-control mb-2" class="form-control mb-2"
placeholder="Parent ID" placeholder="Parent ID"
v-model="category_id" v-model="category_id"
size="sm"
/> />
<label>Price :</label> <label>Price :</label>
...@@ -26,36 +29,62 @@ ...@@ -26,36 +29,62 @@
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Ordering" placeholder="Ordering"
v-model="ordering" v-model="price"
size="sm"
required required
/> />
<label>Description :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Description"
v-model="description"
size="sm"
required
/>
<label>Stock :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Stock"
v-model="stock"
size="sm"
required
/>
<label>Image :</label>
<b-form-file
v-model="image"
:state="Boolean(image)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
<button <button
type="button" type="button"
class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 text-white" class="flex justify-start ml-2 rounded-md border px-3 py-2 bg-pink-600 "
@click="addMore()" @click="addMore()"
> >
Add More Variant (+)
</button> </button>
<div v-for="(variant, index) in variants" :key="index"> <div v-for="(variant, index) in variants" :key="index">
<div class="flex justify-start ml-2 mt-4"> <div class="flex justify-start ml-2 mt-4">
<input <input
v-model="variant.variantName" v-model="variant.variantColor"
placeholder="enter you variant name" placeholder="Color"
class="w-full py-2 border border-indigo-500 rounded" class="w-full py-2 border border-indigo-500 rounded"
/> />
<input <input
v-model="variant.variantIndex" v-model="variant.variantSize"
placeholder="enter you variantIndex" placeholder="Size"
class="w-full py-2 border border-indigo-500 rounded" class="w-full py-2 border border-indigo-500 rounded"
/> />
<input <input
v-model="variant.variantPrice" v-model="variant.variantQuantity"
placeholder="enter you variantPrice" placeholder="Quantity"
class="w-full py-2 border border-indigo-500 rounded" class="w-full py-2 border border-indigo-500 rounded"
/> />
<button <button
type="button" type="button"
class="ml-2 rounded-md border px-3 py-2 bg-red-600 text-white" class="ml-2 rounded-md border px-3 py-2 bg-red-600"
@click="remove(index)" @click="remove(index)"
v-show="index != 0" v-show="index != 0"
> >
...@@ -63,28 +92,27 @@ ...@@ -63,28 +92,27 @@
</button> </button>
</div> </div>
</div> </div>
<b-button type="submit" variant="primary">Submit</b-button>
</form> </form>
</div> </div>
</div> </b-modal>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "HelloWorld",
props: {
msg: String,
},
data() { data() {
return { return {
name: '', name: '',
parent_id: '', category_id: '',
ordering: '', price: '',
stock: '',
description: '',
image: null,
variants: [ variants: [
{ {
variantName: "", variantColor: "",
variantIndex: "", variantSize: "",
variantPrice: "", variantQuantity: "",
}, },
], ],
...@@ -93,16 +121,20 @@ export default { ...@@ -93,16 +121,20 @@ export default {
methods: { methods: {
addMore() { addMore() {
this.variants.push({ this.variants.push({
variantName: "", variantColor: "",
variantIndex: "", variantSize: "",
variantPrice: "", variantQuantity: "",
}); });
}, },
remove(index) { remove(index) {
this.variants.splice(index, 1); this.variants.splice(index, 1);
}, },
getInfo() { getInfo() {
console.log() console.log(this.name)
console.log(this.price)
console.log(this.category_id)
console.log(this.stock)
console.log(this.variants)
} }
}, },
}; };
......
pages/home/products.vue
View file @ c83e5638
<template> <template>
<div id="app"> <div>
<DynamicInput msg="Example of Dynamic Input" /> <b-breadcrumb>
<b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
Home
</b-breadcrumb-item>
<b-breadcrumb-item href="/home/products">Product</b-breadcrumb-item>
</b-breadcrumb>
<div style="float: right">
<CreateProductModal />
</div>
<!-- table -->
<div>
<v-data-table
:headers="headers"
:items="products"
sort-by="calories"
class="elevation-1"
>
<template v-slot:top >
<v-toolbar flat>
<v-toolbar-title>Category Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click=" editCategory(item.id)" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteCategory(item.id,item)" :id ="item.id"> mdi-delete </v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template>
</v-data-table>
</div>
</div> </div>
</template> </template>
<script> <script>
import DynamicInput from "@/components/DynamicInput"; import CreateProductModal from "../../components/CreateProductModal";
import nav from "@/components/Nav";
import Navigation from "@/components/Navigation";
import axios from "axios";
import notification from "@/components/Notification";
export default { export default {
layout: 'admin', layout: 'admin',
name: "App", name: "App",
components: { components: {
DynamicInput, CreateProductModal,
Nav,
Navigation,
},
middleware: ["web"],
data: () => {
return {
id: '',
name:'',
category_id:'',
image: [],
price: '',
description: '',
stock: '',
dialog: false,
dialogDelete: false,
options: [],
headers: [
{
text: "Name",
align: "start",
sortable: false,
value: "name",
},
{ text: "id", value: "id" },
{ text: "category ID", value: "category_id" },
{ text: "price", value: "price", sortable: false },
{ text: "description", value: "description" },
{ text: "stock", value: "stock" },
{ text: 'Actions', value: 'actions', sortable: false },
],
products: [],
eID: '',
eName:'',
eOrdering:'',
eParent_id:'',
eImage: null,
message: [],
editedIndex: -1,
editedItem: {
name: "",
id: "",
ordering: "",
status: "",
created_at: "",
updated_at: "",
},
defaultItem: {
name: "",
id: "",
ordering: "",
status: "",
created_at: "",
updated_at: "",
},
}
}, },
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
},
watch: {
dialog(val) {
val || this.close();
},
dialogDelete(val) {
val || this.closeDelete();
},
},
created() {
this.initialize();
this.getProducts();
},
methods: {
initialize() {
this.products= [];
},
editItem(item) {
this.editedIndex = this.products.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
deleteItem(item) {
this.editedIndex = this.products.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialogDelete = true;
},
deleteItemConfirm() {
this.products.splice(this.editedIndex, 1);
this.closeDelete();
},
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
closeDelete() {
this.dialogDelete = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.products[this.editedIndex], this.editedItem);
} else {
this.products.push(this.editedItem);
}
this.close();
},
getProducts() {
axios
.get("http://127.0.0.1:8000/api/products/")
.then((response) => (this.products = response.data.data))
.catch(function (error) {
console.log(error);
});
},
// createCategory() {
// const self = this
// axios
// .post('http://127.0.0.1:8000/api/products/',{
// name: this.name,
// ordering: this.ordering,
// parent_id: this.parent_id,
// image: this.image,
// }, {
// headers: {
// "Content-Type": "multipart/form-data",
// "Authorization": this.$auth.$storage.getUniversal("token")
// }
// })
// .then(response => {
// this.$bvModal.hide('modal-create')
// self.$toast.success('Category created successfully!', {
// duration: 3000
// })
// })
// .catch(errors => {
// this.$bvModal.hide('modal-create')
// console.log(errors.response.data.message);
// this.message = errors.response.data.message;
// self.$toast.error('something went wrong while trying create!',{
// duration: 3000
// });
// });
// },
// 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)
// },
// deleteCategory(ID,index) {
// this.editedIndex = this.products.indexOf(index);
// if(confirm("Do you really want to delete?")){
// try{
// axios
// .delete(`http://127.0.0.1:8000/api/products/${ID}`)
// .then(response => {
// this.products.splice(this.editedIndex, 1);
// self.$toast.success('Category deleted successfully!',{
// duration: 3000
// });
// })
// } catch(error){
// console.log(error)
// }
// }
// },
// 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)
// }
// }
},
}; };
</script> </script>
......
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