Skip to content

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

delete

parent 02906955
Hide whitespace changes
Inline Side-by-side
Showing with 4 additions and 444 deletions
pages/categories/index.vue
View file @ 064aae00
<template>
<div>
<b-breadcrumb>
<b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true" />
Home
</b-breadcrumb-item>
<b-breadcrumb-item href="/categories">
Category
</b-breadcrumb-item>
</b-breadcrumb>
<div style="float: right">
<b-button v-b-modal.modal-create class="text-white">
New Category
</b-button>
</div>
<!-- create modal -->
<b-modal id="modal-create" title="Create Category" class="modal fade">
<p class="my-4" /></p><form @submit.prevent="createCategory">
<label>Name :</label>
<input
v-model="name"
type="text"
class="form-control mb-2"
placeholder="name"
max="255"
min="1"
required
>
<label>Parent :</label>
<b-form-select v-model="parent_id">
<option v-for="item in categories" v-if="item.parent_id == null" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Ordering :</label>
<input v-model="ordering" type="text" class="form-control mb-2" placeholder="Ordering" required>
<label>Image :</label>
<b-form-file
v-model="image"
:state="Boolean(image)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
@change="fileSelected"
/>
</form>
</p>
<template #modal-footer>
<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="createCategory">
Submit
</button>
</template>
</b-modal>
<!-- edit-modal -->
<b-modal id="modal-edit" title="Edit Category" class="modal fade">
<p class="my-4" /></p><form>
<label>Name :</label>
<input
v-model="eName"
type="text"
class="form-control mb-2"
placeholder="name"
max="255"
min="1"
value="this?.eName"
>
<label>Parent :</label>
<b-form-select v-model="eParentId">
<option v-for="item in categories" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Ordering :</label>
<input
v-model="eOrdering"
type="text"
class="form-control mb-2"
placeholder="Ordering"
value="this?.eOrdering"
>
<!-- <b-form-select v-model="selected" :options="options"></b-form-select> -->
<label>Image :</label>
<b-form-file
v-model="eImage"
:state="Boolean(eImage)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
/>
</form>
</p>
<template #modal-footer>
<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="updateCategory(eID)"
>
Submit
</button>
</template>
</b-modal>
<div>
<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">
<template #activator="{ on, attrs }" />
<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 class="mr-2" @click="editCategory(item)">
mdi-pencil
</v-icon>
<v-icon :id="item.id" small @click="deleteCategory(item.id, item)">
mdi-delete
</v-icon>
</template>
<template #no-data>
<v-btn color="primary" @click="initialize">
Reset
</v-btn>
</template>
</v-data-table>
</div>
</div>
</template>
<script>
export default {
layout: 'admin',
middleware: ['web'],
data: () => {
return {
parent_id: null,
name: '',
ordering: '',
image: null,
error: '',
dialog: 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: null,
eImage: null,
message: [],
editedIndex: -1,
editedItem: {
name: '',
id: '',
ordering: '',
parent_id: '',
created_at: '',
updated_at: ''
},
defaultItem: {
name: '',
id: '',
ordering: '',
status: '',
created_at: '',
updated_at: ''
}
}
},
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: {
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 set = new Set([this.image])
const image = Array.from(set)
const self = this
this.$axios
.post('/categories/',
{
name: this.name,
ordering: this.ordering,
parent_id: this.parent_id,
images: image
},
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
this.$bvModal.hide('modal-create')
self.$toast.success('Category created successfully!', {
duration: 3000
})
this.editedItem = response.data.data
console.log(this.editedItem)
this.categories.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
})
})
},
fileSelected (event) {
console.log(event)
const file = event.target.files[0]
this.url = URL.createObjectURL(file)
this.image = file
console.log(file)
console.log(this.image)
},
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.$bvModal.show('modal-edit')
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(item)
},
updateCategory (userID) {
const set = new Set([this.eImage])
const image = Array.from(set)
const self = this
console.log(this.eName)
console.log(this.eOrdering)
console.log(this?.eID)
try {
this.$axios
.post(`categories/update/${this?.eID}`,
{
name: this.eName,
ordering: this.eOrdering,
parent_id: this.eParentId,
images: image
},
{
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
}
}
)
.then((response) => {
self.$toast.success('User updated successfully!', {
duration: 3000
})
console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.categories[this.editedIndex], this.editedItem)
})
} catch (error) {
console.log(error)
}
}
}
}
</script>
pages/products/index.vue
View file @ 064aae00
......@@ -1043,6 +1043,7 @@ export default {
this.eDescription = item.description
this.eVariants = item.variants
this.editedIndex = this.products.indexOf(item)
console.log(item.variants)
this.dialog3 = true
},
updateProduct (ID) {
......@@ -1053,6 +1054,7 @@ export default {
fd.append('category_id', this.eCategoryId)
fd.append('description', this.eDescription)
for (let i = 0; i < this.eVariants.length; i++) {
fd.append(`variants[${i}][id]`, this.eVariants[i].id)
fd.append(`variants[${i}][color]`, this.eVariants[i].color)
fd.append(`variants[${i}][quantity]`, this.eVariants[i].quantity)
fd.append(`variants[${i}][size]`, this.eVariants[i].size)
......@@ -1060,6 +1062,7 @@ export default {
for (let j = 0; j < this.eImages.length; j++) {
fd.append(`images[${j}]`, this.eImages[j])
}
const currentPostIndex = this.editedIndex
try {
this.$axios
.post(`/products/update/${this?.eId}`,
......@@ -1076,8 +1079,7 @@ export default {
})
console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.products[this.editedIndex], this.editedItem)
Object.assign(this.products[currentPostIndex], this.editedItem)
})
} catch (error) {
console.log(error)
......
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