feat: add tag management feature
This commit is contained in:
parent
e284266b91
commit
e3fbebe1b8
17 changed files with 726 additions and 86 deletions
252
src/views/Admin/Tags.vue
Normal file
252
src/views/Admin/Tags.vue
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
<template>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="tags"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<v-toolbar flat color="white">
|
||||
<v-toolbar-title>Gestion des catégories</v-toolbar-title>
|
||||
<!-- <v-divider
|
||||
class="mx-4"
|
||||
inset
|
||||
vertical
|
||||
></v-divider> -->
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
outlined
|
||||
color="primary"
|
||||
dark
|
||||
@click="fetchData()"
|
||||
class="mb-2 mr-2"
|
||||
>
|
||||
<v-icon>refresh</v-icon>
|
||||
</v-btn>
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
Nouvelle catégorie
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="editedItem.name"
|
||||
required
|
||||
label="Nom de la catégorie">
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
v-model="editedItem.icon"
|
||||
label="Icône de la catégorie">
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
v-model="editedItem.description"
|
||||
label="Description de la catégorie">
|
||||
</v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close">Annuler</v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save">Valider</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
<template v-slot:item.icon="{ item }">
|
||||
<div style="display:flex">
|
||||
<svg
|
||||
style="width: 1em; margin-right: .75em"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="camera"
|
||||
class="svg-inline--fa fa-camera fa-w-16"
|
||||
role="img"
|
||||
:viewBox="'0 0 ' + item.icon.width + ' ' + item.icon.height"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" :d="item.icon.path"></path>
|
||||
</svg>
|
||||
<span>{{ item.icon.id }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:item.description="{ item }">
|
||||
{{ item.description|less }}
|
||||
</template>
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn icon small color="info">
|
||||
<v-icon
|
||||
small
|
||||
@click="editItem(item)"
|
||||
>
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-btn icon small color="error">
|
||||
<v-icon
|
||||
small
|
||||
@click="deleteItem(item)"
|
||||
>
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<span>Aucune catégories n'ont été crées jusqu'a présent</span>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data: () => ({
|
||||
dialog: false,
|
||||
headers: [
|
||||
{
|
||||
text: 'Nom',
|
||||
value: 'name',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
text: 'Icone',
|
||||
value: 'icon',
|
||||
width: 250
|
||||
},
|
||||
{
|
||||
text: 'Description',
|
||||
value: 'description'
|
||||
},
|
||||
{
|
||||
text: 'Actions',
|
||||
value: 'actions',
|
||||
width: 100
|
||||
}
|
||||
],
|
||||
tags: [],
|
||||
editedIndex: -1,
|
||||
editedItem: {
|
||||
name: '',
|
||||
icon: '',
|
||||
description: ''
|
||||
},
|
||||
defaultItem: {
|
||||
name: '',
|
||||
icon: '',
|
||||
description: ''
|
||||
}
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle () {
|
||||
return this.editedIndex === -1 ? 'Nouvelle catégorie' : 'Modification de la catégorie'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog (val) {
|
||||
val || this.close()
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData () {
|
||||
console.log('Fetch data')
|
||||
this.$apitator.get('/admin/tags', { withAuth: true }).then(res => {
|
||||
this.tags = res.data.data
|
||||
})
|
||||
},
|
||||
|
||||
editItem (item) {
|
||||
this.editedIndex = this.tags.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.editedItem.icon = this.editedItem.icon.id
|
||||
this.dialog = true
|
||||
},
|
||||
|
||||
deleteItem (item) {
|
||||
const index = this.tags.indexOf(item)
|
||||
if (confirm('Êtes vous sûr de vouloir supprimer cette catégorie ?')) {
|
||||
this.tags.splice(index, 1)
|
||||
this.$apitator.delete('/admin/tags/' + item._id, { withAuth: true }).then(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: "Cette catégorie vient d'être supprimé"
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
close () {
|
||||
this.dialog = false
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem)
|
||||
this.editedIndex = -1
|
||||
})
|
||||
},
|
||||
|
||||
save () {
|
||||
if (this.editedIndex > -1) {
|
||||
// call the api to update the tag
|
||||
this.$apitator.put('/admin/tags/' + this.editedItem._id, {
|
||||
name: this.editedItem.name,
|
||||
icon: this.editedItem.icon,
|
||||
description: this.editedItem.description
|
||||
}, { withAuth: true }).then(res => {
|
||||
console.log(res.data)
|
||||
console.log('tag updated')
|
||||
// Object.assign(this.tags[this.editedIndex], this.editedItem)
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'Catégorie mise à jour'
|
||||
})
|
||||
this.fetchData()
|
||||
this.close()
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: 'Impossible de modifier cette catégorie'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// call the api to store the tag
|
||||
this.$apitator.post('/admin/tags', {
|
||||
name: this.editedItem.name,
|
||||
icon: this.editedItem.icon,
|
||||
description: this.editedItem.description
|
||||
}, { withAuth: true }).then(res => {
|
||||
console.log(res.data)
|
||||
console.log(res.data.data._id)
|
||||
console.log('tag stored')
|
||||
// this.tags.push(this.editedItem)
|
||||
this.fetchData()
|
||||
this.close()
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'Catégorie ajoutée'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: "Impossible d'ajouter cette catégorie"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue