gh-mirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-12-23 03:31:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild frontend.

Browse Source
This commit is contained in:
James Cole
2021-04-17 20:53:42 +02:00
parent 0a4e3edf43
commit 1a311664e8
70 changed files with 639 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

375
frontend/src/components/dashboard/Calendar.vue
View File

@@ -46,7 +46,8 @@
class="btn btn-secondary"
@click="resetDate"
><i class="fas fa-history"></i></button>
<button id="dropdownMenuButton" :title="$t('firefly.select_period')" aria-expanded="false" aria-haspopup="true" class="btn btn-secondary dropdown-toggle"
<button id="dropdownMenuButton" :title="$t('firefly.select_period')" aria-expanded="false" aria-haspopup="true"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
type="button">
<i class="fas fa-list"></i>
@@ -78,8 +79,19 @@
import {createNamespacedHelpers} from "vuex";
import Vue from "vue";
import DatePicker from "v-calendar/lib/components/date-picker.umd";
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('dashboard/index')
import subDays from 'date-fns/subDays'
import addDays from 'date-fns/addDays'
import startOfDay from 'date-fns/startOfDay'
import endOfDay from 'date-fns/endOfDay'
import startOfWeek from 'date-fns/startOfWeek'
import endOfWeek from 'date-fns/endOfWeek'
import format from 'date-fns/format'
import startOfQuarter from 'date-fns/startOfQuarter';
import endOfQuarter from 'date-fns/endOfQuarter';
import subQuarters from 'date-fns/subQuarters';
import addQuarters from 'date-fns/addQuarters';
const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('dashboard/index')
Vue.component('date-picker', DatePicker)
@@ -130,16 +142,89 @@ export default {
this.generatePeriods()
return false;
},
generatePeriods: function () {
this.periods = [];
// create periods.
let today;
let end;
generateDaily: function () {
let today = new Date(this.range.start);
// yesterday
this.periods.push(
{
start: startOfDay(subDays(today, 1)).toDateString(),
end: endOfDay(subDays(today, 1)).toDateString(),
title: new Intl.DateTimeFormat(this.locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(subDays(today, 1))
}
);
today = new Date(this.range.start);
// today
this.periods.push(
{
start: startOfDay(today).toDateString(),
end: endOfDay(today).toDateString(),
title: new Intl.DateTimeFormat(this.locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(today)
}
);
// tomorrow:
this.periods.push(
{
start: startOfDay(addDays(today, 1)).toDateString(),
end: endOfDay(addDays(today, 1)).toDateString(),
title: new Intl.DateTimeFormat(this.locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(addDays(today, 1))
}
);
// The Day After Tomorrow dun-dun-dun!
this.periods.push(
{
start: startOfDay(addDays(today, 2)).toDateString(),
end: endOfDay(addDays(today, 2)).toDateString(),
title: new Intl.DateTimeFormat(this.locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(addDays(today, 2))
}
);
},
generateWeekly: function () {
let today = new Date(this.range.start);
let start = startOfDay(startOfWeek(subDays(today, 7), {weekStartsOn: 1}));
let end = endOfDay(endOfWeek(subDays(today, 7), {weekStartsOn: 1}));
let dateFormat = this.$t('config.week_in_year_fns');
let title = format(start, dateFormat);
// last week
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// this week
start = startOfDay(startOfWeek(today, {weekStartsOn: 1}));
end = endOfDay(endOfWeek(today, {weekStartsOn: 1}));
title = format(start, dateFormat);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// next week
start = startOfDay(startOfWeek(addDays(today, 7), {weekStartsOn: 1}));
end = endOfDay(endOfWeek(addDays(today, 7), {weekStartsOn: 1}));
title = format(start, dateFormat);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
},
generateMonthly: function () {
let today = new Date(this.range.start);
// previous month
firstDayOfMonth = new Date(today.getFullYear(), today.getMonth()-1, 1);
firstDayOfMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
lastDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 0);
this.periods.push(
{
@@ -151,7 +236,7 @@ export default {
// this month
firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
lastDayOfMonth = new Date(today.getFullYear(), today.getMonth()+1, 0);
lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
this.periods.push(
{
start: firstDayOfMonth.toDateString(),
@@ -161,8 +246,8 @@ export default {
);
// next month
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth()+1, 1);
let lastDayOfMonth = new Date(today.getFullYear(), today.getMonth()+2, 0);
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
let lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 2, 0);
this.periods.push(
{
start: firstDayOfMonth.toDateString(),
@@ -171,9 +256,271 @@ export default {
}
);
},
generateQuarterly: function () {
let today = new Date(this.range.start);
// last quarter
let start = startOfDay(startOfQuarter(subQuarters(today, 1)));
let end = endOfDay(endOfQuarter(subQuarters(today, 1)));
let dateFormat = this.$t('config.quarter_fns');
let title = format(start, dateFormat);
// last week
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// this quarter
start = startOfDay(startOfQuarter(today));
end = endOfDay(endOfQuarter(today));
title = format(start, dateFormat);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// next quarter
start = startOfDay(startOfQuarter(addQuarters(today, 1)));
end = endOfDay(endOfQuarter(addQuarters(today, 1)));
title = format(start, dateFormat);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
},
generateHalfYearly: function () {
let today = new Date(this.range.start);
let start;
let end;
let title = 'todo';
let half = 1;
// its currently first half of year:
if (today.getMonth() <= 5) {
// previous year, last half:
start = today;
start.setFullYear(start.getFullYear() - 1);
start.setMonth(6);
start.setDate(1);
start = startOfDay(start);
end = start;
end.setMonth(11);
end.setDate(31);
end = endOfDay(end);
half = 2;
title = format(start, this.$t('config.half_year_fns', {half: half}));
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// this year, first half:
start = today;
start.setMonth(0);
start.setDate(1);
start = startOfDay(start);
end = today;
end.setMonth(5);
end.setDate(30);
end = endOfDay(start);
half = 1;
title = format(start, this.$t('config.half_year_fns', {half: half}));
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// this year, second half:
start = today;
start.setMonth(6);
start.setDate(1);
start = startOfDay(start);
end = start;
end.setMonth(11);
end.setDate(31);
end = endOfDay(end);
half = 2;
title = format(start, this.$t('config.half_year_fns', {half: half}));
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
return;
}
// this year, first half:
start = today;
start.setMonth(0);
start.setDate(1);
start = startOfDay(start);
end = start;
end.setMonth(5);
end.setDate(30);
end = endOfDay(end);
half = 1;
title = format(start, this.$t('config.half_year_fns', {half: half}));
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// this year, second half:
start = today;
start.setMonth(6);
start.setDate(1);
start = startOfDay(start);
end = today;
end.setMonth(11);
end.setDate(31);
end = endOfDay(start);
half = 2;
title = format(start, this.$t('config.half_year_fns', {half: half}));
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
// next year, first half:
start = today;
start.setMonth(0);
start.setDate(1);
start = startOfDay(start);
end = start;
end.setMonth(5);
end.setDate(30);
end = endOfDay(end);
half = 1;
title = format(start, this.$t('config.half_year_fns', {half: half}));
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: title
}
);
},
generateYearly: function () {
let today = new Date(this.range.start);
let start;
let end;
let title;
// last year
start = new Date(today);
start.setFullYear(start.getFullYear() - 1);
start.setMonth(0);
start.setDate(1);
start = startOfDay(start);
end = new Date(today);
end.setFullYear(end.getFullYear() - 1);
end.setMonth(11);
end.setDate(31);
end = endOfDay(end);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: start.getFullYear()
}
);
// this year
start = new Date(today);
start.setMonth(0);
start.setDate(1);
start = startOfDay(start);
end = new Date(today);
end.setMonth(11);
end.setDate(31);
end = endOfDay(end);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: start.getFullYear()
}
);
// next year
start = new Date(today);
start.setFullYear(start.getFullYear() + 1);
start.setMonth(0);
start.setDate(1);
start = startOfDay(start);
end = new Date(today);
end.setFullYear(end.getFullYear() + 1);
end.setMonth(11);
end.setDate(31);
end = endOfDay(end);
this.periods.push(
{
start: start.toDateString(),
end: end.toDateString(),
title: start.getFullYear()
}
);
},
generatePeriods: function () {
this.periods = [];
//console.log('The view range is "' + this.viewRange + '".');
switch (this.viewRange) {
case '1D':
this.generateDaily();
break;
case '1W':
this.generateWeekly();
break;
case '1M':
this.generateMonthly();
break;
case '3M':
this.generateQuarterly();
break;
case '6M':
this.generateHalfYearly();
break;
case '1Y':
this.generateYearly();
break;
}
// last 7 days
today = new Date;
end = new Date;
let today = new Date;
let end = new Date;
end.setDate(end.getDate() - 7);
this.periods.push(
{

52
frontend/src/components/store/modules/dashboard/index.js vendored
View File

@@ -24,7 +24,6 @@ const state = () => (
viewRange: 'default',
start: null,
end: null,
// default range:
defaultStart: null,
defaultEnd: null,
}
@@ -53,24 +52,32 @@ const getters = {
// actions
const actions = {
initialiseStore(context) {
if ('default' === context.state.viewRange) {
axios.get('./api/v1/preferences/viewRange')
.then(response => {
let viewRange = response.data.data.attributes.data;
context.commit('setViewRange', viewRange);
// call another action:
// console.log('initialiseStore');
// restore from local storage:
context.dispatch('restoreViewRange');
axios.get('./api/v1/preferences/viewRange')
.then(response => {
let viewRange = response.data.data.attributes.data;
let oldViewRange = context.getters.viewRange;
context.commit('setViewRange', viewRange);
if (viewRange !== oldViewRange) {
// console.log('View range changed from "' + oldViewRange + '" to "' + viewRange + '"');
context.dispatch('setDatesFromViewRange');
}
).catch(error => {
// console.log(error);
context.commit('setViewRange', '1M');
// call another action:
context.dispatch('setDatesFromViewRange');
});
}
if(viewRange === oldViewRange) {
// console.log('Restore view range dates');
context.dispatch('restoreViewRangeDates');
}
}
).catch(() => {
context.commit('setViewRange', '1M');
context.dispatch('setDatesFromViewRange');
});
},
setDatesFromViewRange(context) {
// console.log('Must set dates from viewRange "' + context.state.viewRange + '"');
restoreViewRangeDates: function(context) {
// check local storage first?
if (localStorage.viewRangeStart) {
// console.log('view range start set from local storage.');
@@ -91,10 +98,16 @@ const actions = {
// console.log(localStorage.viewRangeDefaultEnd);
context.commit('setDefaultEnd', new Date(localStorage.viewRangeDefaultEnd));
}
if (null !== context.getters.end && null !== context.getters.start) {
return;
},
restoreViewRange: function (context) {
// console.log('restoreViewRange');
let viewRange = localStorage.getItem('viewRange');
if (null !== viewRange) {
// console.log('restored restoreViewRange ' + viewRange );
context.commit('setViewRange', viewRange);
}
},
setDatesFromViewRange(context) {
let start;
let end;
let viewRange = context.getters.viewRange;
@@ -206,6 +219,7 @@ const mutations = {
},
setViewRange(state, range) {
state.viewRange = range;
window.localStorage.setItem('viewRange', range);
}
}