show currency code in currency select

src/components/desktop/CurrencySelect.vue

@@ -0,0 +1,86 @@
+<template>
+    <v-autocomplete
+        item-title="displayName"
+        item-value="currencyCode"
+        auto-select-first
+        persistent-placeholder
+        :disabled="disabled"
+        :label="label"
+        :placeholder="placeholder"
+        :items="allCurrencies"
+        :no-data-text="tt('No results')"
+        :custom-filter="filterCurrency"
+        v-model="currentCurrencyValue"
+    >
+        <template #append-inner>
+            <small class="text-field-append-text smaller">{{ currentCurrencyValue }}</small>
+        </template>
+
+        <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="currentCurrencyValue === item.raw.currencyCode" />
+                            <small class="text-field-append-text" v-if="currentCurrencyValue !== item.raw.currencyCode">{{ item.raw.currencyCode }}</small>
+                        </div>
+                    </v-list-item-title>
+                </template>
+            </v-list-item>
+        </template>
+    </v-autocomplete>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from '@/locales/helpers.ts';
+
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+
+import {
+    mdiCheck
+} from '@mdi/js';
+
+const props = defineProps<{
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    modelValue: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+}>();
+
+const { tt, getAllCurrencies } = useI18n();
+
+const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
+
+const currentCurrencyValue = computed<string | null>({
+    get: () => props.modelValue,
+    set: (value: string | null) => {
+        if (value === null) {
+            emit('update:modelValue', '');
+        } else {
+            emit('update:modelValue', value);
+        }
+    }
+});
+
+function filterCurrency(value: string, query: string, item?: { value: unknown, raw: LocalizedCurrencyInfo }): boolean {
+    if (!item) {
+        return false;
+    }
+
+    const lowerCaseFilterContent = query.toLowerCase() || '';
+
+    if (!lowerCaseFilterContent) {
+        return true;
+    }
+
+    return item.raw.displayName.toLowerCase().indexOf(lowerCaseFilterContent) >= 0
+        || item.raw.currencyCode.toLowerCase().indexOf(lowerCaseFilterContent) >= 0;
+}
+</script>

src/desktop-main.ts

@@ -80,6 +80,7 @@ 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 CurrencySelect from '@/components/desktop/CurrencySelect.vue';
 import DateTimeSelect from '@/components/desktop/DateTimeSelect.vue';
 import DateSelect from '@/components/desktop/DateSelect.vue';
 import ColorSelect from '@/components/desktop/ColorSelect.vue';
@@ -454,6 +455,7 @@ app.component('BtnVerticalGroup', BtnVerticalGroup);
 app.component('AmountInput', AmountInput);
 app.component('LanguageSelect', LanguageSelect);
 app.component('LanguageSelectButton', LanguageSelectButton);
+app.component('CurrencySelect', CurrencySelect);
 app.component('DateTimeSelect', DateTimeSelect);
 app.component('DateSelect', DateSelect);
 app.component('ColorSelect', ColorSelect);

src/views/base/accounts/AccountEditPageBase.ts

@@ -6,7 +6,6 @@ import { useUserStore } from '@/stores/user.ts';
 
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import { AccountCategory, AccountType } from '@/core/account.ts';
-import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
 import type { LocalizedAccountCategory } from '@/core/account.ts';
 import { Account } from '@/models/account.ts';
 
@@ -19,7 +18,7 @@ export interface DayAndDisplayName {
 }
 
 export function useAccountEditPageBaseBase() {
-    const { tt, getAllCurrencies, getAllAccountCategories, getAllAccountTypes, getMonthdayShortName } = useI18n();
+    const { tt, getAllAccountCategories, getAllAccountTypes, getMonthdayShortName } = useI18n();
 
     const userStore = useUserStore();
 
@@ -48,7 +47,6 @@ export function useAccountEditPageBaseBase() {
 
     const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories());
     const allAccountTypes = computed<TypeAndDisplayName[]>(() => getAllAccountTypes());
-    const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
 
     const allAvailableMonthDays = computed<DayAndDisplayName[]>(() => {
         const allAvailableDays: DayAndDisplayName[] = [];
@@ -171,7 +169,6 @@ export function useAccountEditPageBaseBase() {
         saveButtonTitle,
         allAccountCategories,
         allAccountTypes,
-        allCurrencies,
         allAvailableMonthDays,
         isAccountSupportCreditCardStatementDate,
         // functions

src/views/base/users/UserProfilePageBase.ts

@@ -9,7 +9,6 @@ import { useOverviewStore } from '@/stores/overview.ts';
 import type { TypeAndDisplayName } from '@/core/base.ts';
 import { WeekDay } from '@/core/datetime.ts';
 import type { LocalizedDigitGroupingType } from '@/core/numeral.ts';
-import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
 
 import { type UserBasicInfo, User } from '@/models/user.ts';
 import { type CategorizedAccount, Account} from '@/models/account.ts';
@@ -22,7 +21,6 @@ export function useUserProfilePageBase() {
         tt,
         getDefaultCurrency,
         getDefaultFirstDayOfWeek,
-        getAllCurrencies,
         getAllWeekDays,
         getAllLongDateFormats,
         getAllShortDateFormats,
@@ -53,7 +51,6 @@ export function useUserProfilePageBase() {
     const resending = ref<boolean>(false);
     const saving = ref<boolean>(false);
 
-    const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
     const allAccounts = computed<Account[]>(() => accountsStore.allPlainAccounts);
     const allVisibleAccounts = computed<Account[]>(() => accountsStore.allVisiblePlainAccounts);
     const allVisibleCategorizedAccounts = computed<CategorizedAccount[]>(() => getCategorizedAccounts(allVisibleAccounts.value));
@@ -186,7 +183,6 @@ export function useUserProfilePageBase() {
         resending,
         saving,
         // computed states
-        allCurrencies,
         allAccounts,
         allVisibleAccounts,
         allVisibleCategorizedAccounts,

src/views/desktop/SignupPage.vue

@@ -99,21 +99,10 @@
 
                                 <v-row>
                                     <v-col cols="12" md="6">
-                                        <v-autocomplete
+                                        <currency-select :disabled="submitting || navigateToHomePage"
-                                            item-title="displayName"
+                                                         :label="tt('Default Currency')"
-                                            item-value="currencyCode"
+                                                         :placeholder="tt('Default Currency')"
-                                            auto-select-first
+                                                         v-model="user.defaultCurrency" />
-                                            :disabled="submitting || navigateToHomePage"
-                                            :label="tt('Default Currency')"
-                                            :placeholder="tt('Default Currency')"
-                                            :items="allCurrencies"
-                                            :no-data-text="tt('No results')"
-                                            v-model="user.defaultCurrency"
-                                        >
-                                            <template #append-inner>
-                                                <small class="text-field-append-text smaller">{{ user.defaultCurrency }}</small>
-                                            </template>
-                                        </v-autocomplete>
                                     </v-col>
 
                                     <v-col cols="12" md="6">
@@ -229,7 +218,6 @@ import { useSignupPageBase } from '@/views/base/SignupPageBase.ts';
 import { useRootStore } from '@/stores/index.ts';
 
 import type { PartialRecord, TypeAndDisplayName } from '@/core/base.ts';
-import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
 import { type LocalizedPresetCategory, CategoryType } from '@/core/category.ts';
 import { ThemeType } from '@/core/theme.ts';
 import { APPLICATION_LOGO_PATH } from '@/consts/asset.ts';
@@ -248,7 +236,7 @@ type SnackBarType = InstanceType<typeof SnackBar>;
 const router = useRouter();
 const theme = useTheme();
 
-const { tt, getAllCurrencies, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
+const { tt, getAllWeekDays, getAllTransactionDefaultCategories } = useI18n();
 
 const {
     user,
@@ -270,7 +258,6 @@ const usePresetCategories = ref<boolean>(false);
 const finalResultMessage = ref<string | null>(null);
 const navigateToHomePage = ref<boolean>(false);
 
-const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
 const allWeekDays = computed<TypeAndDisplayName[]>(() => getAllWeekDays());
 const allPresetCategories = computed<PartialRecord<CategoryType, LocalizedPresetCategory[]>>(() => getAllTransactionDefaultCategories(0, currentLocale.value));
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);

src/views/desktop/accounts/list/dialogs/EditDialog.vue

@@ -109,22 +109,10 @@
                                                   v-model="selectedAccount.color" />
                                 </v-col>
                                 <v-col cols="12" :md="currentAccountIndex < 0 && isAccountSupportCreditCardStatementDate ? 6 : 12" v-if="account.type === AccountType.SingleAccount.type || currentAccountIndex >= 0">
-                                    <v-autocomplete
+                                    <currency-select :disabled="loading || submitting || !!editAccountId"
-                                        item-title="displayName"
+                                                     :label="tt('Currency')"
-                                        item-value="currencyCode"
+                                                     :placeholder="tt('Currency')"
-                                        auto-select-first
+                                                     v-model="selectedAccount.currency" />
-                                        persistent-placeholder
-                                        :disabled="loading || submitting || !!editAccountId"
-                                        :label="tt('Currency')"
-                                        :placeholder="tt('Currency')"
-                                        :items="allCurrencies"
-                                        :no-data-text="tt('No results')"
-                                        v-model="selectedAccount.currency"
-                                    >
-                                        <template #append-inner>
-                                            <small class="text-field-append-text smaller">{{ selectedAccount.currency }}</small>
-                                        </template>
-                                    </v-autocomplete>
                                 </v-col>
                                 <v-col cols="12" :md="account.type === AccountType.SingleAccount.type || currentAccountIndex >= 0 ? 6 : 12" v-if="currentAccountIndex < 0 && isAccountSupportCreditCardStatementDate">
                                     <v-autocomplete
@@ -248,7 +236,6 @@ const {
     saveButtonTitle,
     allAccountCategories,
     allAccountTypes,
-    allCurrencies,
     allAvailableMonthDays,
     isAccountSupportCreditCardStatementDate,
     isInputEmpty,

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

@@ -124,22 +124,10 @@
                             </v-col>
 
                             <v-col cols="12" md="6">
-                                <v-autocomplete
+                                <currency-select :disabled="loading || saving"
-                                    item-title="displayName"
+                                                 :label="tt('Default Currency')"
-                                    item-value="currencyCode"
+                                                 :placeholder="tt('Default Currency')"
-                                    auto-select-first
+                                                 v-model="newProfile.defaultCurrency" />
-                                    persistent-placeholder
-                                    :disabled="loading || saving"
-                                    :label="tt('Default Currency')"
-                                    :placeholder="tt('Default Currency')"
-                                    :items="allCurrencies"
-                                    :no-data-text="tt('No results')"
-                                    v-model="newProfile.defaultCurrency"
-                                >
-                                    <template #append-inner>
-                                        <small class="text-field-append-text smaller">{{ newProfile.defaultCurrency }}</small>
-                                    </template>
-                                </v-autocomplete>
                             </v-col>
 
                             <v-col cols="12" md="6">
@@ -361,7 +349,6 @@ const {
     loading,
     resending,
     saving,
-    allCurrencies,
     allVisibleAccounts,
     allVisibleCategorizedAccounts,
     allWeekDays,

src/views/mobile/accounts/EditPage.vue

@@ -506,7 +506,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import type { Router } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
@@ -515,6 +515,7 @@ import { useAccountEditPageBaseBase } from '@/views/base/accounts/AccountEditPag
 
 import { useAccountsStore } from '@/stores/account.ts';
 
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
 import { AccountType } from '@/core/account.ts';
 import { ALL_ACCOUNT_ICONS } from '@/consts/icon.ts';
 import { ALL_ACCOUNT_COLORS } from '@/consts/color.ts';
@@ -543,7 +544,7 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getCurrencyName, formatUnixTimeToLongDate, formatUnixTimeToLongTime, formatAmountWithCurrency } = useI18n();
+const { tt, getAllCurrencies, getCurrencyName, formatUnixTimeToLongDate, formatUnixTimeToLongTime, formatAmountWithCurrency } = useI18n();
 const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 const {
     editAccountId,
@@ -556,7 +557,6 @@ const {
     saveButtonTitle,
     allAccountCategories,
     allAccountTypes,
-    allCurrencies,
     allAvailableMonthDays,
     isAccountSupportCreditCardStatementDate,
     getAccountCreditCardStatementDate,
@@ -586,6 +586,8 @@ const showAccountTypeSheet = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 const showDeleteActionSheet = ref<boolean>(false);
 
+const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
+
 function formatAccountDisplayBalance(selectedAccount: Account): string {
     const balance = account.value.isLiability ? -selectedAccount.balance : selectedAccount.balance;
     return formatAmountWithCurrency(balance, selectedAccount.currency);

src/views/mobile/users/UserProfilePage.vue

@@ -353,6 +353,8 @@ import { useRootStore } from '@/stores/index.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+
 import type { UserProfileResponse } from '@/models/user.ts';
 import { Account } from '@/models/account.ts';
 
@@ -363,7 +365,7 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getAllLanguageOptions, getCurrencyName } = useI18n();
+const { tt, getAllLanguageOptions, getAllCurrencies, getCurrencyName } = useI18n();
 const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 
 const {
@@ -372,7 +374,6 @@ const {
     loading,
     resending,
     saving,
-    allCurrencies,
     allAccounts,
     allVisibleAccounts,
     allVisibleCategorizedAccounts,
@@ -414,6 +415,7 @@ const showDefaultCurrencyPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 
 const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));
+const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
 
 const currentLanguageName = computed<string>(() => {
     for (let i = 0; i < allLanguages.value.length; i++) {