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 @@
</v-breadcrumbs>
</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.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-dialog v-model="dialog2" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="text-h5">Category Edit</span>
......@@ -96,13 +36,43 @@
/>
</v-col>
<v-col cols="12">
<v-select
<!-- <v-select
v-model="eParentId"
:items="categories.filter(category =>category.id !== eID)"
:items="
categories.filter((category) => category.id !== eID)
"
item-text="name"
item-value="id"
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 cols="12">
<v-file-input
......@@ -116,13 +86,18 @@
<v-col cols="12">
<img
v-if="file"
contain
max-height="300"
max-width="500"
:src="file"
>
</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-container>
<small>*indicates required field</small>
......@@ -132,7 +107,11 @@
<v-btn
color="blue darken-1"
text
@click="dialog2 = false; clearFile()"
@click="
dialog2 = false;
clearFile();
clearEditData();
"
>
Close
</v-btn>
......@@ -140,14 +119,23 @@
color="blue darken-1"
text
type="submit"
@click="dialog2 = false; updateCategory();"
@click="
dialog2 = false;
updateCategory();
"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</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>
<v-toolbar flat>
<v-spacer />
......@@ -159,12 +147,7 @@
lazy-validation
>
<template #activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
<v-btn color="primary" dark v-bind="attrs" v-on="on">
CREATE NEW
</v-btn>
</template>
......@@ -175,11 +158,7 @@
<v-card-text>
<v-container>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
>
<v-col cols="12">
<v-text-field
v-model="name"
label="Name"
......@@ -208,15 +187,11 @@
/>
</v-col> -->
<v-col cols="12">
<v-card
class="mx-auto"
max-width="500"
dark
>
<v-sheet class="pa-4">
<v-card class="mx-auto" max-width="500" dark>
<v-sheet>
<v-text-field
v-model="search"
label="Search Company Directory"
label="Search Category"
dark
flat
solo-inverted
......@@ -224,31 +199,21 @@
clearable
clear-icon="mdi-close-circle-outline"
/>
<v-checkbox
v-model="caseSensitive"
dark
hide-details
label="Case sensitive search"
/>
</v-sheet>
<v-card-text>
<v-treeview
v-model="parent_id"
:items="categories"
:items="categoryTrees"
:search="search"
:filter="filter"
:open.sync="open"
selectable
transition
item-value="id"
selected-color="primary"
selection-type="independent"
: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>
</v-col>
......@@ -261,11 +226,7 @@
/>
</v-col>
<v-col cols="12">
<img
v-if="file"
:src="file"
contain
>
<img v-if="file" :src="file" contain>
</v-col>
</v-row>
</v-container>
......@@ -276,7 +237,10 @@
<v-btn
color="blue darken-1"
text
@click="dialog1 = false; clearFile()"
@click="
dialog1 = false;
clearFile();
"
>
Close
</v-btn>
......@@ -284,7 +248,10 @@
color="blue darken-1"
text
type="submit"
@click="dialog1 = false; createCategory();"
@click="
dialog1 = false;
createCategory();
"
>
Save
</v-btn>
......@@ -307,13 +274,22 @@
<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-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-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-text-field
v-model="editedItem.updated_at"
label="updated_at"
/>
</v-col>
</v-row>
</v-container>
......@@ -339,7 +315,14 @@
<v-btn color="blue darken-1" text @click="closeDelete">
Cancel
</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
</v-btn>
<v-spacer />
......@@ -358,15 +341,26 @@
<span>{{ formatDate(item.updated_at) }}</span>
</template>
<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
</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
</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">
......@@ -378,7 +372,6 @@
</v-app>
</template>
<script>
export default {
layout: 'admin',
middleware: ['web'],
......@@ -386,7 +379,6 @@ export default {
return {
open: [1, 2],
search: null,
caseSensitive: false,
file: null,
parent_id: [],
name: '',
......@@ -396,7 +388,6 @@ export default {
dialog: false,
dialog1: false,
dialog2: false,
dialog3: false,
dialogDelete: false,
options: [],
headers: [
......@@ -410,13 +401,19 @@ export default {
{ text: 'Ordering', value: 'ordering', groupable: false },
{ text: 'Created', value: 'created_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: [],
categoryTrees: [],
eID: '',
eName: '',
eOrdering: '',
eParentId: '',
eParentId: [],
eImage: null,
message: [],
editedIndex: -1,
......@@ -451,18 +448,17 @@ export default {
],
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 255) || 'Name must be less than 255 characters'
],
requiredRules: [
v => !!v || 'This field is required'
v =>
(v && v.length <= 255) || 'Name must be less than 255 characters'
],
requiredRules: [v => !!v || 'This field is required'],
numberRules: [
v => !!v || 'This field is required',
v => v > 0 || 'value must be a positive integer'
],
singleRules: [
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 {
created () {
this.initialize()
this.getCategories()
this.getCategoryTrees()
},
methods: {
indentation (item) {
......@@ -532,11 +529,29 @@ export default {
}
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 () {
this.$axios
.get('/categories/', {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
......@@ -556,14 +571,13 @@ export default {
fd.append('image', this.image)
}
this.$axios
.post('/categories/',
fd,
{
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
.post('/categories/', fd, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
)
})
.then((response) => {
self.$toast.success('Category created successfully!', {
duration: 3000
......@@ -579,6 +593,7 @@ export default {
})
})
this.getCategories()
this.getCategoryTrees()
this.clearFile()
this.clearData()
},
......@@ -587,12 +602,13 @@ export default {
const currentPostIndex = this.editedIndex
try {
this.$axios
.delete(`/categories/${this.eID}`,
{
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
})
.delete(`/categories/${this.eID}`, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
})
.then((response) => {
this.categories.splice(currentPostIndex, 1)
self.$toast.success('Category deleted successfully!', {
......@@ -613,18 +629,12 @@ export default {
this.eID = item.id
this.eName = item.name
this.eOrdering = item.ordering
this.eParentId = item.parent_id
this.eParentId.push(item.parent_id)
this.eImage = item.image
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.image
},
updateCategory (userID) {
const self = this
const fd = new FormData()
......@@ -640,14 +650,13 @@ export default {
}
try {
this.$axios
.post(`categories/update/${this?.eID}`,
fd,
{
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
.post(`categories/update/${this?.eID}`, fd, {
headers: {
Authorization: `Bearer ${this.$auth.$storage.getUniversal(
'token'
)}`
}
)
})
.then((response) => {
self.$toast.success('User updated successfully!', {
duration: 3000
......@@ -661,11 +670,17 @@ export default {
}
},
clearData () {
this.parent_id = []
this.parent_id.length = 0
this.name = ''
this.ordering = ''
this.image = null
},
clearEditData () {
this.eParentId.length = 0
this.eName = ''
this.eOrdering = ''
this.eImage = null
},
fileSelected (event) {
if (event) {
this.file = URL.createObjectURL(event)
......@@ -676,20 +691,6 @@ export default {
},
clearFile () {
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 {
.depth-0 {
background-color: rgba(211, 211, 211, 0.555);
}
.depth-1 {
.depth-1 {
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) {
padding-left: 30px !important;
......@@ -719,7 +720,7 @@ export default {
padding-left: 150px !important;
}
img {
width: 100%;
height: 100%
}
width: 100px;
height: 150px;
}
</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