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 @@
<label>Image :</label>
<b-form-file
v-model="image"
multiple accept="image/*"
:state="Boolean(image)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
......
pages/home/products.vue
View file @ 05c812e0
......@@ -8,9 +8,107 @@
<b-breadcrumb-item href="/home/products">Product</b-breadcrumb-item>
</b-breadcrumb>
<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>
</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 -->
<div>
<v-data-table
......@@ -44,7 +142,7 @@
<script>
import CreateProductModal from "../../components/CreateProductModal";
import nav from "@/components/Nav";
import Nav from "@/components/Nav";
import Navigation from "@/components/Navigation";
import axios from "axios";
import notification from "@/components/Notification";
......@@ -60,13 +158,21 @@ export default {
middleware: ["web"],
data: () => {
return {
name: '',
id: '',
name:'',
category_id:'',
image: [],
category_id: '',
price: '',
description: '',
stock: '',
description: '',
images: null,
variants: [
{
color: "",
size: "",
quantity: "",
},
],
dialog: false,
dialogDelete: false,
options: [],
......@@ -175,35 +281,39 @@ export default {
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
// });
// });
// },
createProduct() {
const self = this;
const set = new Set([this.images]);
const images = Array.from(set);
axios
.post('http://127.0.0.1:8000/api/products/',{
name: this.name,
price: this.price,
category_id: this.category_id,
description: this.description,
images: images,
variants: this.variants,
}, {
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];
......@@ -265,6 +375,25 @@ export default {
// 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