update
This commit is contained in:
parent
e3fbebe1b8
commit
4791bd8037
30 changed files with 15738 additions and 278 deletions
|
|
@ -1,13 +1,515 @@
|
|||
<template>
|
||||
<div>
|
||||
OrganizationList
|
||||
</div>
|
||||
<v-row no-gutters class="d-flex justify-center">
|
||||
<v-col cols="12" xl="8" md="10" sm="12">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="organizations"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:top>
|
||||
<v-toolbar flat color="white">
|
||||
<v-toolbar-title>Gestion des associations</v-toolbar-title>
|
||||
<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 association
|
||||
</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.adminName"
|
||||
required
|
||||
label="Nom (interne) de l'associatiton">
|
||||
</v-text-field>
|
||||
<v-text-field
|
||||
v-model="editedItem.email"
|
||||
label="E-mail utilisé pour recevoir le lien/la clé d'identification">
|
||||
</v-text-field>
|
||||
<v-select
|
||||
:items="validationState"
|
||||
v-model="editedItem.validationState"
|
||||
label="DEBUG: status de la validation"
|
||||
></v-select>
|
||||
<div v-if="editedIndex === -1">
|
||||
<p>
|
||||
Remarque : Lorsque vous allez créer cette association un email contenant le lien de connexion va être automatiquement envoyé sur l'adresse renseignée.
|
||||
</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>
|
||||
Remarque : Si l'email change lors d'une modification, rien ne sera fait en plus.
|
||||
Si vous voulez envoyer un email contenant le lient de connexion, vous devez utiliser le bouton dédié pour ça.
|
||||
</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey darken-3" 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 }">
|
||||
</template> -->
|
||||
<!-- <template v-slot:item.description="{ item }">
|
||||
{{ item.description|less }}
|
||||
</template> -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon small color="success">
|
||||
<v-icon
|
||||
small
|
||||
@click="openApproveModal(item)"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
done
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Valider les changements</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon small color="info">
|
||||
<v-icon
|
||||
small
|
||||
@click="editItem(item)"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Modifier</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon small color="error">
|
||||
<v-icon
|
||||
small
|
||||
@click="openDeleteModal(item)"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Supprimer</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon small color="primary">
|
||||
<v-icon
|
||||
small
|
||||
@click="openDetailsModal(item)"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
visibility
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Voir plus</span>
|
||||
</v-tooltip>
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn icon small color="success">
|
||||
<v-icon
|
||||
small
|
||||
@click="openExternal(item)"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
launch
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Ouvrir la page publique</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
<template v-slot:no-data>
|
||||
<span>Aucune associations n'ont été crées jusqu'a présent</span>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</v-col>
|
||||
<v-dialog v-model="deleteModal" max-width="600">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Voulez vous vraiment supprimer cette association ?
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<b>Attention, cette action est irréversible !</b>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="blue darken-1" text @click="deleteModal = false">Annuler</v-btn>
|
||||
<v-btn color="red darken-1" text @click="deleteItem">Supprimer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="detailsModal" max-width="600">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Détails et actions sur l'association {{ toSeeItem.adminName }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<!-- show dates, status, current and published version page link, token -->
|
||||
<!-- action: reset token, send email -->
|
||||
<v-list two-line>
|
||||
|
||||
<v-divider />
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon>vpn_key</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ toSeeItem.token }}</v-list-item-title>
|
||||
<v-list-item-subtitle>Token/clée</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider />
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon>update</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ toSeeItem.createdAt }}</v-list-item-title>
|
||||
<v-list-item-subtitle>Date de création</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<div v-if="toSeeItem.updatedAt !== undefined">
|
||||
<v-list-item>
|
||||
<v-list-item-action />
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ toSeeItem.updatedAt }}</v-list-item-title>
|
||||
<v-list-item-subtitle>Date de dernière mise à jour</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<div v-if="toSeeItem.publishedAt !== undefined">
|
||||
<v-divider />
|
||||
<v-list-item>
|
||||
<v-list-item-action />
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ toSeeItem.publishedAt }}</v-list-item-title>
|
||||
<v-list-item-subtitle>Date de dernière publication</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
<v-list-item three-line>
|
||||
<v-list-item-icon>
|
||||
<v-icon>refresh</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Générer une nouvelle clé</v-list-item-title>
|
||||
<v-list-item-subtitle>Cette action va remplacer les clés existantes par une nouvelle clé généré aléatoirement</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn color="info" outlined @click="generateToken(toSeeItem)" small>Générer</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider />
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon>email</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Envoyer un email contenant la clé</v-list-item-title>
|
||||
<v-list-item-subtitle>Un message sera envoyé contenant le token existant</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-list-item-action>
|
||||
<v-btn color="teal" outlined @click="sendEmailToken(toSeeItem)" small>Envoyer</v-btn>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-divider />
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="blue darken-1" text @click="detailsModal = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog v-model="approveModal" max-width="700">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Vérification et publication des changements de l'association {{ toSeeItem.adminName }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-switch label="Les modifications sont acceptées" v-model="approved" />
|
||||
<v-textarea
|
||||
:disabled="approved"
|
||||
label="Raisons du rejet"
|
||||
v-model="rejectionDescription">
|
||||
</v-textarea>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="grey darken-3" text @click="approveModal = false">Fermer</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
text
|
||||
@click="approveOrReject()"
|
||||
:disabled="approved && rejectionDescription.length === 0"
|
||||
>Valider</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted () {
|
||||
console.log('dzqsd')
|
||||
|
||||
data: () => {
|
||||
const item = {
|
||||
adminName: '',
|
||||
email: '',
|
||||
validationState: 'none'
|
||||
}
|
||||
return {
|
||||
dialog: false,
|
||||
headers: [
|
||||
{
|
||||
text: 'Nom interne',
|
||||
value: 'adminName'
|
||||
},
|
||||
{
|
||||
text: 'E-mail',
|
||||
value: 'email'
|
||||
},
|
||||
{
|
||||
text: 'Actions',
|
||||
value: 'actions'
|
||||
}
|
||||
],
|
||||
organizations: [],
|
||||
editedIndex: -1,
|
||||
editedItem: item,
|
||||
defaultItem: item,
|
||||
deleteModal: false,
|
||||
validationState: ['none', 'pending', 'rejected', 'published'],
|
||||
detailsModal: false,
|
||||
toSeeItem: item,
|
||||
approveModal: false,
|
||||
toApproveItem: item,
|
||||
rejectionDescription: '',
|
||||
approved: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
formTitle () {
|
||||
return this.editedIndex === -1 ? 'Nouvelle association' : "Modification de l'association"
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dialog (val) {
|
||||
val || this.close()
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.$store.commit('SET_TITLE', 'Gestion des associations')
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData () {
|
||||
this.$apitator.get('/admin/organizations', { withAuth: true }).then(res => {
|
||||
this.organizations = res.data.data
|
||||
})
|
||||
},
|
||||
|
||||
editItem (item) {
|
||||
this.editedIndex = this.organizations.indexOf(item)
|
||||
this.editedItem = Object.assign({}, item)
|
||||
this.dialog = true
|
||||
},
|
||||
|
||||
openDeleteModal (item) {
|
||||
this.toDeleteItem = item
|
||||
this.deleteModal = true
|
||||
},
|
||||
|
||||
deleteItem () {
|
||||
const index = this.organizations.indexOf(this.toDeleteItem)
|
||||
if (confirm('Êtes vous sûr de vouloir supprimer cette association ?')) {
|
||||
this.organizations.splice(index, 1)
|
||||
this.$apitator.delete('/admin/organizations/' + this.toDeleteItem._id, { withAuth: true }).then(() => {
|
||||
this.deleteModal = false
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: "Cette association vient d'être supprimé"
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
openDetailsModal (item) {
|
||||
this.toSeeItem = item
|
||||
this.detailsModal = true
|
||||
},
|
||||
|
||||
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 organization
|
||||
this.$apitator.put('/admin/organizations/' + this.editedItem._id, {
|
||||
adminName: this.editedItem.adminName,
|
||||
email: this.editedItem.email,
|
||||
validationState: this.editedItem.validationState
|
||||
}, { withAuth: true }).then(res => {
|
||||
console.log(res.data)
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'Association mise à jour'
|
||||
})
|
||||
this.fetchData()
|
||||
this.close()
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: 'Impossible de modifier cette association'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// call the api to store the organization
|
||||
this.$apitator.post('/admin/organizations', {
|
||||
adminName: this.editedItem.adminName,
|
||||
email: this.editedItem.email,
|
||||
validationState: this.editedItem.validationState
|
||||
}, { withAuth: true }).then(() => {
|
||||
this.fetchData()
|
||||
this.close()
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'Association ajoutée'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: "Impossible d'ajouter cette association"
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
generateToken (item) {
|
||||
if (!confirm('Êtes vous sur de reinitialiser la clée de cette association ? Les liens de connexions existants seront inutilisables.')) {
|
||||
return
|
||||
}
|
||||
this.$apitator.post('/admin/organizations/' + item._id + '/reset-token', {}, { withAuth: true }).then(() => {
|
||||
this.detailsModal = false
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'La clée de cette association a été reinitialisé'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: 'Impossible de reinitialiser la clée de cette association'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
sendEmailToken (item) {
|
||||
this.$apitator.post('/admin/organizations/' + item._id + '/send-email-token', {}, { withAuth: true }).then(() => {
|
||||
this.detailsModal = false
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'Un email va être envoyé à cette association contenant la clée'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: "Impossible d'envoyer un email à cette association"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
openExternal (item) {
|
||||
window.open('https://forum.espacecondorcet.org/association/slug' + item.slug, '_blank').focus()
|
||||
},
|
||||
|
||||
openApproveModal (item) {
|
||||
this.approveModal = true
|
||||
this.toApproveItem = item
|
||||
this.approved = false
|
||||
},
|
||||
|
||||
approveOrReject (item) {
|
||||
if (this.approved) {
|
||||
this.$apitator.post('/admin/organizations/' + item._id + '/approve', {}, { withAuth: true }).then(() => {
|
||||
this.approveModal = false
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: 'La publication est cours de réalisation et un email va être envoyé à cette association afin de notifier de cette publication'
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: "Impossible d'approuver les changements"
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$apitator.post('/admin/organizations/' + item._id + '/reject', {
|
||||
rejectionDescription: this.rejectionDescription
|
||||
}, { withAuth: true }).then(() => {
|
||||
this.approveModal = false
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'success',
|
||||
text: "Un email va être envoyé à cette association afin d'informer du problème"
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: 'Impossible de rejeter les changements'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,110 +1,114 @@
|
|||
<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-row no-gutters class="d-flex justify-center">
|
||||
<v-col cols="12" xl="8" md="10" sm="12">
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="tags"
|
||||
sort-by="name"
|
||||
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
|
||||
class="mb-2"
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
@click="fetchData()"
|
||||
class="mb-2 mr-2"
|
||||
>
|
||||
Nouvelle catégorie
|
||||
<v-icon>refresh</v-icon>
|
||||
</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>
|
||||
<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="grey darken-3" 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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -119,7 +123,7 @@ export default {
|
|||
width: 200
|
||||
},
|
||||
{
|
||||
text: 'Icone',
|
||||
text: 'Icône',
|
||||
value: 'icon',
|
||||
width: 250
|
||||
},
|
||||
|
|
@ -160,6 +164,7 @@ export default {
|
|||
},
|
||||
|
||||
created () {
|
||||
this.$store.commit('SET_TITLE', 'Gestion des tags')
|
||||
this.fetchData()
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue