Skip to content

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

post + product

parent ef3630f7
Hide whitespace changes
Inline Side-by-side
Showing with 1308 additions and 574 deletions
layouts/admin.vue
View file @ d318b797
<template> <template>
<div> <div>
<NavBar /> <NavBar />
<nuxt /> <v-app>
<nuxt />
</v-app>
</div> </div>
</template> </template>
......
pages/posts/index.vue
View file @ d318b797
<template> <template>
<div> <div>
<b-breadcrumb> <div>
<b-breadcrumb-item href="/home"> <v-breadcrumbs :items="items">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon> <template #divider>
Home <v-icon>mdi-chevron-right</v-icon>
</b-breadcrumb-item> </template>
<b-breadcrumb-item href="/posts">Post</b-breadcrumb-item> </v-breadcrumbs>
</b-breadcrumb> </div>
<div style="float: right"> <div style="float: right">
<v-dialog
v-model="dialog1"
persistent
max-width="600px"
enctype="multipart/form-data"
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Post
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">CREAT POST</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="title"
label="Title*"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="category_id"
:items="categories"
item-text="name"
item-value="id"
label="Category"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="content"
label="Content"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="status"
:items="statusDefaul"
item-text="name"
item-value="id"
label="Status"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="images"
label="File input"
small-chips
dense
accept="image/*"
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createPost()"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-show -->
<v-dialog
v-model="dialog2"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">POST</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="sTitle"
label="Title"
disabled
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="sCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="sContent"
label="Content"
disabled
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="sStatus"
:items="statusDefaul"
item-text="name"
item-value="id"
label="Category"
disabled
/>
</v-col>
<v-col cols="12">
<v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image" contain />
</v-col>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog2 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; createPost();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- modal-edit -->
<v-dialog
v-model="dialog"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">EDIT POST</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="eTitle"
label="Title*"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="eCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eContent"
label="Content"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="eStatus"
:items="statusDefaul"
item-text="name"
item-value="id"
label="Category"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImages"
label="File input"
small-chips
dense
multiple
:state="Boolean(eImages)"
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog = false;"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create>New Post</b-button> <b-button class="text-white" v-b-modal.modal-create>New Post</b-button>
</div> </div>
<b-modal id="modal-create" title="create Post" class="modal fade"> <b-modal id="modal-create" title="create Post" class="modal fade">
...@@ -42,9 +311,9 @@ ...@@ -42,9 +311,9 @@
Submit Submit
</button> </button>
</template> </template>
</b-modal> </b-modal> -->
<!-- modal-show --> <!-- modal-show -->
<b-modal id="modal-show" title="POST" class="modal fade"> <!-- <b-modal id="modal-show" title="POST" class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form> <form>
<label>Title :</label> <label>Title :</label>
...@@ -68,9 +337,9 @@ ...@@ -68,9 +337,9 @@
Close Close
</button> </button>
</template> </template>
</b-modal> </b-modal> -->
<!-- modal-edit --> <!-- modal-edit -->
<b-modal id="modal-edit" title="Edit Post " class="modal fade"> <!-- <b-modal id="modal-edit" title="Edit Post " class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form> <form>
<label>Title :</label> <label>Title :</label>
...@@ -101,30 +370,32 @@ ...@@ -101,30 +370,32 @@
Submit Submit
</button> </button>
</template> </template>
</b-modal> </b-modal> -->
<!-- table --> <!-- table -->
<div> <div>
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1"> <v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
<template v-slot:top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title> <v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider> <v-divider class="mx-4" inset vertical />
<v-spacer></v-spacer> <v-spacer />
</v-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <template v-slot:[`item.actions`]="{ item }">
<v-icon small @click="editPost(item)" :id="item.id"> <v-icon :id="item.id" small @click="editPost(item)">
mdi-pencil mdi-pencil
</v-icon> </v-icon>
<v-icon small @click="deletePost(item.id, item)" :id="item.id"> <v-icon :id="item.id" small @click="deletePost(item.id, item)">
mdi-delete mdi-delete
</v-icon> </v-icon>
<v-icon small @click="showPost(item)" :id="item.id"> <v-icon :id="item.id" small @click="showPost(item)">
mdi-account-details mdi-account-details
</v-icon> </v-icon>
</template> </template>
<template v-slot:no-data> <template #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>
...@@ -134,36 +405,60 @@ ...@@ -134,36 +405,60 @@
<script> <script>
export default { export default {
layout: 'admin',
name: 'App', name: 'App',
layout: 'admin',
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
dialog1: false,
dialog2: false,
title: '', title: '',
category_id: null, category_id: null,
content: '', content: '',
user_id: '', user_id: '',
status: null, status: null,
images: [], images: null,
dialog: false, dialog: false,
dialogDelete: false, dialogDelete: false,
options: [
{ value: 1, text: 'Draft' },
{ value: 2, text: 'Publish' },
{ value: 3, text: 'UnPublish' },
],
headers: [ headers: [
{ {
text: 'Title', text: 'Title',
align: 'start', align: 'start',
sortable: false, sortable: false,
value: 'title', value: 'title'
}, },
{ text: 'Category ID', value: 'category_id' }, { text: 'Category ID', value: 'category_id' },
{ text: 'content', value: 'content', sortable: false }, { text: 'content', value: 'content', sortable: false },
{ text: 'author', value: 'user_id' }, { text: 'author', value: 'user_id' },
{ text: 'status', value: 'status' }, { text: 'status', value: 'status' },
{ text: 'Actions', value: 'actions', sortable: false }, { text: 'Actions', value: 'actions', sortable: false }
],
items: [
{
icon: 'mdi-home',
text: 'Home',
disabled: false,
href: '/home'
},
{
text: 'Product',
disabled: false,
href: '/products'
}
],
statusDefaul: [
{
name: 'Draft',
id: '1'
},
{
name: 'Publish',
id: '2'
},
{
name: 'UnPublish',
id: '3'
}
], ],
posts: [], posts: [],
categories: [], categories: [],
...@@ -187,7 +482,7 @@ export default { ...@@ -187,7 +482,7 @@ export default {
category_id: '', category_id: '',
content: '', content: '',
user_id: '', user_id: '',
status: '', status: ''
}, },
defaultItem: { defaultItem: {
name: '', name: '',
...@@ -195,70 +490,72 @@ export default { ...@@ -195,70 +490,72 @@ export default {
ordering: '', ordering: '',
status: '', status: '',
created_at: '', created_at: '',
updated_at: '', updated_at: ''
}, }
} }
}, },
computed: { computed: {
formTitle() { formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item' return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
}, },
nameState() { nameState () {
return this.name.length > 2 ? true : false return this.name.length > 2
}, }
}, },
watch: { watch: {
dialog(val) { dialog (val) {
val || this.close() val || this.close()
}, },
dialogDelete(val) { dialogDelete (val) {
val || this.closeDelete() val || this.closeDelete()
}, }
}, },
created() { created () {
this.initialize(), this.getposts(), this.getCategories() this.initialize()
this.getposts()
this.getCategories()
}, },
methods: { methods: {
initialize() { initialize () {
this.posts = [], this.posts = []
this.product = [], this.product = []
this.categories = [], this.categories = []
this.sTitle = '', this.sTitle = ''
this.sCategoryId = '', this.sCategoryId = ''
this.sContent = '', this.sContent = ''
this.sUserId = '', this.sUserId = ''
this.sStatus = '', this.sStatus = ''
this.sImages = null this.sImages = null
}, },
editItem(item) { editItem (item) {
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item)
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item)
this.dialog = true this.dialog = true
}, },
deleteItem(item) { deleteItem (item) {
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item)
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item)
this.dialogDelete = true this.dialogDelete = true
}, },
deleteItemConfirm() { deleteItemConfirm () {
this.posts.splice(this.editedIndex, 1) this.posts.splice(this.editedIndex, 1)
this.closeDelete() this.closeDelete()
}, },
close() { close () {
this.dialog = false this.dialog = false
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1 this.editedIndex = -1
}) })
}, },
closeDelete() { closeDelete () {
this.dialogDelete = false this.dialogDelete = false
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1 this.editedIndex = -1
}) })
}, },
save() { save () {
if (this.editedIndex > -1) { if (this.editedIndex > -1) {
Object.assign(this.posts[this.editedIndex], this.editedItem) Object.assign(this.posts[this.editedIndex], this.editedItem)
} else { } else {
...@@ -266,31 +563,33 @@ export default { ...@@ -266,31 +563,33 @@ export default {
} }
this.close() this.close()
}, },
getCategories() { getCategories () {
this.$axios this.$axios
.get("/categories/",{ .get('/categories/', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}}) }
.then((response) => (this.categories = response.data.data)) })
.then(response => (this.categories = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}) })
}, },
getposts() { getposts () {
this.$axios this.$axios
.get("/posts/",{ .get('/posts/', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}}) }
.then((response) => (this.posts = response.data.data)) })
.then(response => (this.posts = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}) })
}, },
createPost() { createPost () {
const self = this const self = this
this.$axios this.$axios
.post('/posts/', .post('/posts/',
...@@ -300,66 +599,65 @@ export default { ...@@ -300,66 +599,65 @@ export default {
content: this.content, content: this.content,
images: this.images, images: this.images,
user_id: this.user_id, user_id: this.user_id,
status: this.status, status: this.status
}, },
{ {
headers: { headers: {
"Content-Type": "multipart/form-data", 'Content-Type': 'application/json; multipart/form-data; boundary=---------------------------974767299852498929531610575 ',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}, }
} }
) )
.then((response) => { .then((response) => {
this.$bvModal.hide('modal-create')
self.$toast.success('Post created successfully!', { self.$toast.success('Post created successfully!', {
duration: 3000, duration: 3000
}) })
this.editedItem = response.data.data this.editedItem = response.data.data
console.log(this.editedItem) console.log(this.editedItem)
this.posts.push(this.editedItem) this.posts.push(this.editedItem)
}) })
.catch((errors) => { .catch((errors) => {
this.$bvModal.hide('modal-create')
console.log(errors.response.data.message) console.log(errors.response.data.message)
this.message = errors.response.data.message this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', { self.$toast.error('something went wrong while trying create!', {
duration: 3000, duration: 3000
}) })
}) })
}, },
deletePost(ID, index) { deletePost (ID, index) {
const self = this const self = this
this.editedIndex = this.posts.indexOf(index) this.editedIndex = this.posts.indexOf(index)
if (confirm('Do you really want to delete?')) { if (confirm('Do you really want to delete?')) {
this.$axios this.$axios
.delete(`/posts/${ID}`,{ .delete(`/posts/${ID}`, {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}}) }
})
.then((response) => { .then((response) => {
this.posts.splice(this.editedIndex, 1) this.posts.splice(this.editedIndex, 1)
self.$toast.success('Post deleted successfully!', { self.$toast.success('Post deleted successfully!', {
duration: 3000, duration: 3000
}) })
}) })
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
self.$toast.error('Error!', { self.$toast.error('Error!', {
duration: 3000, duration: 3000
}) })
}) })
} }
}, },
async showPost(item) { async showPost (item) {
const ID = item.id const ID = item.id
try { try {
const resp = await this.$axios.get(`/posts/${ID}`, { const resp = await this.$axios.get(`/posts/${ID}`, {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-Type": "multipart/form-data", 'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}, }
}) })
console.log(resp.data) console.log(resp.data)
this.sTitle = resp.data.data.title this.sTitle = resp.data.data.title
...@@ -371,10 +669,9 @@ export default { ...@@ -371,10 +669,9 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
this.$bvModal.show('modal-show') this.dialog2 = true
}, },
editPost(item) { editPost (item) {
this.$bvModal.show('modal-edit')
this.eId = item.id this.eId = item.id
this.eTitle = item.title this.eTitle = item.title
this.eCategoryId = item.category_id this.eCategoryId = item.category_id
...@@ -382,8 +679,9 @@ export default { ...@@ -382,8 +679,9 @@ export default {
this.eStatus = item.status this.eStatus = item.status
this.eUserId = item.user_id this.eUserId = item.user_id
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item)
this.dialog = true
}, },
updatePost() { updatePost () {
const self = this const self = this
this.$axios this.$axios
.post( .post(
...@@ -394,19 +692,18 @@ export default { ...@@ -394,19 +692,18 @@ export default {
content: this.eContent, content: this.eContent,
images: this.eImages, images: this.eImages,
user_id: this.eUserId, user_id: this.eUserId,
status: this.eStatus, status: this.eStatus
}, },
{ {
headers: { headers: {
"Content-Type": "multipart/form-data", 'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}, }
} }
) )
.then((response) => { .then((response) => {
this.$bvModal.hide('modal-edit')
self.$toast.success('Post updated successfully!', { self.$toast.success('Post updated successfully!', {
duration: 3000, duration: 3000
}) })
console.log(response) console.log(response)
this.editedItem = response.data.data this.editedItem = response.data.data
...@@ -415,13 +712,12 @@ export default { ...@@ -415,13 +712,12 @@ export default {
}) })
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
this.$bvModal.hide('modal-edit')
self.$toast.error('something went wrong while trying create!', { self.$toast.error('something went wrong while trying create!', {
duration: 3000, duration: 3000
}) })
}) })
}, }
}, }
} }
</script> </script>
......
pages/products/index.vue
View file @ d318b797
<template> <template>
<div> <div>
<b-breadcrumb> <div>
<b-breadcrumb-item href="/home"> <v-breadcrumbs :items="items">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon> <template #divider>
Home <v-icon>mdi-chevron-right</v-icon>
</b-breadcrumb-item> </template>
<b-breadcrumb-item href="/products">Product</b-breadcrumb-item> </v-breadcrumbs>
</b-breadcrumb> </div>
<div style="float: right"> <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create >New Product</b-button></div> <v-dialog
<b-modal id="modal-create" title="create Product" class="modal fade" > v-model="dialog1"
<div class="w-full mt-4 p-10"> persistent
<form > max-width="600px"
<label for="input-live">Name :</label> >
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Product
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">CREAT PRODUCT</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Name*"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="category_id"
:items="categories"
item-text="name"
item-value="id"
label="Category"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="price"
label="Price*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="description"
label="Description"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="images"
label="File input"
small-chips
dense
multiple
:state="Boolean(images)"
/>
</v-col>
<v-col cols="12">
<v-btn
class="mx-2"
fab
dark
small
color="indigo"
@click="addMore()"
>
<v-icon dark>
mdi-plus
</v-icon>
</v-btn>
</v-col>
<v-row v-for="(variant, index) in variants" :key=" 'B' +index">
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.color"
label="Color*"
required
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.size"
label="Size*"
required
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.quantity"
label="Quantity*"
required
/>
</v-col>
<v-col>
<v-btn
v-show="index != 0"
class=""
fab
dark
x-small
color="red"
@click="remove(index)"
>
<v-icon dark>
mdi-minus
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createProduct();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- show-modal -->
<v-dialog
v-model="dialog2"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">PRODUCT</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="sName"
label="Name"
disabled
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="sCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="sPrice"
label="Price"
disabled
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="sDescription"
label="Description"
/>
</v-col>
<v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-img :src="image" contain />
</v-col>
<v-col cols="12" />
<v-row v-for="(variant, index) in sVariants" :key="'A' +index">
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.color"
label="Color"
disabled
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.size"
label="Size"
disabled
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.quantity"
label="Quantity"
disabled
/>
</v-col>
<v-col />
</v-row>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false"
>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- edit-modal -->
<v-dialog
v-model="dialog3"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">CREAT PRODUCT</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="eName"
label="Name*"
required
/>
</v-col>
<v-col
cols="12"
>
<v-select
v-model="eCategoryId"
:items="categories"
item-text="name"
item-value="id"
label="Category"
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ePrice"
label="Price*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eDescription"
label="Description"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImages"
label="File input"
small-chips
dense
multiple
:state="Boolean(images)"
/>
</v-col>
<v-col cols="12">
<v-btn
class="mx-2"
fab
dark
small
color="indigo"
@click="addMoreVariant()"
>
<v-icon dark>
mdi-plus
</v-icon>
</v-btn>
</v-col>
<v-row v-for="(variant, index) in eVariants" :key=" 'B' +index">
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.color"
label="Color*"
required
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.size"
label="Size*"
required
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="variant.quantity"
label="Quantity*"
required
/>
</v-col>
<v-col>
<v-btn
v-show="index != 0"
class=""
fab
dark
x-small
color="red"
@click="removeVariant(index)"
>
<v-icon dark>
mdi-minus
</v-icon>
</v-btn>
</v-col>
</v-row>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog3 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog3 = false; editProduct();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- <b-modal id="modal-create" title="create Product" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label for="input-live">Name :</label>
<b-form-input <b-form-input
id="input-live" id="input-live"
v-model="name"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="name" placeholder="name"
aria-describedby="input-live-help input-live-feedback" aria-describedby="input-live-help input-live-feedback"
v-model="name"
max="255" max="255"
min="1" min="1"
trim trim
> />
</b-form-input>
<b-form-invalid-feedback id="input-live-feedback"> <b-form-invalid-feedback id="input-live-feedback">
Enter at least 3 letters Enter at least 3 letters
</b-form-invalid-feedback> </b-form-invalid-feedback>
<label>Category ID :</label> <label>Category ID :</label>
<b-form-select v-model="category_id"> <b-form-select v-model="category_id">
<option v-for="item in categories" :value="item.id"> <option v-for="item in categories" :value="item.id">
{{item.name}} {{ item.name }}
</option> </option>
</b-form-select> </b-form-select>
<label>Price :</label> <label>Price :</label>
<input <input
v-model="price"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Ordering" placeholder="Ordering"
v-model="price"
size="sm" size="sm"
required required
/> >
<label>Description :</label> <label>Description :</label>
<input <input
v-model="description"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Description" placeholder="Description"
v-model="description"
size="sm" size="sm"
required required
/> >
<label>Stock :</label> <label>Stock :</label>
<input <input
v-model="stock"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Stock" placeholder="Stock"
v-model="stock"
size="sm" size="sm"
required required
/> >
<label>Image :</label> <label>Image :</label>
<b-form-file <b-form-file
v-model="images" v-model="images"
...@@ -69,175 +475,181 @@ ...@@ -69,175 +475,181 @@
:state="Boolean(images)" :state="Boolean(images)"
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..."
></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=" 'B' +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 <button
type="button" type="button"
class="ml-2 rounded-md mt-2 " class="btn-primary flex justify-start ml-2 mt-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="remove(index)" @click="addMore()"
v-show="index != 0"
> >
<b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon> Variant (+)
</button> </button>
</div> <div v-for="(variant, index) in variants" :key=" 'B' +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
v-show="index != 0"
type="button"
class="ml-2 rounded-md mt-2 "
@click="remove(index)"
>
<b-icon icon="dash-circle-fill" class="h5" variant="danger" />
</button>
</div>
</div>
</form>
</div> </div>
</form> <template #modal-footer>
</div> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-create')">
<template #modal-footer> Close
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-create')" class="btn btn-danger btn-sm m-1">Close</button> </button>
<button @click="createProduct()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> <button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createProduct()">
</template> Submit
</b-modal> </button>
<!-- modal-show --> </template>
<b-modal id="modal-show" title="PRODUCT" class="modal fade" > </b-modal> -->
<div class="w-full mt-4 p-10"> <!-- modal-show -->
<form > <!-- <b-modal id="modal-show" title="PRODUCT" class="modal fade">
<label>Name :</label> <div class="w-full mt-4 p-10">
<form>
<label>Name :</label>
<input <input
v-model="sName"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
v-model="sName"
size="sm" size="sm"
disabled disabled
/> >
<label>Category ID :</label> <label>Category ID :</label>
<input <input
v-model="sCategoryId"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
v-model="sCategoryId"
size="sm" size="sm"
disabled disabled
/> >
<label>Price :</label> <label>Price :</label>
<input <input
v-model="sPrice"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
v-model="sPrice"
size="sm" size="sm"
disabled disabled
/> >
<label>Description :</label> <label>Description :</label>
<input <input
v-model="sDescription"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Description" placeholder="Description"
v-model="sDescription"
size="sm" size="sm"
disabled disabled
/> >
<label>Stock :</label> <label>Stock :</label>
<input <input
v-model="sStock"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Stock" placeholder="Stock"
v-model="sStock"
size="sm" size="sm"
disabled disabled
/> >
<label>Image :</label> <label>Image :</label>
<div v-for="(image, index) in sImages" :key="index"> <div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image"></b-img> <b-img :src="image" fluid alt="Fluid image" />
</div> </div>
<label>Variant :</label> <label>Variant :</label>
<div v-for="(variant, index) in sVariants" :key="'A' +index"> <div v-for="(variant, index) in sVariants" :key="'A' +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"
placeholder="Color" placeholder="Color"
class="w-full py-2 border border-indigo-500 rounded" class="w-full py-2 border border-indigo-500 rounded"
disabled disabled
/> >
<input <input
v-model="variant.size" v-model="variant.size"
placeholder="Size" placeholder="Size"
class="w-full py-2 border border-indigo-500 rounded" class="w-full py-2 border border-indigo-500 rounded"
disabled disabled
/> >
<input <input
v-model="variant.quantity" v-model="variant.quantity"
placeholder="Quantity" placeholder="Quantity"
class="w-full py-2 border border-indigo-500 rounded" class="w-full py-2 border border-indigo-500 rounded"
disabled disabled
/> >
</div> </div>
</div>
</form>
</div> </div>
</form> <template #modal-footer>
</div> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-show')">
<template #modal-footer> Close
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-show')" class="btn btn-danger btn-sm m-1">Close</button> </button>
</template> </template>
</b-modal> </b-modal> -->
<!-- modal-edit --> <!-- modal-edit -->
<b-modal id="modal-edit" title="Edit Product" class="modal fade" > <!-- <b-modal id="modal-edit" title="Edit Product" class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form > <form>
<label>Name :</label> <label>Name :</label>
<input <input
v-model="eName"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="name" placeholder="name"
v-model="eName"
max="255" max="255"
min="1" min="1"
size="sm" size="sm"
required required
/> >
<label>Category ID :</label> <label>Category ID :</label>
<b-form-select v-model="eCategoryId"> <b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id"> <option v-for="item in categories" :value="item.id">
{{item.name}} {{ item.name }}
</option> </option>
</b-form-select> </b-form-select>
<label>Price :</label> <label>Price :</label>
<input <input
v-model="ePrice"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Ordering" placeholder="Ordering"
v-model="ePrice"
size="sm" size="sm"
required required
/> >
<label>Description :</label> <label>Description :</label>
<input <input
v-model="eDescription"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Description" placeholder="Description"
v-model="eDescription"
size="sm" size="sm"
required required
/> >
<label>Stock :</label> <label>Stock :</label>
<input <input
v-model="eStock"
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Stock" placeholder="Stock"
v-model="eStock"
size="sm" size="sm"
required required
/> >
<label>Image :</label> <label>Image :</label>
<b-form-file <b-form-file
v-model="eImages" v-model="eImages"
...@@ -245,80 +657,91 @@ ...@@ -245,80 +657,91 @@
:state="Boolean(eImages)" :state="Boolean(eImages)"
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..."
></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 <button
type="button" type="button"
class="ml-2 rounded-md mt-2 " class="btn-primary flex justify-start ml-2 mt-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
@click="removeVariant(index)" @click="addMoreVariant()"
v-show="index != 0"
> >
<b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon> Variant (+)
</button> </button>
</div> <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
v-show="index != 0"
type="button"
class="ml-2 rounded-md mt-2 "
@click="removeVariant(index)"
>
<b-icon icon="dash-circle-fill" class="h5" variant="danger" />
</button>
</div>
</div>
</form>
</div> </div>
</form> <template #modal-footer>
</div> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-edit')">
<template #modal-footer> Close
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')" class="btn btn-danger btn-sm m-1">Close</button> </button>
<button @click="updateProduct()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> <button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="updateProduct()">
</template> Submit
</b-modal> </button>
<!-- 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>Product 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 @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 ="item.id"> mdi-account-details </v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template> </template>
</v-data-table> </b-modal> -->
</div> <!-- table -->
<div>
<v-data-table
:headers="headers"
:items="products"
sort-by="calories"
class="elevation-1"
>
<template #top>
<v-toolbar flat>
<v-toolbar-title>Product Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</v-toolbar>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="editProduct(item)">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteProduct(item.id,item)">
mdi-delete
</v-icon>
<v-icon :id="item.id" small @click="showProduct(item)">
mdi-account-details
</v-icon>
</template>
<template #no-data>
<v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template>
</v-data-table>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
layout: 'admin', layout: 'admin',
name: 'App',
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
...@@ -333,145 +756,161 @@ export default { ...@@ -333,145 +756,161 @@ export default {
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}
],
dialog1: false,
dialog2: false,
dialog3: 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 }
], ],
dialog: false, items: [
dialogDelete: false, {
options: [], icon: 'mdi-home',
headers: [ text: 'Home',
{ disabled: false,
text: 'Name', href: '/home'
align: 'start', },
sortable: false, {
value: 'name', text: 'Product',
}, disabled: false,
{ text: 'id', value: 'id' }, href: '/products'
{ text: 'category ID', value: 'category_id' }, }
{ text: 'price', value: 'price', sortable: false }, ],
{ text: 'description', value: 'description' }, products: [],
{ text: 'stock', value: 'stock' }, product: [],
{ text: 'Actions', value: 'actions', sortable: false }, categories: [],
], sName: '',
products: [], sCategoryId: '',
product: [], sPrice: '',
categories: [], sDescription: '',
sName: '', sStock: '',
sCategoryId: '', sImages: null,
sPrice: '', sVariants: [
sDescription: '',
sStock: '',
sImages: null,
sVariants: [
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}, }
], ],
eId: '', eId: '',
eName: '', eName: '',
eCategoryId: '', eCategoryId: '',
ePrice: '', ePrice: '',
eDescription: '', eDescription: '',
eStock: '', eStock: '',
eImages: null, eImages: null,
eVariants: [ eVariants: [
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}, }
], ],
message: [], message: [],
editedIndex: -1, editedIndex: -1,
editedItem: { editedItem: {
name: '', name: '',
category_id: '', category_id: '',
price: '', price: '',
description: '', description: '',
stock: '', stock: ''
}, },
defaultItem: { defaultItem: {
name: '', name: '',
id: '', id: '',
ordering: '', ordering: '',
status: '', status: '',
created_at: '', created_at: '',
updated_at: '', updated_at: ''
}, }
} }
}, },
computed: { computed: {
formTitle() { formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item' return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
}, },
nameState() { nameState () {
return this.name.length > 2 ? true : false return this.name.length > 2
} }
}, },
watch: { watch: {
dialog(val) { dialog (val) {
val || this.close() val || this.close()
}, },
dialogDelete(val) { dialogDelete (val) {
val || this.closeDelete() val || this.closeDelete()
}, }
}, },
created() { created () {
this.initialize(), this.initialize()
this.getProducts(), this.getProducts()
this.getCategories() this.getCategories()
}, },
methods: { methods: {
initialize() { initialize () {
this.products= [], this.images = []
this.product= [], this.products = []
this.categories= [], this.product = []
this.sName= '', this.categories = []
this.sCategoryId= '', this.sName = ''
this.sPrice= '', this.sCategoryId = ''
this.sDescription= '', this.sPrice = ''
this.sStock= '', this.sDescription = ''
this.sImages= null, this.sStock = ''
this.sVariants= [ this.sImages = null
this.sVariants = [
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}, }
] ]
}, },
editItem(item) { editItem (item) {
this.editedIndex = this.products.indexOf(item) this.editedIndex = this.products.indexOf(item)
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item)
this.dialog = true this.dialog = true
}, },
deleteItem(item) { deleteItem (item) {
this.editedIndex = this.products.indexOf(item) this.editedIndex = this.products.indexOf(item)
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item)
this.dialogDelete = true this.dialogDelete = true
}, },
deleteItemConfirm() { deleteItemConfirm () {
this.products.splice(this.editedIndex, 1) this.products.splice(this.editedIndex, 1)
this.closeDelete() this.closeDelete()
}, },
close() { close () {
this.dialog = false this.dialog = false
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1 this.editedIndex = -1
}) })
}, },
closeDelete() { closeDelete () {
this.dialogDelete = false this.dialogDelete = false
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1 this.editedIndex = -1
}) })
}, },
save() { save () {
if (this.editedIndex > -1) { if (this.editedIndex > -1) {
Object.assign(this.products[this.editedIndex], this.editedItem) Object.assign(this.products[this.editedIndex], this.editedItem)
} else { } else {
...@@ -479,97 +918,99 @@ export default { ...@@ -479,97 +918,99 @@ export default {
} }
this.close() this.close()
}, },
getCategories() { getCategories () {
this.$axios this.$axios
.get("/categories/",{ .get('/categories/', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}}) }
.then((response) => (this.categories = response.data.data)) })
.then(response => (this.categories = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}) })
}, },
getProducts() { getProducts () {
this.$axios this.$axios
.get("/products/",{ .get('/products/', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}}) }
.then((response) => (this.products = response.data.data)) })
.then(response => (this.products = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}) })
}, },
createProduct() { createProduct () {
const self = this const self = this
// const set = new Set([this.images]) // const set = new Set([this.images])
// const images = Array.from(set) // const images = Array.from(set)
this.$axios this.$axios
.post('/products/',{ .post('/products/', {
name: this.name, name: this.name,
price: this.price, price: this.price,
category_id: this.category_id, category_id: this.category_id,
description: this.description, description: this.description,
images: this.images, images: this.images,
variants: this.variants, variants: this.variants
}, { }, {
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'application/json; multipart/form-data; boundary=---------------------------974767299852498929531610575 ',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
} Accept: 'application/json; multipart/form-data'
}) }
.then(response => {
this.$bvModal.hide('modal-create')
self.$toast.success('Product created successfully!', {
duration: 3000
}) })
this.editedItem = response.data.data .then((response) => {
console.log(this.editedItem) self.$toast.success('Product created successfully!', {
this.products.push(this.editedItem) duration: 3000
}) })
.catch(errors => { this.editedItem = response.data.data
this.$bvModal.hide('modal-create') console.log(this.editedItem)
console.log(errors.response.data.message) this.products.push(this.editedItem)
this.message = errors.response.data.message })
self.$toast.error('something went wrong while trying create!',{ .catch((errors) => {
duration: 3000 console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', {
duration: 3000
})
}) })
})
}, },
deleteProduct(ID,index) { deleteProduct (ID, index) {
const self = this const self = this
this.editedIndex = this.products.indexOf(index) this.editedIndex = this.products.indexOf(index)
if(confirm('Do you really want to delete?')){ if (confirm('Do you really want to delete?')) {
try{ try {
this.$axios this.$axios
.delete(`/products/${ID}`,{ .delete(`/products/${ID}`, {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}}) }
.then(response => {
this.products.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!',{
duration: 3000
}) })
}) .then((response) => {
} catch(error){ this.products.splice(this.editedIndex, 1)
console.log(error) self.$toast.success('Category deleted successfully!', {
duration: 3000
})
})
} catch (error) {
console.log(error)
}
} }
}
}, },
async showProduct(item) { async showProduct (item) {
const ID = item.id const ID = item.id
try { try {
const resp = await this.$axios.get(`/products/${ID}`, { const resp = await this.$axios.get(`/products/${ID}`, {
method: 'GET', method: 'GET',
headers: { headers: {
"Content-Type": "multipart/form-data", 'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}, }
}) })
this.sName = resp.data.data.name this.sName = resp.data.data.name
this.sPrice = resp.data.data.price this.sPrice = resp.data.data.price
...@@ -579,72 +1020,72 @@ export default { ...@@ -579,72 +1020,72 @@ export default {
this.sVariants = resp.data.data.variants this.sVariants = resp.data.data.variants
this.sImages = resp.data.data.images this.sImages = resp.data.data.images
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
this.$bvModal.show('modal-show') this.dialog2 = true
}, },
editProduct(item) { editProduct (item) {
this.$bvModal.show('modal-edit')
this.eId = item.id this.eId = item.id
this.eName = item.name this.eName = item.name
this.eCategoryId = item.category_id this.eCategoryId = item.category_id
this.ePrice = item.price this.ePrice = item.price
this.eStock = item.stock this.eStock = item.stock
this.eDescription = item.description this.eDescription = item.description
this.eVariants = item.variants this.eVariants = item.variants
this.editedIndex = this.products.indexOf(item) this.editedIndex = this.products.indexOf(item)
this.dialog3 = true
}, },
updateProduct(ID) { updateProduct (ID) {
const self = this const self = this
try{ try {
this.$axios this.$axios
.post(`/products/update/${this?.eId}`,{ .post(`/products/update/${this?.eId}`, {
name: this.eName, name: this.eName,
price: this.ePrice, price: this.ePrice,
category_id: this.eCategoryId, category_id: this.eCategoryId,
description: this.eDescription, description: this.eDescription,
images: this.eImages, images: this.eImages,
variants: this.eVariants, variants: this.eVariants
}, { }, {
headers: { headers: {
"Content-Type": "multipart/form-data", 'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
} }
} )
) .then((response) => {
.then(response => { self.$toast.success('User updated successfully!', {
self.$toast.success('User updated successfully!',{ duration: 3000
duration: 3000 })
}) console.log(response)
console.log(response) this.editedItem = response.data.data
this.editedItem = response.data.data this.$bvModal.hide('modal-edit')
this.$bvModal.hide('modal-edit') Object.assign(this.products[this.editedIndex], this.editedItem)
Object.assign(this.products[this.editedIndex], this.editedItem) })
}) } catch (error) {
} catch(error){
console.log(error) console.log(error)
} }
}, },
addMore() { addMore () {
this.variants.push({ this.variants.push({
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}) })
}, },
addMoreVariant() { addMoreVariant () {
this.eVariants.push({ this.eVariants.push({
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}) })
}, },
remove(index) { remove (index) {
this.variants.splice(index, 1) this.variants.splice(index, 1)
}, },
removeVariant(index) { removeVariant (index) {
this.eVariants.splice(index, 1) this.eVariants.splice(index, 1)
}, }
}, }
} }
</script> </script>
\ No newline at end of file
pages/users/index.vue
View file @ d318b797
<template> <template>
<v-app> <v-app>
<div>
<div />
<div> <div>
<v-breadcrumbs :items="items"> <div />
<template #divider> <div>
<v-icon>mdi-chevron-right</v-icon> <v-breadcrumbs :items="items">
</template> <template #divider>
</v-breadcrumbs> <v-icon>mdi-chevron-right</v-icon>
</div> </template>
<div style="float: right"> </v-breadcrumbs>
</div>
<div style="float: right">
<v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser">
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New USER
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">User Profile</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-text-field
v-model="name"
label="Legal name*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="email"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="password"
label="Password*"
type="password"
required
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createUser();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-create -->
<v-dialog <v-dialog
v-model="dialog1" v-model="dialog2"
persistent persistent
max-width="600px" max-width="600px"
@submit.prevent="createUser"
> >
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New USER
</v-btn>
</template>
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">User Profile</span> <span class="text-h5">User Edit</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -39,21 +98,21 @@ ...@@ -39,21 +98,21 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="name" v-model="eName"
label="Legal name*" label="Legal name*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="email" v-model="eEmail"
label="Email*" label="Email*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="password" v-model="ePassword"
label="Password*" label="Password*"
type="password" type="password"
required required
...@@ -68,7 +127,7 @@ ...@@ -68,7 +127,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false" @click="dialog2 = false"
> >
Close Close
</v-btn> </v-btn>
...@@ -76,101 +135,37 @@ ...@@ -76,101 +135,37 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog1 = false; createUser();" @click="dialog2 = false; updateUser();"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> <v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1">
<!-- modal-create --> <template #top>
<v-dialog <v-toolbar flat>
v-model="dialog2" <v-toolbar-title>User Manage</v-toolbar-title>
persistent <v-divider class="mx-4" inset vertical />
max-width="600px" <v-spacer />
> </v-toolbar>
<v-card> </template>
<v-card-title> <template #[`item.actions`]="{ item }">
<span class="text-h5">User Edit</span> <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
</v-card-title> mdi-pencil
<v-card-text> </v-icon>
<v-container> <v-icon :id="item.id" small @click="deleteUser(item.id, item)">
<v-row> mdi-delete
<v-col </v-icon>
cols="12" </template>
sm="6" <template #no-data>
md="4" <v-btn color="primary" @click="initialize">
> Reset
<v-text-field
v-model="eName"
label="Legal name*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eEmail"
label="Email*"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="ePassword"
label="Password*"
type="password"
required
/>
</v-col>
</v-row>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog2 = false"
>
Close
</v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateUser();"
>
Save
</v-btn> </v-btn>
</v-card-actions> </template>
</v-card> </v-data-table>
</v-dialog> </div>
<v-data-table :headers="headers" :items="users" sort-by="calories" class="elevation-1"> </v-app>
<template #top>
<v-toolbar flat>
<v-toolbar-title>User Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</v-toolbar>
</template>
<template #item.actions="{ item }">
<v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteUser(item.id, item)">
mdi-delete
</v-icon>
</template>
<template #no-data>
<v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template>
</v-data-table>
</div>
</v-app>
</template> </template>
<script> <script>
export default { export default {
......
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