support setting timezone type in reconciliation statement dialog / page

This commit is contained in:
MaysWind
2026-01-04 00:36:00 +08:00
parent 43154832b6
commit 43bc04012d
10 changed files with 213 additions and 124 deletions
@@ -8,9 +8,11 @@ import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import type { TypeAndDisplayName } from '@/core/base.ts';
import type { WeekDayValue } from '@/core/datetime.ts';
import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
import { TransactionType } from '@/core/transaction.ts';
import { StatisticsAnalysisType } from '@/core/statistics.ts';
import { StatisticsAnalysisType, ChartDateAggregationType } from '@/core/statistics.ts';
import { KnownFileType } from '@/core/file.ts';
import type { Account } from '@/models/account.ts';
import type { TransactionCategory } from '@/models/transaction_category.ts';
import type {
@@ -33,6 +35,7 @@ export function useReconciliationStatementPageBase() {
tt,
getAllAccountBalanceTrendChartTypes,
getAllStatisticsDateAggregationTypesWithShortName,
getAllTimezoneTypesUsedForStatistics,
formatDateTimeToLongDateTime,
formatDateTimeToLongDate,
formatDateTimeToShortTime,
@@ -49,6 +52,8 @@ export function useReconciliationStatementPageBase() {
const startTime = ref<number>(0);
const endTime = ref<number>(0);
const reconciliationStatements = ref<TransactionReconciliationStatementResponseWithInfo | undefined>(undefined);
const chartDataDateAggregationType = ref<number>(ChartDateAggregationType.Day.type);
const timezoneUsedForDateRange = ref<number>(TimezoneTypeForStatistics.ApplicationTimezone.type);
const firstDayOfWeek = computed<WeekDayValue>(() => userStore.currentUserFirstDayOfWeek);
const fiscalYearStart = computed<number>(() => userStore.currentUserFiscalYearStart);
@@ -56,6 +61,7 @@ export function useReconciliationStatementPageBase() {
const allChartTypes = computed<TypeAndDisplayName[]>(() => getAllAccountBalanceTrendChartTypes());
const allDateAggregationTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsDateAggregationTypesWithShortName(StatisticsAnalysisType.AssetTrends));
const allTimezoneTypesUsedForDateRange = computed<TypeAndDisplayName[]>(() => getAllTimezoneTypesUsedForStatistics());
const currentAccount = computed(() => allAccountsMap.value[accountId.value]);
const currentAccountCurrency = computed<string>(() => currentAccount.value?.currency ?? defaultCurrency.value);
@@ -286,12 +292,15 @@ export function useReconciliationStatementPageBase() {
startTime,
endTime,
reconciliationStatements,
chartDataDateAggregationType,
timezoneUsedForDateRange,
// computed states
firstDayOfWeek,
fiscalYearStart,
defaultCurrency,
allChartTypes,
allDateAggregationTypes,
allTimezoneTypesUsedForDateRange,
currentAccount,
currentAccountCurrency,
isCurrentLiabilityAccount,
@@ -44,6 +44,14 @@
:title="dateAggregationType.displayName"
@click="chartDataDateAggregationType = dateAggregationType.type"
v-for="dateAggregationType in allDateAggregationTypes"></v-list-item>
<v-divider class="my-2"/>
<v-list-subheader :title="tt('Timezone Used for Date Range')"/>
<v-list-item :key="timezoneType.type" :value="timezoneType.type"
:prepend-icon="timezoneTypeIconMap[timezoneType.type]"
:append-icon="timezoneUsedForDateRange === timezoneType.type ? mdiCheck : undefined"
:title="timezoneType.displayName"
v-for="timezoneType in allTimezoneTypesUsedForDateRange"
@click="timezoneUsedForDateRange = timezoneType.type"></v-list-item>
</v-list>
</v-menu>
</v-btn>
@@ -227,6 +235,7 @@
<account-balance-trends-chart
:type="chartType"
:date-aggregation-type="chartDataDateAggregationType"
:timezone-used-for-date-range="timezoneUsedForDateRange"
:fiscal-year-start="fiscalYearStart"
:items="[]"
:legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
@@ -238,6 +247,7 @@
<account-balance-trends-chart
:type="chartType"
:date-aggregation-type="chartDataDateAggregationType"
:timezone-used-for-date-range="timezoneUsedForDateRange"
:fiscal-year-start="fiscalYearStart"
:items="reconciliationStatements?.transactions"
:legend-name="isCurrentLiabilityAccount ? tt('Account Outstanding Balance') : tt('Account Balance')"
@@ -280,6 +290,7 @@ import { useTransactionsStore } from '@/stores/transaction.ts';
import type { NameNumeralValue } from '@/core/base.ts';
import type { NumeralSystem } from '@/core/numeral.ts';
import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
import { TransactionType } from '@/core/transaction.ts';
import { AccountBalanceTrendChartType, ChartDateAggregationType } from '@/core/statistics.ts';
import { KnownFileType } from '@/core/file.ts';
@@ -300,6 +311,8 @@ import {
mdiChartWaterfall,
mdiCalendarTodayOutline,
mdiCalendarMonthOutline,
mdiHomeClockOutline,
mdiInvoiceTextClockOutline,
mdiLayersTripleOutline,
mdiInvoiceTextPlusOutline,
mdiInvoiceTextEditOutline,
@@ -323,9 +336,12 @@ const {
startTime,
endTime,
reconciliationStatements,
chartDataDateAggregationType,
timezoneUsedForDateRange,
fiscalYearStart,
allChartTypes,
allDateAggregationTypes,
allTimezoneTypesUsedForDateRange,
currentAccount,
currentAccountCurrency,
isCurrentLiabilityAccount,
@@ -366,6 +382,11 @@ const chartDataDateAggregationTypeIconMap = {
[ChartDateAggregationType.FiscalYear.type]: mdiLayersTripleOutline,
};
const timezoneTypeIconMap = {
[TimezoneTypeForStatistics.ApplicationTimezone.type]: mdiHomeClockOutline,
[TimezoneTypeForStatistics.TransactionTimezone.type]: mdiInvoiceTextClockOutline
};
const amountInputDialog = useTemplateRef<AmountInputDialogType>('amountInputDialog');
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const editDialog = useTemplateRef<EditDialogType>('editDialog');
@@ -376,7 +397,6 @@ const currentPage = ref<number>(1);
const countPerPage = ref<number>(10);
const showAccountBalanceTrendsCharts = ref<boolean>(false);
const chartType = ref<number>(AccountBalanceTrendChartType.Default.type);
const chartDataDateAggregationType = ref<number>(ChartDateAggregationType.Day.type);
let rejectFunc: ((reason?: unknown) => void) | null = null;
@@ -462,6 +482,7 @@ function open(options: { accountId: string, startTime: number, endTime: number }
showAccountBalanceTrendsCharts.value = false;
chartType.value = AccountBalanceTrendChartType.Default.type;
chartDataDateAggregationType.value = ChartDateAggregationType.Day.type;
timezoneUsedForDateRange.value = TimezoneTypeForStatistics.ApplicationTimezone.type;
showState.value = true;
loading.value = true;
+2 -2
View File
@@ -691,7 +691,7 @@ import {
import {
getCurrentUnixTime,
parseDateTimeFromUnixTime,
getDayFirstUnixTimeBySpecifiedUnixTime,
getDayFirstDateTimeBySpecifiedUnixTime,
getYearMonthFirstUnixTime,
getYearMonthLastUnixTime,
getShiftedDateRangeAndDateType,
@@ -1233,7 +1233,7 @@ function changeDateFilter(dateRange: TimeRangeAndDateType | number | null): void
if (dateRange === DateRange.Custom.type || (isObject(dateRange) && dateRange.dateType === DateRange.Custom.type && !dateRange.minTime && !dateRange.maxTime)) { // Custom
if (!query.value.minTime || !query.value.maxTime) {
customMaxDatetime.value = getCurrentUnixTime();
customMinDatetime.value = getDayFirstUnixTimeBySpecifiedUnixTime(customMaxDatetime.value);
customMinDatetime.value = getDayFirstDateTimeBySpecifiedUnixTime(customMaxDatetime.value).getUnixTime();
} else {
customMaxDatetime.value = query.value.maxTime;
customMinDatetime.value = query.value.minTime;
@@ -273,6 +273,7 @@
<account-balance-trends-bar-chart
:loading="loading"
:date-aggregation-type="chartDataDateAggregationType"
:timezone-used-for-date-range="timezoneUsedForDateRange"
:fiscal-year-start="fiscalYearStart"
:items="reconciliationStatements?.transactions"
:account="currentAccount"
@@ -282,6 +283,9 @@
<f7-popover class="chart-data-date-aggregation-type-popover-menu">
<f7-list dividers>
<f7-list-item group-title>
<small>{{ tt('Time Granularity') }}</small>
</f7-list-item>
<f7-list-item link="#" no-chevron popover-close
:title="dateAggregationType.displayName"
:class="{ 'list-item-selected': chartDataDateAggregationType === dateAggregationType.type }"
@@ -292,6 +296,20 @@
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="chartDataDateAggregationType === dateAggregationType.type"></f7-icon>
</template>
</f7-list-item>
<f7-list-item group-title>
<small>{{ tt('Timezone Used for Date Range') }}</small>
</f7-list-item>
<f7-list-item link="#" no-chevron popover-close
:title="timezoneType.displayName"
:class="{ 'list-item-selected': timezoneUsedForDateRange === timezoneType.type }"
:key="timezoneType.type"
v-for="timezoneType in allTimezoneTypesUsedForDateRange"
@click="setTimezoneUsedForDateRange(timezoneType.type)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="timezoneUsedForDateRange === timezoneType.type"></f7-icon>
</template>
</f7-list-item>
</f7-list>
</f7-popover>
@@ -352,7 +370,6 @@ import { TextDirection } from '@/core/text.ts';
import { type TimeRangeAndDateType, DateRange, DateRangeScene } from '@/core/datetime.ts';
import { AccountType } from '@/core/account.ts';
import { TransactionType } from '@/core/transaction.ts';
import { ChartDateAggregationType } from '@/core/statistics.ts';
import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
import { type TransactionReconciliationStatementResponseItemWithInfo } from '@/models/transaction.ts';
@@ -398,9 +415,12 @@ const {
startTime,
endTime,
reconciliationStatements,
chartDataDateAggregationType,
timezoneUsedForDateRange,
firstDayOfWeek,
fiscalYearStart,
allDateAggregationTypes,
allTimezoneTypesUsedForDateRange,
isCurrentLiabilityAccount,
currentAccount,
currentAccountCurrency,
@@ -430,7 +450,6 @@ const loading = ref<boolean>(false);
const loadingError = ref<unknown | null>(null);
const queryDateRangeType = ref<number>(DateRange.ThisMonth.type);
const showAccountBalanceTrendsCharts = ref<boolean>(false);
const chartDataDateAggregationType = ref<number>(ChartDateAggregationType.Day.type);
const transactionToDelete = ref<TransactionReconciliationStatementResponseItemWithInfo | null>(null);
const newClosingBalance = ref<number>(0);
const showCustomDateRangeSheet = ref<boolean>(false);
@@ -671,6 +690,10 @@ function setChartDataDateAggregationType(type: number): void {
chartDataDateAggregationType.value = type;
}
function setTimezoneUsedForDateRange(type: number): void {
timezoneUsedForDateRange.value = type;
}
function renderExternal(vl: unknown, vlData: ReconciliationStatementVirtualListData): void {
virtualDataItems.value = vlData;
}
+2 -2
View File
@@ -637,7 +637,7 @@ import {
import {
getCurrentUnixTime,
parseDateTimeFromUnixTime,
getDayFirstUnixTimeBySpecifiedUnixTime,
getDayFirstDateTimeBySpecifiedUnixTime,
getYearMonthFirstUnixTime,
getYearMonthLastUnixTime,
getShiftedDateRangeAndDateType,
@@ -1057,7 +1057,7 @@ function changeDateFilter(dateType: number): void {
if (dateType === DateRange.Custom.type) { // Custom
if (!query.value.minTime || !query.value.maxTime) {
customMaxDatetime.value = getCurrentUnixTime();
customMinDatetime.value = getDayFirstUnixTimeBySpecifiedUnixTime(customMaxDatetime.value);
customMinDatetime.value = getDayFirstDateTimeBySpecifiedUnixTime(customMaxDatetime.value).getUnixTime();
} else {
customMaxDatetime.value = query.value.maxTime;
customMinDatetime.value = query.value.minTime;