code refactor

src/components/desktop/AmountInput.vue

@@ -39,15 +39,6 @@ import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transac
 import { removeAll } from '@/lib/common.ts';
 import logger from '@/lib/logger.ts';
 
-const {
-    tt,
-    getCurrentDecimalSeparator,
-    getCurrentDigitGroupingSymbol,
-    parseAmount,
-    formatAmount,
-    getAmountPrependAndAppendText
-} = useI18n();
-
 const props = defineProps<{
     class?: string;
     color?: string;
@@ -68,6 +59,15 @@ const emit = defineEmits<{
     (e: 'update:modelValue', value: number): void;
 }>();
 
+const {
+    tt,
+    getCurrentDecimalSeparator,
+    getCurrentDigitGroupingSymbol,
+    parseAmount,
+    formatAmount,
+    getAmountPrependAndAppendText
+} = useI18n();
+
 const rules = [
     (v: string) => {
         if (v === '') {

src/components/desktop/DateRangeSelectionDialog.vue

@@ -56,9 +56,9 @@
 import { computed, watch } from 'vue';
 import { useTheme } from 'vuetify';
 
+import { useI18n } from '@/locales/helpers.ts';
 import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
 
-import { useI18n } from '@/locales/helpers.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import { ThemeType } from '@/core/theme.ts';
@@ -82,12 +82,12 @@ const emit = defineEmits<{
 }>();
 
 const theme = useTheme();
+
 const { tt, getMonthShortName } = useI18n();
+const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
 
 const userStore = useUserStore();
 
-const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
-
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
 const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
 const showState = computed<boolean>({

src/components/desktop/MonthRangeSelectionDialog.vue

@@ -67,9 +67,8 @@
 import { computed, watch } from 'vue';
 import { useTheme } from 'vuetify';
 
-import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
-
 import { useI18n } from '@/locales/helpers.ts';
+import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
 
 import { ThemeType } from '@/core/theme.ts';
 import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
@@ -86,8 +85,8 @@ const emit = defineEmits<{
 }>();
 
 const theme = useTheme();
-const { tt, getMonthShortName } = useI18n();
 
+const { tt, getMonthShortName } = useI18n();
 const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
 
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);

src/components/desktop/ScheduleFrequencySelect.vue

@@ -57,9 +57,8 @@
 <script setup lang="ts">
 import { ref, computed, nextTick, useTemplateRef } from 'vue';
 
-import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
-
 import { useI18n } from '@/locales/helpers.ts';
+import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
@@ -74,11 +73,10 @@ const emit = defineEmits<{
 }>();
 
 const { tt, getMultiMonthdayShortNames, getMultiWeekdayLongNames } = useI18n();
+const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();
 
 const userStore = useUserStore();
 
-const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();
-
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 
 const menuState = ref<boolean>(false);

src/components/mobile/DateRangeSelectionSheet.vue

@@ -56,10 +56,10 @@
 import { computed, useTemplateRef } from 'vue';
 import VueDatePicker from '@vuepic/vue-datepicker';
 
-import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
-
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
+import { type CommonDateRangeSelectionProps, useDateRangeSelectionBase } from '@/components/base/DateRangeSelectionBase.ts';
+
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 import { useUserStore } from '@/stores/user.ts';
 
@@ -80,12 +80,11 @@ const emit = defineEmits<{
 
 const { tt, getMonthShortName } = useI18n();
 const { showToast } = useI18nUIComponents();
+const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
 
 const environmentsStore = useEnvironmentsStore();
 const userStore = useUserStore();
 
-const { yearRange, dateRange, dayNames, isYearFirst, is24Hour, beginDateTime, endDateTime, presetRanges, getFinalDateRange } = useDateRangeSelectionBase(props);
-
 const datetimepicker = useTemplateRef<VueDatePickerType>('datetimepicker');
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);

src/components/mobile/MonthRangeSelectionSheet.vue

@@ -46,10 +46,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
-
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
+import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';
+
 import { useEnvironmentsStore } from '@/stores/environment.ts';
 
 import { getYearMonthObjectFromString } from '@/lib/datetime.ts';
@@ -62,11 +62,10 @@ const emit = defineEmits<{
 
 const { tt, getMonthShortName } = useI18n();
 const { showToast } = useI18nUIComponents();
+const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
 
 const environmentsStore = useEnvironmentsStore();
 
-const { yearRange, dateRange, isYearFirst, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);
-
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
 
 function confirm(): void {

src/components/mobile/NumberPadSheet.vue

@@ -74,16 +74,6 @@ import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
 import { isString, isNumber, removeAll } from '@/lib/common.ts';
 
-const {
-    tt,
-    getCurrentDecimalSeparator,
-    getCurrentDigitGroupingSymbol,
-    appendDigitGroupingSymbol,
-    parseAmount,
-    formatAmount
-} = useI18n();
-const { showToast } = useI18nUIComponents();
-
 const props = defineProps<{
     modelValue: number | string;
     minValue?: number;
@@ -97,6 +87,16 @@ const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
 }>();
 
+const {
+    tt,
+    getCurrentDecimalSeparator,
+    getCurrentDigitGroupingSymbol,
+    appendDigitGroupingSymbol,
+    parseAmount,
+    formatAmount
+} = useI18n();
+const { showToast } = useI18nUIComponents();
+
 const previousValue = ref<string>('');
 const currentSymbol = ref<string>('');
 const currentValue = ref<string>(getStringValue(props.modelValue));

src/components/mobile/ScheduleFrequencySheet.vue

@@ -67,9 +67,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
-import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
-
 import { useI18n } from '@/locales/helpers.ts';
+import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
 
 import { useUserStore } from '@/stores/user.ts';
 
@@ -89,11 +88,10 @@ const emit = defineEmits<{
 }>();
 
 const { tt } = useI18n();
+const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();
 
 const userStore = useUserStore();
 
-const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();
-
 const currentFrequencyType = ref<number>(props.type);
 const currentFrequencyValue = ref<number[]>(getFrequencyValues(props.modelValue));
 

src/views/desktop/UnlockPage.vue

@@ -118,7 +118,6 @@ import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useUnlockPageBase } from '@/views/base/UnlockPageBase.ts';
 
-
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 

src/views/desktop/app/settings/tabs/AppLockSettingTab.vue

@@ -87,7 +87,6 @@ import logger from '@/lib/logger.ts';
 type SnackBarType = InstanceType<typeof SnackBar>;
 
 const { tt } = useI18n();
-
 const { isSupportedWebAuthn, isEnableApplicationLock, isEnableApplicationLockWebAuthn } = useAppLockPageBase();
 
 const settingsStore = useSettingsStore();

src/views/desktop/categories/list/dialogs/PresetDialog.vue

@@ -82,16 +82,16 @@ import { categorizedArrayToPlainArray } from '@/lib/common.ts';
 
 type SnackBarType = InstanceType<typeof SnackBar>;
 
-const { tt, getCurrentLanguageTag, getAllLanguageOptions, getAllTransactionDefaultCategories, getLanguageInfo } = useI18n();
-
-const transactionCategoriesStore = useTransactionCategoriesStore();
-
 const props = defineProps<{
     categoryType: CategoryType;
     persistent?: boolean;
     show: boolean;
 }>();
 
+const { tt, getCurrentLanguageTag, getAllLanguageOptions, getAllTransactionDefaultCategories, getLanguageInfo } = useI18n();
+
+const transactionCategoriesStore = useTransactionCategoriesStore();
+
 const emit = defineEmits<{
     (e: 'update:show', value: boolean): void;
     (e: 'category:saved', event: { message: string }): void;

src/views/desktop/tags/ListPage.vue

@@ -256,6 +256,10 @@ import {
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
 type SnackBarType = InstanceType<typeof SnackBar>;
 
+const { tt } = useI18n();
+
+const transactionTagsStore = useTransactionTagsStore();
+
 const icons = {
     refresh: mdiRefresh,
     add: mdiPlus,
@@ -270,10 +274,6 @@ const icons = {
     tag: mdiPound
 };
 
-const { tt } = useI18n();
-
-const transactionTagsStore = useTransactionTagsStore();
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 

src/views/mobile/ApplicationLockPage.vue

@@ -59,7 +59,6 @@ import logger from '@/lib/logger.ts';
 
 const { tt } = useI18n();
 const { showToast } = useI18nUIComponents();
-
 const { isSupportedWebAuthn, isEnableApplicationLock, isEnableApplicationLockWebAuthn } = useAppLockPageBase();
 
 const settingsStore = useSettingsStore();

src/views/mobile/SettingsPage.vue

@@ -87,6 +87,10 @@ import { getVersion, getDesktopVersionPath } from '@/lib/version.ts';
 import { isUserScheduledTransactionEnabled } from '@/lib/server_settings.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
 
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
 const { tt, getCurrentLanguageTag, formatUnixTimeToLongDate, initLocale } = useI18n();
 const { showToast, showConfirm } = useI18nUIComponents();
 const { allTimezones, timeZone, isAutoUpdateExchangeRatesData, showAccountBalance } = useAppSettingPageBase();
@@ -96,10 +100,6 @@ const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 const exchangeRatesStore = useExchangeRatesStore();
 
-const props = defineProps<{
-    f7router: Router.Router;
-}>();
-
 const version = `v${getVersion()}`;
 
 const currentLocale = ref<string>(getCurrentLanguageTag());

src/views/mobile/UnlockPage.vue

@@ -90,6 +90,10 @@ import {
 import { isModalShowing } from '@/lib/ui/mobile.ts';
 import logger from '@/lib/logger.ts';
 
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
 const { tt, getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions } = useI18n();
 const { showToast, showConfirm } = useI18nUIComponents();
 const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, doAfterUnlocked, doRelogin } = useUnlockPageBase();
@@ -97,10 +101,6 @@ const { version, pinCode, isWebAuthnAvailable, isPinCodeValid, changeLanguage, d
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 
-const props = defineProps<{
-    f7router: Router.Router;
-}>();
-
 const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const currentLanguageCode = computed<string>(() => getCurrentLanguageTag());
 const currentLanguageName = computed<string>(() => getCurrentLanguageDisplayName());

src/views/mobile/categories/AllPage.vue

@@ -25,15 +25,15 @@ import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
 const { tt } = useI18n();
 const { showToast, routeBackOnError } = useI18nUIComponents();
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
-const props = defineProps<{
-    f7router: Router.Router;
-}>();
-
 const loading = ref<boolean>(true);
 const loadingError = ref<unknown | null>(null);
 

src/views/mobile/users/DataManagementPage.vue

@@ -86,6 +86,10 @@ import { useUserStore } from '@/stores/user.ts';
 
 import { isDataExportingEnabled } from '@/lib/server_settings.ts';
 
+const props = defineProps<{
+    f7router: Router.Router;
+}>();
+
 const { tt } = useI18n();
 const { showToast, routeBackOnError } = useI18nUIComponents();
 const { dataStatistics, displayDataStatistics, getExportFileName } = useDataManagementPageBase();
@@ -93,10 +97,6 @@ const { dataStatistics, displayDataStatistics, getExportFileName } = useDataMana
 const rootStore = useRootStore();
 const userStore = useUserStore();
 
-const props = defineProps<{
-    f7router: Router.Router;
-}>();
-
 const loading = ref<boolean>(true);
 const loadingError = ref<unknown | null>(null);
 const exportFileType = ref<string>('csv');