Skip to content

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

Merge branch 'feature/UI-vuetify' into 'feature/category-ui' 

# Conflicts:
#   layouts/admin.vue
#   pages/categories/index.vue
#   pages/posts/index.vue
#   pages/products/index.vue
#   pages/users/index.vue
parents 8a977e31 064aae00
Hide whitespace changes
Inline Side-by-side
Showing with 841 additions and 122 deletions
pages/posts/index.vue
View file @ 9462c892
...@@ -5,19 +5,284 @@ ...@@ -5,19 +5,284 @@
<!-- eslint-disable vue/require-v-for-key --> <!-- eslint-disable vue/require-v-for-key -->
<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" /> <template #divider>
Home <v-icon>mdi-chevron-right</v-icon>
</b-breadcrumb-item> </template>
<b-breadcrumb-item href="/posts"> </v-breadcrumbs>
Post </div>
</b-breadcrumb-item>
</b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button v-b-modal.modal-create class="text-white"> <v-dialog
New Post v-model="dialog1"
</b-button> 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/*"
@change="fileSelected"
/>
</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;"
>
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"
accept="image/*"
small-chips
dense
/>
</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; updatePost()"
>
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>
</div> </div>
<b-modal id="modal-create" title="create Post" class="modal fade"> <b-modal id="modal-create" title="create Post" class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
...@@ -78,9 +343,9 @@ ...@@ -78,9 +343,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>
...@@ -111,9 +376,9 @@ ...@@ -111,9 +376,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>
...@@ -164,7 +429,7 @@ ...@@ -164,7 +429,7 @@
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">
...@@ -175,7 +440,7 @@ ...@@ -175,7 +440,7 @@
<v-spacer /> <v-spacer />
</v-toolbar> </v-toolbar>
</template> </template>
<template #item.actions="{ item }"> <template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="editPost(item)"> <v-icon :id="item.id" small @click="editPost(item)">
mdi-pencil mdi-pencil
</v-icon> </v-icon>
...@@ -204,6 +469,9 @@ export default { ...@@ -204,6 +469,9 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
file: null,
dialog1: false,
dialog2: false,
title: '', title: '',
category_id: null, category_id: null,
content: '', content: '',
...@@ -212,11 +480,6 @@ export default { ...@@ -212,11 +480,6 @@ export default {
images: [], images: [],
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',
...@@ -230,6 +493,33 @@ export default { ...@@ -230,6 +493,33 @@ export default {
{ 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: [],
sTitle: '', sTitle: '',
...@@ -240,11 +530,11 @@ export default { ...@@ -240,11 +530,11 @@ export default {
sImages: null, sImages: null,
eId: '', eId: '',
eTitle: '', eTitle: '',
eCategoryId: '', eCategoryId: [],
eContent: '', eContent: '',
eUserId: '', eUserId: '',
eStatus: '', eStatus: '',
eImages: null, eImages: [],
message: [], message: [],
editedIndex: -1, editedIndex: -1,
editedItem: { editedItem: {
...@@ -361,25 +651,23 @@ export default { ...@@ -361,25 +651,23 @@ export default {
}, },
createPost () { createPost () {
const self = this const self = this
const fd = new FormData()
fd.append('title', this.title)
fd.append('category_id', this.category_id)
fd.append('content', this.content)
fd.append('images', this.images)
fd.append('status', this.status)
this.$axios this.$axios
.post('/posts/', .post('/posts/',
{ fd,
title: this.title,
category_id: this.category_id,
content: this.content,
images: this.images,
user_id: this.user_id,
status: this.status
},
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data', 'Content-Type': 'multipart/form-data; application/json',
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
}) })
...@@ -388,9 +676,6 @@ export default { ...@@ -388,9 +676,6 @@ export default {
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)
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
}) })
...@@ -435,61 +720,62 @@ export default { ...@@ -435,61 +720,62 @@ export default {
this.sTitle = resp.data.data.title this.sTitle = resp.data.data.title
this.sContent = resp.data.data.content this.sContent = resp.data.data.content
this.sCategoryId = resp.data.data.category_id this.sCategoryId = resp.data.data.category_id
this.sUserId = resp.data.data.user_id
this.sStatus = resp.data.data.status this.sStatus = resp.data.data.status
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
}, },
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
this.eContent = item.content this.eContent = item.content
this.eStatus = item.status this.eStatus = item.status
this.eUserId = item.user_id
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item)
console.log(this.editedIndex)
this.dialog = true
}, },
updatePost () { updatePost () {
const self = this const self = this
const fd = new FormData()
fd.append('title', this.eTitle)
fd.append('category_id', this.eCategoryId)
fd.append('content', this.eContent)
fd.append('images', this.eImages)
fd.append('status', this.eStatus)
const currentPostIndex = this.editedIndex
this.$axios this.$axios
.post( .post(
`/posts/update/${this?.eId}`, `/posts/update/${this?.eId}`,
{ fd,
title: this.eTitle,
category_id: this.eCategoryId,
content: this.eContent,
images: this.eImages,
user_id: this.eUserId,
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')}`,
Accept: 'application/json, text/plain, */*'
} }
} }
) )
.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)
this.editedItem = response.data.data this.editedItem = response.data.data
this.$bvModal.hide('modal-edit') Object.assign(this.posts[currentPostIndex], this.editedItem)
Object.assign(this.posts[this.editedIndex], this.editedItem)
}) })
.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
}) })
}) })
},
fileSelected (event) {
console.log(event)
console.log(this.images)
} }
} }
} }
......
pages/products/index.vue
View file @ 9462c892
...@@ -2,21 +2,422 @@ ...@@ -2,21 +2,422 @@
<!-- eslint-disable vue/valid-v-slot --> <!-- eslint-disable vue/valid-v-slot -->
<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" /> <template #divider>
Home <v-icon>mdi-chevron-right</v-icon>
</b-breadcrumb-item> </template>
<b-breadcrumb-item href="/products"> </v-breadcrumbs>
Product </div>
</b-breadcrumb-item>
</b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button v-b-modal.modal-create class="text-white"> <v-dialog
New Product v-model="dialog1"
</b-button> persistent
max-width="600px"
>
<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
accept="image/*"
multiple
/>
</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; seeVariant()"
>
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> </div>
<b-modal id="modal-create" title="create Product" class="modal fade"> <!-- 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">EDIT 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
/>
</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; updateProduct();"
>
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"> <div class="w-full mt-4 p-10">
<form> <form>
<label for="input-live">Name :</label> <label for="input-live">Name :</label>
...@@ -120,9 +521,9 @@ ...@@ -120,9 +521,9 @@
Submit Submit
</button> </button>
</template> </template>
</b-modal> </b-modal> -->
<!-- modal-show --> <!-- modal-show -->
<b-modal id="modal-show" title="PRODUCT" class="modal fade"> <!-- <b-modal id="modal-show" title="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>
...@@ -201,9 +602,9 @@ ...@@ -201,9 +602,9 @@
Close 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>
...@@ -302,7 +703,7 @@ ...@@ -302,7 +703,7 @@
Submit Submit
</button> </button>
</template> </template>
</b-modal> </b-modal> -->
<!-- table --> <!-- table -->
<div> <div>
<v-data-table <v-data-table
...@@ -318,7 +719,7 @@ ...@@ -318,7 +719,7 @@
<v-spacer /> <v-spacer />
</v-toolbar> </v-toolbar>
</template> </template>
<template #item.actions="{ item }"> <template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="editProduct(item)"> <v-icon :id="item.id" small @click="editProduct(item)">
mdi-pencil mdi-pencil
</v-icon> </v-icon>
...@@ -341,7 +742,6 @@ ...@@ -341,7 +742,6 @@
<script> <script>
export default { export default {
name: 'App',
layout: 'admin', layout: 'admin',
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
...@@ -360,7 +760,12 @@ export default { ...@@ -360,7 +760,12 @@ export default {
quantity: '' quantity: ''
} }
], ],
dialog: false, color: '',
size: '',
quantity: '',
dialog1: false,
dialog2: false,
dialog3: false,
dialogDelete: false, dialogDelete: false,
options: [], options: [],
headers: [ headers: [
...@@ -377,6 +782,20 @@ export default { ...@@ -377,6 +782,20 @@ export default {
{ text: 'stock', value: 'stock' }, { text: 'stock', value: 'stock' },
{ 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'
}
],
i: '',
products: [], products: [],
product: [], product: [],
categories: [], categories: [],
...@@ -449,6 +868,7 @@ export default { ...@@ -449,6 +868,7 @@ export default {
}, },
methods: { methods: {
initialize () { initialize () {
this.images = []
this.products = [] this.products = []
this.product = [] this.product = []
this.categories = [] this.categories = []
...@@ -531,24 +951,31 @@ export default { ...@@ -531,24 +951,31 @@ export default {
}, },
createProduct () { createProduct () {
const self = this const self = this
// const set = new Set([this.images]) const fd = new FormData()
// const images = Array.from(set) fd.append('name', this.name)
fd.append('price', this.price)
fd.append('category_id', this.category_id)
fd.append('description', this.description)
for (let i = 0; i < this.variants.length; i++) {
fd.append(`variants[${i}][color]`, this.variants[i].color)
fd.append(`variants[${i}][quantity]`, this.variants[i].quantity)
fd.append(`variants[${i}][size]`, this.variants[i].size)
}
for (let j = 0; j < this.images.length; j++) {
fd.append(`images[${j}]`, this.images[j])
}
this.$axios this.$axios
.post('/products/', { .post('/products/',
name: this.name, fd
price: this.price, ,
category_id: this.category_id, {
description: this.description, headers: {
images: this.images, 'Content-Type': 'application/json; multipart/form-data ',
variants: this.variants Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
}, { Accept: 'application/json; multipart/form-data'
headers: { }
'Content-Type': 'multipart/form-data', })
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => { .then((response) => {
this.$bvModal.hide('modal-create')
self.$toast.success('Product created successfully!', { self.$toast.success('Product created successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -557,7 +984,6 @@ export default { ...@@ -557,7 +984,6 @@ export default {
this.products.push(this.editedItem) this.products.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!', {
...@@ -608,10 +1034,9 @@ export default { ...@@ -608,10 +1034,9 @@ export default {
} 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
...@@ -620,24 +1045,35 @@ export default { ...@@ -620,24 +1045,35 @@ export default {
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)
console.log(item.variants)
this.dialog3 = true
}, },
updateProduct (ID) { updateProduct (ID) {
const self = this const self = this
const fd = new FormData()
fd.append('name', this.eName)
fd.append('price', this.ePrice)
fd.append('category_id', this.eCategoryId)
fd.append('description', this.eDescription)
for (let i = 0; i < this.eVariants.length; i++) {
fd.append(`variants[${i}][id]`, this.eVariants[i].id)
fd.append(`variants[${i}][color]`, this.eVariants[i].color)
fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
fd.append(`variants[${i}][size]`, this.eVariants[i].size)
}
for (let j = 0; j < this.eImages.length; j++) {
fd.append(`images[${j}]`, this.eImages[j])
}
const currentPostIndex = this.editedIndex
try { try {
this.$axios this.$axios
.post(`/products/update/${this?.eId}`, { .post(`/products/update/${this?.eId}`,
name: this.eName, fd, {
price: this.ePrice, headers: {
category_id: this.eCategoryId, 'Content-Type': 'multipart/form-data',
description: this.eDescription, Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
images: this.eImages, }
variants: this.eVariants
}, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}
) )
.then((response) => { .then((response) => {
self.$toast.success('User updated successfully!', { self.$toast.success('User updated successfully!', {
...@@ -645,8 +1081,7 @@ export default { ...@@ -645,8 +1081,7 @@ export default {
}) })
console.log(response) console.log(response)
this.editedItem = response.data.data this.editedItem = response.data.data
this.$bvModal.hide('modal-edit') Object.assign(this.products[currentPostIndex], this.editedItem)
Object.assign(this.products[this.editedIndex], this.editedItem)
}) })
} catch (error) { } catch (error) {
console.log(error) console.log(error)
...@@ -671,6 +1106,9 @@ export default { ...@@ -671,6 +1106,9 @@ export default {
}, },
removeVariant (index) { removeVariant (index) {
this.eVariants.splice(index, 1) this.eVariants.splice(index, 1)
},
seeVariant () {
console.log(this.variants)
} }
} }
} }
......
pages/users/index.vue
View file @ 9462c892
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<template> <template>
<v-app> <v-app>
<div> <div>
<div />
<div> <div>
<v-breadcrumbs :items="items"> <v-breadcrumbs :items="items">
<template #divider> <template #divider>
...@@ -10,12 +11,7 @@ ...@@ -10,12 +11,7 @@
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<div style="float: right"> <div style="float: right">
<v-dialog <v-dialog v-model="dialog1" persistent max-width="600px" @submit.prevent="createUser">
v-model="dialog1"
persistent
max-width="600px"
@submit.prevent="createUser"
>
<template #activator="{ on, attrs }"> <template #activator="{ on, attrs }">
<v-btn <v-btn
color="primary" color="primary"
...@@ -155,8 +151,7 @@ ...@@ -155,8 +151,7 @@
<v-spacer /> <v-spacer />
</v-toolbar> </v-toolbar>
</template> </template>
// eslint-disable-next-line vue/valid-v-slot <template #[`item.actions`]="{ item }">
<template #item.actions="{ item }">
<v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);"> <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editUser(item);">
mdi-pencil mdi-pencil
</v-icon> </v-icon>
......
plugins/axios.js
View file @ 9462c892
export default function ({ $axios }, inject, redirect) { export default function ({ $axios }, inject, redirect) {
$axios.onError(error => { $axios.onError((error) => {
if(error.response.status === 500) { if (error.response.status === 500) {
redirect('/500') redirect('/500')
} }
}) })
$axios.onError(error => { $axios.onError((error) => {
const code = parseInt(error.response && error.response.status) const code = parseInt(error.response && error.response.status)
if (code === 400) { if (code === 400) {
redirect('/400') redirect('/400')
...@@ -22,4 +22,4 @@ export default function ({ $axios }, inject, redirect) { ...@@ -22,4 +22,4 @@ export default function ({ $axios }, inject, redirect) {
// Inject to context as $api // Inject to context as $api
inject('api', api) inject('api', api)
} }
\ No newline at end of file
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