zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions 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/consts/statistics.js
+3
View File
@@ -1,3 +1,5 @@
import datetime from './datetime.js';
const allChartTypes = {
Pie: 0,
Bar: 1
@@ -21,4 +23,5 @@ export default {
defaultChartType: defaultChartType,
allChartDataTypes: allChartDataTypes,
defaultChartDataType: defaultChartDataType,
defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
};
src/lib/settings.js
+40
View File
@@ -1,5 +1,7 @@
import Cookies from 'js-cookie';
import statisticsConstants from '../consts/statistics.js';
const settingsLocalStorageKey = 'lab_app_settings';
const serverSettingsCookieKey = 'lab_server_settings';
@@ -13,6 +15,11 @@ const defaultSettings = {
currencyDisplayMode: 'symbol', // or 'none' or 'code' or 'name'
showAmountInHomePage: true,
showAccountBalance: true,
statistics: {
defaultChartType: statisticsConstants.defaultChartType,
defaultChartDataType: statisticsConstants.defaultChartDataType,
defaultDataRangeType: statisticsConstants.defaultDataRangeType
},
animate: true,
autoDarkMode: true
};
@@ -44,6 +51,11 @@ function getOption(key) {
return getFinalSettings()[key];
}
function getSubOption(key, subKey) {
const options = getFinalSettings()[key] || {};
return options[subKey];
}
function setOption(key, value) {
if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
return;
@@ -55,6 +67,28 @@ function setOption(key, value) {
return setSettings(settings);
}
function setSubOption(key, subKey, value) {
if (!Object.prototype.hasOwnProperty.call(defaultSettings, key)) {
return;
}
if (!Object.prototype.hasOwnProperty.call(defaultSettings[key], subKey)) {
return;
}
const settings = getFinalSettings();
let options = settings[key];
if (!options) {
options = {};
}
options[subKey] = value;
settings[key] = options;
return setSettings(settings);
}
function getServerSetting(key) {
const settings = Cookies.get(serverSettingsCookieKey) || '';
const settingsArr = settings.split('_');
@@ -93,6 +127,12 @@ export default {
setShowAmountInHomePage: value => setOption('showAmountInHomePage', value),
isShowAccountBalance: () => getOption('showAccountBalance'),
setShowAccountBalance: value => setOption('showAccountBalance', value),
getStatisticsDefaultChartType: () => getSubOption('statistics', 'defaultChartType'),
setStatisticsDefaultChartType: value => setSubOption('statistics', 'defaultChartType', value),
getStatisticsDefaultChartDataType: () => getSubOption('statistics', 'defaultChartDataType'),
setStatisticsDefaultChartDataType: value => setSubOption('statistics', 'defaultChartDataType', value),
getStatisticsDefaultDateRange: () => getSubOption('statistics', 'defaultDataRangeType'),
setStatisticsDefaultDateRange: value => setSubOption('statistics', 'defaultDataRangeType', value),
isEnableAnimate: () => getOption('animate'),
setEnableAnimate: value => setOption('animate', value),
isEnableAutoDarkMode: () => getOption('autoDarkMode'),
src/locales/en.js
+4
View File
@@ -657,6 +657,10 @@ export default {
'Income By Account': 'Income By Account',
'Income By Primary Category': 'Income By Primary Category',
'Income By Secondary Category': 'Income By Secondary Category',
'Statistics Settings': 'Statistics Settings',
'Default Chart Type': 'Default Chart Type',
'Default Chart Data Type': 'Default Chart Data Type',
'Default Date Range': 'Default Date Range',
'User Profile': 'User Profile',
'Language': 'Language',
'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',
src/locales/zh_Hans.js
+4
View File
@@ -657,6 +657,10 @@ export default {
'Income By Account': '账号收入',
'Income By Primary Category': '一级分类收入',
'Income By Secondary Category': '二级分类收入',
'Statistics Settings': '统计设置',
'Default Chart Type': '默认图表类型',
'Default Chart Data Type': '默认图表数据类型',
'Default Date Range': '默认时间范围',
'User Profile': '用户信息',
'Language': '语言',
'Auto Update Exchange Rates Data': '自动更新汇率数据',
src/router/mobile.js
+6
View File
@@ -12,6 +12,7 @@ import AccountListPage from '../views/mobile/accounts/List.vue';
import AccountEditPage from '../views/mobile/accounts/Edit.vue';
import StatisticsTransactionPage from '../views/mobile/statistics/Transaction.vue';
import StatisticsSettingsPage from '../views/mobile/statistics/Settings.vue';
import SettingsPage from '../views/mobile/Settings.vue';
import ApplicationLockPage from '../views/mobile/ApplicationLock.vue';
@@ -175,6 +176,11 @@ const routes = [
component: StatisticsTransactionPage,
beforeEnter: checkLogin
},
{
path: '/statistic/settings',
component: StatisticsSettingsPage,
beforeEnter: checkLogin
},
{
path: '/settings',
component: SettingsPage,
src/store/index.js
+3 -3
View File
@@ -179,7 +179,7 @@ const stores = {
transactionOverview: {},
transactionOverviewStateInvalid: true,
transactionStatisticsFilter: {
dateType: datetimeConstants.allDateRanges.ThisMonth.type,
dateType: statisticsConstants.defaultDataRangeType,
startTime: 0,
endTime: 0,
chartType: statisticsConstants.defaultChartType,
@@ -239,7 +239,7 @@ const stores = {
state.transactionOverview = {};
state.transactionOverviewStateInvalid = true;
state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type;
state.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
state.transactionStatisticsFilter.startTime = 0;
state.transactionStatisticsFilter.endTime = 0;
state.transactionStatisticsFilter.chartType = statisticsConstants.defaultChartType;
@@ -801,7 +801,7 @@ const stores = {
if (filter && utils.isNumber(filter.dateType)) {
state.transactionStatisticsFilter.dateType = filter.dateType;
} else {
state.transactionStatisticsFilter.dateType = datetimeConstants.allDateRanges.ThisMonth.type;
state.transactionStatisticsFilter.dateType = statisticsConstants.defaultDataRangeType;
}
if (filter && utils.isNumber(filter.startTime)) {
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: {