fix the display format of the fiscal year start date not updated after changing the number system on user profile page

src/components/base/FiscalYearStartSelectionBase.ts

@@ -2,9 +2,14 @@ import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import { NumeralSystem } from '@/core/numeral.ts';
 import type { MonthDay } from '@/core/datetime.ts';
 import { FiscalYearStart } from '@/core/fiscalyear.ts';
 
+import {
+    isDefined
+} from '@/lib/common.ts';
+
 import {
     getLocalDatetimeFromUnixTime,
     getThisYearFirstUnixTime,
@@ -16,6 +21,7 @@ export interface CommonFiscalYearStartSelectionProps {
     disabled?: boolean;
     readonly?: boolean;
     label?: string;
+    numeralSystem?: number;
 }
 
 export interface CommonFiscalYearStartSelectionEmits {
@@ -37,7 +43,7 @@ function getFiscalYearStartFromProps(props: CommonFiscalYearStartSelectionProps)
 }
 
 export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSelectionProps) {
-    const { formatGregorianTextualMonthDayToGregorianLikeLongMonthDay } = useI18n();
+    const { getCurrentNumeralSystemType, formatGregorianTextualMonthDayToGregorianLikeLongMonthDay } = useI18n();
 
     const disabledDates = (date: Date) => {
         // Disable February 29 (leap day)
@@ -46,6 +52,14 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
 
     const selectedFiscalYearStart = ref<number>(getFiscalYearStartFromProps(props));
 
+    const actualNumeralSystem = computed<NumeralSystem>(() => {
+        if (isDefined(props.numeralSystem)) {
+            return NumeralSystem.valueOf(props.numeralSystem) ?? NumeralSystem.Default;
+        } else {
+            return getCurrentNumeralSystemType();
+        }
+    });
+
     const selectedFiscalYearStartValue = computed<Date>({
         get: () => {
             const fiscalYearStart = FiscalYearStart.valueOf(selectedFiscalYearStart.value);
@@ -71,7 +85,7 @@ export function useFiscalYearStartSelectionBase(props: CommonFiscalYearStartSele
             fiscalYearStart = FiscalYearStart.Default;
         }
 
-        return formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(fiscalYearStart.toMonthDashDayString());
+        return formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(fiscalYearStart.toMonthDashDayString(), actualNumeralSystem.value);
     });
 
     const allowedMinDate = computed<Date>(() => getLocalDatetimeFromUnixTime(getThisYearFirstUnixTime()));

src/components/common/DateTimePicker.vue

@@ -55,8 +55,9 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import type { CalendarType } from '@/core/calendar.ts';
+import { NumeralSystem } from '@/core/numeral.ts';
 import type { PresetDateRange, WeekDayValue } from '@/core/datetime.ts';
-import { isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
+import { isDefined, isArray, arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
 import { getAllowedYearRange, getYearMonthDayDateTime } from '@/lib/datetime.ts';
 
 type VueDatePickerType = InstanceType<typeof VueDatePicker>;
@@ -66,6 +67,7 @@ const props = defineProps<{
     modelValue: SupportedModelValue;
     datetimePickerClass?: string;
     isDarkMode: boolean;
+    numeralSystem?: number;
     enableTimePicker: boolean;
     disableYearSelect?: boolean;
     vertical?: boolean;
@@ -86,6 +88,7 @@ const {
     tt,
     getAllMinWeekdayNames,
     getCurrentCalendarDisplayType,
+    getCurrentNumeralSystemType,
     isLongDateMonthAfterYear,
     isLongTime24HourFormat,
     getCalendarDisplayShortYearFromUnixTime,
@@ -106,6 +109,14 @@ const isYearFirst = computed<boolean>(() => isLongDateMonthAfterYear());
 const is24Hour = computed<boolean>(() => isLongTime24HourFormat());
 const alternateCalendarType = computed<CalendarType | undefined>(() => getCurrentCalendarDisplayType().secondaryCalendarType);
 
+const actualNumeralSystem = computed<NumeralSystem>(() => {
+    if (isDefined(props.numeralSystem)) {
+        return NumeralSystem.valueOf(props.numeralSystem) ?? NumeralSystem.Default;
+    } else {
+        return getCurrentNumeralSystemType();
+    }
+});
+
 const dateTime = computed<SupportedModelValue>({
     get: () => props.modelValue,
     set: (value: SupportedModelValue) => emit('update:modelValue', value)
@@ -130,21 +141,21 @@ function switchView(viewType: MenuView): void {
 }
 
 function getDisplayYear(year: number): string {
-    return getCalendarDisplayShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime());
+    return getCalendarDisplayShortYearFromUnixTime(getYearMonthDayDateTime(year, 1, 1).getUnixTime(), actualNumeralSystem.value);
 }
 
 function getDisplayMonth(month: number): string {
     if (isArray(dateTime.value)) {
-        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime());
+        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value[0].getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
     } else if (dateTime.value) {
-        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime());
+        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(dateTime.value.getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
     } else {
-        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(new Date().getFullYear(), month + 1, 1).getUnixTime());
+        return getCalendarDisplayShortMonthFromUnixTime(getYearMonthDayDateTime(new Date().getFullYear(), month + 1, 1).getUnixTime(), actualNumeralSystem.value);
     }
 }
 
 function getDisplayDay(date: Date): string {
-    return getCalendarDisplayDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime());
+    return getCalendarDisplayDayOfMonthFromUnixTime(getYearMonthDayDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate()).getUnixTime(), actualNumeralSystem.value);
 }
 
 defineExpose({

src/components/desktop/FiscalYearStartSelect.vue

@@ -13,6 +13,7 @@
 
         <template #no-data>
             <date-time-picker :is-dark-mode="isDarkMode"
+                              :numeral-system="numeralSystem"
                               :vertical="true"
                               :enable-time-picker="false"
                               :disable-year-select="true"

src/components/mobile/FiscalYearStartSelectionSheet.vue

@@ -14,6 +14,7 @@
             <div class="block block-outline no-margin no-padding">
                 <date-time-picker datetime-picker-class="justify-content-center"
                                   :is-dark-mode="isDarkMode"
+                                  :numeral-system="numeralSystem"
                                   :enable-time-picker="false"
                                   :disable-year-select="true"
                                   :no-swipe-and-scroll="true"

src/locales/helpers.ts

@@ -1830,9 +1830,9 @@ export function useI18n() {
         return getLocalizedLongTimeFormat().indexOf('ss') >= 0;
     }
 
-    function formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(monthDay: TextualMonthDay): string {
+    function formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(monthDay: TextualMonthDay, numeralSystem?: NumeralSystem): string {
         const gregorianLikeCalendarType = getGregorianLikeCalendarType();
-        return formatGregorianCalendarMonthDashDay(monthDay, getLocalizedLongMonthDayFormat(), getDateTimeFormatOptions({ calendarType: gregorianLikeCalendarType }));
+        return formatGregorianCalendarMonthDashDay(monthDay, getLocalizedLongMonthDayFormat(), getDateTimeFormatOptions({ calendarType: gregorianLikeCalendarType, numeralSystem: numeralSystem }));
     }
 
     function formatUnixTimeToGregorianLikeYearQuarter(unixTime: number): string {
@@ -1874,14 +1874,14 @@ export function useI18n() {
         return formatTimeRangeToGregorianLikeFiscalYearFormat(fiscalYearFormat, timeRange);
     }
 
-    function formatFiscalYearStartToGregorianLikeLongMonth(fiscalYearStartValue: number) {
+    function formatFiscalYearStartToGregorianLikeLongMonth(fiscalYearStartValue: number, numeralSystem?: NumeralSystem): string {
         let fiscalYearStart = FiscalYearStart.valueOf(fiscalYearStartValue);
 
         if (!fiscalYearStart) {
             fiscalYearStart = FiscalYearStart.Default;
         }
 
-        return formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(fiscalYearStart.toMonthDashDayString());
+        return formatGregorianTextualMonthDayToGregorianLikeLongMonthDay(fiscalYearStart.toMonthDashDayString(), numeralSystem);
     }
 
     function formatDateRange(dateType: number, startTime: number, endTime: number): string {
@@ -2422,9 +2422,9 @@ export function useI18n() {
         isLongTimeMinuteTwoDigits,
         isLongTimeSecondTwoDigits,
         // format date time (by calendar display type) functions
-        getCalendarDisplayShortYearFromUnixTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortYearFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType }), utcOffset, currentUtcOffset),
+        getCalendarDisplayShortYearFromUnixTime: (unixTime: number, numeralSystem?: NumeralSystem, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortYearFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem }), utcOffset, currentUtcOffset),
-        getCalendarDisplayShortMonthFromUnixTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, 'MMM', getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType }), utcOffset, currentUtcOffset),
+        getCalendarDisplayShortMonthFromUnixTime: (unixTime: number, numeralSystem?: NumeralSystem, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, 'MMM', getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem }), utcOffset, currentUtcOffset),
-        getCalendarDisplayDayOfMonthFromUnixTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDayFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType }), utcOffset, currentUtcOffset),
+        getCalendarDisplayDayOfMonthFromUnixTime: (unixTime: number, numeralSystem?: NumeralSystem, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDayFormat(), getDateTimeFormatOptions({ calendarType: getCurrentCalendarDisplayType().primaryCalendarType, numeralSystem: numeralSystem }), utcOffset, currentUtcOffset),
         // format date time (by date display type) functions
         formatUnixTimeToLongDateTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedLongDateFormat() + ' ' + getLocalizedLongTimeFormat(), getDateTimeFormatOptions(), utcOffset, currentUtcOffset),
         formatUnixTimeToShortDateTime: (unixTime: number, utcOffset?: number, currentUtcOffset?: number) => formatUnixTime(unixTime, getLocalizedShortDateFormat() + ' ' + getLocalizedShortTimeFormat(), getDateTimeFormatOptions(), utcOffset, currentUtcOffset),

src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue

@@ -149,6 +149,7 @@
                                     :disabled="loading || saving"
                                     :label="tt('Fiscal Year Start Date')"
                                     :placeholder="tt('Fiscal Year Start Date')"
+                                    :numeral-system="newProfile.numeralSystem"
                                     v-model="newProfile.fiscalYearStart"
                                 />
                             </v-col>

src/views/mobile/users/UserProfilePage.vue

@@ -211,10 +211,11 @@
                 link="#" no-chevron
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Fiscal Year Start Date')"
-                :title="formatFiscalYearStartToGregorianLikeLongMonth(newProfile.fiscalYearStart)"
+                :title="formatFiscalYearStartToGregorianLikeLongMonth(newProfile.fiscalYearStart, NumeralSystem.valueOf(newProfile.numeralSystem) ?? NumeralSystem.Default)"
                 @click="showFiscalYearStartSheet = true"
             >
                 <fiscal-year-start-selection-sheet
+                    :numeral-system="newProfile.numeralSystem"
                     v-model:show="showFiscalYearStartSheet"
                     v-model="newProfile.fiscalYearStart">
                 </fiscal-year-start-selection-sheet>
@@ -569,6 +570,7 @@ import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
 import { TextDirection } from '@/core/text.ts';
+import { NumeralSystem } from '@/core/numeral.ts';
 import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
 
 import type { UserProfileResponse } from '@/models/user.ts';