From 1e047aed802611b7bf750b225d0a1759a86fd404 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 24 Mar 2024 17:41:17 +0800
Subject: [PATCH] code refactor

---
 src/consts/statistics.js                      |   7 ++
 src/locales/en.js                             |   1 +
 src/locales/zh_Hans.js                        |   1 +
 .../desktop/statistics/TransactionPage.vue    | 105 +++++++++++++-----
 .../mobile/statistics/TransactionPage.vue     |   1 +
 5 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/src/consts/statistics.js b/src/consts/statistics.js
index 36149874..dfb4dd42 100644
--- a/src/consts/statistics.js
+++ b/src/consts/statistics.js
@@ -62,6 +62,12 @@ const allSortingTypes = {
     }
 };
 
+const allSortingTypesArray = [
+    allSortingTypes.Amount,
+    allSortingTypes.DisplayOrder,
+    allSortingTypes.Name
+]
+
 const defaultSortingType = allSortingTypes.Amount.type;
 
 export default {
@@ -71,5 +77,6 @@ export default {
     defaultChartDataType: defaultChartDataType,
     defaultDataRangeType: datetime.allDateRanges.ThisMonth.type,
     allSortingTypes: allSortingTypes,
+    allSortingTypesArray: allSortingTypesArray,
     defaultSortingType: defaultSortingType,
 };
diff --git a/src/locales/en.js b/src/locales/en.js
index 919eab6b..d2e73975 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -996,6 +996,7 @@ export default {
     'Amount value exceeds limitation': 'Amount value exceeds limitation',
     'Unable to delete this transaction': 'Unable to delete this transaction',
     'Unable to get transaction statistics': 'Unable to get transaction statistics',
+    'Categorical Analysis': 'Categorical Analysis',
     'Total Amount': 'Total Amount',
     'Total Assets': 'Total Assets',
     'Total Liabilities': 'Total Liabilities',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index e5acba65..082d5a82 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -996,6 +996,7 @@ export default {
     'Amount value exceeds limitation': '金额数值超出限制',
     'Unable to delete this transaction': '无法删除该交易',
     'Unable to get transaction statistics': '无法获取交易统计数据',
+    'Categorical Analysis': '分类分析',
     'Total Amount': '总金额',
     'Total Assets': '总资产',
     'Total Liabilities': '总负债',
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 08f408b8..10dd291f 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -6,13 +6,53 @@
                     <v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
                         <div class="mx-6 my-4">
                             <btn-vertical-group :disabled="loading" :buttons="[
-                                { name: $t('Pie Chart'), value: allChartTypes.Pie },
-                                { name: $t('Bar Chart'), value: allChartTypes.Bar }
-                            ]" v-model="query.chartType" @update:model-value="setChartType" />
+                                { name: $t('Categorical Analysis'), value: 'categoricalAnalysis' },
+                            ]" v-model="activeTab" />
                         </div>
                         <v-divider />
+                        <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
+                            <small>{{ $t('Chart Type') }}</small>
+                            <v-select
+                                item-title="name"
+                                item-value="type"
+                                class="mt-2"
+                                density="compact"
+                                :disabled="loading"
+                                :items="allChartTypesArray"
+                                v-model="queryChartType"
+                            >
+                                <template #selection="{ item }">
+                                    <span class="cursor-pointer">{{ $t(item.title) }}</span>
+                                </template>
+
+                                <template #item="{ props, item }">
+                                    <v-list-item v-bind="props" :title="$t(item.title)"></v-list-item>
+                                </template>
+                            </v-select>
+                        </div>
+                        <div class="mx-6 mt-4" v-if="activeTab === 'categoricalAnalysis'">
+                            <small>{{ $t('Sort By') }}</small>
+                            <v-select
+                                item-title="name"
+                                item-value="type"
+                                class="mt-2"
+                                density="compact"
+                                :disabled="loading"
+                                :items="allSortingTypesArray"
+                                v-model="querySortingType"
+                            >
+                                <template #selection="{ item }">
+                                    <span class="cursor-pointer">{{ $t(item.title) }}</span>
+                                </template>
+
+                                <template #item="{ props, item }">
+                                    <v-list-item v-bind="props" :title="$t(item.title)"></v-list-item>
+                                </template>
+                            </v-select>
+                        </div>
                         <v-tabs show-arrows class="my-4" direction="vertical"
-                                :disabled="loading" v-model="query.chartDataType">
+                                :disabled="loading" v-model="query.chartDataType"
+                                v-if="activeTab === 'categoricalAnalysis'">
                             <v-tab class="tab-text-truncate" :key="dataType.type" :value="dataType.type"
                                    v-for="dataType in allChartDataTypes">
                                 <span class="text-truncate">{{ $t(dataType.name) }}</span>
@@ -22,7 +62,7 @@
                     </v-navigation-drawer>
                     <v-main>
                         <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container" v-model="activeTab">
-                            <v-window-item value="statisticsPage">
+                            <v-window-item value="categoricalAnalysis">
                                 <v-card variant="flat" min-height="680">
                                     <template #title>
                                         <div class="title-and-toolbar d-flex align-center">
@@ -63,24 +103,6 @@
                                                        @click="shiftDateRange(query.startTime, query.endTime, 1)"/>
                                             </v-btn-group>
 
-                                            <v-menu location="bottom">
-                                                <template #activator="{ props }">
-                                                    <v-btn class="ml-3" color="default" variant="outlined"
-                                                           :prepend-icon="icons.sort" :disabled="loading"
-                                                           v-bind="props">{{ querySortingTypeName }}</v-btn>
-                                                </template>
-                                                <v-list>
-                                                    <v-list-item :key="sortingType.type" :value="sortingType.type"
-                                                                 :append-icon="(query.sortingType === sortingType.type ? icons.check : null)"
-                                                                 v-for="sortingType in allSortingTypes">
-                                                        <v-list-item-title
-                                                            class="cursor-pointer"
-                                                            @click="setSortingType(sortingType.type)">
-                                                            {{ $t(sortingType.fullName) }}
-                                                        </v-list-item-title>
-                                                    </v-list-item>
-                                                </v-list>
-                                            </v-menu>
                                             <v-btn density="compact" color="default" variant="text"
                                                    class="ml-2" :icon="true" :disabled="loading"
                                                    v-if="!loading" @click="reload">
@@ -255,7 +277,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
 
 import datetimeConstants from '@/consts/datetime.js';
 import statisticsConstants from '@/consts/statistics.js';
-import { getNameByKeyValue, limitText, formatPercent } from '@/lib/common.js'
+import { limitText, formatPercent } from '@/lib/common.js'
 import {
     getShiftedDateRangeAndDateType,
     getDateRangeByDateType
@@ -287,7 +309,7 @@ export default {
         const { mdAndUp } = useDisplay();
 
         return {
-            activeTab: 'statisticsPage',
+            activeTab: 'categoricalAnalysis',
             initing: true,
             loading: true,
             alwaysShowNav: mdAndUp.value,
@@ -327,9 +349,21 @@ export default {
         queryChartDataCategory() {
             return this.statisticsStore.transactionStatisticsChartDataCategory;
         },
-        querySortingTypeName() {
-            const querySortingTypeName = getNameByKeyValue(this.allSortingTypes, this.query.sortingType, 'type', 'fullName', 'System Default');
-            return this.$t(querySortingTypeName);
+        queryChartType: {
+            get: function () {
+                return this.query.chartType;
+            },
+            set: function(value) {
+                this.setChartType(value);
+            }
+        },
+        querySortingType: {
+            get: function () {
+                return this.query.sortingType;
+            },
+            set: function(value) {
+                this.setSortingType(value);
+            }
         },
         queryStartTime() {
             return this.$locale.formatUnixTimeToLongDateTime(this.userStore, this.query.startTime);
@@ -340,12 +374,27 @@ export default {
         allChartTypes() {
             return statisticsConstants.allChartTypes;
         },
+        allChartTypesArray() {
+            return [
+                {
+                    name: 'Pie Chart',
+                    type: this.allChartTypes.Pie
+                },
+                {
+                    name: 'Bar Chart',
+                    type: this.allChartTypes.Bar
+                }
+            ];
+        },
         allChartDataTypes() {
             return statisticsConstants.allChartDataTypes;
         },
         allSortingTypes() {
             return statisticsConstants.allSortingTypes;
         },
+        allSortingTypesArray() {
+            return statisticsConstants.allSortingTypesArray;
+        },
         allDateRanges() {
             return datetimeConstants.allDateRanges;
         },
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index cb6eb118..d485a56a 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -16,6 +16,7 @@
         <f7-popover class="chart-data-type-popover-menu"
                     v-model:opened="showChartDataTypePopover">
             <f7-list dividers>
+                <f7-list-item group-title :title="$t('Categorical Analysis')" />
                 <f7-list-item :title="$t(dataType.name)"
                               :key="dataType.type"
                               v-for="dataType in allChartDataTypes"