feat: add tag management feature
This commit is contained in:
parent
e284266b91
commit
e3fbebe1b8
17 changed files with 726 additions and 86 deletions
20
src/App.vue
20
src/App.vue
|
|
@ -1,5 +1,21 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-app>
|
||||
<router-view/>
|
||||
</div>
|
||||
<GlobalSnackbar />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
import GlobalSnackbar from './components/GlobalSnackbar.vue'
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
GlobalSnackbar
|
||||
},
|
||||
|
||||
data: () => ({})
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
29
src/components/GlobalSnackbar.vue
Normal file
29
src/components/GlobalSnackbar.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-snackbar
|
||||
right
|
||||
bottom
|
||||
:color="$store.state.alert.color"
|
||||
multi-line
|
||||
v-model="$store.state.alert.enabled"
|
||||
>
|
||||
{{ $store.state.alert.text }}
|
||||
|
||||
<template v-slot:action="{ attrs }">
|
||||
<v-btn
|
||||
text
|
||||
v-bind="attrs"
|
||||
@click="$store.commit('DISABLE_ALERT')"
|
||||
>
|
||||
Fermer
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GlobalSnackbar'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,62 +1,153 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import Vue from 'vue'
|
||||
|
||||
@Component
|
||||
export default class HelloWorld extends Vue {
|
||||
@Prop() private msg!: string;
|
||||
}
|
||||
export default Vue.extend({
|
||||
name: 'HelloWorld',
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader'
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify'
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify'
|
||||
}
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com'
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify'
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs'
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify'
|
||||
}
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com/components/api-explorer'
|
||||
},
|
||||
{
|
||||
text: 'Select a layout',
|
||||
href: 'https://vuetifyjs.com/getting-started/pre-made-layouts'
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
3
src/components/OrganizationListItem.vue
Normal file
3
src/components/OrganizationListItem.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
|
@ -1,14 +1,119 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Admin Layout</h1>
|
||||
<div v-if="enabled">
|
||||
<v-app-bar
|
||||
app
|
||||
clipped-right
|
||||
color="blue-grey"
|
||||
dark
|
||||
>
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-toolbar-title>Administration</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-app-bar>
|
||||
|
||||
<router-view></router-view>
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
app
|
||||
>
|
||||
<v-list dense>
|
||||
<v-list-item exact :to="{ name: 'OrganizationList' }">
|
||||
<v-list-item-action>
|
||||
<v-icon>group</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Gérer les associations</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item exact :to="{ name: 'Tags' }">
|
||||
<v-list-item-action>
|
||||
<v-icon>label</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>Gérer les tags/catégories</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<router-view></router-view>
|
||||
</v-container>
|
||||
</v-main>
|
||||
</div>
|
||||
<v-main v-else>
|
||||
<div v-if="!enabled && loading">
|
||||
<span>Chargement...</span>
|
||||
</div>
|
||||
<div v-if="!enabled && !loading">
|
||||
<div class="d-flex align-center justify-center mt-5">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Connexion au panel administrateur
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Vous n'êtes pas encore connecté à l'interface d'administration veuillez copier-coller le token dans la boîte ci-dessous.
|
||||
</p>
|
||||
<v-text-field autofocus label="Token" v-model="token" />
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="primary" @click="init" :disabled="token === ''">Se connecter</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</div>
|
||||
</v-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data: () => ({
|
||||
drawer: null,
|
||||
left: false,
|
||||
enabled: false,
|
||||
loading: true,
|
||||
token: ''
|
||||
}),
|
||||
created () {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
this.enabled = false
|
||||
this.loading = true
|
||||
let adminToken = window.localStorage.getItem('adminToken')
|
||||
if (this.token !== '') {
|
||||
adminToken = this.token
|
||||
}
|
||||
if (adminToken === null || adminToken === 'null') {
|
||||
adminToken = (new URL(window.location)).searchParams.get('adminToken')
|
||||
if (adminToken === null) {
|
||||
// adminToken = prompt("Vous n'êtes pas encore connecté à l'interface d'administration veuillez copier-coller le token dans la boîte ci-dessous.")
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
}
|
||||
this.$apitator.setAuthorizationToken(adminToken)
|
||||
// verify the token
|
||||
this.$apitator.get('/admin', { withAuth: true }).then(res => {
|
||||
window.localStorage.setItem('adminToken', adminToken)
|
||||
this.loading = false
|
||||
this.enabled = true
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
if (this.token !== '') {
|
||||
this.$store.commit('ADD_ALERT', {
|
||||
color: 'error',
|
||||
text: 'Token invalide !'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,21 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
created() {
|
||||
let delegateToken = window.localStorage.getItem('delegateToken')
|
||||
if (delegateToken === null) {
|
||||
delegateToken = (new URL(window.location)).searchParams.get('delegateToken')
|
||||
if (delegateToken === null) {
|
||||
delegateToken = prompt(`
|
||||
Vous n'êtes pas encore connecté à l'interface de configuration de votre
|
||||
association veuillez copier-coller le token qui vous a été envoyé par email ci-dessous.
|
||||
(ou connectez vous directement avec le lient envoyé par email)
|
||||
`)
|
||||
}
|
||||
window.localStorage.setItem('delegateToken', delegateToken)
|
||||
}
|
||||
this.$apitator.setAuthorizationToken(delegateToken)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,20 @@ import App from './App.vue'
|
|||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import vuetify from './plugins/vuetify'
|
||||
import apitator from 'vue-apitator'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(apitator, {
|
||||
baseUrl: 'http://localhost:8001'
|
||||
})
|
||||
Vue.filter('less', (s: string, l = 60) => {
|
||||
return s.substr(0, l) + (s.length > 60 ? '...' : '')
|
||||
})
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
|
|||
7
src/plugins/vuetify.ts
Normal file
7
src/plugins/vuetify.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify/lib'
|
||||
|
||||
Vue.use(Vuetify)
|
||||
|
||||
export default new Vuetify({
|
||||
})
|
||||
|
|
@ -28,6 +28,11 @@ const routes: Array<RouteConfig> = [
|
|||
path: '/',
|
||||
name: 'OrganizationList',
|
||||
component: () => import(/* webpackChunkName: "organizationList" */ '../views/Admin/OrganizationList.vue')
|
||||
},
|
||||
{
|
||||
path: 'tags',
|
||||
name: 'Tags',
|
||||
component: () => import(/* webpackChunkName: "tags" */ '../views/Admin/Tags.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,23 @@ Vue.use(Vuex)
|
|||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
alert: {
|
||||
color: '',
|
||||
text: '',
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
ADD_ALERT (state, payload) {
|
||||
state.alert = {
|
||||
color: payload.color,
|
||||
text: payload.text,
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
DISABLE_ALERT (state) {
|
||||
state.alert.enabled = false
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
|
|
|
|||
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