Feat(tag): modal for adding keywords to tag

This commit is contained in:
Bertrand Benjamin 2019-01-30 15:41:27 +01:00
parent d486268921
commit af2330d2fa
4 changed files with 128 additions and 7 deletions

View File

@ -68,7 +68,7 @@ tags:
- BELLEGARDE SU CARREFOUR - BELLEGARDE SU CARREFOUR
- ST CLAUDE CASINOCARB - ST CLAUDE CASINOCARB
train: train:
name: train name: Train
variant: danger variant: danger
icon: train icon: train
color: '#eb2f06' color: '#eb2f06'
@ -91,3 +91,18 @@ tags:
- INTERMARCHE - INTERMARCHE
- LA FERME DU COIN - LA FERME DU COIN
- ARBENT GEANT - ARBENT GEANT
vacances:
color: '#ff8a00'
icon: map-marked
name: Vacances
variant: ''
words:
- VACANCES
resto-bar:
color: '#6ea5fc'
icon: utensils
name: Resto-bar
variant: ''
words:
- ALVEOLES
- LYON FRITE ALORS !

View File

@ -0,0 +1,77 @@
<template>
<b-form @submit="saveExit">
<b-form-group label="Mot clé"
label-for="keyword"
>
<b-form-input v-model="keyword"
id="keyword"
type="text"
required
>
</b-form-input>
</b-form-group>
<b-form-group label="Tag associé"
label-for="tag"
>
<b-form-select v-model="tagName"
id="tag"
:options="tagsName"
required
>
</b-form-select>
</b-form-group>
<b-btn type="submit" class="mt-3" variant="outline-success" block >Valider</b-btn>
<b-btn class="mt-3" variant="outline-danger" block @click="discardExit">Annuler</b-btn>
</b-form>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'associateTagKeyword',
props: [
'libelle'
],
data () {
return {
tagName: '',
keyword: this.cleanLibelle(this.libelle)
}
},
computed: {
...mapGetters({
'tags': 'config/tags'
}),
tagsName () {
return Object.keys(this.tags)
}
},
methods: {
...mapActions({
'append_keywords': 'config/append_keywords'
}),
cleanLibelle (libelle) {
var head = /PAIEMENT CB \d* /g
var tail = / CARTE \d*/g
return libelle.replace(head, '').replace(tail, '')
},
hideModal () {
this.$root.$emit('bv::hide::modal', this.libelle)
},
saveExit () {
this.append_keywords({
tagName: this.tagName,
keyword: this.keyword
})
this.hideModal()
},
discardExit () {
this.hideModal()
}
}
}
</script>
<style scoped>
</style>

View File

@ -37,19 +37,22 @@ export default {
}, },
mutations: { mutations: {
SET_TAGS: (state, { tags }) => { SET_TAGS: (state, { tags }) => {
// Set tags list
state.tags = Object.keys(tags) state.tags = Object.keys(tags)
.reduce((c, k) => (c[k.toLowerCase()] = tags[k], c), {}) .reduce((c, k) => (c[k.toLowerCase()] = tags[k], c), {})
}, },
APPEND_TAG: (state, { tag }) => { APPEND_TAG: (state, { tag }) => {
// Append or replace et tag
Vue.set(state.tags, tag.name.toLowerCase(), tag) Vue.set(state.tags, tag.name.toLowerCase(), tag)
}, },
DELETE_TAG: (state, { tagname }) => { DELETE_TAG: (state, { tagname }) => {
// delete tag by its name
Vue.delete(state.tags, tagname.toLowerCase()) Vue.delete(state.tags, tagname.toLowerCase())
}, },
SET_CATEGORIES: (state, { categories }) => { SET_CATEGORIES: (state, { categories }) => {
state.categories = Object.keys(categories) state.categories = Object.keys(categories)
.reduce((c, k) => (c[k.toLowerCase()] = categories[k], c), {}) .reduce((c, k) => (c[k.toLowerCase()] = categories[k], c), {})
} },
}, },
actions: { actions: {
load (context) { load (context) {
@ -88,6 +91,11 @@ export default {
// Revome a tag from the config // Revome a tag from the config
context.commit('DELETE_TAG', { tagname: tagname }) context.commit('DELETE_TAG', { tagname: tagname })
context.dispatch('save') context.dispatch('save')
},
append_keywords (context, { tagName, keyword }) {
var tag = context.getters.tag(tagName)
tag.words.push(keyword)
context.dispatch('edit_tag', tag)
} }
} }
} }

View File

@ -30,11 +30,26 @@
<b-table striped hover :items="filtered_rows" :fields='fields'> <b-table striped hover :items="filtered_rows" :fields='fields'>
<template slot="tags" slot-scope="data"> <template slot="tags" slot-scope="data">
<div v-if="data.item.tags.length > 0">
<div v-for="tag in data.item.tags" :key="tag.name"> <div v-for="tag in data.item.tags" :key="tag.name">
<div v-if="tag.name !== 'Tout'">
<font-awesome-icon :icon="tag.icon" class="fa"/> <font-awesome-icon :icon="tag.icon" class="fa"/>
</div> </div>
</div> </div>
<div v-else>
<b-btn v-b-modal="data.item.Libellé">
<font-awesome-icon icon="plus" class="fa"/>
</b-btn>
<!-- Modal Component -->
<b-modal :id="data.item.Libellé"
title="Tag pour le mot clé"
hide-footer
>
<associate-tag-keyword
:libelle="data.item.Libellé">
</associate-tag-keyword>
</b-modal>
</div>
</template> </template>
</b-table> </b-table>
</div> </div>
@ -58,6 +73,7 @@ import { mapGetters, mapActions } from 'vuex'
import cardCategorie from '../components/card_categorie' import cardCategorie from '../components/card_categorie'
import tagsComparison from '../components/graph_tags_comparison' import tagsComparison from '../components/graph_tags_comparison'
import graphTime from '../components/graph_time' import graphTime from '../components/graph_time'
import associateTagKeyword from '../components/associate_tag_keyword'
import moment from 'moment' import moment from 'moment'
moment.locale('fr') moment.locale('fr')
@ -67,7 +83,8 @@ export default {
components: { components: {
cardCategorie: cardCategorie, cardCategorie: cardCategorie,
tagsComparison: tagsComparison, tagsComparison: tagsComparison,
graphTime: graphTime graphTime: graphTime,
associateTagKeyword: associateTagKeyword
}, },
data () { data () {
return { return {
@ -94,7 +111,8 @@ export default {
variant: 'info', variant: 'info',
icon: 'file-invoice-dollar' icon: 'file-invoice-dollar'
}, },
categories_filter: [] categories_filter: [],
keyword: ''
} }
}, },
computed: { computed: {
@ -118,6 +136,9 @@ export default {
]), ]),
set_categories_filter (categorienames) { set_categories_filter (categorienames) {
this.categories_filter = categorienames this.categories_filter = categorienames
},
showModal (name) {
console.log(name)
} }
} }
} }