migrate statistics setting page to composition API and typescript

2026-05-19 01:04:25 +08:00 · 2025-01-12 11:48:14 +08:00
parent c3265c5bf6
commit 1414f54a12
6 changed files with 425 additions and 247 deletions
@@ -1,12 +1,12 @@
 <template>
    <f7-page>
-        <f7-navbar :title="$t('Statistics Settings')" :back-link="$t('Back')"></f7-navbar>
+        <f7-navbar :title="tt('Statistics Settings')" :back-link="tt('Back')"></f7-navbar>

-        <f7-block-title class="margin-top">{{ $t('Common Settings') }}</f7-block-title>
+        <f7-block-title class="margin-top">{{ tt('Common Settings') }}</f7-block-title>
        <f7-list strong inset dividers>
            <f7-list-item
-                :title="$t('Default Chart Data Type')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Data Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Chart Data Type')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Data Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultChartDataType">
                    <option :value="chartDataType.type"
                            :key="chartDataType.type"
@@ -15,8 +15,8 @@
            </f7-list-item>

            <f7-list-item
-                :title="$t('Timezone Used for Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Timezone Used for Date Range')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultTimezoneType">
                    <option :value="timezoneType.type"
                            :key="timezoneType.type"
@@ -24,13 +24,13 @@
                </select>
            </f7-list-item>

-            <f7-list-item :title="$t('Default Account Filter')" link="/settings/filter/account?type=statisticsDefault"></f7-list-item>
+            <f7-list-item :title="tt('Default Account Filter')" link="/settings/filter/account?type=statisticsDefault"></f7-list-item>

-            <f7-list-item :title="$t('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>
+            <f7-list-item :title="tt('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>

            <f7-list-item
-                :title="$t('Default Sort Order')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Sort Order'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Sort Order')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Sort Order'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultSortingType">
                    <option :value="sortingType.type"
                            :key="sortingType.type"
@@ -39,11 +39,11 @@
            </f7-list-item>
        </f7-list>

-        <f7-block-title>{{ $t('Categorical Analysis Settings') }}</f7-block-title>
+        <f7-block-title>{{ tt('Categorical Analysis Settings') }}</f7-block-title>
        <f7-list strong inset dividers>
            <f7-list-item
-                :title="$t('Default Chart Type')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Chart Type'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Chart Type')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultCategoricalChartType">
                    <option :value="chartType.type"
                            :key="chartType.type"
@@ -52,8 +52,8 @@
            </f7-list-item>

            <f7-list-item
-                :title="$t('Default Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Date Range')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultCategoricalChartDateRange">
                    <option :value="dateRange.type"
                            :key="dateRange.type"
@@ -62,11 +62,11 @@
            </f7-list-item>
        </f7-list>

-        <f7-block-title>{{ $t('Trend Analysis Settings') }}</f7-block-title>
+        <f7-block-title>{{ tt('Trend Analysis Settings') }}</f7-block-title>
        <f7-list strong inset dividers>
            <f7-list-item
-                :title="$t('Default Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Date Range'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), popupCloseLinkText: $t('Done') }">
+                :title="tt('Default Date Range')"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
                <select v-model="defaultTrendChartDateRange">
                    <option :value="dateRange.type"
                            :key="dateRange.type"
@@ -77,90 +77,23 @@
    </f7-page>
 </template>

-<script>
-import { mapStores } from 'pinia';
-import { useSettingsStore } from '@/stores/setting.ts';
+<script setup lang="ts">
+import { useI18n } from '@/locales/helpers.ts';
+import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';

-import { DateRangeScene } from '@/core/datetime.ts';
-import { StatisticsAnalysisType } from '@/core/statistics.ts';
-
-export default {
-    computed: {
-        ...mapStores(useSettingsStore),
-        allChartDataTypes() {
-            return this.$locale.getAllStatisticsChartDataTypes(StatisticsAnalysisType.CategoricalAnalysis);
-        },
-        allTimezoneTypesUsedForStatistics() {
-            return this.$locale.getAllTimezoneTypesUsedForStatistics();
-        },
-        allSortingTypes() {
-            return this.$locale.getAllStatisticsSortingTypes();
-        },
-        allCategoricalChartTypes() {
-            return this.$locale.getAllCategoricalChartTypes();
-        },
-        allCategoricalChartDateRanges() {
-            return this.$locale.getAllDateRanges(DateRangeScene.Normal, false);
-        },
-        allTrendChartDateRanges() {
-            return this.$locale.getAllDateRanges(DateRangeScene.TrendAnalysis, false);
-        },
-        defaultChartDataType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultChartDataType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultChartDataType(value);
-            }
-        },
-        defaultTimezoneType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTimezoneType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTimezoneType(value);
-            }
-        },
-        defaultSortingType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultSortingType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsSortingType(value);
-            }
-        },
-        defaultCategoricalChartType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultCategoricalChartType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultCategoricalChartType(value);
-            }
-        },
-        defaultCategoricalChartDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultCategoricalChartDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultCategoricalChartDateRange(value);
-            }
-        },
-        defaultTrendChartType: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTrendChartType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTrendChartType(value);
-            }
-        },
-        defaultTrendChartDateRange: {
-            get: function () {
-                return this.settingsStore.appSettings.statistics.defaultTrendChartDataRangeType;
-            },
-            set: function (value) {
-                this.settingsStore.setStatisticsDefaultTrendChartDateRange(value);
-            }
-        },
-    }
-};
+const { tt } = useI18n();
+const {
+    allChartDataTypes,
+    allTimezoneTypesUsedForStatistics,
+    allSortingTypes,
+    allCategoricalChartTypes,
+    allCategoricalChartDateRanges,
+    allTrendChartDateRanges,
+    defaultChartDataType,
+    defaultTimezoneType,
+    defaultSortingType,
+    defaultCategoricalChartType,
+    defaultCategoricalChartDateRange,
+    defaultTrendChartDateRange
+} = useStatisticsSettingPageBase();
 </script>