zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show currency code in currency selection popup

Browse Source
This commit is contained in:
MaysWind
2025-03-08 23:59:48 +08:00
parent 56b1e1f565
commit 34247be52c
6 changed files with 266 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/ListItemSelectionPopup.vue
+189
View File
@@ -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
+2
View File
@@ -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
+15 -6
View File
@@ -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">
<option :value="exchangeRate.currencyCode"
:key="exchangeRate.currencyCode"
v-for="exchangeRate in availableExchangeRates">{{ exchangeRate.currencyDisplayName }}</option>
</select>
<list-item-selection-popup value-type="item"
value-field="currencyCode"
title-field="currencyDisplayName"
after-field="currencyCode"
: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
+15 -6
View File
@@ -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">
<option :value="currency.currencyCode"
:key="currency.currencyCode"
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
value-field="currencyCode"
title-field="displayName"
after-field="currencyCode"
: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
+30 -12
View File
@@ -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">
<option :value="currency.currencyCode"
:key="currency.currencyCode"
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
value-field="currencyCode"
title-field="displayName"
after-field="currencyCode"
: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">
<option :value="currency.currencyCode"
:key="currency.currencyCode"
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
value-field="currencyCode"
title-field="displayName"
after-field="currencyCode"
: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
+15 -6
View File
@@ -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">
<option :value="currency.currencyCode"
:key="currency.currencyCode"
v-for="currency in allCurrencies">{{ currency.displayName }}</option>
</select>
<list-item-selection-popup value-type="item"
value-field="currencyCode"
title-field="displayName"
after-field="currencyCode"
: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>(() => {