move the "Timezone Used for Date Range" option from insights explorer settings into each exploration

2026-05-20 01:34:24 +08:00 · 2026-01-03 20:42:16 +08:00
parent cc0996e0d2
commit 526d7e50ec
9 changed files with 130 additions and 102 deletions
@@ -77,15 +77,25 @@
                                    </v-btn>
                                    <v-spacer/>
                                    <v-btn density="comfortable" color="default" variant="text" class="ms-2"
-                                           :disabled="loading" :icon="true"
-                                           v-if="activeTab === 'table' || activeTab === 'chart'">
+                                           :disabled="loading" :icon="true">
                                        <v-icon :icon="mdiDotsVertical" />
                                        <v-menu activator="parent">
                                            <v-list>
+                                                <v-list-subheader :title="tt('Timezone Used for Date Range')"
+                                                                  v-if="activeTab === 'query'"/>
+                                                <template v-if="activeTab === 'query'">
+                                                    <v-list-item :key="timezoneType.type" :value="timezoneType.type"
+                                                                 :prepend-icon="timezoneTypeIconMap[timezoneType.type]"
+                                                                 :append-icon="(query.timezoneUsedForDateRange === timezoneType.type ? mdiCheck : undefined)"
+                                                                 :title="timezoneType.displayName"
+                                                                 v-for="timezoneType in allTimezoneTypesUsedForDateRange"
+                                                                 @click="updateTimezoneUsedForDateRange(timezoneType.type)"></v-list-item>
+                                                </template>
                                                <v-list-item :prepend-icon="mdiExport"
                                                             :title="tt('Export Results')"
                                                             :disabled="loading || !filteredTransactions || filteredTransactions.length < 1"
-                                                             @click="exportResults"></v-list-item>
+                                                             @click="exportResults"
+                                                             v-if="activeTab === 'table' || activeTab === 'chart'"></v-list-item>
                                            </v-list>
                                        </v-menu>
                                    </v-btn>
@@ -144,9 +154,10 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 import { type TransactionExplorerPartialFilter, type TransactionExplorerFilter, useExplorersStore } from '@/stores/explorer.ts';

-import type { NameNumeralValue } from '@/core/base.ts';
+import type { NameNumeralValue, TypeAndDisplayName } from '@/core/base.ts';
 import type { NumeralSystem } from '@/core/numeral.ts';
 import { type WeekDayValue, type LocalizedDateRange, DateRangeScene, DateRange } from '@/core/datetime.ts';
+import { TimezoneTypeForStatistics } from '@/core/timezone.ts';

 import {
    type TransactionInsightDataItem
@@ -166,6 +177,8 @@ import {
    mdiCheck,
    mdiRefresh,
    mdiDotsVertical,
+    mdiHomeClockOutline,
+    mdiInvoiceTextClockOutline,
    mdiExport
 } from '@mdi/js';

@@ -191,6 +204,7 @@ const display = useDisplay();
 const {
    tt,
    getAllDateRanges,
+    getAllTimezoneTypesUsedForStatistics,
    getCurrentNumeralSystemType,
    formatDateTimeToLongDateTime,
    formatDateRange
@@ -202,6 +216,11 @@ const transactionCategoriesStore = useTransactionCategoriesStore();
 const transactionTagsStore = useTransactionTagsStore();
 const explorersStore = useExplorersStore();

+const timezoneTypeIconMap = {
+    [TimezoneTypeForStatistics.ApplicationTimezone.type]: mdiHomeClockOutline,
+    [TimezoneTypeForStatistics.TransactionTimezone.type]: mdiInvoiceTextClockOutline
+};
+
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const explorerDataTableTab = useTemplateRef<ExplorerDataTableTabType>('explorerDataTableTab');
 const explorerChartTab = useTemplateRef<ExplorerChartTabType>('explorerChartTab');
@@ -224,6 +243,7 @@ const query = computed<TransactionExplorerFilter>(() => explorersStore.transacti
 const filteredTransactions = computed<TransactionInsightDataItem[]>(() => explorersStore.filteredTransactions);

 const allDateRanges = computed<LocalizedDateRange[]>(() => getAllDateRanges(DateRangeScene.InsightsExplorer, true));
+const allTimezoneTypesUsedForDateRange = computed<TypeAndDisplayName[]>(() => getAllTimezoneTypesUsedForStatistics());
 const canShiftDateRange = computed<boolean>(() => query.value.dateRangeType !== DateRange.All.type);
 const displayQueryDateRangeName = computed<string>(() => formatDateRange(query.value.dateRangeType, query.value.startTime, query.value.endTime));
 const displayQueryStartTime = computed<string>(() => formatDateTimeToLongDateTime(parseDateTimeFromUnixTime(query.value.startTime)));
@@ -337,6 +357,12 @@ function reload(force: boolean): Promise<unknown> | null {
    });
 }

+function updateTimezoneUsedForDateRange(timezoneType: number): void {
+    explorersStore.updateTransactionExplorerFilter({
+        timezoneUsedForDateRange: timezoneType
+    });
+}
+
 function exportResults(): void {
    if (activeTab.value === 'table' && filteredTransactions.value) {
        const results = explorerDataTableTab.value?.buildExportResults();