code refactor

src/components/desktop/DateRangeSelectionDialog.vue

@@ -28,10 +28,10 @@
                                  :preset-ranges="presetRanges"
                                  v-model="dateRange">
                     <template #month="{ text }">
-                        {{ $t(`datetime.${text}.short`) }}
+                        {{ getMonthShortName(text) }}
                     </template>
                     <template #month-overlay-value="{ text }">
-                        {{ $t(`datetime.${text}.short`) }}
+                        {{ getMonthShortName(text) }}
                     </template>
                 </vue-date-picker>
             </v-card-text>
@@ -188,6 +188,9 @@ export default {
         },
         cancel() {
             this.$emit('update:show', false);
+        },
+        getMonthShortName(month) {
+            return this.$locale.getMonthShortName(month);
         }
     }
 }

src/components/mobile/DateRangeSelectionSheet.vue

@@ -29,10 +29,10 @@
                                  :preset-ranges="presetRanges"
                                  v-model="dateRange">
                     <template #month="{ text }">
-                        {{ $t(`datetime.${text}.short`) }}
+                        {{ getMonthShortName(text) }}
                     </template>
                     <template #month-overlay-value="{ text }">
-                        {{ $t(`datetime.${text}.short`) }}
+                        {{ getMonthShortName(text) }}
                     </template>
                 </vue-date-picker>
                 <f7-button large fill
@@ -189,6 +189,9 @@ export default {
         },
         cancel() {
             this.$emit('update:show', false);
+        },
+        getMonthShortName(month) {
+            return this.$locale.getMonthShortName(month);
         }
     }
 }

src/components/mobile/DateTimeSelectionSheet.vue

@@ -24,10 +24,10 @@
                              :is24="is24Hour"
                              v-model="dateTime">
                 <template #month="{ text }">
-                    {{ $t(`datetime.${text}.short`) }}
+                    {{ getMonthShortName(text) }}
                 </template>
                 <template #month-overlay-value="{ text }">
-                    {{ $t(`datetime.${text}.short`) }}
+                    {{ getMonthShortName(text) }}
                 </template>
             </vue-date-picker>
         </f7-page-content>
@@ -115,6 +115,9 @@ export default {
 
             this.$emit('update:modelValue', unixTime);
             this.$emit('update:show', false);
+        },
+        getMonthShortName(month) {
+            return this.$locale.getMonthShortName(month);
         }
     }
 }

src/lib/i18n.js

@@ -371,6 +371,14 @@ function getAllShortTimeFormats(translateFn) {
     return getDateTimeFormats(translateFn, datetime.allShortTimeFormat, datetime.allShortTimeFormatArray, 'format.shortTime', defaultShortTimeFormatTypeName, datetime.defaultShortTimeFormat);
 }
 
+function getMonthShortName(month, translateFn) {
+    return translateFn(`datetime.${month}.short`);
+}
+
+function getWeekdayShortName(weekDay, translateFn) {
+    return translateFn(`datetime.${weekDay}.short`);
+}
+
 function getI18nLongDateFormat(translateFn, formatTypeValue) {
     const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
     return getDateTimeFormat(translateFn, datetime.allLongDateFormat, datetime.allLongDateFormatArray, 'format.longDate', defaultLongDateFormatTypeName, datetime.defaultLongDateFormat, formatTypeValue);
@@ -912,6 +920,8 @@ export function i18nFunctions(i18nGlobal) {
         getAllShortDateFormats: () => getAllShortDateFormats(i18nGlobal.t),
         getAllLongTimeFormats: () => getAllLongTimeFormats(i18nGlobal.t),
         getAllShortTimeFormats: () => getAllShortTimeFormats(i18nGlobal.t),
+        getMonthShortName: (month) => getMonthShortName(month, i18nGlobal.t),
+        getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
         formatUnixTimeToLongDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat) + ' ' + getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToShortDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortDateFormat(i18nGlobal.t, userStore.currentUserShortDateFormat) + ' ' + getI18nShortTimeFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongDate: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),

src/views/mobile/settings/TextSizeSettingsPage.vue

@@ -143,7 +143,7 @@ export default {
             return getDay(this.currentTime);
         },
         currentDayOfWeek() {
-            return this.$t(`datetime.${getDayOfWeekName(this.currentTime)}.short`);
+            return this.$locale.getWeekdayShortName(getDayOfWeekName(this.currentTime));
         },
         currentShortTime() {
             return this.$locale.formatUnixTimeToShortTime(this.userStore, this.currentTime);

src/views/mobile/transactions/ListPage.vue

@@ -159,7 +159,7 @@
                                         {{ transaction.day }}
                                     </span>
                                     <span class="transaction-day-of-week full-line flex-direction-column">
-                                        {{ $t(`datetime.${transaction.dayOfWeek}.short`) }}
+                                        {{ getWeekdayShortName(transaction) }}
                                     </span>
                                 </div>
                             </template>
@@ -857,6 +857,9 @@ export default {
                 enableThousandsSeparator: this.settingsStore.appSettings.thousandsSeparator
             });
         },
+        getWeekdayShortName(transaction) {
+            return this.$locale.getWeekdayShortName(transaction.dayOfWeek);
+        },
         getTransactionTypeName(type, defaultName) {
             switch (type){
                 case this.allTransactionTypes.ModifyBalance: