Skip to content

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

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

Feature/category ui

See merge request !12
parents 064aae00 9462c892
Hide whitespace changes
Inline Side-by-side
Showing with 658 additions and 31 deletions
layouts/admin.vue
View file @ 86679059
<template> <template>
<div> <v-app>
<NavBar /> <NavBar />
<v-app> <nuxt />
<nuxt /> </v-app>
</v-app>
</div>
</template> </template>
<script> <script>
......
pages/categories/index.vue
View file @ 86679059
<!-- eslint-disable vue/valid-v-slot -->
<template>
<v-app>
<div>
<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"
@submit.prevent="createUser"
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
New Category
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Create Category</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-text-field
v-model="ordering"
label="Ordering"
type="number"
required
/>
</v-col>
<v-col cols="12">
<v-select
v-model="parent_id"
:items="categories.filter(category => category.parent_id === null)"
item-text="name"
item-value="id"
label="Parent*"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="image"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
</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; createCategory();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
<!-- modal-create -->
<v-dialog
v-model="dialog3"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">Category</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field
v-model="eName"
label="Name"
readonly
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eOrdering"
label="Ordering"
type="number"
readonly
/>
</v-col>
<v-col cols="12">
<v-select
v-model="eParentId"
:items="categories.filter(category => category.parent_id === null && category.id !== eID)"
item-text="name"
item-value="id"
label="Parent"
readonly
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImage"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
readonly
/>
</v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" />
</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-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-model="dialog2"
persistent
max-width="600px"
>
<v-card>
<v-card-title>
<span class="text-h5">Category Edit</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12">
<v-text-field
v-model="eName"
label="Name"
required
/>
</v-col>
<v-col cols="12">
<v-text-field
v-model="eOrdering"
label="Ordering"
type="number"
required
/>
</v-col>
<v-col cols="12">
<v-select
v-model="eParentId"
:items="categories.filter(category => category.parent_id === null && category.id !== eID)"
item-text="name"
item-value="id"
label="Parent"
/>
</v-col>
<v-col cols="12">
<v-file-input
v-model="eImage"
accept="image/*"
label="Image"
prepend-icon="mdi-camera"
/>
</v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" />
</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; updateCategory();"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-data-table :headers="headers" :items="categories" sort-by="calories" class="elevation-1">
<template #top>
<v-toolbar flat>
<v-toolbar-title>Category Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical />
<v-spacer />
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-title>
<span class="text-h5">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.name" label="name" />
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.id" label="id" />
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.ordering" label="ordering" />
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.created_at" label="created_at" />
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.updated_at" label="updated_at" />
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" text @click="close">
Cancel
</v-btn>
<v-btn color="blue darken-1" text @click="save">
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<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="deleteItemConfirm">
OK
</v-btn>
<v-spacer />
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template #item.actions="{ item }">
<v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteCategory(item.id, item)">
mdi-delete
</v-icon>
<v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">
mdi-account-details
</v-icon>
</template>
<template #no-data>
<v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template>
</v-data-table>
</div>
</v-app>
</template>
<script>
export default {
layout: 'admin',
middleware: ['web'],
data: () => {
return {
parent_id: '',
name: '',
ordering: '',
image: null,
error: '',
dialog1: false,
dialog2: false,
dialog3: false,
dialogDelete: false,
options: [],
headers: [
{
text: 'Name',
align: 'start',
sortable: false,
value: 'name'
},
{ text: 'id', value: 'id' },
{ text: 'ordering', value: 'ordering' },
{ text: 'parent', value: 'parent_id', sortable: false },
{ text: 'created_at', value: 'created_at' },
{ text: 'updated_at', value: 'updated_at' },
{ text: 'Actions', value: 'actions', sortable: false }
],
categories: [],
eID: '',
eName: '',
eOrdering: '',
eParentId: '',
eImage: null,
message: [],
editedIndex: -1,
editedItem: {
name: '',
id: '',
ordering: '',
parent_id: '',
created_at: '',
updated_at: ''
},
defaultItem: {
name: '',
id: '',
ordering: '',
status: '',
created_at: '',
updated_at: ''
},
items: [
{
icon: 'mdi-home',
text: 'Home',
disabled: false,
href: '/home'
},
{
text: 'Category',
disabled: false,
href: '/categories'
}
]
}
},
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
}
},
watch: {
dialog (val) {
val || this.close()
},
dialogDelete (val) {
val || this.closeDelete()
}
},
created () {
this.initialize()
this.getCategories()
},
methods: {
testLog () {},
initialize () {
this.users = []
this.categories = []
},
editItem (item) {
this.editedIndex = this.categories.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
deleteItem (item) {
this.editedIndex = this.categories.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialogDelete = true
},
deleteItemConfirm () {
this.categories.splice(this.editedIndex, 1)
this.closeDelete()
},
close () {
this.dialog = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
closeDelete () {
this.dialogDelete = false
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
})
},
save () {
if (this.editedIndex > -1) {
Object.assign(this.categories[this.editedIndex], this.editedItem)
} else {
this.categories.push(this.editedItem)
}
this.close()
},
getCategories () {
this.$axios
.get('/categories/', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.categories = response.data.data
})
.catch(function (error) {
console.log(error)
})
},
createCategory () {
const self = this
const fd = new FormData()
fd.append('name', this.name)
fd.append('ordering', this.ordering)
fd.append('parent_id', this.parent_id)
fd.append('images', this.image)
this.$axios
.post('/categories/',
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
self.$toast.success('Category created successfully!', {
duration: 3000
})
this.editedItem = response.data.data
this.categories.push(this.editedItem)
})
.catch((errors) => {
console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!', {
duration: 3000
})
})
},
deleteCategory (ID, index) {
const self = this
this.editedIndex = this.categories.indexOf(index)
if (confirm('Do you really want to delete?')) {
try {
this.$axios
.delete(`/categories/${ID}`,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.then((response) => {
this.categories.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!', {
duration: 3000
})
})
} catch (error) {
console.log(error)
}
}
},
getID (item) {
console.log(this.categories.indexOf(item))
},
editCategory (item) {
this.eID = item.id
this.eName = item.name
this.eOrdering = item.ordering
this.eParentId = item.parent_id
this.eImage = item.images
this.editedIndex = this.categories.indexOf(item)
console.log(this.eID)
console.log(this.eImage)
},
showCategory (item) {
this.eName = item.name
this.eOrdering = item.ordering
this.eParentId = item.parent_id
this.eImage = item.images
},
updateCategory (userID) {
const self = this
const fd = new FormData()
if (this.eParentId === null) {
fd.append('parent_id', '')
} else {
fd.append('parent_id', this.eParentId)
}
fd.append('name', this.eName)
fd.append('ordering', this.eOrdering)
if (typeof this.eImage !== 'string') {
fd.append('images', this.eImage)
}
try {
this.$axios
.post(`categories/update/${this?.eID}`,
fd,
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
self.$toast.success('User updated successfully!', {
duration: 3000
})
this.editedItem = response.data.data
Object.assign(this.categories[this.editedIndex], this.editedItem)
})
} catch (error) {
console.log(error)
}
}
}
}
</script>
pages/posts/index.vue
View file @ 86679059
<!-- 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>
<div> <div>
...@@ -283,9 +288,17 @@ ...@@ -283,9 +288,17 @@
<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">
...@@ -293,21 +306,40 @@ ...@@ -293,21 +306,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>
...@@ -317,23 +349,30 @@ ...@@ -317,23 +349,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>
...@@ -343,8 +382,16 @@ ...@@ -343,8 +382,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">
...@@ -352,21 +399,33 @@ ...@@ -352,21 +399,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>
......
pages/products/index.vue
View file @ 86679059
<!-- eslint-disable vue/require-v-for-key -->
<!-- eslint-disable vue/valid-v-slot -->
<template> <template>
<div> <div>
<div> <div>
......
pages/users/index.vue
View file @ 86679059
<!-- eslint-disable vue/valid-v-slot -->
<template> <template>
<v-app> <v-app>
<div> <div>
......
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