mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-15 23:47:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

support changing date in statistics page

Browse Source
This commit is contained in:
MaysWind
2021-01-27 00:40:28 +08:00
parent 97a63f884e
commit 1f6fae471c
4 changed files with 145 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en.js
+3 -1
View File
@@ -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',
src/locales/zh_Hans.js
+3 -1
View File
@@ -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',
src/store/index.js
+16 -4
View File
@@ -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;
}
src/views/mobile/statistics/Transaction.vue
+123 -14
View File
@@ -28,13 +28,13 @@
</f7-card>
<f7-toolbar tabbar bottom class="toolbar-item-auto-size">
<f7-link>
<f7-link @click="backwardDateRange(query.startTime, query.endTime)">
<f7-icon f7="arrow_left_square"></f7-icon>
</f7-link>
<f7-link class="tabbar-text-with-ellipsis" popover-open=".date-popover-menu">
<span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ query | dateRange }}</span>
<span :class="{ 'tabbar-item-changed': query.maxTime > 0 || query.minTime > 0 }">{{ dateRangeName(query) }}</span>
</f7-link>
<f7-link>
<f7-link @click="forwardDateRange(query.startTime, query.endTime)">
<f7-icon f7="arrow_right_square"></f7-icon>
</f7-link>
<f7-link class="tabbar-text-with-ellipsis" @click="setChartType($constants.statistics.allChartTypes.Pie)">
@@ -44,6 +44,32 @@
<span :class="{ 'tabbar-item-changed': query.chartType === $constants.statistics.allChartTypes.Bar }">{{ $t('Bar Chart') }}</span>
</f7-link>
</f7-toolbar>
<f7-popover class="date-popover-menu" :opened="showDatePopover"
@popover:opened="showDatePopover = true" @popover:closed="showDatePopover = false">
<f7-list>
<f7-list-item v-for="dateRange in allDateRanges"
:key="dateRange.type"
:title="dateRange.name | localized"
@click="setDateFilter(dateRange.type)">
<f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
<div slot="footer"
v-if="dateRange.type === $constants.datetime.allDateRanges.Custom.type && query.dateType === $constants.datetime.allDateRanges.Custom.type && query.startTime && query.endTime">
<span>{{ query.startTime | moment($t('format.datetime.long-without-second')) }}</span>
<span>&nbsp;-&nbsp;</span>
<br/>
<span>{{ query.endTime | moment($t('format.datetime.long-without-second')) }}</span>
</div>
</f7-list-item>
</f7-list>
</f7-popover>
<date-range-selection-sheet :title="$t('Custom Date Range')"
:show.sync="showCustomDateRangeSheet"
:min-time="query.startTime"
:max-time="query.endTime"
@dateRange:change="setCustomDateFilter">
</date-range-selection-sheet>
</f7-page>
</template>
@@ -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';
}
}
};