Feat(Categories): Show categories no filter yet

config/config.yml

@@ -1,5 +1,12 @@
 ---
-tags:
+categories:
+  tout:
+    name: Tout
+    variant: info
+    icon: file-invoice-dollar
+    color: '#78e08f'
+    words: []
+
   cash:
     name: Cash
     variant: info
@@ -26,6 +33,25 @@ tags:
       - PAIEMENT
       - RETRAIT
 
+tags:
+  cash:
+    name: Cash
+    variant: info
+    icon: money-bill-wave
+    color: '#78e08f'
+    words:
+      - RETRAIT
+
+  virements:
+    name: Virements
+    variant: info
+    icon: directions
+    invert: true
+    color: "#f6b93b"
+    words:
+      - PAIEMENT
+      - RETRAIT
+
   autoroute:
     name: Autoroute
     variant: danger

src/components/box.vue

@@ -1,85 +0,0 @@
-<template>
-  <b-card v-if="tag"
-          :bg-variant="tag.variant"
-          text-variant="white"
-          class="text-center">
-    <div class="card-text">
-        <div class="icon">
-          <font-awesome-icon :icon="tag.icon" class="fa-3x"/>
-        </div>
-        <div class="amount">
-          <h3>{{ total() }}€</h3>
-          {{ tag.name }}
-        </div>
-    </div>
-  </b-card>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { total } from '../libs/data_processing'
-export default {
-  name: 'box',
-  props: [
-    'tagname',
-    'rows'
-  ],
-  data () {
-    return {
-      default_tag: {
-        name: 'Tout',
-        variant: 'info',
-        icon: 'file-invoice-dollar'
-      }
-    }
-  },
-  computed: {
-    ...mapGetters('config', [
-      'tags'
-    ]),
-    ...mapGetters('datas', [
-      'tag_filter_rows'
-    ]),
-    tag () {
-      if (this.tagname) {
-        return this.tags[this.tagname]
-      } else {
-        return this.default_tag
-      }
-    }
-  },
-  methods: {
-    filter_rows () {
-      if (this.tag === this.default_tag) {
-        return this.tag_filter_rows([])
-      } else {
-        return this.tag_filter_rows([this.tag.name])
-      }
-    },
-    total () {
-      return total(this.filter_rows())
-    },
-    count () {
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-.card-body {
-  padding: 10px;
-}
-.card-text {
-  display: flex;
-}
-.icon {
-  flex: 40%;
-  align-self: center;
-}
-.amount {
-  flex: 50%;
-  text-align: right;
-  margin-left: 10px;
-}
-</style>

src/components/tag_config.vue

@@ -1,117 +0,0 @@
-<template>
-  <div>
-    <div v-if="edit_mode" class="tag">
-      <div class="icon">
-        <font-awesome-icon :icon="edited_tag.icon" class="fa-2x"/>
-          <!--
-        Icône inconnue
-          -->
-
-      </div>
-      <div class="description">
-        <b-form-input type="text" v-model="edited_tag.name"></b-form-input>
-        <b-form-input type="text" v-model="edited_tag.icon"></b-form-input>
-        <b-form-input type="color" v-model="edited_tag.color"></b-form-input>
-      </div>
-      <div class="actions">
-        <b-button-group vertical v-if="editable">
-          <b-button @click="save()" >Sauver</b-button>
-          <b-button @click="toggleEdit()">Annuler</b-button>
-        </b-button-group>
-      </div>
-    </div>
-    <div v-else class="tag">
-      <div class="icon">
-        <font-awesome-icon :style="{ color: tag.color}" :icon="tag.icon" class="fa-2x"/>
-      </div>
-      <div class="description">
-        <h4>{{ tag.name }}</h4>
-
-        Mots clés<span v-if="tag.invert"> (tout sauf)</span>: {{ tag.words.join(" - ") }}
-      </div>
-      <div class="actions">
-      <!--
-        <b-button-group vertical v-if="editable">
-          <b-button @click="toggleEdit()">Editer</b-button>
-          <b-button>Supprimer</b-button>
-        </b-button-group>
-      -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapActions } from 'vuex'
-export default {
-  name: 'tagConfig',
-  props: [
-    'tagname'
-  ],
-  data () {
-    return {
-      default_tag: {
-        name: 'Tout',
-        variant: 'info',
-        icon: 'file-invoice-dollar'
-      },
-      edit_mode: false,
-      edited_tag: {}
-    }
-  },
-  computed: {
-    ...mapGetters('config', {
-      getTag: 'tag'
-    }),
-    tag () {
-      if (this.tagname) {
-        return this.getTag(this.tagname)
-      } else {
-        return this.default_tag
-      }
-    },
-    editable () {
-      if (this.tagname) {
-        return true
-      } else {
-        return false
-      }
-    }
-  },
-  methods: {
-    ...mapActions('config', [
-      'edit_tag'
-    ]),
-    toggleEdit () {
-      this.edited_tag = { ...this.tag }
-      this.edit_mode = !this.edit_mode
-    },
-    save () {
-      this.edit_tag(this.edited_tag)
-      this.toggleEdit()
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-.tag {
-  display: flex;
-}
-.icon {
-  flex: 10%;
-  align-self: center;
-}
-.description {
-  flex: 80%;
-  text-align: left;
-  align-self: center;
-}
-.actions {
-  flex: 10%;
-  text-align: left;
-  margin-left: 10px;
-  align-self: center;
-}
-</style>

src/store/modules/config.js

@@ -8,7 +8,8 @@ export default {
     data_dir: '/home/lafrite/scripts/comptes/data/',
     config_dir: '/home/lafrite/scripts/comptes/config/',
     config_filename: 'config.yml',
-    tags: {}
+    tags: {},
+    categories: {}
   },
   getters: {
     data_dir: (state) => {
@@ -24,13 +25,23 @@ export default {
       return state.tags
     },
     tag: (state) => (tagname) => {
-        return state.tags[tagname.toLowerCase()]
+      return state.tags[tagname.toLowerCase()]
+    },
+    categories: (state) => {
+      return state.categories
+    },
+    categorie: (state) => (categorieName) => {
+      return state.categories[categorieName.toLowerCase()]
     }
   },
   mutations: {
     SET_TAGS: (state, { tags }) => {
-        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), {})
+    },
+    SET_CATEGORIES: (state, { categories }) => {
+      state.categories = Object.keys(categories)
+        .reduce((c, k) => (c[k.toLowerCase()] = categories[k], c), {})
     }
   },
   actions: {
@@ -44,6 +55,7 @@ export default {
           }
           var parsed = yaml.safeLoad(content, parseConfig)
           context.commit('SET_TAGS', { tags: parsed.tags })
+          context.commit('SET_CATEGORIES', { categories: parsed.categories })
         }
       })
     },

src/views/config.vue

@@ -27,7 +27,13 @@
     <h1>Tags</h1>
     <b-list-group>
       <b-list-group-item v-for="tag in tags">
-        <tag-config :tagname="tag.name"></tag-config>
+        <tag-item :tagname="tag.name"></tag-item>
+      </b-list-group-item>
+    </b-list-group>
+    <h1>Categories</h1>
+    <b-list-group>
+      <b-list-group-item v-for="categorie in categories">
+        <categorie-item :categoriename="categorie.name"></categorie-item>
       </b-list-group-item>
     </b-list-group>
   </div>
@@ -35,13 +41,14 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import { shell } from 'electron'
+import tagItem from '../components/tag_item'
-import tagConfig from '../components/tag_config'
+import categorieItem from '../components/categorie_item'
 
 export default {
   name: 'home',
   components: {
-    'tag-config': tagConfig
+    'tag-item': tagItem,
+    'categorie-item': categorieItem
   },
   data () {
     return {
@@ -54,7 +61,8 @@ export default {
     ...mapGetters({
       'data_dir': 'config/data_dir',
       'csvs': 'datas/csvs',
-      'tags': 'config/tags'
+      'tags': 'config/tags',
+      'categories': 'config/categories'
     })
   },
   methods: {

src/views/home.vue

@@ -20,11 +20,8 @@
             </b-row>
         </b-container>
 
-        <b-card-group deck class="mb-3">
+        <b-card-group deck class="mb-3" v-for="categorie in categories">
-            <box @click.native="set_tags_filter([])"></box>
+            <card-categorie @click.native="set_tag_filter(categorie.words)" :categoriename="categorie.name"></card-categorie>
-            <box @click.native="set_tags_filter(['cash'])" tagname="cash"></box>
-            <box @click.native="set_tags_filter(['cb'])" tagname="cb"></box>
-            <box @click.native="set_tags_filter(['virements'])" tagname="virements"></box>
         </b-card-group>
 
         <tags-comparison></tags-comparison>
@@ -56,7 +53,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import box from '../components/box'
+import cardCategorie from '../components/card_categorie'
 import tagsComparison from '../components/graph_tags_comparison'
 import graphTime from '../components/graph_time'
 import moment from 'moment'
@@ -66,7 +63,7 @@ moment.locale('fr')
 export default {
   name: 'home',
   components: {
-    box: box,
+    cardCategorie: cardCategorie,
     tagsComparison: tagsComparison,
     graphTime: graphTime
   },
@@ -105,7 +102,8 @@ export default {
       'datas_present': 'datas/present',
       'month': 'datas/month',
       'months': 'datas/months',
-      'tags': 'config/tags'
+      'tags': 'config/tags',
+      'categories': 'config/categories'
     }),
     filtered_rows () {
       return this.tag_filter_rows(this.tags_filter)