Skip to content

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

post + product

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