Feat(tag): Can modify tags and save it into config.yml

config/config.yml

@@ -1,4 +1,3 @@
----
 categories:
   tout:
     name: Tout
@@ -6,7 +5,6 @@ categories:
     icon: file-invoice-dollar
     color: '#78e08f'
     words: []
-
   cash:
     name: Cash
     variant: info
@@ -14,25 +12,22 @@ categories:
     color: '#78e08f'
     words:
       - RETRAIT
-
-  CB:
+  cb:
     name: CB
     variant: info
     icon: credit-card
-    color: "#4a69bd"
+    color: '#4a69bd'
     words:
       - PAIEMENT
-
   virements:
     name: Virements
     variant: info
     icon: directions
     invert: true
-    color: "#f6b93b"
+    color: '#f6b93b'
     words:
       - PAIEMENT
       - RETRAIT
-
 tags:
   cash:
     name: Cash
@@ -41,31 +36,28 @@ tags:
     color: '#78e08f'
     words:
       - RETRAIT
-
   virements:
     name: Virements
     variant: info
     icon: directions
     invert: true
-    color: "#f6b93b"
+    color: '#f6b93b'
     words:
       - PAIEMENT
       - RETRAIT
-
   autoroute:
     name: Autoroute
     variant: danger
     icon: road
-    color: "#eb2f06"
+    color: '#eb2f06'
     words:
       - AUTOROUTE
       - APRR
-
-  essence: 
+  essence:
     name: Essence
     variant: danger
     icon: charging-station
-    color: "#0c2461"
+    color: '#0c2461'
     words:
       - CARBU
       - TOTAL
@@ -75,20 +67,18 @@ tags:
       - ESSO
       - BELLEGARDE SU CARREFOUR
       - ST CLAUDE CASINOCARB
-
   train:
     name: train
     variant: danger
     icon: train
-    color: "#eb2f06"
+    color: '#eb2f06'
     words:
       - SNCF
-
-  courses: 
+  courses:
     name: Courses
     variant: warning
     icon: shopping-cart
-    color: "#665191"
+    color: '#665191'
     words:
       - BIOCOOP
       - LA VIE CLAIRE

src/store/modules/config.js

@@ -1,4 +1,4 @@
-import { readFile } from 'fs'
+import { readFile, writeFile } from 'fs'
 import Vue from 'vue'
 import path from 'path'
 import yaml from 'js-yaml'
@@ -50,6 +50,7 @@ export default {
   },
   actions: {
     load (context) {
+      // load config file
       readFile(path.join(context.getters.config_dir, context.getters.config_filename), 'utf8', (err, content) => {
         if (err) {
           console.log(err)
@@ -63,8 +64,22 @@ export default {
         }
       })
     },
+    save (context) {
+      // save config file
+      var config = {
+        categories: context.state.categories,
+        tags: context.state.tags,
+      }
+      var yamlConfig = yaml.safeDump(config)
+      writeFile(path.join(context.getters.config_dir, context.getters.config_filename), yamlConfig, (err) => {
+        if (err) throw err
+        console.log('The file has been saved!')
+      })
+
+    },
     edit_tag (context, tag) {
       context.commit('APPEND_TAG', { tag: tag })
-    }
+      context.dispatch('save')
+    },
   }
 }

src/views/config.vue

@@ -2,12 +2,14 @@
   <div class="tags">
     <h1>
         Fichiers CSV
-        <b-button @click="reload_csvs">
-            <font-awesome-icon icon="sync-alt" class="fa" />
-        </b-button>
     </h1>
     <p>
-        Les fichiers csv sont cherché dans <span class="datadir">{{ data_dir }}</span> 
+        <b-button @click="reload_csvs" size="sm">
+            <font-awesome-icon icon="sync-alt" class="fa" /> Recharger
+        </b-button>
+    </p>
+    <p>
+        Les fichiers csv sont cherchés dans <span class="dir">{{ data_dir }}</span>
         <!--
           <b-button variant="link" @click="open_filebrowser(data_dir)"> Ouvrir <font-awesome-icon icon="folder-open" class="fa"/></b-button> 
         -->
@@ -24,13 +26,24 @@
           </b-list-group-item>
         </b-list-group>
     </p>
-    <h1>Tags</h1>
+    <h1>
+        Config
+    </h1>
+    <p>
+        <b-button @click="reload_config" size="sm">
+            <font-awesome-icon icon="sync-alt" class="fa" /> Recharger
+        </b-button>
+    <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 v-for="tag in tags">
         <tag-item :tagname="tag.name"></tag-item>
       </b-list-group-item>
     </b-list-group>
-    <h1>Categories</h1>
+    <h2>Categories</h2>
     <b-list-group>
       <b-list-group-item v-for="categorie in categories">
         <categorie-item :categoriename="categorie.name"></categorie-item>
@@ -60,6 +73,8 @@ export default {
   computed: {
     ...mapGetters({
       'data_dir': 'config/data_dir',
+      'config_dir': 'config/config_dir',
+      'config_filename': 'config/config_filename',
       'csvs': 'datas/csvs',
       'tags': 'config/tags',
       'categories': 'config/categories'
@@ -69,6 +84,10 @@ export default {
     ...mapActions('datas', {
         'reload_csvs': 'load_csvs'
     }),
+    ...mapActions('config', {
+        'reload_config': 'load',
+        'save_config': 'save'
+    }),
     open_filebrowser (dir) {
       console.log("plop")
     }
@@ -77,7 +96,7 @@ export default {
 </script>
 
 <style scoped>
-.datadir {
+.dir {
   font-weight: bold;
 }
 .left {