Feat(tag): modal for adding keywords to tag

config/config.yml

@@ -68,7 +68,7 @@ tags:
       - BELLEGARDE SU CARREFOUR
       - ST CLAUDE CASINOCARB
   train:
-    name: train
+    name: Train
     variant: danger
     icon: train
     color: '#eb2f06'
@@ -91,3 +91,18 @@ tags:
       - INTERMARCHE
       - LA FERME DU COIN
       - 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 !

src/components/associate_tag_keyword.vue

@@ -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>

src/store/modules/config.js

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

src/views/home.vue

@@ -30,11 +30,26 @@
 
         <b-table striped hover :items="filtered_rows" :fields='fields'>
             <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-if="tag.name !== 'Tout'">
                         <font-awesome-icon :icon="tag.icon" class="fa"/>
                     </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>
         </b-table>
     </div>
@@ -58,6 +73,7 @@ import { mapGetters, mapActions } from 'vuex'
 import cardCategorie from '../components/card_categorie'
 import tagsComparison from '../components/graph_tags_comparison'
 import graphTime from '../components/graph_time'
+import associateTagKeyword from '../components/associate_tag_keyword'
 import moment from 'moment'
 
 moment.locale('fr')
@@ -67,7 +83,8 @@ export default {
   components: {
     cardCategorie: cardCategorie,
     tagsComparison: tagsComparison,
-    graphTime: graphTime
+    graphTime: graphTime,
+    associateTagKeyword: associateTagKeyword
   },
   data () {
     return {
@@ -94,7 +111,8 @@ export default {
         variant: 'info',
         icon: 'file-invoice-dollar'
       },
-      categories_filter: []
+      categories_filter: [],
+      keyword: ''
     }
   },
   computed: {
@@ -118,6 +136,9 @@ export default {
     ]),
     set_categories_filter (categorienames) {
       this.categories_filter = categorienames
+    },
+    showModal (name) {
+        console.log(name)
     }
   }
 }