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

support modifying statistics page default settings

Browse Source
This commit is contained in:
MaysWind
2021-01-31 22:57:13 +08:00
parent 088170edb3
commit 989a754fe3
9 changed files with 222 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/Settings.vue
+2
View File
@@ -68,6 +68,8 @@
<f7-toggle :checked="showAccountBalance" @toggle:change="showAccountBalance = $event"></f7-toggle>
</f7-list-item>
<f7-list-item :title="$t('Statistics Settings')" link="/statistic/settings"></f7-list-item>
<f7-list-item>
<span>{{ $t('Enable Animate') }}</span>
<f7-toggle :checked="isEnableAnimate" @toggle:change="isEnableAnimate = $event"></f7-toggle>
src/views/mobile/statistics/Settings.vue
+116
View File
@@ -0,0 +1,116 @@
<template>
<f7-page>
<f7-navbar :title="$t('Statistics Settings')" :back-link="$t('Back')"></f7-navbar>
<f7-card>
<f7-card-content class="no-safe-areas" :padding="false">
<f7-list>
<f7-list-item
:title="$t('Default Chart Type')"
smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
<select v-model="defaultChartType">
<option :value="$constants.statistics.allChartTypes.Pie">{{ $t('Pie Chart') }}</option>
<option :value="$constants.statistics.allChartTypes.Bar">{{ $t('Bar Chart') }}</option>
</select>
</f7-list-item>
<f7-list-item
:title="$t('Default Chart Data Type')"
smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
<select v-model="defaultChartDataType">
<option v-for="chartDataType in allChartDataTypes"
:key="chartDataType.type"
:value="chartDataType.type">{{ chartDataType.name | localized }}</option>
</select>
</f7-list-item>
<f7-list-item
:title="$t('Default Date Range')"
smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
<select v-model="defaultDateRange">
<option v-for="dateRange in allDateRanges"
:key="dateRange.type"
:value="dateRange.type">{{ dateRange.name | localized }}</option>
</select>
</f7-list-item>
</f7-list>
</f7-card-content>
</f7-card>
</f7-page>
</template>
<script>
export default {
computed: {
allChartDataTypes() {
return [
{
type: this.$constants.statistics.allChartDataTypes.ExpenseByAccount,
name: 'Expense By Account'
},
{
type: this.$constants.statistics.allChartDataTypes.ExpenseByPrimaryCategory,
name: 'Expense By Primary Category'
},
{
type: this.$constants.statistics.allChartDataTypes.ExpenseBySecondaryCategory,
name: 'Expense By Secondary Category'
},
{
type: this.$constants.statistics.allChartDataTypes.IncomeByAccount,
name: 'Income By Account'
},
{
type: this.$constants.statistics.allChartDataTypes.IncomeByPrimaryCategory,
name: 'Income By Primary Category'
},
{
type: this.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory,
name: 'Income By Secondary Category'
},
];
},
allDateRanges() {
const allDateRanges = [];
for (let dateRangeField in this.$constants.datetime.allDateRanges) {
if (!Object.prototype.hasOwnProperty.call(this.$constants.datetime.allDateRanges, dateRangeField)) {
continue;
}
const dateRangeType = this.$constants.datetime.allDateRanges[dateRangeField];
if (dateRangeType.type !== this.$constants.datetime.allDateRanges.Custom.type) {
allDateRanges.push(dateRangeType);
}
}
return allDateRanges;
},
defaultChartType: {
get: function () {
return this.$settings.getStatisticsDefaultChartType();
},
set: function (value) {
this.$settings.setStatisticsDefaultChartType(value);
}
},
defaultChartDataType: {
get: function () {
return this.$settings.getStatisticsDefaultChartDataType();
},
set: function (value) {
this.$settings.setStatisticsDefaultChartDataType(value);
}
},
defaultDateRange: {
get: function () {
return this.$settings.getStatisticsDefaultDateRange();
},
set: function (value) {
this.$settings.setStatisticsDefaultDateRange(value);
}
}
}
};
</script>
src/views/mobile/statistics/Transaction.vue
+44 -3
View File
@@ -1,5 +1,5 @@
<template>
<f7-page ptr @ptr:refresh="reload">
<f7-page ptr @ptr:refresh="reload" @page:afterin="onPageAfterIn">
<f7-navbar>
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
<f7-nav-title>
@@ -8,6 +8,9 @@
<f7-icon size="14px" :f7="showChartDataTypePopover ? 'arrowtriangle_up_fill' : 'arrowtriangle_down_fill'"></f7-icon>
</f7-link>
</f7-nav-title>
<f7-nav-right>
<f7-link icon-f7="ellipsis" @click="showMoreActionSheet = true"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-popover class="chart-data-type-popover-menu" :opened="showChartDataTypePopover"
@@ -213,6 +216,15 @@
:max-time="query.endTime"
@dateRange:change="setCustomDateFilter">
</date-range-selection-sheet>
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button @click="settings">{{ $t('Settings') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
</f7-actions-group>
</f7-actions>
</f7-page>
</template>
@@ -223,7 +235,8 @@ export default {
loading: true,
showChartDataTypePopover: false,
showDatePopover: false,
showCustomDateRangeSheet: false
showCustomDateRangeSheet: false,
showMoreActionSheet: false
};
},
computed: {
@@ -405,12 +418,32 @@ export default {
const self = this;
const router = self.$f7router;
const dateRange = self.$utilities.getDateRangeByDateType(self.query.dateType, self.firstDayOfWeek);
let defaultChartType = self.$settings.getStatisticsDefaultChartType();
if (defaultChartType !== self.$constants.statistics.allChartTypes.Pie && defaultChartType !== self.$constants.statistics.allChartTypes.Bar) {
defaultChartType = self.$constants.statistics.defaultChartType;
}
let defaultChartDataType = self.$settings.getStatisticsDefaultChartDataType();
if (defaultChartDataType < self.$constants.statistics.allChartDataTypes.ExpenseByAccount || defaultChartDataType > self.$constants.statistics.allChartDataTypes.IncomeBySecondaryCategory) {
defaultChartDataType = self.$constants.statistics.defaultChartDataType;
}
let defaultDateRange = self.$settings.getStatisticsDefaultDateRange();
if (defaultDateRange < self.$constants.datetime.allDateRanges.All.type || defaultDateRange >= self.$constants.datetime.allDateRanges.Custom.type) {
defaultDateRange = self.$constants.statistics.defaultDataRangeType;
}
const dateRange = self.$utilities.getDateRangeByDateType(defaultDateRange, self.firstDayOfWeek);
self.$store.dispatch('initTransactionStatisticsFilter', {
dateType: dateRange ? dateRange.dateType : undefined,
startTime: dateRange ? dateRange.minTime : undefined,
endTime: dateRange ? dateRange.maxTime : undefined,
chartType: defaultChartType,
chartDataType: defaultChartDataType,
});
Promise.all([
@@ -432,6 +465,11 @@ export default {
});
},
methods: {
onPageAfterIn() {
if (this.$store.state.transactionStatisticsStateInvalid && !this.loading) {
this.reload(null);
}
},
reload(done) {
const self = this;
@@ -576,6 +614,9 @@ export default {
}
return `${displayStartTime} ~ ${displayEndTime}`;
},
settings() {
this.$f7router.navigate('/statistic/settings');
}
},
filters: {