fix the locale settings on the profile page does not immediately update the preview

This commit is contained in:
MaysWind
2025-09-25 23:32:02 +08:00
parent 8df73f202a
commit eb305139f5
2 changed files with 85 additions and 67 deletions
+16 -7
View File
@@ -39,6 +39,10 @@ export function useUserProfilePageBase() {
getAllExpenseAmountColors,
getAllIncomeAmountColors,
getAllTransactionEditScopeTypes,
getLocaleDefaultDateDisplayType,
getLocaleDefaultNumeralSystemType,
getLocaleDefaultDecimalSeparator,
getLocaleDefaultDigitGroupingSymbol,
setLanguage
} = useI18n();
@@ -57,22 +61,27 @@ export function useUserProfilePageBase() {
const resending = ref<boolean>(false);
const saving = ref<boolean>(false);
const currentDateDisplayType = computed<DateDisplayType>(() => DateDisplayType.valueOf(newProfile.value.dateDisplayType) ?? getLocaleDefaultDateDisplayType());
const currentNumeralSystem = computed<NumeralSystem>(() => NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? getLocaleDefaultNumeralSystemType());
const currentDecimalSeparator = computed<string>(() => DecimalSeparator.valueOf(newProfile.value.decimalSeparator)?.symbol ?? getLocaleDefaultDecimalSeparator().symbol);
const currentDigitGroupingSymbol = computed<string>(() => DigitGroupingSymbol.valueOf(newProfile.value.digitGroupingSymbol)?.symbol ?? getLocaleDefaultDigitGroupingSymbol().symbol);
const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
const allCalendarDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCalendarDisplayTypes());
const allDateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllDateDisplayTypes());
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType || DateDisplayType.Default.calendarType));
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType || DateDisplayType.Default.calendarType));
const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default));
const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default));
const allFiscalYearFormats = computed<TypeAndDisplayName[]>(() => getAllFiscalYearFormats(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DateDisplayType.valueOf(newProfile.value.dateDisplayType)?.calendarType || DateDisplayType.Default.calendarType));
const allCurrencyDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencyDisplayTypes(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DecimalSeparator.valueOf(newProfile.value.decimalSeparator)?.symbol || DecimalSeparator.Default.symbol));
const allLongDateFormats = computed<TypeAndDisplayName[]>(() => getAllLongDateFormats(currentNumeralSystem.value, currentDateDisplayType.value.calendarType));
const allShortDateFormats = computed<TypeAndDisplayName[]>(() => getAllShortDateFormats(currentNumeralSystem.value, currentDateDisplayType.value.calendarType));
const allLongTimeFormats = computed<TypeAndDisplayName[]>(() => getAllLongTimeFormats(currentNumeralSystem.value));
const allShortTimeFormats = computed<TypeAndDisplayName[]>(() => getAllShortTimeFormats(currentNumeralSystem.value));
const allFiscalYearFormats = computed<TypeAndDisplayName[]>(() => getAllFiscalYearFormats(currentNumeralSystem.value, currentDateDisplayType.value.calendarType));
const allCurrencyDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencyDisplayTypes(currentNumeralSystem.value, currentDecimalSeparator.value));
const allNumeralSystemTypes = computed<TypeAndDisplayName[]>(() => getAllNumeralSystemTypes());
const allDecimalSeparators = computed<TypeAndDisplayName[]>(() => getAllDecimalSeparators());
const allDigitGroupingSymbols = computed<TypeAndDisplayName[]>(() => getAllDigitGroupingSymbols());
const allDigitGroupingTypes = computed<LocalizedDigitGroupingType[]>(() => getAllDigitGroupingTypes(NumeralSystem.valueOf(newProfile.value.numeralSystem) ?? NumeralSystem.Default, DigitGroupingSymbol.valueOf(newProfile.value.digitGroupingSymbol)?.symbol || DigitGroupingSymbol.Default.symbol));
const allDigitGroupingTypes = computed<LocalizedDigitGroupingType[]>(() => getAllDigitGroupingTypes(currentNumeralSystem.value, currentDigitGroupingSymbol.value));
const allCoordinateDisplayTypes = computed<TypeAndDisplayName[]>(() => getAllCoordinateDisplayTypes());
const allExpenseAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllExpenseAmountColors());
const allIncomeAmountColorTypes = computed<TypeAndDisplayName[]>(() => getAllIncomeAmountColors());