Feat(Categories): Show categories no filter yet
This commit is contained in:
parent
22fc1a9b48
commit
66082aaa45
@ -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
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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)
|
||||
.reduce((c, k) => (c[k.toLowerCase()] = tags[k], c), {})
|
||||
state.tags = Object.keys(tags)
|
||||
.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 })
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -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 tagConfig from '../components/tag_config'
|
||||
import tagItem from '../components/tag_item'
|
||||
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: {
|
||||
|
||||
@ -20,11 +20,8 @@
|
||||
</b-row>
|
||||
</b-container>
|
||||
|
||||
<b-card-group deck class="mb-3">
|
||||
<box @click.native="set_tags_filter([])"></box>
|
||||
<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 deck class="mb-3" v-for="categorie in categories">
|
||||
<card-categorie @click.native="set_tag_filter(categorie.words)" :categoriename="categorie.name"></card-categorie>
|
||||
</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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user