Skip to content

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

rs img

parent c8b36af7
Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 178 deletions
pages/categories/index.vue
View file @ 189df397
...@@ -10,67 +10,7 @@ ...@@ -10,67 +10,7 @@
</v-breadcrumbs> </v-breadcrumbs>
</div> </div>
<!-- modal-create --> <!-- modal-create -->
<v-dialog <v-dialog v-model="dialog2" persistent max-width="600px">
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.id !== eID)"
item-text="name"
item-value="id"
label="Parent"
readonly
/>
</v-col>
<v-col cols="12">
<v-img :src="eImage" />
</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="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>
<v-card-title> <v-card-title>
<span class="text-h5">Category Edit</span> <span class="text-h5">Category Edit</span>
...@@ -96,13 +36,43 @@ ...@@ -96,13 +36,43 @@
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-select <!-- <v-select
v-model="eParentId" v-model="eParentId"
:items="categories.filter(category =>category.id !== eID)" :items="
categories.filter((category) => category.id !== eID)
"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Parent" label="Parent"
/> /> -->
<v-card class="mx-auto" max-width="500" dark>
<v-sheet>
<v-text-field
v-model="search"
label="Search Category"
dark
flat
solo-inverted
hide-details
clearable
clear-icon="mdi-close-circle-outline"
/>
</v-sheet>
<v-card-text>
<v-treeview
v-model="eParentId"
:items="categoryTrees"
:search="search"
:filter="filter"
:open.sync="open"
selectable
transition
item-value="id"
selected-color="primary"
selection-type="independent"
/>
</v-card-text>
</v-card>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
...@@ -116,13 +86,18 @@ ...@@ -116,13 +86,18 @@
<v-col cols="12"> <v-col cols="12">
<img <img
v-if="file" v-if="file"
contain
max-height="300"
max-width="500"
:src="file" :src="file"
> >
</v-col> </v-col>
<v-img v-if="typeof eImage === 'string'" :src="eImage" /> <v-col cols="12" text-align=" left">
<v-img
v-if="typeof eImage === 'string'"
contain
height="100px"
width="150px"
:src="eImage"
/>
</v-col>
</v-row> </v-row>
</v-container> </v-container>
<small>*indicates required field</small> <small>*indicates required field</small>
...@@ -132,7 +107,11 @@ ...@@ -132,7 +107,11 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog2 = false; clearFile()" @click="
dialog2 = false;
clearFile();
clearEditData();
"
> >
Close Close
</v-btn> </v-btn>
...@@ -140,14 +119,23 @@ ...@@ -140,14 +119,23 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog2 = false; updateCategory();" @click="
dialog2 = false;
updateCategory();
"
> >
Save Save
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
<v-data-table :headers="headers" :items="categories" :item-class="indentation" sort-by="calories" class="elevation-1"> <v-data-table
:headers="headers"
:items="categories"
:item-class="indentation"
sort-by="calories"
class="elevation-1"
>
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-spacer /> <v-spacer />
...@@ -159,12 +147,7 @@ ...@@ -159,12 +147,7 @@
lazy-validation lazy-validation
> >
<template #activator="{ on, attrs }"> <template #activator="{ on, attrs }">
<v-btn <v-btn color="primary" dark v-bind="attrs" v-on="on">
color="primary"
dark
v-bind="attrs"
v-on="on"
>
CREATE NEW CREATE NEW
</v-btn> </v-btn>
</template> </template>
...@@ -175,11 +158,7 @@ ...@@ -175,11 +158,7 @@
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-row>
<v-col <v-col cols="12">
cols="12"
sm="6"
md="4"
>
<v-text-field <v-text-field
v-model="name" v-model="name"
label="Name" label="Name"
...@@ -208,15 +187,11 @@ ...@@ -208,15 +187,11 @@
/> />
</v-col> --> </v-col> -->
<v-col cols="12"> <v-col cols="12">
<v-card <v-card class="mx-auto" max-width="500" dark>
class="mx-auto" <v-sheet>
max-width="500"
dark
>
<v-sheet class="pa-4">
<v-text-field <v-text-field
v-model="search" v-model="search"
label="Search Company Directory" label="Search Category"
dark dark
flat flat
solo-inverted solo-inverted
...@@ -224,31 +199,21 @@ ...@@ -224,31 +199,21 @@
clearable clearable
clear-icon="mdi-close-circle-outline" clear-icon="mdi-close-circle-outline"
/> />
<v-checkbox
v-model="caseSensitive"
dark
hide-details
label="Case sensitive search"
/>
</v-sheet> </v-sheet>
<v-card-text> <v-card-text>
<v-treeview <v-treeview
v-model="parent_id" v-model="parent_id"
:items="categories" :items="categoryTrees"
:search="search" :search="search"
:filter="filter" :filter="filter"
:open.sync="open" :open.sync="open"
selectable selectable
transition
item-value="id" item-value="id"
selected-color="primary"
selection-type="independent"
:rule="singleRules" :rule="singleRules"
> />
<!-- <template #prepend="{ item }">
<v-icon
v-if="item.children"
v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
/>
</template> -->
</v-treeview>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-col> </v-col>
...@@ -261,11 +226,7 @@ ...@@ -261,11 +226,7 @@
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<img <img v-if="file" :src="file" contain>
v-if="file"
:src="file"
contain
>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -276,7 +237,10 @@ ...@@ -276,7 +237,10 @@
<v-btn <v-btn
color="blue darken-1" color="blue darken-1"
text text
@click="dialog1 = false; clearFile()" @click="
dialog1 = false;
clearFile();
"
> >
Close Close
</v-btn> </v-btn>
...@@ -284,7 +248,10 @@ ...@@ -284,7 +248,10 @@
color="blue darken-1" color="blue darken-1"
text text
type="submit" type="submit"
@click="dialog1 = false; createCategory();" @click="
dialog1 = false;
createCategory();
"
> >
Save Save
</v-btn> </v-btn>
...@@ -307,13 +274,22 @@ ...@@ -307,13 +274,22 @@
<v-text-field v-model="editedItem.id" label="id" /> <v-text-field v-model="editedItem.id" label="id" />
</v-col> </v-col>
<v-col cols="12" sm="6" md="4"> <v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.ordering" label="ordering" /> <v-text-field
v-model="editedItem.ordering"
label="ordering"
/>
</v-col> </v-col>
<v-col cols="12" sm="6" md="4"> <v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.created_at" label="created_at" /> <v-text-field
v-model="editedItem.created_at"
label="created_at"
/>
</v-col> </v-col>
<v-col cols="12" sm="6" md="4"> <v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.updated_at" label="updated_at" /> <v-text-field
v-model="editedItem.updated_at"
label="updated_at"
/>
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
...@@ -339,7 +315,14 @@ ...@@ -339,7 +315,14 @@
<v-btn color="blue darken-1" text @click="closeDelete"> <v-btn color="blue darken-1" text @click="closeDelete">
Cancel Cancel
</v-btn> </v-btn>
<v-btn color="blue darken-1" text @click="deleteCategory(); dialogDelete = false"> <v-btn
color="blue darken-1"
text
@click="
deleteCategory();
dialogDelete = false;
"
>
OK OK
</v-btn> </v-btn>
<v-spacer /> <v-spacer />
...@@ -358,15 +341,26 @@ ...@@ -358,15 +341,26 @@
<span>{{ formatDate(item.updated_at) }}</span> <span>{{ formatDate(item.updated_at) }}</span>
</template> </template>
<template #[`item.actions`]="{ item }"> <template #[`item.actions`]="{ item }">
<v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)"> <v-icon
:id="item.id"
small
@click="
dialog2 = true;
editCategory(item);
"
>
mdi-pencil mdi-pencil
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="dialogDelete = true; getID(item)"> <v-icon
:id="item.id"
small
@click="
dialogDelete = true;
getID(item);
"
>
mdi-delete mdi-delete
</v-icon> </v-icon>
<v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">
mdi-account-details
</v-icon>
</template> </template>
<template #no-data> <template #no-data>
<v-btn color="primary" @click="initialize"> <v-btn color="primary" @click="initialize">
...@@ -378,7 +372,6 @@ ...@@ -378,7 +372,6 @@
</v-app> </v-app>
</template> </template>
<script> <script>
export default { export default {
layout: 'admin', layout: 'admin',
middleware: ['web'], middleware: ['web'],
...@@ -386,7 +379,6 @@ export default { ...@@ -386,7 +379,6 @@ export default {
return { return {
open: [1, 2], open: [1, 2],
search: null, search: null,
caseSensitive: false,
file: null, file: null,
parent_id: [], parent_id: [],
name: '', name: '',
...@@ -396,7 +388,6 @@ export default { ...@@ -396,7 +388,6 @@ export default {
dialog: false, dialog: false,
dialog1: false, dialog1: false,
dialog2: false, dialog2: false,
dialog3: false,
dialogDelete: false, dialogDelete: false,
options: [], options: [],
headers: [ headers: [
...@@ -410,13 +401,19 @@ export default { ...@@ -410,13 +401,19 @@ export default {
{ text: 'Ordering', value: 'ordering', groupable: false }, { text: 'Ordering', value: 'ordering', groupable: false },
{ text: 'Created', value: 'created_at', groupable: false }, { text: 'Created', value: 'created_at', groupable: false },
{ text: 'Updated', value: 'updated_at', groupable: false }, { text: 'Updated', value: 'updated_at', groupable: false },
{ text: 'Actions', value: 'actions', sortable: false, groupable: false } {
text: 'Actions',
value: 'actions',
sortable: false,
groupable: false
}
], ],
categories: [], categories: [],
categoryTrees: [],
eID: '', eID: '',
eName: '', eName: '',
eOrdering: '', eOrdering: '',
eParentId: '', eParentId: [],
eImage: null, eImage: null,
message: [], message: [],
editedIndex: -1, editedIndex: -1,
...@@ -451,18 +448,17 @@ export default { ...@@ -451,18 +448,17 @@ export default {
], ],
nameRules: [ nameRules: [
v => !!v || 'Name is required', v => !!v || 'Name is required',
v => (v && v.length <= 255) || 'Name must be less than 255 characters' v =>
], (v && v.length <= 255) || 'Name must be less than 255 characters'
requiredRules: [
v => !!v || 'This field is required'
], ],
requiredRules: [v => !!v || 'This field is required'],
numberRules: [ numberRules: [
v => !!v || 'This field is required', v => !!v || 'This field is required',
v => v > 0 || 'value must be a positive integer' v => v > 0 || 'value must be a positive integer'
], ],
singleRules: [ singleRules: [
v => !!v || 'This field is required', v => !!v || 'This field is required',
v => (v.length < 2) || 'Chose 1 pls -____-' v => v.length < 2 || 'Chose 1 pls -____-'
] ]
} }
}, },
...@@ -487,6 +483,7 @@ export default { ...@@ -487,6 +483,7 @@ export default {
created () { created () {
this.initialize() this.initialize()
this.getCategories() this.getCategories()
this.getCategoryTrees()
}, },
methods: { methods: {
indentation (item) { indentation (item) {
...@@ -532,11 +529,29 @@ export default { ...@@ -532,11 +529,29 @@ export default {
} }
this.close() this.close()
}, },
getCategoryTrees () {
this.$axios
.get('/categories-tree/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.categoryTrees = response.data.data
})
.catch(function (error) {
console.log(error)
})
},
getCategories () { getCategories () {
this.$axios this.$axios
.get('/categories/', { .get('/categories/', {
headers: { headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
} }
}) })
.then((response) => { .then((response) => {
...@@ -556,14 +571,13 @@ export default { ...@@ -556,14 +571,13 @@ export default {
fd.append('image', this.image) fd.append('image', this.image)
} }
this.$axios this.$axios
.post('/categories/', .post('/categories/', fd, {
fd, headers: {
{ Authorization: `Bearer ${this.$auth.$storage.getUniversal(
headers: { 'token'
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` )}`
}
} }
) })
.then((response) => { .then((response) => {
self.$toast.success('Category created successfully!', { self.$toast.success('Category created successfully!', {
duration: 3000 duration: 3000
...@@ -579,6 +593,7 @@ export default { ...@@ -579,6 +593,7 @@ export default {
}) })
}) })
this.getCategories() this.getCategories()
this.getCategoryTrees()
this.clearFile() this.clearFile()
this.clearData() this.clearData()
}, },
...@@ -587,12 +602,13 @@ export default { ...@@ -587,12 +602,13 @@ export default {
const currentPostIndex = this.editedIndex const currentPostIndex = this.editedIndex
try { try {
this.$axios this.$axios
.delete(`/categories/${this.eID}`, .delete(`/categories/${this.eID}`, {
{ headers: {
headers: { Authorization: `Bearer ${this.$auth.$storage.getUniversal(
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}` 'token'
} )}`
}) }
})
.then((response) => { .then((response) => {
this.categories.splice(currentPostIndex, 1) this.categories.splice(currentPostIndex, 1)
self.$toast.success('Category deleted successfully!', { self.$toast.success('Category deleted successfully!', {
...@@ -613,18 +629,12 @@ export default { ...@@ -613,18 +629,12 @@ export default {
this.eID = item.id this.eID = item.id
this.eName = item.name this.eName = item.name
this.eOrdering = item.ordering this.eOrdering = item.ordering
this.eParentId = item.parent_id this.eParentId.push(item.parent_id)
this.eImage = item.image this.eImage = item.image
this.editedIndex = this.categories.indexOf(item) this.editedIndex = this.categories.indexOf(item)
console.log(this.eID) console.log(this.eID)
console.log(this.eImage) console.log(this.eImage)
}, },
showCategory (item) {
this.eName = item.name
this.eOrdering = item.ordering
this.eParentId = item.parent_id
this.eImage = item.image
},
updateCategory (userID) { updateCategory (userID) {
const self = this const self = this
const fd = new FormData() const fd = new FormData()
...@@ -640,14 +650,13 @@ export default { ...@@ -640,14 +650,13 @@ export default {
} }
try { try {
this.$axios this.$axios
.post(`categories/update/${this?.eID}`, .post(`categories/update/${this?.eID}`, fd, {
fd, headers: {
{ Authorization: `Bearer ${this.$auth.$storage.getUniversal(
headers: { '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
...@@ -661,11 +670,17 @@ export default { ...@@ -661,11 +670,17 @@ export default {
} }
}, },
clearData () { clearData () {
this.parent_id = [] this.parent_id.length = 0
this.name = '' this.name = ''
this.ordering = '' this.ordering = ''
this.image = null this.image = null
}, },
clearEditData () {
this.eParentId.length = 0
this.eName = ''
this.eOrdering = ''
this.eImage = null
},
fileSelected (event) { fileSelected (event) {
if (event) { if (event) {
this.file = URL.createObjectURL(event) this.file = URL.createObjectURL(event)
...@@ -676,20 +691,6 @@ export default { ...@@ -676,20 +691,6 @@ export default {
}, },
clearFile () { clearFile () {
this.file = null this.file = null
},
onOpen (e) {
// ignore initial open
if (!this.__initial) {
this.__initial = true
return
}
console.log('toggle arrow clicked', e)
},
onSelected (e) {
console.log('checkbox clicked', e)
this.parent_id = e[0]
console.log(this.parent_id)
} }
} }
} }
...@@ -699,9 +700,9 @@ export default { ...@@ -699,9 +700,9 @@ export default {
.depth-0 { .depth-0 {
background-color: rgba(211, 211, 211, 0.555); background-color: rgba(211, 211, 211, 0.555);
} }
.depth-1 { .depth-1 {
padding-left: 30px !important; padding-left: 30px !important;
background-color: rgba(211, 211, 211, 0.133); background-color: rgba(211, 211, 211, 0.133);
} }
.depth-1 > td:nth-child(2) { .depth-1 > td:nth-child(2) {
padding-left: 30px !important; padding-left: 30px !important;
...@@ -719,7 +720,7 @@ export default { ...@@ -719,7 +720,7 @@ export default {
padding-left: 150px !important; padding-left: 150px !important;
} }
img { img {
width: 100%; width: 100px;
height: 100% height: 150px;
} }
</style> </style>
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