mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-18 00:34:28 +08:00
support setting timezone type in reconciliation statement dialog / page
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user