Feat(tag): Start creating new tag

config/config.yml

@@ -41,7 +41,7 @@ tags:
     variant: info
     icon: directions
     invert: true
-    color: '#f6b93b'
+    color: '#fc69e6'
     words:
       - PAIEMENT
       - RETRAIT

src/components/edit_tag.vue

@@ -4,7 +4,7 @@
       <font-awesome-icon :style="{ color: value.color}" :icon="value.icon" class="fa-2x"/>
     </div>
     <div class="description">
-        <div v-if="value.name">
+        <div v-if="existing_tag">
           <h4>{{ value.name }}</h4>
         </div>
         <div v-else>
@@ -42,11 +42,14 @@ export default {
   props: {
     value: {
       type: Object,
-      default: {
-        color: '',
-        icon: '',
-        name: '',
-        variant: ''
+      default: function () {
+        return {
+          color: '',
+          icon: 'question',
+          name: '',
+          variant: '',
+          words: []
+        }
       }
     }
   },
@@ -55,6 +58,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      'tag': 'config/tag',
+    }),
     keywords: {
       get: function () {
         return this.value.words.join('\n')
@@ -63,6 +69,9 @@ export default {
         var kwds = keywords.split('\n')
         this.value.words = kwds
       }
+    },
+    existing_tag () {
+      return this.tag(this.value.name) ? true : false
     }
   },
   methods: {

src/views/config.vue

@@ -33,12 +33,26 @@
         <b-button @click="reload_config" size="sm">
             <font-awesome-icon icon="sync-alt" class="fa" /> Recharger
         </b-button>
+    </p>
     <p>
         Le fichier configuration se trouve à <span class="dir">{{ config_dir + config_filename}}</span> 
     </p>
-    </p>
     <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>
+      </b-list-group-item>
       <b-list-group-item v-for="tag in tags">
         <tag-item :tagname="tag.name"></tag-item>
       </b-list-group-item>
@@ -55,17 +69,19 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import tagItem from '../components/item_tag'
+import tagEdit from '../components/edit_tag'
 import categorieItem from '../components/item_categorie'
 
 export default {
   name: 'home',
   components: {
     'tag-item': tagItem,
+    'tag-edit': tagEdit,
     'categorie-item': categorieItem
   },
   data () {
     return {
-      file: ''
+      newTag: false
     }
   },
   mounted: function () {
@@ -82,14 +98,17 @@ export default {
   },
   methods: {
     ...mapActions('datas', {
-        'reload_csvs': 'load_csvs'
+      'reload_csvs': 'load_csvs'
     }),
     ...mapActions('config', {
-        'reload_config': 'load',
-        'save_config': 'save'
+      'reload_config': 'load',
+      'save_config': 'save'
     }),
     open_filebrowser (dir) {
       console.log("plop")
+    },
+    toggle_new_tag () {
+      this.newTag = !this.newTag
     }
   }
 }
@@ -100,9 +119,9 @@ export default {
   font-weight: bold;
 }
 .left {
-    float: left;
+  float: left;
 }
 .right {
-    float: right;
+  float: right;
 }
 </style>