code refactor

src/components/base/LanguageSelectBase.ts

@@ -5,22 +5,23 @@ import { useI18n } from '@/locales/helpers.ts';
 
 import { useSettingsStore } from '@/stores/setting.ts';
 
-export interface LanguageSelectButtonBaseProps {
+export interface LanguageSelectBaseProps {
     disabled?: boolean;
+    includeSystemDefault?: boolean;
     useModelValue?: boolean;
     modelValue?: string;
 }
 
-export interface LanguageSelectButtonBaseEmits {
+export interface LanguageSelectBaseEmits {
     (e: 'update:modelValue', value: string): void;
 }
 
-export function useLanguageSelectButtonBase(props: LanguageSelectButtonBaseProps, emit: LanguageSelectButtonBaseEmits) {
+export function useLanguageSelectButtonBase(props: LanguageSelectBaseProps, emit: LanguageSelectBaseEmits) {
     const { getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions, getLanguageInfo, setLanguage } = useI18n();
 
     const settingsStore = useSettingsStore();
 
-    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(!!props.includeSystemDefault));
 
     const currentLocale = computed<string>({
         get: () => getCurrentLanguageTag(),

src/components/desktop/LanguageSelect.vue

@@ -0,0 +1,67 @@
+<template>
+    <v-select
+        item-title="nativeDisplayName"
+        item-value="languageTag"
+        persistent-placeholder
+        :disabled="disabled"
+        :label="label"
+        :placeholder="placeholder"
+        :items="allLanguages"
+        v-model="currentLocaleValue"
+    >
+        <template #item="{ props, item }">
+            <v-list-item :value="item.value" v-bind="props">
+                <template #title>
+                    <v-list-item-title>
+                        <div class="d-flex align-center">
+                            <span>{{ item.title }}</span>
+                            <v-spacer style="min-width: 40px" />
+                            <v-icon :icon="mdiCheck" v-if="isLanguageSelected(item.raw.languageTag)" />
+                            <span class="text-field-append-text" v-if="!isLanguageSelected(item.raw.languageTag)">{{ item.raw.displayName }}</span>
+                        </div>
+                    </v-list-item-title>
+                </template>
+            </v-list-item>
+        </template>
+    </v-select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import {
+    mdiCheck
+} from '@mdi/js';
+
+interface DesktopLanguageSelectProps extends LanguageSelectBaseProps {
+    label?: string;
+    placeholder?: string;
+}
+
+const props = defineProps<DesktopLanguageSelectProps>();
+const emit = defineEmits<LanguageSelectBaseEmits>();
+
+const { getCurrentLanguageTag } = useI18n();
+
+const {
+    allLanguages,
+    updateLanguage,
+    isLanguageSelected
+} = useLanguageSelectButtonBase(props, emit);
+
+const currentLocaleValue = computed<string>({
+    get: () => {
+        if (props.useModelValue) {
+            return props.modelValue ?? '';
+        } else {
+            return getCurrentLanguageTag()
+        }
+    },
+    set: (value: string) => {
+        updateLanguage(value);
+    }
+});
+</script>

src/components/desktop/LanguageSelectButton.vue

@@ -19,14 +19,14 @@
 </template>
 
 <script setup lang="ts">
-import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
 
 import {
     mdiCheck
 } from '@mdi/js';
 
-const props = defineProps<LanguageSelectButtonBaseProps>();
+const props = defineProps<LanguageSelectBaseProps>();
-const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+const emit = defineEmits<LanguageSelectBaseEmits>();
 
 const {
     allLanguages,

src/components/mobile/LanguageSelectButton.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script setup lang="ts">
-import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
 
-const props = defineProps<LanguageSelectButtonBaseProps>();
+const props = defineProps<LanguageSelectBaseProps>();
-const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+const emit = defineEmits<LanguageSelectBaseEmits>();
 
 const {
     allLanguages,

src/desktop-main.ts

@@ -78,6 +78,7 @@ import MapView from '@/components/common/MapView.vue';
 import ItemIcon from '@/components/desktop/ItemIcon.vue';
 import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
 import AmountInput from '@/components/desktop/AmountInput.vue';
+import LanguageSelect from '@/components/desktop/LanguageSelect.vue';
 import LanguageSelectButton from '@/components/desktop/LanguageSelectButton.vue';
 import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
 import DateSelect from '@/components/desktop/DateSelect.vue';
@@ -451,6 +452,7 @@ app.component('MapView', MapView);
 app.component('ItemIcon', ItemIcon);
 app.component('BtnVerticalGroup', BtnVerticalGroup);
 app.component('AmountInput', AmountInput);
+app.component('LanguageSelect', LanguageSelect);
 app.component('LanguageSelectButton', LanguageSelectButton);
 app.component('DateTimeSelect', DateTimeSelect);
 app.component('DateSelect', DateSelect);

src/views/base/users/UserProfilePageBase.ts

@@ -1,6 +1,5 @@
 import { ref, computed } from 'vue';
 
-import { type LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useSettingsStore } from '@/stores/setting.ts';
@@ -23,7 +22,6 @@ export function useUserProfilePageBase() {
         tt,
         getDefaultCurrency,
         getDefaultFirstDayOfWeek,
-        getAllLanguageOptions,
         getAllCurrencies,
         getAllWeekDays,
         getAllLongDateFormats,
@@ -55,7 +53,6 @@ export function useUserProfilePageBase() {
     const resending = ref<boolean>(false);
     const saving = ref<boolean>(false);
 
-    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
     const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
     const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
     const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
@@ -189,7 +186,6 @@ export function useUserProfilePageBase() {
         resending,
         saving,
         // computed states
-        allLanguages,
         allCurrencies,
         allAccounts,
         allVisibleAccounts,

src/views/desktop/SignupPage.vue

@@ -90,30 +90,10 @@
 
                                 <v-row>
                                     <v-col cols="12" md="12">
-                                        <v-select
+                                        <language-select :disabled="submitting || navigateToHomePage"
-                                            item-title="nativeDisplayName"
+                                                         :label="languageTitle"
-                                            item-value="languageTag"
+                                                         :placeholder="languageTitle"
-                                            :disabled="submitting || navigateToHomePage"
+                                                         :use-model-value="true" v-model="currentLocale" />
-                                            :label="languageTitle"
-                                            :placeholder="languageTitle"
-                                            :items="allLanguages"
-                                            v-model="currentLocale"
-                                        >
-                                            <template #item="{ props, item }">
-                                                <v-list-item :value="item.value" v-bind="props">
-                                                    <template #title>
-                                                        <v-list-item-title>
-                                                            <div class="d-flex align-center">
-                                                                <span>{{ item.title }}</span>
-                                                                <v-spacer />
-                                                                <v-icon :icon="mdiCheck" v-if="currentLocale == item.raw.languageTag" />
-                                                                <span class="text-field-append-text" v-if="currentLocale !== item.raw.languageTag">{{ item.raw.displayName }}</span>
-                                                            </div>
-                                                        </v-list-item-title>
-                                                    </template>
-                                                </v-list-item>
-                                            </template>
-                                        </v-select>
                                     </v-col>
                                 </v-row>
 
@@ -243,7 +223,6 @@ import { ref, computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
-import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
 
@@ -269,7 +248,7 @@ type SnackBarType = InstanceType<typeof SnackBar>;
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, getAllLanguageOptions, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
+const { tt, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
 
 const {
     user,
@@ -291,7 +270,6 @@ const usePresetCategories = ref<boolean>(false);
 const finalResultMessage = ref<string | null>(null);
 const navigateToHomePage = ref<boolean>(false);
 
-const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
 const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
 const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
 const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));

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

@@ -116,31 +116,11 @@
                     <v-card-text>
                         <v-row>
                             <v-col cols="12" md="6">
-                                <v-select
+                                <language-select :disabled="loading || saving"
-                                    item-title="nativeDisplayName"
+                                                 :label="languageTitle"
-                                    item-value="languageTag"
+                                                 :placeholder="languageTitle"
-                                    persistent-placeholder
+                                                 :include-system-default="true"
-                                    :disabled="loading || saving"
+                                                 :use-model-value="true" v-model="newProfile.language" />
-                                    :label="languageTitle"
-                                    :placeholder="languageTitle"
-                                    :items="allLanguages"
-                                    v-model="newProfile.language"
-                                >
-                                    <template #item="{ props, item }">
-                                        <v-list-item :value="item.value" v-bind="props">
-                                            <template #title>
-                                                <v-list-item-title>
-                                                    <div class="d-flex align-center">
-                                                        <span>{{ item.title }}</span>
-                                                        <v-spacer />
-                                                        <v-icon :icon="mdiCheck" v-if="newProfile.language == item.raw.languageTag" />
-                                                        <span class="text-field-append-text" v-if="newProfile.language !== item.raw.languageTag">{{ item.raw.displayName }}</span>
-                                                    </div>
-                                                </v-list-item-title>
-                                            </template>
-                                        </v-list-item>
-                                    </template>
-                                </v-select>
                             </v-col>
 
                             <v-col cols="12" md="6">
@@ -366,8 +346,7 @@ import { isUserVerifyEmailEnabled } from '@/lib/server_settings.ts';
 
 import {
     mdiAccount,
-    mdiAccountEditOutline,
+    mdiAccountEditOutline
-    mdiCheck
 } from '@mdi/js';
 
 type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
@@ -382,7 +361,6 @@ const {
     loading,
     resending,
     saving,
-    allLanguages,
     allCurrencies,
     allVisibleAccounts,
     allVisibleCategorizedAccounts,

src/views/mobile/users/UserProfilePage.vue

@@ -344,6 +344,7 @@
 import { ref, computed } from 'vue';
 import type { Router } from 'framework7/types';
 
+import type { LanguageOption } from '@/locales/index.ts';
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
 import { useUserProfilePageBase } from '@/views/base/users/UserProfilePageBase.ts';
@@ -362,7 +363,7 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getCurrencyName } = useI18n();
+const { tt, getAllLanguageOptions, getCurrencyName } = useI18n();
 const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 
 const {
@@ -371,7 +372,6 @@ const {
     loading,
     resending,
     saving,
-    allLanguages,
     allCurrencies,
     allAccounts,
     allVisibleAccounts,
@@ -413,6 +413,8 @@ const showAccountSheet = ref<boolean>(false);
 const showDefaultCurrencyPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 
+const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
+
 const currentLanguageName = computed<string>(() => {
     for (let i = 0; i < allLanguages.value.length; i++) {
         if (allLanguages.value[i].languageTag === newProfile.value.language) {