Skip to content

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

ident

parent c83e5638
Show whitespace changes
Inline Side-by-side
Showing with 169 additions and 39 deletions
components/CreateProductModal.vue
View file @ 05c812e0
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
<label>Image :</label> <label>Image :</label>
<b-form-file <b-form-file
v-model="image" v-model="image"
multiple accept="image/*"
:state="Boolean(image)" :state="Boolean(image)"
placeholder="Choose a image or drop it here..." placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..." drop-placeholder="Drop file here..."
......
pages/home/products.vue
View file @ 05c812e0
...@@ -8,9 +8,107 @@ ...@@ -8,9 +8,107 @@
<b-breadcrumb-item href="/home/products">Product</b-breadcrumb-item> <b-breadcrumb-item href="/home/products">Product</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button v-b-modal.modal-create >New Product</b-button></div>
<b-modal id="modal-create" title="create 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="name"
max="255"
min="1"
size="sm"
required
/>
<label>Category ID :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Category ID"
v-model="category_id"
size="sm"
/>
<CreateProductModal /> <label>Price :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Ordering"
v-model="price"
size="sm"
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="images"
multiple accept="image/*"
:state="Boolean(images)"
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="addMore()"
>
Variant (+)
</button>
<div v-for="(variant, index) in variants" :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="btn-danger ml-2 rounded-md mt-2 border px-3 py-2 bg-red-600 text-white"
@click="remove(index)"
v-show="index != 0"
>
Remove
</button>
</div>
</div> </div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-create')" class="btn btn-danger btn-sm m-1">Close</button>
<button @click="getInfo();" 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
...@@ -44,7 +142,7 @@ ...@@ -44,7 +142,7 @@
<script> <script>
import CreateProductModal from "../../components/CreateProductModal"; import CreateProductModal from "../../components/CreateProductModal";
import nav from "@/components/Nav"; import Nav from "@/components/Nav";
import Navigation from "@/components/Navigation"; import Navigation from "@/components/Navigation";
import axios from "axios"; import axios from "axios";
import notification from "@/components/Notification"; import notification from "@/components/Notification";
...@@ -60,13 +158,21 @@ export default { ...@@ -60,13 +158,21 @@ export default {
middleware: ["web"], middleware: ["web"],
data: () => { data: () => {
return { return {
name: '',
id: '', id: '',
name:'', category_id: '',
category_id:'',
image: [],
price: '', price: '',
description: '',
stock: '', stock: '',
description: '',
images: null,
variants: [
{
color: "",
size: "",
quantity: "",
},
],
dialog: false, dialog: false,
dialogDelete: false, dialogDelete: false,
options: [], options: [],
...@@ -175,35 +281,39 @@ export default { ...@@ -175,35 +281,39 @@ export default {
console.log(error); console.log(error);
}); });
}, },
// createCategory() { createProduct() {
// const self = this const self = this;
// axios const set = new Set([this.images]);
// .post('http://127.0.0.1:8000/api/products/',{ const images = Array.from(set);
// name: this.name, axios
// ordering: this.ordering, .post('http://127.0.0.1:8000/api/products/',{
// parent_id: this.parent_id, name: this.name,
// image: this.image, price: this.price,
// }, { category_id: this.category_id,
// headers: { description: this.description,
// "Content-Type": "multipart/form-data", images: images,
// "Authorization": this.$auth.$storage.getUniversal("token") variants: this.variants,
// } }, {
// }) headers: {
// .then(response => { "Content-Type": "multipart/form-data",
// this.$bvModal.hide('modal-create') "Authorization": this.$auth.$storage.getUniversal("token")
// self.$toast.success('Category created successfully!', { }
// duration: 3000 })
// }) .then(response => {
// }) this.$bvModal.hide('modal-create')
// .catch(errors => { self.$toast.success('Category created successfully!', {
// this.$bvModal.hide('modal-create') duration: 3000
// console.log(errors.response.data.message); })
// this.message = errors.response.data.message; })
// self.$toast.error('something went wrong while trying create!',{ .catch(errors => {
// duration: 3000 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){ // fileSelected(event){
// console.log(event) // console.log(event)
// const file = event.target.files[0]; // const file = event.target.files[0];
...@@ -265,6 +375,25 @@ export default { ...@@ -265,6 +375,25 @@ export default {
// console.log(error) // console.log(error)
// } // }
// } // }
addMore() {
this.variants.push({
color: "",
size: "",
quantity: "",
});
},
remove(index) {
this.variants.splice(index, 1);
},
getInfo() {
console.log(this.name)
console.log(this.price)
console.log(this.category_id)
console.log(this.stock)
console.log(this.images)
console.log(this.variants)
}
}, },
......
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