From 6c04adbd06ea6afdc5f1c17a2ad324df8a2cbaeb Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 6 Feb 2021 00:37:26 +0800
Subject: [PATCH] support changing sorting type in statistics page

---
 src/consts/statistics.js                    | 10 +++++
 src/lib/settings.js                         |  5 ++-
 src/locales/en.js                           |  4 ++
 src/locales/zh_Hans.js                      |  4 ++
 src/views/mobile/statistics/Settings.vue    | 18 ++++++++
 src/views/mobile/statistics/Transaction.vue | 46 +++++++++++++++++++--
 6 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/src/consts/statistics.js b/src/consts/statistics.js
index 675619a1..a5b0a4e0 100644
--- a/src/consts/statistics.js
+++ b/src/consts/statistics.js
@@ -44,10 +44,20 @@ const allChartDataTypes = {
 
 const defaultChartDataType = allChartDataTypes.ExpenseByPrimaryCategory;
 
+const allSortingTypes = {
+    ByAmount: 0,
+    ByDisplayOrder: 1,
+    ByName: 2
+};
+
+const defaultSortingType = allSortingTypes.ByAmount;
+
 export default {
     allChartTypes: allChartTypes,
     defaultChartType: defaultChartType,
     allChartDataTypes: allChartDataTypes,
     defaultChartDataType: defaultChartDataType,
     defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
+    allSortingTypes: allSortingTypes,
+    defaultSortingType: defaultSortingType,
 };
diff --git a/src/lib/settings.js b/src/lib/settings.js
index 583644de..5ba09d7e 100644
--- a/src/lib/settings.js
+++ b/src/lib/settings.js
@@ -18,7 +18,8 @@ const defaultSettings = {
     statistics: {
         defaultChartType: statisticsConstants.defaultChartType,
         defaultChartDataType: statisticsConstants.defaultChartDataType,
-        defaultDataRangeType: statisticsConstants.defaultDataRangeType
+        defaultDataRangeType: statisticsConstants.defaultDataRangeType,
+        sortingType: statisticsConstants.defaultSortingType
     },
     animate: true,
     autoDarkMode: true
@@ -133,6 +134,8 @@ export default {
     setStatisticsDefaultChartDataType: value => setSubOption('statistics', 'defaultChartDataType', value),
     getStatisticsDefaultDateRange: () => getSubOption('statistics', 'defaultDataRangeType'),
     setStatisticsDefaultDateRange: value => setSubOption('statistics', 'defaultDataRangeType', value),
+    getStatisticsSortingType: () => getSubOption('statistics', 'sortingType'),
+    setStatisticsSortingType: value => setSubOption('statistics', 'sortingType', value),
     isEnableAnimate: () => getOption('animate'),
     setEnableAnimate: value => setOption('animate', value),
     isEnableAutoDarkMode: () => getOption('autoDarkMode'),
diff --git a/src/locales/en.js b/src/locales/en.js
index c5f2e432..5cb7dec3 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -669,6 +669,10 @@ export default {
     'Default Chart Type': 'Default Chart Type',
     'Default Chart Data Type': 'Default Chart Data Type',
     'Default Date Range': 'Default Date Range',
+    'Sort By': 'Sort By',
+    'By Amount': 'By Amount',
+    'By Display Order': 'By Display Order',
+    'By Name': 'By Name',
     'Filter Accounts': 'Filter Accounts',
     'Filter Transaction Categories': 'Filter Transaction Categories',
     'User Profile': 'User Profile',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index b2564d5c..bcda7d0b 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -669,6 +669,10 @@ export default {
     'Default Chart Type': '默认图表类型',
     'Default Chart Data Type': '默认图表数据类型',
     'Default Date Range': '默认时间范围',
+    'Sort By': '排序方式',
+    'By Amount': '金额',
+    'By Display Order': '显示顺序',
+    'By Name': '名称',
     'Filter Accounts': '过滤账户',
     'Filter Transaction Categories': '过滤交易类型',
     'User Profile': '用户信息',
diff --git a/src/views/mobile/statistics/Settings.vue b/src/views/mobile/statistics/Settings.vue
index cef35476..dd74a030 100644
--- a/src/views/mobile/statistics/Settings.vue
+++ b/src/views/mobile/statistics/Settings.vue
@@ -33,6 +33,16 @@
                                     :value="dateRange.type">{{ dateRange.name | localized }}</option>
                         </select>
                     </f7-list-item>
+
+                    <f7-list-item
+                        :title="$t('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>
+                    </f7-list-item>
                 </f7-list>
             </f7-card-content>
         </f7-card>
@@ -85,6 +95,14 @@ export default {
             set: function (value) {
                 this.$settings.setStatisticsDefaultDateRange(value);
             }
+        },
+        sortBy: {
+            get: function () {
+                return this.$settings.getStatisticsSortingType();
+            },
+            set: function (value) {
+                this.$settings.setStatisticsSortingType(value);
+            }
         }
     }
 };
diff --git a/src/views/mobile/statistics/Transaction.vue b/src/views/mobile/statistics/Transaction.vue
index ac2cbeee..fc5bfcd7 100644
--- a/src/views/mobile/statistics/Transaction.vue
+++ b/src/views/mobile/statistics/Transaction.vue
@@ -248,8 +248,11 @@
 <script>
 export default {
     data() {
+        const self = this;
+
         return {
             loading: true,
+            sortBy: self.$settings.getStatisticsSortingType(),
             showChartDataTypePopover: false,
             showDatePopover: false,
             showCustomDateRangeSheet: false,
@@ -329,9 +332,38 @@ export default {
                 allStatisticsItems.push(data);
             }
 
-            allStatisticsItems.sort(function (data1, data2) {
-                return data2.totalAmount - data1.totalAmount;
-            });
+            if (this.sortBy === this.$constants.statistics.allSortingTypes.ByDisplayOrder) {
+                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]) {
+                            return data1.displayOrders[i] - data2.displayOrders[i]; // asc
+                        }
+                    }
+
+                    return data1.name.localeCompare(data2.name, undefined, { // asc
+                        numeric: true,
+                        sensitivity: 'base'
+                    });
+                });
+            } else if (this.sortBy === this.$constants.statistics.allSortingTypes.ByName) {
+                allStatisticsItems.sort(function (data1, data2) {
+                    return data1.name.localeCompare(data2.name, undefined, { // asc
+                        numeric: true,
+                        sensitivity: 'base'
+                    });
+                });
+            } else {
+                allStatisticsItems.sort(function (data1, data2) {
+                    if (data1.totalAmount !== data2.totalAmount) {
+                        return data2.totalAmount - data1.totalAmount; // desc
+                    }
+
+                    return data1.name.localeCompare(data2.name, undefined, { // asc
+                        numeric: true,
+                        sensitivity: 'base'
+                    });
+                });
+            }
 
             return {
                 totalAmount: combinedData.totalAmount,
@@ -391,6 +423,10 @@ 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);
             }
@@ -608,6 +644,7 @@ export default {
                                 icon: item.account.icon || this.$constants.icons.defaultAccountIcon.icon,
                                 color: item.account.color || this.$constants.colors.defaultAccountColor,
                                 hidden: item.primaryAccount.hidden || item.account.hidden,
+                                displayOrders: [item.primaryAccount.category, item.primaryAccount.displayOrder, item.account.displayOrder],
                                 totalAmount: item.amountInDefaultCurrency
                             }
                         }
@@ -635,6 +672,7 @@ export default {
                                 icon: item.primaryCategory.icon || this.$constants.icons.defaultCategoryIcon.icon,
                                 color: item.primaryCategory.color || this.$constants.colors.defaultCategoryColor,
                                 hidden: item.primaryCategory.hidden,
+                                displayOrders: [item.primaryCategory.type, item.primaryCategory.displayOrder],
                                 totalAmount: item.amountInDefaultCurrency
                             }
                         }
@@ -662,6 +700,7 @@ export default {
                                 icon: item.category.icon || this.$constants.icons.defaultCategoryIcon.icon,
                                 color: item.category.color || this.$constants.colors.defaultCategoryColor,
                                 hidden: item.primaryCategory.hidden || item.category.hidden,
+                                displayOrders: [item.primaryCategory.type, item.primaryCategory.displayOrder, item.category.displayOrder],
                                 totalAmount: item.amountInDefaultCurrency
                             }
                         }
@@ -732,6 +771,7 @@ export default {
                     icon: account.icon || self.$constants.icons.defaultAccountIcon.icon,
                     color: account.color || self.$constants.colors.defaultAccountColor,
                     hidden: primaryAccount.hidden || account.hidden,
+                    displayOrders: [primaryAccount.category, primaryAccount.displayOrder, account.displayOrder],
                     totalAmount: amount
                 };