support date display type (Gregorian and Buddhist)

This commit is contained in:
MaysWind
2025-08-27 00:58:22 +08:00
parent 23ffdbb163
commit c099443783
32 changed files with 776 additions and 126 deletions
@@ -8,7 +8,7 @@ import { useAccountsStore } from '@/stores/account.ts';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import type { TypeAndDisplayName } from '@/core/base.ts';
import { type WeekDayValue, KnownDateTimeFormat } from '@/core/datetime.ts';
import type { WeekDayValue } from '@/core/datetime.ts';
import { TransactionType } from '@/core/transaction.ts';
import { KnownFileType } from '@/core/file.ts';
import type { Account } from '@/models/account.ts';
@@ -23,8 +23,7 @@ import { replaceAll } from '@/lib/common.ts';
import {
getUtcOffsetByUtcOffsetMinutes,
getTimezoneOffsetMinutes,
parseDateTimeFromUnixTime,
formatUnixTime
parseDateTimeFromUnixTime
} from '@/lib/datetime.ts';
export function useReconciliationStatementPageBase() {
@@ -32,6 +31,7 @@ export function useReconciliationStatementPageBase() {
tt,
getAllAccountBalanceTrendChartTypes,
getAllStatisticsDateAggregationTypesWithShortName,
formatUnixTimeToDefaultDateTimeWithoutLocaleOptions,
formatUnixTimeToLongDateTime,
formatUnixTimeToLongDate,
formatUnixTimeToShortTime,
@@ -241,7 +241,7 @@ export function useReconciliationStatementPageBase() {
}
return [
formatUnixTime(transactionTime, KnownDateTimeFormat.DefaultDateTime.format),
formatUnixTimeToDefaultDateTimeWithoutLocaleOptions(transactionTime),
type,
categoryName,
displayAmount,
+11 -2
View File
@@ -7,6 +7,7 @@ import { useAccountsStore } from '@/stores/account.ts';
import { useOverviewStore } from '@/stores/overview.ts';
import type { TypeAndDisplayName } from '@/core/base.ts';
import { DateDisplayType } from '@/core/calendar.ts';
import { WeekDay } from '@/core/datetime.ts';
import { type LocalizedDigitGroupingType, NumeralSystem, DecimalSeparator, DigitGroupingSymbol } from '@/core/numeral.ts';
@@ -22,6 +23,8 @@ export function useUserProfilePageBase() {
getDefaultCurrency,
getDefaultFirstDayOfWeek,
getAllWeekDays,
getAllCalendarDisplayTypes,
getAllDateDisplayTypes,
getAllLongDateFormats,
getAllShortDateFormats,
getAllLongTimeFormats,
@@ -58,8 +61,10 @@ export function useUserProfilePageBase() {
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats());
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats());
const allCalendarDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCalendarDisplayTypes());
const allDateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllDateDisplayTypes());
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats(DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType));
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats(DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType));
const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats());
const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats());
const allFiscalYearFormats = computed<TypeAndDisplayName[]>(() => getAllFiscalYearFormats());
@@ -105,6 +110,8 @@ export function useUserProfilePageBase() {
newProfile.value.defaultCurrency === oldProfile.value.defaultCurrency &&
newProfile.value.fiscalYearStart === oldProfile.value.fiscalYearStart &&
newProfile.value.firstDayOfWeek === oldProfile.value.firstDayOfWeek &&
newProfile.value.calendarDisplayType === oldProfile.value.calendarDisplayType &&
newProfile.value.dateDisplayType === oldProfile.value.dateDisplayType &&
newProfile.value.longDateFormat === oldProfile.value.longDateFormat &&
newProfile.value.shortDateFormat === oldProfile.value.shortDateFormat &&
newProfile.value.longTimeFormat === oldProfile.value.longTimeFormat &&
@@ -197,6 +204,8 @@ export function useUserProfilePageBase() {
allVisibleAccounts,
allVisibleCategorizedAccounts,
allWeekDays,
allCalendarDisplayTypes,
allDateDisplayTypes,
allLongDateFormats,
allShortDateFormats,
allLongTimeFormats,
@@ -41,7 +41,6 @@ import { DISPLAY_HIDDEN_AMOUNT, INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numera
import { type TransactionMonthlyIncomeAndExpenseData } from '@/models/transaction.ts';
import { parseDateTimeFromUnixTime } from '@/lib/datetime.ts';
import { getExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
export interface MonthlyIncomeAndExpenseCardClickEvent {
@@ -61,7 +60,7 @@ const emit = defineEmits<{
(e: 'click', event: MonthlyIncomeAndExpenseCardClickEvent): void;
}>();
const { tt, getCurrentLanguageTextDirection, formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
const { tt, getCurrentLanguageTextDirection, formatUnixTimeToShortMonth, formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
const settingsStore = useSettingsStore();
const userStore = useUserStore();
@@ -97,7 +96,7 @@ const chartOptions = computed<object>(() => {
if (props.data) {
for (let i = 0; i < props.data.length; i++) {
const item = props.data[i];
const monthShortName = parseDateTimeFromUnixTime(item.monthStartTime).getGregorianCalendarMonthDisplayShortName();
const monthShortName = formatUnixTimeToShortMonth(item.monthStartTime);
monthNames.push(monthShortName);
incomeAmounts.push(item.incomeAmount);
@@ -159,6 +159,32 @@
<v-card-text>
<v-row>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="type"
persistent-placeholder
:disabled="loading || saving"
:label="tt('Calendar Display Type')"
:placeholder="tt('Calendar Display Type')"
:items="allCalendarDisplayTypes"
v-model="newProfile.calendarDisplayType"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
item-value="type"
persistent-placeholder
:disabled="loading || saving"
:label="tt('Date Display Type')"
:placeholder="tt('Date Display Type')"
:items="allDateDisplayTypes"
v-model="newProfile.dateDisplayType"
/>
</v-col>
<v-col cols="12" md="6">
<v-select
item-title="displayName"
@@ -409,6 +435,8 @@ const {
allVisibleAccounts,
allVisibleCategorizedAccounts,
allWeekDays,
allCalendarDisplayTypes,
allDateDisplayTypes,
allLongDateFormats,
allShortDateFormats,
allLongTimeFormats,
@@ -138,6 +138,7 @@ const {
getWeekdayShortName,
formatUnixTimeToLongYearMonth,
formatUnixTimeToShortTime,
formatUnixTimeToDayOfMonth,
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
@@ -149,7 +150,7 @@ const fontSize = ref<number>(settingsStore.appSettings.fontSize);
const textDirection = computed<string>(() => getCurrentLanguageTextDirection());
const fontSizePreviewClassName = computed<string>(() => getFontSizePreviewClassName(fontSize.value));
const currentLongYearMonth = computed<string>(() => formatUnixTimeToLongYearMonth(currentUnixTime.value));
const currentDayOfMonth = computed<number>(() => parseDateTimeFromUnixTime(currentUnixTime.value).getLocalizedCalendarDay());
const currentDayOfMonth = computed<string>(() => formatUnixTimeToDayOfMonth(currentUnixTime.value));
const currentDayOfWeek = computed<string>(() => getWeekdayShortName(parseDateTimeFromUnixTime(currentUnixTime.value).getWeekDay()));
const currentShortTime = computed<string>(() => formatUnixTimeToShortTime(currentUnixTime.value));
+3 -2
View File
@@ -222,7 +222,7 @@
<template #media>
<div class="display-flex flex-direction-column transaction-date" :style="getTransactionDateStyle(transaction, idx > 0 ? transactionMonthList.items[idx - 1] : null)">
<span class="transaction-day full-line flex-direction-column">
{{ transaction.gregorianCalendarDayOfMonth }}
{{ formatUnixTimeToDayOfMonth(transaction.time) }}
</span>
<span class="transaction-day-of-week full-line flex-direction-column" v-if="transaction.displayDayOfWeek">
{{ getWeekdayShortName(transaction.displayDayOfWeek) }}
@@ -667,7 +667,8 @@ const {
getCurrentLanguageTextDirection,
getAllShortWeekdayNames,
getAllTransactionTagFilterTypes,
getWeekdayShortName
getWeekdayShortName,
formatUnixTimeToDayOfMonth
} = useI18n();
const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
@@ -29,6 +29,8 @@
</f7-list>
<f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Calendar Display Type" title="Calendar" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Date Display Type" title="Calendar" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Long Date Format" title="YYYY-MM-DD" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Short Date Format" title="YYYY-MM-DD" link="#"></f7-list-item>
<f7-list-item class="list-item-with-header-and-title list-item-no-item-after" header="Long Time Format" title="HH:mm:ss" link="#"></f7-list-item>
@@ -221,6 +223,46 @@
</f7-list>
<f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Calendar')"
:title="findDisplayNameByType(allCalendarDisplayTypes, newProfile.calendarDisplayType)"
@click="showCalendarDisplayTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Calendar Display Type')"
:enable-filter="true"
:filter-placeholder="tt('Calendar Display Type')"
:filter-no-items-text="tt('No results')"
:items="allCalendarDisplayTypes"
v-model:show="showCalendarDisplayTypePopup"
v-model="newProfile.calendarDisplayType">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
:header="tt('Date Display Type')"
:title="findDisplayNameByType(allDateDisplayTypes, newProfile.dateDisplayType)"
@click="showDateDisplayTypePopup = true"
>
<list-item-selection-popup value-type="item"
key-field="type" value-field="type"
title-field="displayName"
:title="tt('Date Display Type')"
:enable-filter="true"
:filter-placeholder="tt('Date Display Type')"
:filter-no-items-text="tt('No results')"
:items="allDateDisplayTypes"
v-model:show="showDateDisplayTypePopup"
v-model="newProfile.dateDisplayType">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item
link="#"
class="list-item-with-header-and-title list-item-no-item-after"
@@ -560,6 +602,8 @@ const {
allVisibleAccounts,
allVisibleCategorizedAccounts,
allWeekDays,
allCalendarDisplayTypes,
allDateDisplayTypes,
allLongDateFormats,
allShortDateFormats,
allLongTimeFormats,
@@ -601,6 +645,8 @@ const showLanguagePopup = ref<boolean>(false);
const showDefaultCurrencyPopup = ref<boolean>(false);
const showFirstDayOfWeekPopup = ref<boolean>(false);
const showFiscalYearStartSheet = ref<boolean>(false);
const showCalendarDisplayTypePopup = ref<boolean>(false);
const showDateDisplayTypePopup = ref<boolean>(false);
const showLongDateFormatPopup = ref<boolean>(false);
const showShortDateFormatPopup = ref<boolean>(false);
const showLongTimeFormatPopup = ref<boolean>(false);