Skip to content

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

add name category + user creen post

parent 51ae5777
Show whitespace changes
Inline Side-by-side
Showing with 388 additions and 465 deletions
middleware/auth.js
View file @ ac29aa6b
export default function(context) { export default function (context) {
console.log('[LOG]: middleware is running ...') console.log('[LOG]: middleware is running ...')
} }
middleware/web.js
View file @ ac29aa6b
export default ({ redirect }) => { export default ({ redirect, store }) => {
if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) { if (typeof localStorage !== 'undefined' && !localStorage.getItem('token')) {
return redirect('/login') return redirect('/login')
} }
......
pages/posts/index.vue
View file @ ac29aa6b
...@@ -12,26 +12,16 @@ ...@@ -12,26 +12,16 @@
</template> </template>
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<div style="float: right"> <div style="float: right" />
<!-- modal-show -->
<v-dialog <v-dialog
v-model="dialog1" v-model="dialog2"
persistent persistent
max-width="600px" 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>
<v-card-title> <v-card-title>
<span class="text-h5">CREAT POST</span> <span class="text-h5">POST</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -42,50 +32,46 @@ ...@@ -42,50 +32,46 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="title" v-model="sTitle"
label="Title*" label="Title"
required disabled
/> />
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-select
v-model="category_id" v-model="sCategoryId"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="content" v-model="sContent"
label="Content" label="Content"
required disabled
/> />
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-select
v-model="status" v-model="sStatus"
:items="statusDefaul" :items="statusDefaul"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Status" label="Category"
disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-col v-for="(image, index) in sImages" :key="index" cols="12">
v-model="images" <v-img :src="image" contain />
label="File input" </v-col>
small-chips
dense
accept="image/*"
prepend-icon="mdi-camera"
@change="fileSelected"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -96,7 +82,7 @@ ...@@ -96,7 +82,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>
...@@ -104,23 +90,22 @@ ...@@ -104,23 +90,22 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog1 = false; createPost()" @click="dialog2 = false;"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> <!-- modal-edit -->
<!-- modal-show -->
<v-dialog <v-dialog
v-model="dialog2" v-model="dialog"
persistent persistent
max-width="600px" max-width="600px"
> >
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">POST</span> <span class="text-h5">EDIT POST</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -131,46 +116,49 @@ ...@@ -131,46 +116,49 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="sTitle" v-model="eTitle"
label="Title" label="Title*"
disabled required
/> />
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-select
v-model="sCategoryId" v-model="eCategoryId"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="sContent" v-model="eContent"
label="Content" label="Content"
disabled required
/> />
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-select
v-model="sStatus" v-model="eStatus"
:items="statusDefaul" :items="statusDefaul"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-col v-for="(image, index) in sImages" :key="index" cols="12"> <v-file-input
<v-img :src="image" contain /> v-model="eImages"
</v-col> label="File input"
accept="image/*"
small-chips
dense
prepend-icon="mdi-camera"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -181,7 +169,7 @@ ...@@ -181,7 +169,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog2 = false" @click="dialog = false"
> >
Close Close
</v-btn> </v-btn>
...@@ -189,22 +177,59 @@ ...@@ -189,22 +177,59 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog2 = false;" @click="dialog = false; updatePost()"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<!-- modal-edit --> <!-- modal-delete -->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">
Are you sure you want to delete this item?
</v-card-title>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="closeDelete">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="deletePost(); dialogDelete = false">
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
<!-- table -->
<div>
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
<template #top>
<v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-toolbar-title>
<v-dialog <v-dialog
v-model="dialog" v-model="dialog1"
persistent persistent
max-width="600px" 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>
<v-card-title> <v-card-title>
<span class="text-h5">EDIT POST</span> <span class="text-h5">CREAT POST</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -215,7 +240,7 @@ ...@@ -215,7 +240,7 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="eTitle" v-model="title"
label="Title*" label="Title*"
required required
/> />
...@@ -224,7 +249,7 @@ ...@@ -224,7 +249,7 @@
cols="12" cols="12"
> >
<v-select <v-select
v-model="eCategoryId" v-model="category_id"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
...@@ -233,7 +258,7 @@ ...@@ -233,7 +258,7 @@
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="eContent" v-model="content"
label="Content" label="Content"
required required
/> />
...@@ -242,21 +267,22 @@ ...@@ -242,21 +267,22 @@
cols="12" cols="12"
> >
<v-select <v-select
v-model="eStatus" v-model="status"
:items="statusDefaul" :items="statusDefaul"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Status"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
v-model="eImages" v-model="images"
label="File input" label="File input"
accept="image/*"
small-chips small-chips
dense dense
accept="image/*"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="fileSelected"
/> />
</v-col> </v-col>
</v-row> </v-row>
...@@ -268,7 +294,7 @@ ...@@ -268,7 +294,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog = false" @click="dialog1 = false"
> >
Close Close
</v-btn> </v-btn>
...@@ -276,177 +302,27 @@ ...@@ -276,177 +302,27 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog = false; updatePost()" @click="dialog1 = false; createPost()"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<!-- <div style="float: right"> </v-toolbar-title>
<b-button class="text-white" v-b-modal.modal-create>New Post</b-button> </v-toolbar>
</div>
<b-modal id="modal-create" title="create Post" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label for="input-live">Title :</label>
<b-form-input
id="input-live"
v-model="title"
type="text"
class="form-control mb-2"
placeholder="name"
aria-describedby="input-live-help input-live-feedback"
max="255"
min="1"
trim
/>
<label>Category ID :</label>
<b-form-select v-model="category_id">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
<input
v-model="content"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Author :</label>
<input
v-model="user_id"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
required
>
<label>Status :</label>
<b-form-select v-model="status" :options="options" />
<label>Image :</label>
<b-form-file
v-model="images"
multiple
:state="Boolean(images)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-create')">
Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createPost()">
Submit
</button>
</template> </template>
</b-modal> --> <template #item.category_id="{ item }">
<!-- modal-show --> {{ categories.find(x => x.id === item.category_id)?.name }}
<!-- <b-modal id="modal-show" title="POST" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Title :</label>
<input v-model="sTitle" type="text" class="form-control mb-2" size="sm" disabled>
<label>Category ID :</label>
<input v-model="sCategoryId" type="text" class="form-control mb-2" size="sm" disabled>
<label>Content :</label>
<input v-model="sContent" type="text" class="form-control mb-2" size="sm" disabled>
<label>Author :</label>
<input
v-model="sUserId"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
disabled
>
<label>Status :</label>
<b-form-select v-model="sStatus" :options="options" disabled />
<label>Image :</label>
<div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image" />
</div>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-show')">
Close
</button>
</template> </template>
</b-modal> --> <template #item.user_id="{ item }">
<!-- modal-edit --> {{ users.find(x => x.id === item.user_id)?.name }}
<!-- <b-modal id="modal-edit" title="Edit Post " class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Title :</label>
<input
v-model="eTitle"
type="text"
class="form-control mb-2"
placeholder="name"
max="255"
min="1"
size="sm"
required
>
<label>Category ID :</label>
<b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
<input
v-model="eContent"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Author :</label>
<input v-model="eUserId" type="text" class="form-control mb-2" placeholder="Description" size="sm">
<label>Status :</label>
<b-form-select v-model="eStatus" :options="options" />
<label>Image :</label>
<b-form-file
v-model="eImages"
multiple
:state="Boolean(eImages)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form>
</div>
<template #modal-footer>
<button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-edit')">
Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="updatePost()">
Submit
</button>
</template>
</b-modal> -->
<!-- table -->
<div>
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1">
<template #top>
<v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
</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>
<v-icon :id="item.id" small @click="deletePost(item.id, item)"> <v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
mdi-delete mdi-delete
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="showPost(item)"> <v-icon :id="item.id" small @click="showPost(item)">
...@@ -489,8 +365,8 @@ export default { ...@@ -489,8 +365,8 @@ export default {
sortable: false, sortable: false,
value: 'title' value: 'title'
}, },
{ text: 'id', value: 'id' },
{ text: 'Category ID', value: 'category_id' }, { text: 'Category ID', value: 'category_id' },
{ 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 }
...@@ -524,6 +400,7 @@ export default { ...@@ -524,6 +400,7 @@ export default {
], ],
posts: [], posts: [],
categories: [], categories: [],
users: [],
sTitle: '', sTitle: '',
sCategoryId: '', sCategoryId: '',
sContent: '', sContent: '',
...@@ -574,8 +451,9 @@ export default { ...@@ -574,8 +451,9 @@ export default {
}, },
created () { created () {
this.initialize() this.initialize()
this.getposts() this.getPosts()
this.getCategories() this.getCategories()
this.getUsers()
}, },
methods: { methods: {
initialize () { initialize () {
...@@ -625,6 +503,18 @@ export default { ...@@ -625,6 +503,18 @@ export default {
} }
this.close() this.close()
}, },
getUsers () {
this.$axios
.get('/users/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then(response => (this.users = response.data.data.data))
.catch(function (error) {
console.log(error)
})
},
getCategories () { getCategories () {
this.$axios this.$axios
.get('/categories/', { .get('/categories/', {
...@@ -638,7 +528,7 @@ export default { ...@@ -638,7 +528,7 @@ export default {
console.log(error) console.log(error)
}) })
}, },
getposts () { getPosts () {
this.$axios this.$axios
.get('/posts/', { .get('/posts/', {
headers: { headers: {
...@@ -664,7 +554,6 @@ export default { ...@@ -664,7 +554,6 @@ export default {
fd, fd,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data; application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
} }
...@@ -683,19 +572,21 @@ export default { ...@@ -683,19 +572,21 @@ export default {
}) })
}) })
}, },
deletePost (ID, index) { getID (item) {
this.eID = item.id
this.editedIndex = this.categories.indexOf(item)
},
deletePost () {
const self = this const self = this
this.editedIndex = this.posts.indexOf(index) const currentPostIndex = this.editedIndex
if (confirm('Do you really want to delete?')) {
this.$axios this.$axios
.delete(`/posts/${ID}`, { .delete(`/posts/${this.eID}`, {
headers: { headers: {
'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(currentPostIndex, 1)
self.$toast.success('Post deleted successfully!', { self.$toast.success('Post deleted successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -706,7 +597,6 @@ export default { ...@@ -706,7 +597,6 @@ export default {
duration: 3000 duration: 3000
}) })
}) })
}
}, },
async showPost (item) { async showPost (item) {
const ID = item.id const ID = item.id
...@@ -714,7 +604,6 @@ export default { ...@@ -714,7 +604,6 @@ export default {
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',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
} }
}) })
...@@ -755,9 +644,7 @@ export default { ...@@ -755,9 +644,7 @@ export default {
fd, fd,
{ {
headers: { headers: {
'Content-Type': 'multipart/form-data', Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`,
Accept: 'application/json, text/plain, */*'
} }
} }
) )
......
pages/products/index.vue
View file @ ac29aa6b
...@@ -9,25 +9,16 @@ ...@@ -9,25 +9,16 @@
</template> </template>
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<div style="float: right"> <div style="float: right" />
<!-- show-modal -->
<v-dialog <v-dialog
v-model="dialog1" v-model="dialog2"
persistent persistent
max-width="600px" 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>
<v-card-title> <v-card-title>
<span class="text-h5">CREAT PRODUCT</span> <span class="text-h5">PRODUCT</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -38,59 +29,41 @@ ...@@ -38,59 +29,41 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="name" v-model="sName"
label="Name*" label="Name"
required disabled
/> />
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-select
v-model="category_id" v-model="sCategoryId"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="price" v-model="sPrice"
label="Price*" label="Price"
required disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="description" v-model="sDescription"
label="Description" label="Description"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col v-for="(image, index) in sImages" :key="index" cols="12">
<v-file-input <v-img :src="image" contain />
v-model="images"
label="File input"
small-chips
dense
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-col>
<v-row v-for="(variant, index) in variants" :key=" 'B' +index"> <v-col cols="12" />
<v-row v-for="(variant, index) in sVariants" :key="'A' +index">
<v-col <v-col
cols="12" cols="12"
sm="6" sm="6"
...@@ -98,8 +71,8 @@ ...@@ -98,8 +71,8 @@
> >
<v-text-field <v-text-field
v-model="variant.color" v-model="variant.color"
label="Color*" label="Color"
required disabled
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -109,8 +82,8 @@ ...@@ -109,8 +82,8 @@
> >
<v-text-field <v-text-field
v-model="variant.size" v-model="variant.size"
label="Size*" label="Size"
required disabled
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -120,60 +93,37 @@ ...@@ -120,60 +93,37 @@
> >
<v-text-field <v-text-field
v-model="variant.quantity" v-model="variant.quantity"
label="Quantity*" label="Quantity"
required disabled
/> />
</v-col> </v-col>
<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-row> </v-row>
</v-container> </v-container>
<small>*indicates required field</small>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<v-btn
color="blue darken-1"
text
@click="dialog1 = false; seeVariant()"
>
Close
</v-btn>
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog1 = false; createProduct();" @click="dialog2 = false"
> >
Save Close
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</div> <!-- edit-modal -->
<!-- show-modal -->
<v-dialog <v-dialog
v-model="dialog2" v-model="dialog3"
persistent persistent
max-width="600px" max-width="600px"
> >
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">PRODUCT</span> <span class="text-h5">EDIT PRODUCT</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -184,41 +134,60 @@ ...@@ -184,41 +134,60 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="sName" v-model="eName"
label="Name" label="Name*"
disabled required
/> />
</v-col> </v-col>
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-select
v-model="sCategoryId" v-model="eCategoryId"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
disabled
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="sPrice" v-model="ePrice"
label="Price" label="Price*"
disabled required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="sDescription" v-model="eDescription"
label="Description" label="Description"
/> />
</v-col> </v-col>
<v-col v-for="(image, index) in sImages" :key="index" cols="12"> <v-col cols="12">
<v-img :src="image" contain /> <v-file-input
v-model="eImages"
label="File input"
small-chips
dense
multiple
/>
</v-col> </v-col>
<v-col cols="12" /> <v-img v-if="typeof eImage === 'string'" :src="eImages" />
<v-row v-for="(variant, index) in sVariants" :key="'A' +index"> <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 <v-col
cols="12" cols="12"
sm="6" sm="6"
...@@ -226,8 +195,8 @@ ...@@ -226,8 +195,8 @@
> >
<v-text-field <v-text-field
v-model="variant.color" v-model="variant.color"
label="Color" label="Color*"
disabled required
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -237,8 +206,8 @@ ...@@ -237,8 +206,8 @@
> >
<v-text-field <v-text-field
v-model="variant.size" v-model="variant.size"
label="Size" label="Size*"
disabled required
/> />
</v-col> </v-col>
<v-col <v-col
...@@ -248,37 +217,100 @@ ...@@ -248,37 +217,100 @@
> >
<v-text-field <v-text-field
v-model="variant.quantity" v-model="variant.quantity"
label="Quantity" label="Quantity*"
disabled required
/> />
</v-col> </v-col>
<v-col /> <v-col>
<v-btn
v-show="index != 0"
class=""
fab
dark
x-small
color="red"
@click="removeVariant(index, variant)"
>
<v-icon dark>
mdi-minus
</v-icon>
</v-btn>
</v-col>
</v-row> </v-row>
</v-row> </v-row>
</v-container> </v-container>
<small>*indicates required field</small>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer /> <v-spacer />
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
type="submit" @click="dialog3 = false"
@click="dialog2 = false"
> >
Close Close
</v-btn> </v-btn>
<v-btn
color="blue darken-1"
text
type="submit"
@click="dialog3 = false; updateProduct();"
>
Save
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<!-- edit-modal --> <!-- delete-modal -->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">
Are you sure you want to delete this item?
</v-card-title>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="closeDelete">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="deleteProduct(); dialogDelete = false">
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
<!-- 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-title>
<v-dialog <v-dialog
v-model="dialog3" v-model="dialog1"
persistent persistent
max-width="600px" 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>
<v-card-title> <v-card-title>
<span class="text-h5">EDIT PRODUCT</span> <span class="text-h5">CREAT PRODUCT</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
...@@ -289,7 +321,7 @@ ...@@ -289,7 +321,7 @@
md="4" md="4"
> >
<v-text-field <v-text-field
v-model="eName" v-model="name"
label="Name*" label="Name*"
required required
/> />
...@@ -298,7 +330,7 @@ ...@@ -298,7 +330,7 @@
cols="12" cols="12"
> >
<v-select <v-select
v-model="eCategoryId" v-model="category_id"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
...@@ -307,27 +339,26 @@ ...@@ -307,27 +339,26 @@
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="ePrice" v-model="price"
label="Price*" label="Price*"
required required
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="eDescription" v-model="description"
label="Description" label="Description"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
v-model="eImages" v-model="images"
label="File input" label="File input"
small-chips small-chips
dense dense
multiple multiple
/> />
</v-col> </v-col>
<!-- <v-img v-if="typeof eImage === 'string'" :src="eImages" /> -->
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn
class="mx-2" class="mx-2"
...@@ -335,14 +366,14 @@ ...@@ -335,14 +366,14 @@
dark dark
small small
color="indigo" color="indigo"
@click="addMoreVariant()" @click="addMore()"
> >
<v-icon dark> <v-icon dark>
mdi-plus mdi-plus
</v-icon> </v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
<v-row v-for="(variant, index) in eVariants" :key=" 'B' +index"> <v-row v-for="(variant, index) in variants" :key=" 'B' +index">
<v-col <v-col
cols="12" cols="12"
sm="6" sm="6"
...@@ -384,7 +415,7 @@ ...@@ -384,7 +415,7 @@
dark dark
x-small x-small
color="red" color="red"
@click="removeVariant(index)" @click="remove(index)"
> >
<v-icon dark> <v-icon dark>
mdi-minus mdi-minus
...@@ -401,7 +432,7 @@ ...@@ -401,7 +432,7 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog3 = false" @click="dialog1 = false; seeVariant()"
> >
Close Close
</v-btn> </v-btn>
...@@ -409,33 +440,21 @@ ...@@ -409,33 +440,21 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog3 = false; updateProduct();" @click="dialog1 = false; createProduct();"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<!-- table --> </v-toolbar-title>
<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> </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>
<v-icon :id="item.id" small @click="deleteProduct(item.id,item)"> <v-icon :id="item.id" small @click="dialogDelete = true; getID(item)">
mdi-delete mdi-delete
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="showProduct(item)"> <v-icon :id="item.id" small @click="showProduct(item)">
...@@ -704,20 +723,23 @@ export default { ...@@ -704,20 +723,23 @@ export default {
}) })
}) })
}, },
deleteProduct (ID, index) { getID (item) {
this.eID = item.id
this.editedIndex = this.products.indexOf(item)
},
deleteProduct () {
const self = this const self = this
this.editedIndex = this.products.indexOf(index) const currentPostIndex = this.editedIndex
if (confirm('Do you really want to delete?')) {
try { try {
this.$axios this.$axios
.delete(`/products/${ID}`, { .delete(`/products/${this.eID}`, {
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.products.splice(this.editedIndex, 1) this.products.splice(currentPostIndex, 1)
self.$toast.success('Category deleted successfully!', { self.$toast.success('Category deleted successfully!', {
duration: 3000 duration: 3000
}) })
...@@ -725,7 +747,6 @@ export default { ...@@ -725,7 +747,6 @@ export default {
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
}
}, },
async showProduct (item) { async showProduct (item) {
const ID = item.id const ID = item.id
...@@ -819,11 +840,8 @@ export default { ...@@ -819,11 +840,8 @@ export default {
remove (index) { remove (index) {
this.variants.splice(index, 1) this.variants.splice(index, 1)
}, },
removeVariant (index) { removeVariant (index, variant) {
this.eVariants.splice(index, 1) this.eVariants.splice(index, 1)
},
seeVariant () {
console.log(this.variants)
} }
} }
} }
......
pages/users/index.vue
View file @ ac29aa6b
...@@ -279,6 +279,9 @@ export default { ...@@ -279,6 +279,9 @@ export default {
this.initialize() this.initialize()
this.getUsers() this.getUsers()
}, },
beforeCreate () {
// this.keepToken()
},
methods: { methods: {
initialize () { initialize () {
this.users = [] this.users = []
......
plugins/formatTime.js
View file @ ac29aa6b
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.mixin({ Vue.mixin({
methods: { methods: {
...@@ -12,6 +14,11 @@ Vue.mixin({ ...@@ -12,6 +14,11 @@ Vue.mixin({
if (day.length < 2) { day = '0' + day } if (day.length < 2) { day = '0' + day }
return [year, month, day].join('-') return [year, month, day].join('-')
},
keepToken () {
const TOKEN = localStorage.getItem('token')
this.$auth.$storage.setUniversal('token', TOKEN)
} }
} }
}) })
store/index.js
View file @ ac29aa6b
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
modules: {
}
})
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