Skip to content

K
kiaisoft_tuananh_nuxt
Commit bbfba7ba authored by Kemm23's avatar Kemm23
Browse files
Options

fix UI Category

parent fd18168c
Show whitespace changes
Inline Side-by-side
Showing with 561 additions and 470 deletions
pages/categories/index.vue
View file @ bbfba7ba
...@@ -107,13 +107,6 @@ ...@@ -107,13 +107,6 @@
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-row>
<v-col cols="12">
<v-text-field
v-model="eID"
label="ID"
required
/>
</v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
v-model="eName" v-model="eName"
...@@ -125,6 +118,7 @@ ...@@ -125,6 +118,7 @@
<v-text-field <v-text-field
v-model="eOrdering" v-model="eOrdering"
label="Ordering" label="Ordering"
type="number"
required required
/> />
</v-col> </v-col>
......
pages/posts/index.vue
View file @ bbfba7ba
<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable no-sequences -->
<!-- eslint-disable no-unused-expressions -->
<!-- eslint-disable no-unused-expressions -->
<!-- eslint-disable vue/require-v-for-key -->
<template> <template>
<div> <div>
<b-breadcrumb> <b-breadcrumb>
<b-breadcrumb-item href="/home"> <b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon> <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true" />
Home Home
</b-breadcrumb-item> </b-breadcrumb-item>
<b-breadcrumb-item href="/posts">Post</b-breadcrumb-item> <b-breadcrumb-item href="/posts">
Post
</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create>New Post</b-button> <b-button v-b-modal.modal-create class="text-white">
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">
<form> <form>
<label for="input-live">Title :</label> <label for="input-live">Title :</label>
<b-form-input id="input-live" type="text" class="form-control mb-2" placeholder="name" <b-form-input
aria-describedby="input-live-help input-live-feedback" v-model="title" max="255" min="1" trim> id="input-live"
</b-form-input> 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> <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">
...@@ -24,21 +41,40 @@ ...@@ -24,21 +41,40 @@
</option> </option>
</b-form-select> </b-form-select>
<label>Content :</label> <label>Content :</label>
<input type="text" class="form-control mb-2" placeholder="Ordering" v-model="content" size="sm" required /> <input
v-model="content"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Author :</label> <label>Author :</label>
<input type="text" class="form-control mb-2" placeholder="Description" v-model="user_id" size="sm" required /> <input
v-model="user_id"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
required
>
<label>Status :</label> <label>Status :</label>
<b-form-select v-model="status" :options="options"></b-form-select> <b-form-select v-model="status" :options="options" />
<label>Image :</label> <label>Image :</label>
<b-form-file v-model="images" multiple :state="Boolean(images)" <b-form-file
placeholder="Choose a image or drop it here..." drop-placeholder="Drop file here..."></b-form-file> v-model="images"
multiple
:state="Boolean(images)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-create')" class="btn btn-danger btn-sm m-1"> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-create')">
Close Close
</button> </button>
<button @click="createPost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1"> <button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createPost()">
Submit Submit
</button> </button>
</template> </template>
...@@ -48,23 +84,30 @@ ...@@ -48,23 +84,30 @@
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form> <form>
<label>Title :</label> <label>Title :</label>
<input type="text" class="form-control mb-2" v-model="sTitle" size="sm" disabled /> <input v-model="sTitle" type="text" class="form-control mb-2" size="sm" disabled>
<label>Category ID :</label> <label>Category ID :</label>
<input type="text" class="form-control mb-2" v-model="sCategoryId" size="sm" disabled /> <input v-model="sCategoryId" type="text" class="form-control mb-2" size="sm" disabled>
<label>Content :</label> <label>Content :</label>
<input type="text" class="form-control mb-2" v-model="sContent" size="sm" disabled /> <input v-model="sContent" type="text" class="form-control mb-2" size="sm" disabled>
<label>Author :</label> <label>Author :</label>
<input type="text" class="form-control mb-2" placeholder="Description" v-model="sUserId" size="sm" disabled /> <input
v-model="sUserId"
type="text"
class="form-control mb-2"
placeholder="Description"
size="sm"
disabled
>
<label>Status :</label> <label>Status :</label>
<b-form-select v-model="sStatus" :options="options" disabled></b-form-select> <b-form-select v-model="sStatus" :options="options" 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>
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-show')" class="btn btn-danger btn-sm m-1"> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-show')">
Close Close
</button> </button>
</template> </template>
...@@ -74,8 +117,16 @@ ...@@ -74,8 +117,16 @@
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form> <form>
<label>Title :</label> <label>Title :</label>
<input type="text" class="form-control mb-2" placeholder="name" v-model="eTitle" max="255" min="1" size="sm" <input
required /> v-model="eTitle"
type="text"
class="form-control mb-2"
placeholder="name"
max="255"
min="1"
size="sm"
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">
...@@ -83,21 +134,33 @@ ...@@ -83,21 +134,33 @@
</option> </option>
</b-form-select> </b-form-select>
<label>Content :</label> <label>Content :</label>
<input type="text" class="form-control mb-2" placeholder="Ordering" v-model="eContent" size="sm" required /> <input
v-model="eContent"
type="text"
class="form-control mb-2"
placeholder="Ordering"
size="sm"
required
>
<label>Author :</label> <label>Author :</label>
<input type="text" class="form-control mb-2" placeholder="Description" v-model="eUserId" size="sm" /> <input v-model="eUserId" type="text" class="form-control mb-2" placeholder="Description" size="sm">
<label>Status :</label> <label>Status :</label>
<b-form-select v-model="eStatus" :options="options"></b-form-select> <b-form-select v-model="eStatus" :options="options" />
<label>Image :</label> <label>Image :</label>
<b-form-file v-model="eImages" multiple :state="Boolean(eImages)" <b-form-file
placeholder="Choose a image or drop it here..." drop-placeholder="Drop file here..."></b-form-file> v-model="eImages"
multiple
:state="Boolean(eImages)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')" class="btn btn-danger btn-sm m-1"> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-edit')">
Close Close
</button> </button>
<button @click="updatePost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1"> <button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="updatePost()">
Submit Submit
</button> </button>
</template> </template>
...@@ -105,26 +168,28 @@ ...@@ -105,26 +168,28 @@
<!-- 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 #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,8 +199,8 @@ ...@@ -134,8 +199,8 @@
<script> <script>
export default { export default {
layout: 'admin',
name: 'App', name: 'App',
layout: 'admin',
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
...@@ -150,20 +215,20 @@ export default { ...@@ -150,20 +215,20 @@ export default {
options: [ options: [
{ value: 1, text: 'Draft' }, { value: 1, text: 'Draft' },
{ value: 2, text: 'Publish' }, { value: 2, text: 'Publish' },
{ value: 3, text: 'UnPublish' }, { 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 }
], ],
posts: [], posts: [],
categories: [], categories: [],
...@@ -187,7 +252,7 @@ export default { ...@@ -187,7 +252,7 @@ export default {
category_id: '', category_id: '',
content: '', content: '',
user_id: '', user_id: '',
status: '', status: ''
}, },
defaultItem: { defaultItem: {
name: '', name: '',
...@@ -195,70 +260,72 @@ export default { ...@@ -195,70 +260,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.initialize(), this.getposts(), this.getCategories() 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 +333,33 @@ export default { ...@@ -266,31 +333,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,19 +369,19 @@ export default { ...@@ -300,19 +369,19 @@ 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': '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-create') 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)
...@@ -323,43 +392,44 @@ export default { ...@@ -323,43 +392,44 @@ export default {
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
...@@ -373,7 +443,7 @@ export default { ...@@ -373,7 +443,7 @@ export default {
} }
this.$bvModal.show('modal-show') this.$bvModal.show('modal-show')
}, },
editPost(item) { editPost (item) {
this.$bvModal.show('modal-edit') this.$bvModal.show('modal-edit')
this.eId = item.id this.eId = item.id
this.eTitle = item.title this.eTitle = item.title
...@@ -383,7 +453,7 @@ export default { ...@@ -383,7 +453,7 @@ export default {
this.eUserId = item.user_id this.eUserId = item.user_id
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item)
}, },
updatePost() { updatePost () {
const self = this const self = this
this.$axios this.$axios
.post( .post(
...@@ -394,19 +464,19 @@ export default { ...@@ -394,19 +464,19 @@ 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') 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
...@@ -417,11 +487,11 @@ export default { ...@@ -417,11 +487,11 @@ export default {
console.log(error) console.log(error)
this.$bvModal.hide('modal-edit') 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 @ bbfba7ba
<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-slot -->
<template> <template>
<div> <div>
<b-breadcrumb> <b-breadcrumb>
<b-breadcrumb-item href="/home"> <b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon> <b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true" />
Home Home
</b-breadcrumb-item> </b-breadcrumb-item>
<b-breadcrumb-item href="/products">Product</b-breadcrumb-item> <b-breadcrumb-item href="/products">
Product
</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create >New Product</b-button></div> <b-button v-b-modal.modal-create class="text-white">
<b-modal id="modal-create" title="create Product" class="modal fade" > New Product
</b-button>
</div>
<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>
<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,7 +75,7 @@ ...@@ -69,7 +75,7 @@
: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 <button
type="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" class="btn-primary flex justify-start ml-2 mt-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
...@@ -83,83 +89,87 @@ ...@@ -83,83 +89,87 @@
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"
/> >
<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"
/> >
<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"
/> >
<button <button
v-show="index != 0"
type="button" type="button"
class="ml-2 rounded-md mt-2 " class="ml-2 rounded-md mt-2 "
@click="remove(index)" @click="remove(index)"
v-show="index != 0"
> >
<b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon> <b-icon icon="dash-circle-fill" class="h5" variant="danger" />
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-create')" class="btn btn-danger btn-sm m-1">Close</button> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-create')">
<button @click="createProduct()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="createProduct()">
Submit
</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>
<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">
...@@ -169,75 +179,77 @@ ...@@ -169,75 +179,77 @@
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> </div>
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-show')" class="btn btn-danger btn-sm m-1">Close</button> <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> </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,7 +257,7 @@ ...@@ -245,7 +257,7 @@
: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 <button
type="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" class="btn-primary flex justify-start ml-2 mt-2 rounded-md border px-3 py-2 bg-pink-600 text-white"
...@@ -259,32 +271,36 @@ ...@@ -259,32 +271,36 @@
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"
/> >
<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"
/> >
<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"
/> >
<button <button
v-show="index != 0"
type="button" type="button"
class="ml-2 rounded-md mt-2 " class="ml-2 rounded-md mt-2 "
@click="removeVariant(index)" @click="removeVariant(index)"
v-show="index != 0"
> >
<b-icon icon="dash-circle-fill" class="h5" variant="danger"></b-icon> <b-icon icon="dash-circle-fill" class="h5" variant="danger" />
</button> </button>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')" class="btn btn-danger btn-sm m-1">Close</button> <button v-b-modal.modal-close_visit class="btn btn-danger btn-sm m-1" @click="$bvModal.hide('modal-edit')">
<button @click="updateProduct()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> Close
</button>
<button v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1" @click="updateProduct()">
Submit
</button>
</template> </template>
</b-modal> </b-modal>
<!-- table --> <!-- table -->
...@@ -295,20 +311,28 @@ ...@@ -295,20 +311,28 @@
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template v-slot:top > <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Product Manage</v-toolbar-title> <v-toolbar-title>Product 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 #item.actions="{ item }">
<v-icon small @click="editProduct(item)" :id ="item.id"> mdi-pencil </v-icon> <v-icon :id="item.id" small @click="editProduct(item)">
<v-icon small @click="deleteProduct(item.id,item)" :id ="item.id"> mdi-delete </v-icon> mdi-pencil
<v-icon small @click="showProduct(item)" :id ="item.id"> mdi-account-details </v-icon> </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>
<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>
...@@ -317,8 +341,8 @@ ...@@ -317,8 +341,8 @@
<script> <script>
export default { export default {
layout: 'admin',
name: 'App', name: 'App',
layout: 'admin',
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
...@@ -333,8 +357,8 @@ export default { ...@@ -333,8 +357,8 @@ export default {
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}, }
], ],
dialog: false, dialog: false,
dialogDelete: false, dialogDelete: false,
...@@ -344,14 +368,14 @@ export default { ...@@ -344,14 +368,14 @@ export default {
text: 'Name', text: 'Name',
align: 'start', align: 'start',
sortable: false, sortable: false,
value: 'name', value: 'name'
}, },
{ text: 'id', value: 'id' }, { text: 'id', value: 'id' },
{ text: 'category ID', value: 'category_id' }, { text: 'category ID', value: 'category_id' },
{ text: 'price', value: 'price', sortable: false }, { text: 'price', value: 'price', sortable: false },
{ text: 'description', value: 'description' }, { text: 'description', value: 'description' },
{ text: 'stock', value: 'stock' }, { text: 'stock', value: 'stock' },
{ text: 'Actions', value: 'actions', sortable: false }, { text: 'Actions', value: 'actions', sortable: false }
], ],
products: [], products: [],
product: [], product: [],
...@@ -366,8 +390,8 @@ export default { ...@@ -366,8 +390,8 @@ export default {
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}, }
], ],
eId: '', eId: '',
eName: '', eName: '',
...@@ -380,8 +404,8 @@ export default { ...@@ -380,8 +404,8 @@ export default {
{ {
color: '', color: '',
size: '', size: '',
quantity: '', quantity: ''
}, }
], ],
message: [], message: [],
editedIndex: -1, editedIndex: -1,
...@@ -390,7 +414,7 @@ export default { ...@@ -390,7 +414,7 @@ export default {
category_id: '', category_id: '',
price: '', price: '',
description: '', description: '',
stock: '', stock: ''
}, },
defaultItem: { defaultItem: {
name: '', name: '',
...@@ -398,80 +422,80 @@ export default { ...@@ -398,80 +422,80 @@ 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.initialize(), this.getProducts()
this.getProducts(),
this.getCategories() this.getCategories()
}, },
methods: { methods: {
initialize() { initialize () {
this.products= [], this.products = []
this.product= [], this.product = []
this.categories= [], this.categories = []
this.sName= '', this.sName = ''
this.sCategoryId= '', this.sCategoryId = ''
this.sPrice= '', this.sPrice = ''
this.sDescription= '', this.sDescription = ''
this.sStock= '', this.sStock = ''
this.sImages= null, this.sImages = null
this.sVariants= [ 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,49 +503,51 @@ export default { ...@@ -479,49 +503,51 @@ 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': '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-create') this.$bvModal.hide('modal-create')
self.$toast.success('Product created successfully!', { self.$toast.success('Product created successfully!', {
duration: 3000 duration: 3000
...@@ -530,46 +556,47 @@ export default { ...@@ -530,46 +556,47 @@ export default {
console.log(this.editedItem) console.log(this.editedItem)
this.products.push(this.editedItem) this.products.push(this.editedItem)
}) })
.catch(errors => { .catch((errors) => {
this.$bvModal.hide('modal-create') 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
}) })
}) })
}, },
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 => { })
.then((response) => {
this.products.splice(this.editedIndex, 1) this.products.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!',{ self.$toast.success('Category deleted successfully!', {
duration: 3000 duration: 3000
}) })
}) })
} catch(error){ } catch (error) {
console.log(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
...@@ -583,7 +610,7 @@ export default { ...@@ -583,7 +610,7 @@ export default {
} }
this.$bvModal.show('modal-show') this.$bvModal.show('modal-show')
}, },
editProduct(item) { editProduct (item) {
this.$bvModal.show('modal-edit') this.$bvModal.show('modal-edit')
this.eId = item.id this.eId = item.id
this.eName = item.name this.eName = item.name
...@@ -594,26 +621,26 @@ export default { ...@@ -594,26 +621,26 @@ export default {
this.eVariants = item.variants this.eVariants = item.variants
this.editedIndex = this.products.indexOf(item) this.editedIndex = this.products.indexOf(item)
}, },
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)
...@@ -621,30 +648,30 @@ export default { ...@@ -621,30 +648,30 @@ export default {
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>
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