mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 16:07:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

migrate user profile page to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-20 23:56:09 +08:00
parent 9d9e6ef9bd
commit f4998da4cd
10 changed files with 824 additions and 980 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/helper.js
+2 -125
View File
@@ -2,11 +2,10 @@ import moment from 'moment-timezone';
import { DEFAULT_LANGUAGE, ALL_LANGUAGES } from '@/locales/index.ts';
import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE } from '@/core/datetime.ts';
import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange } from '@/core/datetime.ts';
import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
import { DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts';
import { PresetAmountColor } from '@/core/color.ts';
import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts'
import { AccountType, AccountCategory } from '@/core/account.ts';
import { CategoryType } from '@/core/category.ts';
import { TransactionEditScopeType, TransactionTagFilterType } from '@/core/transaction.ts';
@@ -30,7 +29,6 @@ import {
isPM,
parseDateFromUnixTime,
formatUnixTime,
formatCurrentTime,
getYear,
getTimezoneOffset,
getTimezoneOffsetMinutes,
@@ -67,42 +65,6 @@ function getLanguageDisplayName(translateFn, languageName) {
return translateFn(`language.${languageName}`);
}
function getAllLanguageInfoArray(translateFn, includeSystemDefault) {
const ret = [];
for (const languageTag in ALL_LANGUAGES) {
if (!Object.prototype.hasOwnProperty.call(ALL_LANGUAGES, languageTag)) {
continue;
}
const languageInfo = ALL_LANGUAGES[languageTag];
let displayName = languageInfo.displayName;
let languageNameInCurrentLanguage = getLanguageDisplayName(translateFn, languageInfo.name);
if (languageNameInCurrentLanguage && languageNameInCurrentLanguage !== displayName) {
displayName = `${languageNameInCurrentLanguage} (${displayName})`;
}
ret.push({
languageTag: languageTag,
displayName: displayName
});
}
ret.sort(function (lang1, lang2) {
return lang1.languageTag.localeCompare(lang2.languageTag);
});
if (includeSystemDefault) {
ret.splice(0, 0, {
languageTag: '',
displayName: translateFn('System Default')
});
}
return ret;
}
function getLanguageInfo(locale) {
return ALL_LANGUAGES[locale];
}
@@ -302,26 +264,6 @@ function getAllMinWeekdayNames(translateFn) {
return ret;
}
function getAllLongDateFormats(translateFn) {
const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
return getDateTimeFormats(translateFn, LongDateFormat.all(), LongDateFormat.values(), 'format.longDate', defaultLongDateFormatTypeName, LongDateFormat.Default);
}
function getAllShortDateFormats(translateFn) {
const defaultShortDateFormatTypeName = translateFn('default.shortDateFormat');
return getDateTimeFormats(translateFn, ShortDateFormat.all(), ShortDateFormat.values(), 'format.shortDate', defaultShortDateFormatTypeName, ShortDateFormat.Default);
}
function getAllLongTimeFormats(translateFn) {
const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
return getDateTimeFormats(translateFn, LongTimeFormat.all(), LongTimeFormat.values(), 'format.longTime', defaultLongTimeFormatTypeName, LongTimeFormat.Default);
}
function getAllShortTimeFormats(translateFn) {
const defaultShortTimeFormatTypeName = translateFn('default.shortTimeFormat');
return getDateTimeFormats(translateFn, ShortTimeFormat.all(), ShortTimeFormat.values(), 'format.shortTime', defaultShortTimeFormatTypeName, ShortTimeFormat.Default);
}
function getMonthdayOrdinal(monthDay, translateFn) {
return translateFn(`datetime.monthDayOrdinal.${monthDay}`);
}
@@ -445,31 +387,6 @@ function formatYearQuarter(translateFn, year, quarter) {
}
}
function getDateTimeFormats(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType) {
const defaultFormat = getDateTimeFormat(translateFn, allFormatMap, allFormatArray,
localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE);
const ret = [];
ret.push({
type: LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE,
format: defaultFormat,
displayName: `${translateFn('Language Default')} (${formatCurrentTime(defaultFormat)})`
});
for (let i = 0; i < allFormatArray.length; i++) {
const formatType = allFormatArray[i];
const format = translateFn(`${localeFormatPathPrefix}.${formatType.key}`);
ret.push({
type: formatType.type,
format: format,
displayName: formatCurrentTime(format)
});
}
return ret;
}
function getDateTimeFormat(translateFn, allFormatMap, allFormatArray, localeFormatPathPrefix, localeDefaultFormatTypeName, systemDefaultFormatType, formatTypeValue) {
const type = getDateTimeFormatType(allFormatMap, allFormatArray, formatTypeValue, localeDefaultFormatTypeName, systemDefaultFormatType);
return translateFn(`${localeFormatPathPrefix}.${type.key}`);
@@ -974,39 +891,6 @@ function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRat
return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
}
function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
const ret = [];
let defaultAmountName = '';
if (expenseOrIncome === 1) { // expense
defaultAmountName = PresetAmountColor.DefaultExpenseColor.name;
} else if (expenseOrIncome === 2) { // income
defaultAmountName = PresetAmountColor.DefaultIncomeColor.name;
}
if (defaultAmountName) {
defaultAmountName = translateFn('color.amount.' + defaultAmountName);
}
ret.push({
type: PresetAmountColor.SystemDefaultType,
displayName: translateFn('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
});
const allPresetAmountColors = PresetAmountColor.values();
for (let i = 0; i < allPresetAmountColors.length; i++) {
const amountColor = allPresetAmountColors[i];
ret.push({
type: amountColor.type,
displayName: translateFn('color.amount.' + amountColor.name)
});
}
return ret;
}
function getAllAccountCategories(translateFn) {
const ret = [];
const allCategories = AccountCategory.values();
@@ -1373,14 +1257,9 @@ export function translateError(message, translateFn) {
export function i18nFunctions(i18nGlobal) {
return {
getAllLanguageInfoArray: (includeSystemDefault) => getAllLanguageInfoArray(i18nGlobal.t, includeSystemDefault),
getDefaultCurrency: () => getDefaultCurrency(i18nGlobal.t),
getDefaultFirstDayOfWeek: () => getDefaultFirstDayOfWeek(i18nGlobal.t),
getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
getAllLongDateFormats: () => getAllLongDateFormats(i18nGlobal.t),
getAllShortDateFormats: () => getAllShortDateFormats(i18nGlobal.t),
getAllLongTimeFormats: () => getAllLongTimeFormats(i18nGlobal.t),
getAllShortTimeFormats: () => getAllShortTimeFormats(i18nGlobal.t),
getMonthdayShortName: (monthDay) => getMonthdayShortName(monthDay, i18nGlobal.t),
getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
@@ -1420,8 +1299,6 @@ export function i18nFunctions(i18nGlobal) {
formatAmount: (userStore, value, currencyCode) => getFormattedAmount(value, i18nGlobal.t, userStore, currencyCode),
formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
getAllCategoricalChartTypes: () => getAllCategoricalChartTypes(i18nGlobal.t),
src/locales/helpers.ts
+71 -1
View File
@@ -9,6 +9,7 @@ import {
type DateFormat,
type TimeFormat,
type LocalizedMeridiemIndicator,
type LocalizedDateTimeFormat,
type LocalizedDateRange,
type LocalizedRecentMonthDateRange,
Month,
@@ -19,7 +20,8 @@ import {
LongTimeFormat,
ShortTimeFormat,
DateRange,
DateRangeScene
DateRangeScene,
LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE
} from '@/core/datetime.ts';
import {
@@ -44,6 +46,10 @@ import {
CurrencySortingType
} from '@/core/currency.ts';
import {
PresetAmountColor
} from '@/core/color.ts';
import {
type LocalizedAccountCategory,
AccountType,
@@ -98,6 +104,7 @@ import {
import {
isPM,
formatUnixTime,
formatCurrentTime,
getTimezoneOffset,
getTimezoneOffsetMinutes,
getBrowserTimezoneOffset,
@@ -706,6 +713,30 @@ export function useI18n() {
return ret;
}
function getLocalizedDateTimeFormats<T extends DateFormat | TimeFormat>(type: string, allFormatMap: Record<string, T>, allFormatArray: T[], languageDefaultTypeNameKey: string, systemDefaultFormatType: T): LocalizedDateTimeFormat[] {
const defaultFormat = getLocalizedDateTimeFormat<T>(type, allFormatMap, allFormatArray, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE, languageDefaultTypeNameKey, systemDefaultFormatType);
const ret: LocalizedDateTimeFormat[] = [];
ret.push({
type: LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE,
format: defaultFormat,
displayName: `${t('Language Default')} (${formatCurrentTime(defaultFormat)})`
});
for (let i = 0; i < allFormatArray.length; i++) {
const formatType = allFormatArray[i];
const format = t(`format.${type}.${formatType.key}`);
ret.push({
type: formatType.type,
format: format,
displayName: formatCurrentTime(format)
});
}
return ret;
}
function getAllDateRanges(scene: DateRangeScene, includeCustom?: boolean, includeBillingCycle?: boolean): LocalizedDateRange[] {
const ret: LocalizedDateRange[] = [];
const allDateRanges = DateRange.values();
@@ -869,6 +900,39 @@ export function useI18n() {
return ret;
}
function getAllExpenseIncomeAmountColors(categoryType: CategoryType): TypeAndDisplayName[] {
const ret: TypeAndDisplayName[] = [];
let defaultAmountName = '';
if (categoryType === CategoryType.Expense) {
defaultAmountName = PresetAmountColor.DefaultExpenseColor.name;
} else if (categoryType === CategoryType.Income) { // income
defaultAmountName = PresetAmountColor.DefaultIncomeColor.name;
}
if (defaultAmountName) {
defaultAmountName = t('color.amount.' + defaultAmountName);
}
ret.push({
type: PresetAmountColor.SystemDefaultType,
displayName: t('System Default') + (defaultAmountName ? ` (${defaultAmountName})` : '')
});
const allPresetAmountColors = PresetAmountColor.values();
for (let i = 0; i < allPresetAmountColors.length; i++) {
const amountColor = allPresetAmountColors[i];
ret.push({
type: amountColor.type,
displayName: t('color.amount.' + amountColor.name)
});
}
return ret;
}
function getAllAccountCategories(): LocalizedAccountCategory[] {
const ret: LocalizedAccountCategory[] = [];
const allCategories = AccountCategory.values();
@@ -1359,6 +1423,10 @@ export function useI18n() {
getAllShortWeekdayNames,
getAllMinWeekdayNames,
getAllWeekDays,
getAllLongDateFormats: () => getLocalizedDateTimeFormats<LongDateFormat>('longDate', LongDateFormat.all(), LongDateFormat.values(), 'longDateFormat', LongDateFormat.Default),
getAllShortDateFormats: () => getLocalizedDateTimeFormats<ShortDateFormat>('shortDate', ShortDateFormat.all(), ShortDateFormat.values(), 'shortDateFormat', ShortDateFormat.Default),
getAllLongTimeFormats: () => getLocalizedDateTimeFormats<LongTimeFormat>('longTime', LongTimeFormat.all(), LongTimeFormat.values(), 'longTimeFormat', LongTimeFormat.Default),
getAllShortTimeFormats: () => getLocalizedDateTimeFormats<ShortTimeFormat>('shortTime', ShortTimeFormat.all(), ShortTimeFormat.values(), 'shortTimeFormat', ShortTimeFormat.Default),
getAllDateRanges,
getAllRecentMonthDateRanges,
getAllTimezones,
@@ -1368,6 +1436,8 @@ export function useI18n() {
getAllDigitGroupingTypes,
getAllCurrencyDisplayTypes,
getAllCurrencySortingTypes: () => getLocalizedDisplayNameAndType(CurrencySortingType.values()),
getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(CategoryType.Expense),
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(CategoryType.Income),
getAllAccountCategories,
getAllAccountTypes: () => getLocalizedDisplayNameAndType(AccountType.values()),
getAllCategoricalChartTypes: () => getLocalizedDisplayNameAndType(CategoricalChartType.values()),