Feat(tag): New tag and delete tags

src/components/edit_tag.vue

@@ -39,20 +39,9 @@
 import { mapGetters, mapActions } from 'vuex'
 export default {
   name: 'editTag',
-  props: {
-    value: {
-      type: Object,
-      default: function () {
-        return {
-          color: '',
-          icon: 'question',
-          name: '',
-          variant: '',
-          words: []
-        }
-      }
-    }
-  },
+  props: [
+    'value'
+  ],
   data () {
     return {
     }

src/components/item_tag.vue

@@ -18,7 +18,7 @@
         <div v-if="edit_mode">
           <b-button @click="save()">Sauver</b-button>
           <b-button @click="toggleEdit()">Annuler</b-button>
-          <b-button>Supprimer</b-button>
+          <b-button @click="deleteIt()">Supprimer</b-button>
         </div>
         <div v-else>
           <b-button @click="toggleEdit()">Editer</b-button>
@@ -55,15 +55,23 @@ export default {
   },
   methods: {
     ...mapActions('config', [
-      'edit_tag'
+      'edit_tag',
+      'delete_tag'
     ]),
     toggleEdit () {
+      // toggle edit mod for the tag
       this.edited_tag = { ...this.tag }
       this.edit_mode = !this.edit_mode
     },
     save () {
+      // Save the edited tag
       this.edit_tag(this.edited_tag)
       this.toggleEdit()
+    },
+    deleteIt () {
+      // Delete the edited tag
+      this.delete_tag(this.edited_tag.name)
+      this.toggleEdit()
     }
   }
 }

src/store/modules/config.js

@@ -43,6 +43,9 @@ export default {
     APPEND_TAG: (state, { tag }) => {
       Vue.set(state.tags, tag.name.toLowerCase(), tag)
     },
+    DELETE_TAG: (state, { tagname }) => {
+      Vue.delete(state.tags, tagname.toLowerCase())
+    },
     SET_CATEGORIES: (state, { categories }) => {
       state.categories = Object.keys(categories)
         .reduce((c, k) => (c[k.toLowerCase()] = categories[k], c), {})
@@ -75,11 +78,16 @@ export default {
         if (err) throw err
         console.log('The file has been saved!')
       })
-
     },
     edit_tag (context, tag) {
+      // Edit or append a tag to config
       context.commit('APPEND_TAG', { tag: tag })
       context.dispatch('save')
     },
+    delete_tag (context, tagname) {
+      // Revome a tag from the config
+      context.commit('DELETE_TAG', { tagname: tagname })
+      context.dispatch('save')
+    }
   }
 }

src/views/config.vue

@@ -40,18 +40,7 @@
     <h2>Tags</h2>
     <b-list-group>
       <b-list-group-item>
-        <div v-if="!newTag">
-          <b-button @click="toggle_new_tag" size="sm">
-            <font-awesome-icon icon="plus" class="fa" /> Ajouter un tag
-          </b-button>
-        </div>
-        <div v-else>
-        <h4> Nouveau tag </h4>
-        <tag-edit></tag-edit>
-          <b-button @click="toggle_new_tag" size="sm">
-            <font-awesome-icon icon="ban" class="fa" /> Annuler
-          </b-button>
-        </div>
+        <new-tag></new-tag>
       </b-list-group-item>
       <b-list-group-item v-for="tag in tags">
         <tag-item :tagname="tag.name"></tag-item>
@@ -70,6 +59,7 @@
 import { mapGetters, mapActions } from 'vuex'
 import tagItem from '../components/item_tag'
 import tagEdit from '../components/edit_tag'
+import newTag from '../components/new_tag'
 import categorieItem from '../components/item_categorie'
 
 export default {
@@ -77,15 +67,9 @@ export default {
   components: {
     'tag-item': tagItem,
     'tag-edit': tagEdit,
+    'new-tag': newTag,
     'categorie-item': categorieItem
   },
-  data () {
-    return {
-      newTag: false
-    }
-  },
-  mounted: function () {
-  },
   computed: {
     ...mapGetters({
       'data_dir': 'config/data_dir',
@@ -106,9 +90,6 @@ export default {
     }),
     open_filebrowser (dir) {
       console.log("plop")
-    },
-    toggle_new_tag () {
-      this.newTag = !this.newTag
     }
   }
 }