show currency code in currency selection popup

src/components/mobile/ListItemSelectionPopup.vue

@@ -0,0 +1,189 @@
+<template>
+    <f7-popup push :opened="show" @popup:open="onPopupOpen" @popup:closed="onPopupClosed">
+        <f7-page>
+            <f7-navbar :outline="false">
+                <f7-nav-left></f7-nav-left>
+                <f7-nav-title :title="title" v-if="title"></f7-nav-title>
+                <f7-nav-right>
+                    <f7-link popup-close :text="tt('Done')"></f7-link>
+                </f7-nav-right>
+            </f7-navbar>
+            <f7-searchbar ref="searchbar" custom-searchs
+                          :value="filterContent"
+                          :placeholder="filterPlaceholder"
+                          :disable-button="false"
+                          v-if="enableFilter"
+                          @input="filterContent = $event.target.value">
+            </f7-searchbar>
+            <f7-block class="no-padding">
+                <f7-list strong outline dividers>
+                    <f7-list-item link="#" no-chevron
+                                  :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
+                                  :value="getItemValue(item, index, valueField, valueType)"
+                                  :class="{ 'list-item-selected': isSelected(item, index) }"
+                                  :key="getItemValue(item, index, keyField, valueType)"
+                                  v-for="(item, index) in filteredItems"
+                                  v-show="item && (!hiddenField || !(item as Record<string, unknown>)[hiddenField])"
+                                  @click="onItemClicked(item, index)">
+                        <template #content-start>
+                            <f7-icon class="list-item-checked-icon" f7="checkmark_alt" :style="{ 'color': isSelected(item, index) ? '' : 'transparent' }"></f7-icon>
+                        </template>
+                        <template #media v-if="iconField">
+                            <ItemIcon :icon-type="iconType" :icon-id="(item as Record<string, unknown>)[iconField]" :color="colorField ? (item as Record<string, unknown>)[colorField] : undefined"></ItemIcon>
+                        </template>
+                        <template #after>
+                            <small v-if="afterField">{{ getItemAfterText(item) }}</small>
+                        </template>
+                    </f7-list-item>
+                    <f7-list-item v-if="!filteredItems || !filteredItems.length"
+                                  :title="filterNoItemsText"></f7-list-item>
+                </f7-list>
+            </f7-block>
+        </f7-page>
+    </f7-popup>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useTemplateRef } from 'vue';
+import type { Searchbar } from 'framework7/types';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+
+const props = defineProps<{
+    modelValue: unknown;
+    title?: string;
+    valueType: string; // item or index
+    keyField?: string; // for value type == item
+    valueField?: string; // for value type == item
+    titleField: string;
+    titleI18n?: boolean;
+    afterField?: string;
+    afterI18n?: boolean;
+    iconField?: string;
+    iconType?: string;
+    colorField?: string;
+    hiddenField?: string;
+    enableFilter?: boolean;
+    filterPlaceholder?: string;
+    filterNoItemsText?: string;
+    items: unknown[];
+    show: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: unknown): void;
+    (e: 'update:show', value: boolean): void;
+}>();
+
+const { tt, ti } = useI18n();
+
+const searchbar = useTemplateRef<Searchbar.Searchbar>('searchbar');
+
+const currentValue = ref<unknown>(props.modelValue);
+const filterContent = ref<string>('');
+
+const filteredItems = computed<unknown[]>(() => {
+    const finalItems: unknown[] = [];
+    const items = props.items;
+    const lowerCaseFilterContent = filterContent.value?.toLowerCase() ?? '';
+
+    for (const item of items) {
+        if (props.valueType === 'index') {
+            if (!props.enableFilter || !lowerCaseFilterContent || String(item).toLowerCase().indexOf(lowerCaseFilterContent) >= 0) {
+                finalItems.push(item);
+                continue;
+            }
+        } else {
+            const itemRecord = item as Record<string, unknown>;
+
+            if (props.hiddenField && itemRecord[props.hiddenField]) {
+                continue;
+            }
+
+            if (!props.enableFilter || !lowerCaseFilterContent) {
+                finalItems.push(item);
+                continue;
+            }
+
+            const title = ti(itemRecord[props.titleField] as string, !!props.titleI18n);
+
+            if (title.toLowerCase().indexOf(lowerCaseFilterContent) >= 0) {
+                finalItems.push(item);
+                continue;
+            }
+
+            const afterText = getItemAfterText(item);
+
+            if (afterText.toLowerCase().indexOf(lowerCaseFilterContent) >= 0) {
+                finalItems.push(item);
+                continue;
+            }
+        }
+    }
+    return finalItems;
+});
+
+function isSelected(item: unknown, index: number): boolean {
+    if (props.valueType === 'index') {
+        return currentValue.value === index;
+    } else {
+        if (props.valueField) {
+            return currentValue.value === (item as Record<string, unknown>)[props.valueField];
+        } else {
+            return currentValue.value === item;
+        }
+    }
+}
+
+function getItemValue(item: unknown, index: number, fieldName: string | undefined, valueType: string): unknown {
+    if (valueType === 'index') {
+        return index;
+    } else if (fieldName) {
+        return (item as Record<string, unknown>)[fieldName];
+    } else {
+        return item;
+    }
+}
+
+function getItemAfterText(item: unknown): string {
+    if (props.valueType === 'index') {
+        return '';
+    } else if (props.afterField) {
+        return ti((item as Record<string, unknown>)[props.afterField] as string, !!props.afterI18n);
+    } else {
+        return '';
+    }
+}
+
+function close(): void {
+    emit('update:show', false);
+}
+
+function onItemClicked(item: unknown, index: number): void {
+    if (props.valueType === 'index') {
+        currentValue.value = index;
+    } else {
+        if (props.valueField) {
+            currentValue.value = (item as Record<string, unknown>)[props.valueField];
+        } else {
+            currentValue.value = item;
+        }
+    }
+
+    emit('update:modelValue', currentValue.value);
+    close();
+}
+
+function onPopupOpen(event: { $el: Framework7Dom }): void {
+    currentValue.value = props.modelValue;
+    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+}
+
+function onPopupClosed(): void {
+    close();
+    filterContent.value = '';
+    searchbar.value?.clear();
+}
+</script>

src/mobile-main.ts

@@ -97,6 +97,7 @@ import DateSelectionSheet from '@/components/mobile/DateSelectionSheet.vue';
 import DateRangeSelectionSheet from '@/components/mobile/DateRangeSelectionSheet.vue';
 import MonthRangeSelectionSheet from '@/components/mobile/MonthRangeSelectionSheet.vue';
 import ListItemSelectionSheet from '@/components/mobile/ListItemSelectionSheet.vue';
+import ListItemSelectionPopup from '@/components/mobile/ListItemSelectionPopup.vue';
 import TwoColumnListItemSelectionSheet from '@/components/mobile/TwoColumnListItemSelectionSheet.vue';
 import TreeViewSelectionSheet from '@/components/mobile/TreeViewSelectionSheet.vue';
 import IconSelectionSheet from '@/components/mobile/IconSelectionSheet.vue';
@@ -182,6 +183,7 @@ app.component('DateSelectionSheet', DateSelectionSheet);
 app.component('DateRangeSelectionSheet', DateRangeSelectionSheet);
 app.component('MonthRangeSelectionSheet', MonthRangeSelectionSheet);
 app.component('ListItemSelectionSheet', ListItemSelectionSheet);
+app.component('ListItemSelectionPopup', ListItemSelectionPopup);
 app.component('TwoColumnListItemSelectionSheet', TwoColumnListItemSelectionSheet);
 app.component('TreeViewSelectionSheet', TreeViewSelectionSheet);
 app.component('IconSelectionSheet', IconSelectionSheet);

src/views/mobile/ExchangeRatesPage.vue

@@ -11,8 +11,9 @@
         <f7-list strong inset dividers class="margin-vertical" v-if="exchangeRatesData && exchangeRatesData.exchangeRates && exchangeRatesData.exchangeRates.length">
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
                 :header="tt('Base Currency')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Base Currency'), popupCloseLinkText: tt('Done') }"
+                @click="showBaseCurrencyPopup = true"
             >
                 <template #title>
                     <div class="no-padding no-margin">
@@ -20,11 +21,18 @@
                         <small class="smaller">{{ baseCurrency }}</small>
                     </div>
                 </template>
-                <select v-model="baseCurrency">
+                <list-item-selection-popup value-type="item"
-                    <option :value="exchangeRate.currencyCode"
+                                           value-field="currencyCode"
-                            :key="exchangeRate.currencyCode"
+                                           title-field="currencyDisplayName"
-                            v-for="exchangeRate in availableExchangeRates">{{ exchangeRate.currencyDisplayName }}</option>
+                                           after-field="currencyCode"
-                </select>
+                                           :title="tt('Base Currency')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Currency Name')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="availableExchangeRates"
+                                           v-model:show="showBaseCurrencyPopup"
+                                           v-model="baseCurrency">
+                </list-item-selection-popup>
             </f7-list-item>
             <f7-list-item
                 class="currency-base-amount"
@@ -111,6 +119,7 @@ const exchangeRatesStore = useExchangeRatesStore();
 
 const updating = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
+const showBaseCurrencyPopup = ref<boolean>(false);
 const showBaseAmountSheet = ref<boolean>(false);
 
 const displayBaseAmount = computed<string>(() => formatAmount(baseAmount.value, baseCurrency.value));

src/views/mobile/SignupPage.vue

@@ -74,9 +74,10 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
                 :key="currentLocale + '_currency'"
                 :header="tt('Default Currency')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Default Currency'), popupCloseLinkText: tt('Done') }"
+                @click="showDefaultCurrencyPopup = true"
             >
                 <template #title>
                     <f7-block class="no-padding no-margin">
@@ -84,11 +85,18 @@
                         <small class="smaller">{{ user.defaultCurrency }}</small>
                     </f7-block>
                 </template>
-                <select autocomplete="transaction-currency" v-model="user.defaultCurrency">
+                <list-item-selection-popup value-type="item"
-                    <option :value="currency.currencyCode"
+                                           value-field="currencyCode"
-                            :key="currency.currencyCode"
+                                           title-field="displayName"
-                            v-for="currency in allCurrencies">{{ currency.displayName }}</option>
+                                           after-field="currencyCode"
-                </select>
+                                           :title="tt('Default Currency')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Currency Name')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCurrencies"
+                                           v-model:show="showDefaultCurrencyPopup"
+                                           v-model="user.defaultCurrency">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
@@ -217,6 +225,7 @@ const {
 const rootStore = useRootStore();
 
 const usePresetCategories = ref<boolean>(false);
+const showDefaultCurrencyPopup = ref<boolean>(false);
 const showPresetCategories = ref<boolean>(false);
 const showPresetCategoriesMoreActionSheet = ref<boolean>(false);
 const showPresetCategoriesChangeLocaleSheet = ref<boolean>(false);

src/views/mobile/accounts/EditPage.vue

@@ -155,10 +155,11 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
                 :class="{ 'disabled': editAccountId }"
                 :header="tt('Currency')"
                 :no-chevron="!!editAccountId"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Name'), popupCloseLinkText: tt('Done') }"
+                @click="accountContext.showCurrencyPopup = true"
             >
                 <template #title>
                     <div class="no-padding no-margin">
@@ -166,11 +167,18 @@
                         <small class="smaller">{{ account.currency }}</small>
                     </div>
                 </template>
-                <select autocomplete="transaction-currency" v-model="account.currency">
+                <list-item-selection-popup value-type="item"
-                    <option :value="currency.currencyCode"
+                                           value-field="currencyCode"
-                            :key="currency.currencyCode"
+                                           title-field="displayName"
-                            v-for="currency in allCurrencies">{{ currency.displayName }}</option>
+                                           after-field="currencyCode"
-                </select>
+                                           :title="tt('Currency Name')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Currency Name')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCurrencies"
+                                           v-model:show="accountContext.showCurrencyPopup"
+                                           v-model="account.currency">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
@@ -398,10 +406,11 @@
 
                 <f7-list-item
                     class="list-item-with-header-and-title list-item-no-item-after"
+                    link="#"
                     :class="{ 'disabled': editAccountId }"
                     :header="tt('Currency')"
                     :no-chevron="!!editAccountId"
-                    smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Name'), popupCloseLinkText: tt('Done') }"
+                    @click="subAccountContexts[idx].showCurrencyPopup = true"
                 >
                     <template #title>
                         <div class="no-padding no-margin">
@@ -409,11 +418,18 @@
                             <small class="smaller">{{ subAccount.currency }}</small>
                         </div>
                     </template>
-                    <select autocomplete="transaction-currency" v-model="subAccount.currency">
+                    <list-item-selection-popup value-type="item"
-                        <option :value="currency.currencyCode"
+                                               value-field="currencyCode"
-                                :key="currency.currencyCode"
+                                               title-field="displayName"
-                                v-for="currency in allCurrencies">{{ currency.displayName }}</option>
+                                               after-field="currencyCode"
-                    </select>
+                                               :title="tt('Currency Name')"
+                                               :enable-filter="true"
+                                               :filter-placeholder="tt('Currency Name')"
+                                               :filter-no-items-text="tt('No results')"
+                                               :items="allCurrencies"
+                                               v-model:show="subAccountContexts[idx].showCurrencyPopup"
+                                               v-model="subAccount.currency">
+                    </list-item-selection-popup>
                 </f7-list-item>
 
                 <f7-list-item
@@ -516,6 +532,7 @@ import {
 interface AccountContext {
     showIconSelectionSheet: boolean;
     showColorSelectionSheet: boolean;
+    showCurrencyPopup: boolean;
     showBalanceSheet: boolean;
     showBalanceDateTimeSheet: boolean;
     balanceDateTimeSheetMode: string;
@@ -554,6 +571,7 @@ const accountsStore = useAccountsStore();
 const DEFAULT_ACCOUNT_CONTEXT: AccountContext = {
     showIconSelectionSheet: false,
     showColorSelectionSheet: false,
+    showCurrencyPopup: false,
     showBalanceSheet: false,
     showBalanceDateTimeSheet: false,
     balanceDateTimeSheetMode: 'time'

src/views/mobile/users/UserProfilePage.vue

@@ -141,8 +141,9 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
+                link="#"
                 :header="tt('Default Currency')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Default Currency'), popupCloseLinkText: tt('Done') }"
+                @click="showDefaultCurrencyPopup = true"
             >
                 <template #title>
                     <f7-block class="no-padding no-margin">
@@ -150,11 +151,18 @@
                         <small class="smaller">{{ newProfile.defaultCurrency }}</small>
                     </f7-block>
                 </template>
-                <select autocomplete="transaction-currency" v-model="newProfile.defaultCurrency">
+                <list-item-selection-popup value-type="item"
-                    <option :value="currency.currencyCode"
+                                           value-field="currencyCode"
-                            :key="currency.currencyCode"
+                                           title-field="displayName"
-                            v-for="currency in allCurrencies">{{ currency.displayName }}</option>
+                                           after-field="currencyCode"
-                </select>
+                                           :title="tt('Default Currency')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Currency Name')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCurrencies"
+                                           v-model:show="showDefaultCurrencyPopup"
+                                           v-model="newProfile.defaultCurrency">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
@@ -402,6 +410,7 @@ const currentPassword = ref<string>('');
 const loadingError = ref<unknown | null>(null);
 const showInputPasswordSheet = ref<boolean>(false);
 const showAccountSheet = ref<boolean>(false);
+const showDefaultCurrencyPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 
 const currentLanguageName = computed<string>(() => {