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

show currency code in currency select

Browse Source
This commit is contained in:
MaysWind
2025-03-09 01:19:14 +08:00
parent d3b283f623
commit 0662427cec
9 changed files with 111 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/CurrencySelect.vue
+86
View File
@@ -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
+2
View File
@@ -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
+1 -4
View File
@@ -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
-4
View File
@@ -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
+5 -18
View File
@@ -99,21 +99,10 @@
<v-row>
<v-col cols="12" md="6">
<v-autocomplete
item-title="displayName"
item-value="currencyCode"
auto-select-first
: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>
<currency-select :disabled="submitting || navigateToHomePage"
:label="tt('Default Currency')"
:placeholder="tt('Default Currency')"
v-model="user.defaultCurrency" />
</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
+4 -17
View File
@@ -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
item-title="displayName"
item-value="currencyCode"
auto-select-first
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>
<currency-select :disabled="loading || submitting || !!editAccountId"
:label="tt('Currency')"
:placeholder="tt('Currency')"
v-model="selectedAccount.currency" />
</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
+4 -17
View File
@@ -124,22 +124,10 @@
</v-col>
<v-col cols="12" md="6">
<v-autocomplete
item-title="displayName"
item-value="currencyCode"
auto-select-first
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>
<currency-select :disabled="loading || saving"
:label="tt('Default Currency')"
:placeholder="tt('Default Currency')"
v-model="newProfile.defaultCurrency" />
</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
+5 -3
View File
@@ -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
+4 -2
View File
@@ -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++) {