Feat(home): month selector
This commit is contained in:
parent
c4dbbeaa82
commit
cd313264af
@ -9,20 +9,21 @@ export default {
|
|||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: {
|
state: {
|
||||||
csv: {},
|
csv: {},
|
||||||
start: moment().subtract(1, 'months'),
|
month: moment(),
|
||||||
end: moment()
|
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
csvs: (state) => {
|
csvs: (state) => {
|
||||||
// return array of csv filename
|
// return array of csv filename
|
||||||
return Object.values(state.csv).sort((a, b) => {
|
return Object.values(state.csv).sort((a, b) => {
|
||||||
var filenameA=a.filename.toLowerCase(), filenameB=b.filename.toLowerCase();
|
var filenameA=a.filename.toLowerCase(), filenameB=b.filename.toLowerCase()
|
||||||
if (filenameA < filenameB) //sort string ascending
|
if (filenameA < filenameB) {
|
||||||
return -1;
|
return -1
|
||||||
if (filenameA > filenameB)
|
}
|
||||||
return 1;
|
if (filenameA > filenameB) {
|
||||||
return 0; //default return value (no sorting)
|
return 1
|
||||||
});
|
}
|
||||||
|
return 0
|
||||||
|
})
|
||||||
},
|
},
|
||||||
rows: (state) => {
|
rows: (state) => {
|
||||||
// return all data stored in csv deleting duplicates rows
|
// return all data stored in csv deleting duplicates rows
|
||||||
@ -46,18 +47,14 @@ export default {
|
|||||||
// return data with negatives 'Montant'
|
// return data with negatives 'Montant'
|
||||||
return getters.rows.filter(x => x.Montant < 0)
|
return getters.rows.filter(x => x.Montant < 0)
|
||||||
},
|
},
|
||||||
start: (state) => {
|
month: (state) => {
|
||||||
// Start date
|
// month date
|
||||||
return state.start.format(moment.HTML5_FMT.DATE)
|
return state.month
|
||||||
},
|
|
||||||
end: (state) => {
|
|
||||||
// End date
|
|
||||||
return state.end.format(moment.HTML5_FMT.DATE)
|
|
||||||
},
|
},
|
||||||
date_filter_rows: (state, getters) => {
|
date_filter_rows: (state, getters) => {
|
||||||
// return rows filtered by date
|
// return rows filtered by date
|
||||||
return getters.spending_rows.filter(x => {
|
return getters.spending_rows.filter(x => {
|
||||||
return (x.Date >= state.start) & (x.Date < state.end)
|
return moment(x.Date).isSame(state.month, 'month')
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
tag_filter_rows: (state, getters) => (tags, invert) => {
|
tag_filter_rows: (state, getters) => (tags, invert) => {
|
||||||
@ -111,11 +108,8 @@ export default {
|
|||||||
SET_DATA: (state, { filename, data }) => {
|
SET_DATA: (state, { filename, data }) => {
|
||||||
Vue.set(state.csv, filename, data)
|
Vue.set(state.csv, filename, data)
|
||||||
},
|
},
|
||||||
SET_START: (state, { start }) => {
|
SET_MONTH: (state, { month }) => {
|
||||||
state.start = start
|
state.month = month
|
||||||
},
|
|
||||||
SET_END: (state, { end }) => {
|
|
||||||
state.end = end
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
@ -171,11 +165,13 @@ export default {
|
|||||||
{ filename: filename, data: parsed }
|
{ filename: filename, data: parsed }
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
set_start (context, start) {
|
next_month (context) {
|
||||||
context.commit('SET_START', { start: moment(start) })
|
var next = moment(context.getters.month).add(1, 'months')
|
||||||
|
context.commit('SET_MONTH', { month: next })
|
||||||
|
},
|
||||||
|
prev_month (context) {
|
||||||
|
var prev = moment(context.getters.month).subtract(1, 'months')
|
||||||
|
context.commit('SET_MONTH', { month: prev })
|
||||||
},
|
},
|
||||||
set_end (context, end) {
|
|
||||||
context.commit('SET_END', { end: moment(end) })
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,17 +4,15 @@
|
|||||||
<div class="analysis" v-if="datas_present">
|
<div class="analysis" v-if="datas_present">
|
||||||
<b-container fluid>
|
<b-container fluid>
|
||||||
<b-row class="date-selector">
|
<b-row class="date-selector">
|
||||||
<b-form-input type="month" value="2018-12" @input="set_month"></b-form-input>
|
<b-button @click="prev_month" variant="link">
|
||||||
<!--
|
<font-awesome-icon icon="angle-left" class="fa" />
|
||||||
<b-col sm="1"><label for="start"> Entre </label> </b-col>
|
</b-button>
|
||||||
<b-col sm="3">
|
<span class="text-muted btn" disabled="true">
|
||||||
<b-form-input id="start" type="date" :value="start" @input="set_start"></b-form-input>
|
{{ month.format('MMMM YYYY') }}
|
||||||
</b-col>
|
</span>
|
||||||
<b-col sm="1"><label for="end"> et </label></b-col>
|
<b-button @click="next_month" variant="link">
|
||||||
<b-col sm="3">
|
<font-awesome-icon icon="angle-right" class="fa" />
|
||||||
<b-form-input id="end" type="date" :value="end" @input="set_end"></b-form-input>
|
</b-button>
|
||||||
</b-col>
|
|
||||||
-->
|
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
|
|
||||||
@ -58,6 +56,8 @@ import box from '../components/box'
|
|||||||
import tagsComparison from '../components/tags_comparison'
|
import tagsComparison from '../components/tags_comparison'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
|
||||||
|
moment.locale('fr')
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'home',
|
name: 'home',
|
||||||
components: {
|
components: {
|
||||||
@ -97,27 +97,21 @@ export default {
|
|||||||
'csvs': 'datas/csvs',
|
'csvs': 'datas/csvs',
|
||||||
'tag_filter_rows': 'datas/tag_filter_rows',
|
'tag_filter_rows': 'datas/tag_filter_rows',
|
||||||
'datas_present': 'datas/present',
|
'datas_present': 'datas/present',
|
||||||
'start': 'datas/start',
|
'month': 'datas/month',
|
||||||
'end': 'datas/end',
|
|
||||||
'tags': 'config/tags'
|
'tags': 'config/tags'
|
||||||
}),
|
}),
|
||||||
filtered_rows () {
|
filtered_rows () {
|
||||||
return this.tag_filter_rows(this.tags_filter)
|
return this.tag_filter_rows(this.tags_filter)
|
||||||
}
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions('datas', [
|
...mapActions('datas', [
|
||||||
'set_start',
|
'next_month',
|
||||||
'set_end'
|
'prev_month',
|
||||||
]),
|
]),
|
||||||
set_tags_filter (tagnames) {
|
set_tags_filter (tagnames) {
|
||||||
this.tags_filter = tagnames
|
this.tags_filter = tagnames
|
||||||
},
|
},
|
||||||
set_month (month) {
|
|
||||||
this.set_start(moment(month).startOf("month").toDate())
|
|
||||||
this.set_end(moment(month).endOf("month").toDate())
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user