From 1f6fae471cc3b5dd9a58959565c721af90f4fde6 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Wed, 27 Jan 2021 00:40:28 +0800 Subject: [PATCH] support changing date in statistics page --- src/locales/en.js | 4 +- src/locales/zh_Hans.js | 4 +- src/store/index.js | 20 ++- src/views/mobile/statistics/Transaction.vue | 137 ++++++++++++++++++-- 4 files changed, 145 insertions(+), 20 deletions(-) diff --git a/src/locales/en.js b/src/locales/en.js index 603b432f..48e41491 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -10,9 +10,11 @@ export default { 'format': { 'date': { 'long': 'MM/DD/YYYY', + 'short': 'M/D/YYYY', 'year': 'YYYY', 'yearMonth': 'YYYY-M', - 'monthDay': 'M/D' + 'monthDay': 'M/D', + 'shortMonthDay': 'M/D' }, 'datetime': { 'long': 'MM/DD/YYYY HH:mm:ss', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index 985c0371..f60ec373 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -10,9 +10,11 @@ export default { 'format': { 'date': { 'long': 'YYYY年MM月DD日', + 'short': 'YYYY-M-D', 'year': 'YYYY年', 'yearMonth': 'YYYY年M月', - 'monthDay': 'M月D日' + 'monthDay': 'M月D日', + 'shortMonthDay': 'M-D' }, 'datetime': { 'long': 'YYYY年MM月DD日 HH:mm:ss', diff --git a/src/store/index.js b/src/store/index.js index 51fc07fc..c013cf0f 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -178,8 +178,9 @@ const stores = { transactionOverview: {}, transactionOverviewStateInvalid: true, transactionStatisticsFilter: { - startTime: -1, - endTime: -1, + dateType: datetimeConstants.allDateRanges.ThisMonth.type, + startTime: 0, + endTime: 0, chartType: statisticsConstants.defaultChartType, chartDataType: statisticsConstants.defaultChartDataType, }, @@ -236,8 +237,9 @@ const stores = { state.transactionOverview = {}; state.transactionOverviewStateInvalid = true; - state.transactionStatisticsFilter.startTime = -1; - state.transactionStatisticsFilter.endTime = -1; + state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type; + state.transactionStatisticsFilter.startTime = 0; + state.transactionStatisticsFilter.endTime = 0; state.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType; state.transactionStatisticsFilter.chartDataType = statisticsConstants.defaultChartDataType; state.transactionStatistics = {}; @@ -794,6 +796,12 @@ const stores = { state.transactionStatistics = statistics; }, [INIT_TRANSACTION_STATISTICS_FILTER] (state, filter) { + if (filter && utils.isNumber(filter.dateType)) { + state.transactionStatisticsFilter.dateType = filter.dateType; + } else { + state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type; + } + if (filter && utils.isNumber(filter.startTime)) { state.transactionStatisticsFilter.startTime = filter.startTime; } else { @@ -819,6 +827,10 @@ const stores = { } }, [UPDATE_TRANSACTION_STATISTICS_FILTER] (state, filter) { + if (filter && utils.isNumber(filter.dateType)) { + state.transactionStatisticsFilter.dateType = filter.dateType; + } + if (filter && utils.isNumber(filter.startTime)) { state.transactionStatisticsFilter.startTime = filter.startTime; } diff --git a/src/views/mobile/statistics/Transaction.vue b/src/views/mobile/statistics/Transaction.vue index 6cca5af3..f1d9b5d3 100644 --- a/src/views/mobile/statistics/Transaction.vue +++ b/src/views/mobile/statistics/Transaction.vue @@ -28,13 +28,13 @@ - + - {{ query | dateRange }} + {{ dateRangeName(query) }} - + @@ -44,6 +44,32 @@ {{ $t('Bar Chart') }} + + + + + +
+ {{ query.startTime | moment($t('format.datetime.long-without-second')) }} +  -  +
+ {{ query.endTime | moment($t('format.datetime.long-without-second')) }} +
+ + + + + + @@ -52,7 +78,9 @@ export default { data() { return { loading: true, - showChartDataTypePopover: false + showChartDataTypePopover: false, + showDatePopover: false, + showCustomDateRangeSheet: false }; }, computed: { @@ -98,6 +126,9 @@ export default { }, ]; }, + allDateRanges() { + return this.$constants.datetime.allDateRanges; + }, statisticsData() { const self = this; const combinedData = {}; @@ -302,14 +333,13 @@ export default { const self = this; const router = self.$f7router; - if (self.query.startTime < 0 || self.query.endTime < 0) { - const dateParam = self.$utilities.getDateRangeByDateType(self.$constants.datetime.allDateRanges.ThisMonth.type); + const dateParam = self.$utilities.getDateRangeByDateType(self.query.dateType); - self.$store.dispatch('updateTransactionStatisticsFilter', { - startTime: dateParam.minTime, - endTime: dateParam.maxTime - }); - } + self.$store.dispatch('initTransactionStatisticsFilter', { + dateType: dateParam ? dateParam.dateType : undefined, + startTime: dateParam ? dateParam.minTime : undefined, + endTime: dateParam ? dateParam.maxTime : undefined, + }); Promise.all([ self.$store.dispatch('loadAllAccounts', { force: false }), @@ -360,6 +390,88 @@ export default { }); this.showChartDataTypePopover = false; }, + setDateFilter(dateType) { + if (dateType === this.$constants.datetime.allDateRanges.Custom.type) { // Custom + this.showCustomDateRangeSheet = true; + this.showDatePopover = false; + return; + } else if (this.query.dateType === dateType) { + return; + } + + const dateParam = this.$utilities.getDateRangeByDateType(dateType); + + if (!dateParam) { + return; + } + + this.$store.dispatch('updateTransactionStatisticsFilter', { + dateType: dateParam.dateType, + startTime: dateParam.minTime, + endTime: dateParam.maxTime + }); + + this.showDatePopover = false; + this.reload(null); + }, + setCustomDateFilter(startTime, endTime) { + if (!startTime || !endTime) { + return; + } + + this.$store.dispatch('updateTransactionStatisticsFilter', { + dateType: this.$constants.datetime.allDateRanges.Custom.type, + startTime: startTime, + endTime: endTime + }); + + this.showCustomDateRangeSheet = false; + + this.reload(null); + }, + backwardDateRange(startTime, endTime) { + this.$store.dispatch('updateTransactionStatisticsFilter', { + dateType: this.$constants.datetime.allDateRanges.Custom.type, + startTime: startTime - (endTime - startTime), + endTime: startTime - 1 + }); + + this.reload(null); + }, + forwardDateRange(startTime, endTime) { + this.$store.dispatch('updateTransactionStatisticsFilter', { + dateType: this.$constants.datetime.allDateRanges.Custom.type, + startTime: endTime + 1, + endTime: endTime + (endTime - startTime) + }); + + this.reload(null); + }, + dateRangeName(query) { + if (query.dateType === this.allDateRanges.All.type) { + return this.$t(this.allDateRanges.All.name); + } + + for (let dateRangeField in this.allDateRanges) { + if (!Object.prototype.hasOwnProperty.call(this.allDateRanges, dateRangeField)) { + continue; + } + + const dateRange = this.allDateRanges[dateRangeField]; + + if (dateRange && dateRange.type !== this.allDateRanges.Custom.type && dateRange.type === query.dateType && dateRange.name) { + return this.$t(dateRange.name); + } + } + + const startTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.startTime)); + const endTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.endTime)); + + const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.date.short')); + const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t(startTimeYear !== endTimeYear ? 'format.date.short' : 'format.date.shortMonthDay')); + + return `${displayStartTime} ~ ${displayEndTime}`; + }, skeletonChart() { const skeletonChartData = { series: [{ @@ -428,9 +540,6 @@ export default { } return 'Statistics'; - }, - dateRange() { - return 'Date'; } } };