mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 23:47:33 +08:00
support date display type (Gregorian and Buddhist)
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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));
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user