zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add "sort by" drop down list in statistics page

Browse Source
This commit is contained in:
MaysWind
2022-07-25 00:25:14 +08:00
parent 0dfb3d00e9
commit 1977e436d6
8 changed files with 138 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/PieChart.vue
+1 -1
View File
@@ -260,7 +260,7 @@ export default {
}
.pie-chart {
margin: 24px 24px 0 24px;
margin: 0 24px 0 24px;
}
.pie-chart-toolbox-container {
src/consts/statistics.js
+13 -4
View File
@@ -45,12 +45,21 @@ const allChartDataTypes = {
const defaultChartDataType = allChartDataTypes.ExpenseByPrimaryCategory.type;
const allSortingTypes = {
ByAmount: 0,
ByDisplayOrder: 1,
ByName: 2
Amount: {
type: 0,
name: 'Amount'
},
DisplayOrder: {
type: 1,
name: 'Display Order'
},
Name: {
type: 2,
name: 'Name'
}
};
const defaultSortingType = allSortingTypes.ByAmount;
const defaultSortingType = allSortingTypes.Amount.type;
export default {
allChartTypes: allChartTypes,
src/lib/settings.js
+3 -3
View File
@@ -24,7 +24,7 @@ const defaultSettings = {
defaultDataRangeType: statisticsConstants.defaultDataRangeType,
defaultAccountFilter: {},
defaultTransactionCategoryFilter: {},
sortingType: statisticsConstants.defaultSortingType
defaultSortingType: statisticsConstants.defaultSortingType
},
animate: true,
autoDarkMode: true
@@ -160,8 +160,8 @@ export default {
setStatisticsDefaultAccountFilter: value => setSubOption('statistics', 'defaultAccountFilter', value),
getStatisticsDefaultTransactionCategoryFilter: () => getSubOption('statistics', 'defaultTransactionCategoryFilter'),
setStatisticsDefaultTransactionCategoryFilter: value => setSubOption('statistics', 'defaultTransactionCategoryFilter', value),
getStatisticsSortingType: () => getSubOption('statistics', 'sortingType'),
setStatisticsSortingType: value => setSubOption('statistics', 'sortingType', value),
getStatisticsSortingType: () => getSubOption('statistics', 'defaultSortingType'),
setStatisticsSortingType: value => setSubOption('statistics', 'defaultSortingType', value),
isEnableAnimate: () => getOption('animate'),
setEnableAnimate: value => setOption('animate', value),
isEnableAutoDarkMode: () => getOption('autoDarkMode'),
src/locales/en.js
+5 -4
View File
@@ -687,6 +687,7 @@ export default {
'Custom': 'Custom',
'Pie Chart': 'Pie Chart',
'Bar Chart': 'Bar Chart',
'Sort By': 'Sort By',
'User': 'User',
'Application': 'Application',
'Details': 'Details',
@@ -862,10 +863,10 @@ export default {
'Default Date Range': 'Default Date Range',
'Default Account Filter': 'Default Account Filter',
'Default Transaction Category Filter': 'Default Transaction Category Filter',
'Sort By': 'Sort By',
'By Amount': 'By Amount',
'By Display Order': 'By Display Order',
'By Name': 'By Name',
'Default Sort By': 'Default Sort By',
'Amount': 'Amount',
'Display Order': 'Display Order',
'Name': 'Name',
'Filter Accounts': 'Filter Accounts',
'Filter Transaction Categories': 'Filter Transaction Categories',
'User Profile': 'User Profile',
src/locales/zh_Hans.js
+5 -4
View File
@@ -687,6 +687,7 @@ export default {
'Custom': '自定义',
'Pie Chart': '饼图',
'Bar Chart': '条形图',
'Sort By': '排序方式',
'User': '用户',
'Application': '应用',
'Details': '详情',
@@ -862,10 +863,10 @@ export default {
'Default Date Range': '默认时间范围',
'Default Account Filter': '默认账号过滤',
'Default Transaction Category Filter': '默认交易分类过滤',
'Sort By': '排序方式',
'By Amount': '金额',
'By Display Order': '显示顺序',
'By Name': '名称',
'Default Sort By': '默认排序方式',
'Amount': '金额',
'Display Order': '显示顺序',
'Name': '名称',
'Filter Accounts': '过滤账户',
'Filter Transaction Categories': '过滤交易类型',
'User Profile': '用户信息',
src/store/index.js
+10
View File
@@ -890,6 +890,12 @@ const stores = {
} else {
state.transactionStatisticsFilter.filterCategoryIds = {};
}
if (filter && utils.isNumber(filter.sortingType)) {
state.transactionStatisticsFilter.sortingType = filter.sortingType;
} else {
state.transactionStatisticsFilter.sortingType = statisticsConstants.defaultSortingType;
}
},
[UPDATE_TRANSACTION_STATISTICS_FILTER] (state, filter) {
if (filter && utils.isNumber(filter.dateType)) {
@@ -919,6 +925,10 @@ const stores = {
if (filter && utils.isObject(filter.filterCategoryIds)) {
state.transactionStatisticsFilter.filterCategoryIds = filter.filterCategoryIds;
}
if (filter && utils.isNumber(filter.sortingType)) {
state.transactionStatisticsFilter.sortingType = filter.sortingType;
}
},
[UPDATE_TRANSACTION_STATISTICS_INVALID_STATE] (state, invalidState) {
state.transactionStatisticsStateInvalid = invalidState;
src/views/mobile/statistics/Settings.vue
+11 -8
View File
@@ -20,7 +20,7 @@
<select v-model="defaultChartDataType">
<option v-for="chartDataType in allChartDataTypes"
:key="chartDataType.type"
:value="chartDataType.type">{{ chartDataType.name | localized }}</option>
:value="chartDataType.type">{{ $t(chartDataType.name) }}</option>
</select>
</f7-list-item>
@@ -30,7 +30,7 @@
<select v-model="defaultDateRange">
<option v-for="dateRange in allDateRanges"
:key="dateRange.type"
:value="dateRange.type">{{ dateRange.name | localized }}</option>
:value="dateRange.type">{{ $t(dateRange.name) }}</option>
</select>
</f7-list-item>
@@ -39,12 +39,12 @@
<f7-list-item :title="$t('Default Transaction Category Filter')" link="/statistic/filter/category?modifyDefault=1"></f7-list-item>
<f7-list-item
:title="$t('Sort By')"
:title="$t('Default Sort By')"
smart-select :smart-select-params="{ openIn: 'sheet', closeOnSelect: true, sheetCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
<select v-model="sortBy">
<option :value="$constants.statistics.allSortingTypes.ByAmount">{{ $t('By Amount') }}</option>
<option :value="$constants.statistics.allSortingTypes.ByDisplayOrder">{{ $t('By Display Order') }}</option>
<option :value="$constants.statistics.allSortingTypes.ByName">{{ $t('By Name') }}</option>
<select v-model="defaultSortingType">
<option v-for="sortingType in allSortingTypes"
:key="sortingType.type"
:value="sortingType.type">{{ $t(sortingType.name) }}</option>
</select>
</f7-list-item>
</f7-list>
@@ -59,6 +59,9 @@ export default {
allChartDataTypes() {
return this.$constants.statistics.allChartDataTypes;
},
allSortingTypes() {
return this.$constants.statistics.allSortingTypes;
},
allDateRanges() {
const allDateRanges = [];
@@ -100,7 +103,7 @@ export default {
this.$settings.setStatisticsDefaultDateRange(value);
}
},
sortBy: {
defaultSortingType: {
get: function () {
return this.$settings.getStatisticsSortingType();
},
src/views/mobile/statistics/Transaction.vue
+90 -25
View File
@@ -25,7 +25,13 @@
</f7-popover>
<f7-card v-if="query.chartType === $constants.statistics.allChartTypes.Pie">
<f7-card-content class="pie-chart-container" :padding="false">
<f7-card-header class="no-border">
<small class="full-line text-align-right">
<span style="margin-right: 4px;">{{ $t('Sort By') }}</span>
<f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link>
</small>
</f7-card-header>
<f7-card-content class="pie-chart-container" style="margin-top: -6px" :padding="false">
<pie-chart
:items="[{value: 60, color: '7c7c7f'}, {value: 20, color: 'a5a5aa'}, {value: 20, color: 'c5c5c9'}]"
:skeleton="true"
@@ -68,7 +74,13 @@
</f7-card>
<f7-card v-else-if="query.chartType === $constants.statistics.allChartTypes.Bar">
<f7-card-content class="no-safe-areas" :padding="false">
<f7-card-header class="no-border">
<small class="full-line text-align-right">
<span style="margin-right: 4px;">{{ $t('Sort By') }}</span>
<f7-link href="#" popover-open=".sorting-type-popover-menu">{{ query.sortingType | optionName(allSortingTypes, 'type', 'name', 'System Default') | localized }}</f7-link>
</small>
</f7-card-header>
<f7-card-content class="no-safe-areas" style="margin-top: -14px" :padding="false">
<f7-list class="statistics-list-item skeleton-text" v-if="loading">
<f7-list-item link="#">
<div slot="media" class="display-flex no-padding-horizontal">
@@ -186,6 +198,20 @@
</f7-card-content>
</f7-card>
<f7-popover class="sorting-type-popover-menu" :opened="showSortingTypePopover"
@popover:open="scrollPopoverToSelectedItem"
@popover:opened="showSortingTypePopover = true" @popover:closed="showSortingTypePopover = false">
<f7-list>
<f7-list-item v-for="sortingType in allSortingTypes"
:key="sortingType.type"
:class="{ 'list-item-selected': query.sortingType === sortingType.type }"
:title="$t(sortingType.name)"
@click="setSortingType(sortingType.type)">
<f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.sortingType === sortingType.type"></f7-icon>
</f7-list-item>
</f7-list>
</f7-popover>
<f7-toolbar tabbar bottom class="toolbar-item-auto-size">
<f7-link :class="{ 'disabled': query.dateType === allDateRanges.All.type || query.chartDataType === allChartDataTypes.AccountTotalAssets.type || query.chartDataType === allChartDataTypes.AccountTotalLiabilities.type }" @click="shiftDateRange(query.startTime, query.endTime, -1)">
<f7-icon f7="arrow_left_square"></f7-icon>
@@ -211,7 +237,7 @@
<f7-list-item v-for="dateRange in allDateRanges"
:key="dateRange.type"
:class="{ 'list-item-selected': query.dateType === dateRange.type }"
:title="dateRange.name | localized"
:title="$t(dateRange.name)"
@click="setDateFilter(dateRange.type)">
<f7-icon slot="after" class="list-item-checked-icon" f7="checkmark_alt" v-if="query.dateType === dateRange.type"></f7-icon>
<div slot="footer"
@@ -255,9 +281,9 @@ export default {
return {
loading: true,
loadingError: null,
sortBy: self.$settings.getStatisticsSortingType(),
showAccountBalance: self.$settings.isShowAccountBalance(),
showChartDataTypePopover: false,
showSortingTypePopover: false,
showDatePopover: false,
showCustomDateRangeSheet: false,
showMoreActionSheet: false
@@ -276,6 +302,9 @@ export default {
allChartDataTypes() {
return this.$constants.statistics.allChartDataTypes;
},
allSortingTypes() {
return this.$constants.statistics.allSortingTypes;
},
allDateRanges() {
return this.$constants.datetime.allDateRanges;
},
@@ -320,7 +349,7 @@ export default {
allStatisticsItems.push(data);
}
if (this.sortBy === this.$constants.statistics.allSortingTypes.ByDisplayOrder) {
if (self.query.sortingType === this.allSortingTypes.DisplayOrder.type) {
allStatisticsItems.sort(function (data1, data2) {
for (let i = 0; i < Math.min(data1.displayOrders.length, data2.displayOrders.length); i++) {
if (data1.displayOrders[i] !== data2.displayOrders[i]) {
@@ -333,7 +362,7 @@ export default {
sensitivity: 'base'
});
});
} else if (this.sortBy === this.$constants.statistics.allSortingTypes.ByName) {
} else if (self.query.sortingType === this.allSortingTypes.Name.type) {
allStatisticsItems.sort(function (data1, data2) {
return data1.name.localeCompare(data2.name, undefined, { // asc
numeric: true,
@@ -388,6 +417,12 @@ export default {
defaultDateRange = self.$constants.statistics.defaultDataRangeType;
}
let defaultSortType = self.$settings.getStatisticsSortingType();
if (defaultSortType < self.allSortingTypes.Amount.type || defaultSortType > self.allSortingTypes.Name.type) {
defaultSortType = self.$constants.statistics.defaultSortingType;
}
const dateRange = self.$utilities.getDateRangeByDateType(defaultDateRange, self.firstDayOfWeek);
self.$store.dispatch('initTransactionStatisticsFilter', {
@@ -398,6 +433,7 @@ export default {
chartDataType: defaultChartDataType,
filterAccountIds: self.$settings.getStatisticsDefaultAccountFilter() || {},
filterCategoryIds: self.$settings.getStatisticsDefaultTransactionCategoryFilter() || {},
sortingType: defaultSortType,
});
Promise.all([
@@ -420,10 +456,6 @@ export default {
},
methods: {
onPageAfterIn() {
if (this.sortBy !== this.$settings.getStatisticsSortingType()) {
this.sortBy = this.$settings.getStatisticsSortingType();
}
if (this.$store.state.transactionStatisticsStateInvalid && !this.loading) {
this.reload(null);
}
@@ -432,22 +464,39 @@ export default {
},
reload(done) {
const self = this;
let dispatchPromise = null;
self.$store.dispatch('loadTransactionStatistics', {
defaultCurrency: self.defaultCurrency
}).then(() => {
if (done) {
done();
}
}).catch(error => {
if (done) {
done();
}
if (self.query.chartDataType === self.allChartDataTypes.ExpenseByAccount.type ||
self.query.chartDataType === self.allChartDataTypes.ExpenseByPrimaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.ExpenseBySecondaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeByAccount.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeByPrimaryCategory.type ||
self.query.chartDataType === self.allChartDataTypes.IncomeBySecondaryCategory.type) {
dispatchPromise = self.$store.dispatch('loadTransactionStatistics', {
defaultCurrency: self.defaultCurrency
});
} else if (self.query.chartDataType === self.allChartDataTypes.AccountTotalAssets.type ||
self.query.chartDataType === self.allChartDataTypes.AccountTotalLiabilities.type) {
dispatchPromise = self.$store.dispatch('loadAllAccounts', {
force: true
});
}
if (!error.processed) {
self.$toast(error.message || error);
}
});
if (dispatchPromise) {
dispatchPromise.then(() => {
if (done) {
done();
}
}).catch(error => {
if (done) {
done();
}
if (!error.processed) {
self.$toast(error.message || error);
}
});
}
},
setChartType(chartType) {
this.$store.dispatch('updateTransactionStatisticsFilter', {
@@ -460,6 +509,19 @@ export default {
});
this.showChartDataTypePopover = false;
},
setSortingType(sortingType) {
if (sortingType < this.allSortingTypes.Amount.type || sortingType > this.allSortingTypes.Name.type) {
this.showSortingTypePopover = false;
return;
}
this.$store.dispatch('updateTransactionStatisticsFilter', {
sortingType: sortingType
});
this.showSortingTypePopover = false;
this.reload(null);
},
setDateFilter(dateType) {
if (dateType === this.allDateRanges.Custom.type) { // Custom
this.showCustomDateRangeSheet = true;
@@ -663,6 +725,10 @@ export default {
</script>
<style>
.card-header.no-border:after {
display: none;
}
.statistics-pie-chart .pie-chart-text-group {
fill: #fff;
text-anchor: middle;
@@ -690,7 +756,6 @@ export default {
}
.statistics-list-item-overview {
padding-top: 12px;
margin-bottom: 6px;
}