display amounts according to currency decimals number count

This commit is contained in:
MaysWind
2024-12-06 23:55:19 +08:00
parent e2f2b325a6
commit e549779164
15 changed files with 313 additions and 23 deletions
+1
View File
@@ -26,6 +26,7 @@
<div class="mx-6 mt-4">
<span class="text-subtitle-2">{{ $t('Base Amount') }}</span>
<amount-input class="mt-2" density="compact"
:currency="baseCurrency"
:disabled="loading || !exchangeRatesData || !exchangeRatesData.exchangeRates || !exchangeRatesData.exchangeRates.length"
v-model="baseAmount"/>
</div>
@@ -131,6 +131,7 @@
<amount-input :disabled="loading || submitting || !!editAccountId"
:persistent-placeholder="true"
:currency="selectedAccount.currency"
:show-currency="true"
:label="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub-account Balance')"
:placeholder="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub-account Balance')"
v-model="selectedAccount.balance"/>
+6 -2
View File
@@ -256,10 +256,14 @@
<div class="d-flex align-center">
<span class="text-sm ml-3">{{ $t(filterType.name) }}</span>
<span class="text-sm ml-4" v-if="query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) && currentAmountFilterType !== filterType.type">{{ queryAmount }}</span>
<amount-input class="transaction-amount-filter-value ml-4" density="compact" v-model="currentAmountFilterValue1"
<amount-input class="transaction-amount-filter-value ml-4" density="compact"
:currency="defaultCurrency"
v-model="currentAmountFilterValue1"
v-if="currentAmountFilterType === filterType.type"/>
<span class="ml-2 mr-2" v-if="currentAmountFilterType === filterType.type && filterType.paramCount === 2">~</span>
<amount-input class="transaction-amount-filter-value" density="compact" v-model="currentAmountFilterValue2"
<amount-input class="transaction-amount-filter-value" density="compact"
:currency="defaultCurrency"
v-model="currentAmountFilterValue2"
v-if="currentAmountFilterType === filterType.type && filterType.paramCount === 2"/>
<v-btn class="ml-2" density="compact" color="primary" variant="tonal"
@click="changeAmountFilter(filterType.type)"
@@ -85,6 +85,7 @@
<v-col cols="12" :md="transaction.type === allTransactionTypes.Transfer ? 6 : 12">
<amount-input class="transaction-edit-amount font-weight-bold"
:color="sourceAmountColor"
:currency="sourceAccountCurrency"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:persistent-placeholder="true"
@@ -95,6 +96,7 @@
</v-col>
<v-col cols="12" :md="6" v-if="transaction.type === allTransactionTypes.Transfer">
<amount-input class="transaction-edit-amount font-weight-bold" color="primary"
:currency="destinationAccountCurrency"
:readonly="mode === 'view'"
:disabled="loading || submitting"
:persistent-placeholder="true"
@@ -637,6 +639,24 @@ export default {
return this.$t('None');
}
},
sourceAccountCurrency() {
const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId];
if (sourceAccount) {
return sourceAccount.currency;
}
return this.defaultCurrency;
},
destinationAccountCurrency() {
const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId];
if (destinationAccount) {
return destinationAccount.currency;
}
return this.defaultCurrency;
},
transactionDisplayTimezone() {
return `UTC${getUtcOffsetByUtcOffsetMinutes(this.transaction.utcOffset)}`;
},
@@ -737,7 +757,7 @@ export default {
return;
}
this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue);
this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue, this.destinationAccountCurrency);
},
'transaction.destinationAmount': function (newValue) {
if (this.mode === 'view' || this.loading) {
+2 -1
View File
@@ -36,6 +36,7 @@
>
<number-pad-sheet :min-value="allowedMinAmount"
:max-value="allowedMaxAmount"
:currency="baseCurrency"
v-model:show="showBaseAmountSheet"
v-model="baseAmount"
></number-pad-sheet>
@@ -123,7 +124,7 @@ export default {
return this.$locale.getAllDisplayExchangeRates(this.settingsStore, this.exchangeRatesData);
},
displayBaseAmount() {
return this.$locale.formatAmount(this.userStore, this.baseAmount);
return this.$locale.formatAmount(this.userStore, this.baseAmount, this.baseCurrency);
},
baseAmountFontSizeClass() {
if (this.baseAmount >= 100000000 || this.baseAmount <= -100000000) {
+2
View File
@@ -183,6 +183,7 @@
>
<number-pad-sheet :min-value="allowedMinAmount"
:max-value="allowedMaxAmount"
:currency="account.currency"
v-model:show="account.showBalanceSheet"
v-model="account.balance"
></number-pad-sheet>
@@ -396,6 +397,7 @@
>
<number-pad-sheet :min-value="allowedMinAmount"
:max-value="allowedMaxAmount"
:currency="subAccount.currency"
v-model:show="subAccount.showBalanceSheet"
v-model="subAccount.balance"
></number-pad-sheet>
+28 -8
View File
@@ -65,11 +65,12 @@
link="#" no-chevron
:class="sourceAmountClass"
:header="$t(sourceAmountName)"
:title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount)"
:title="getDisplayAmount(transaction.sourceAmount, transaction.hideAmount, sourceAccountCurrency)"
@click="showSourceAmountSheet = true"
>
<number-pad-sheet :min-value="allowedMinAmount"
:max-value="allowedMaxAmount"
:currency="sourceAccountCurrency"
v-model:show="showSourceAmountSheet"
v-model="transaction.sourceAmount"
></number-pad-sheet>
@@ -80,12 +81,13 @@
link="#" no-chevron
:class="destinationAmountClass"
:header="transferInAmountTitle"
:title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount)"
:title="getDisplayAmount(transaction.destinationAmount, transaction.hideAmount, destinationAccountCurrency)"
@click="showDestinationAmountSheet = true"
v-if="transaction.type === allTransactionTypes.Transfer"
>
<number-pad-sheet :min-value="allowedMinAmount"
:max-value="allowedMaxAmount"
:currency="destinationAccountCurrency"
v-model:show="showDestinationAmountSheet"
v-model="transaction.destinationAmount"
></number-pad-sheet>
@@ -672,6 +674,24 @@ export default {
return this.$t('None');
}
},
sourceAccountCurrency() {
const sourceAccount = this.allAccountsMap[this.transaction.sourceAccountId];
if (sourceAccount) {
return sourceAccount.currency;
}
return this.defaultCurrency;
},
destinationAccountCurrency() {
const destinationAccount = this.allAccountsMap[this.transaction.destinationAccountId];
if (destinationAccount) {
return destinationAccount.currency;
}
return this.defaultCurrency;
},
transactionDisplayDate() {
if (this.mode !== 'view' || !this.showTimeInDefaultTimezone) {
return this.$locale.formatUnixTimeToLongDate(this.userStore, getActualUnixTimeForStore(this.transaction.time, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
@@ -862,7 +882,7 @@ export default {
return;
}
this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue);
this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue, this.destinationAccountCurrency);
},
'transaction.destinationAmount': function (newValue) {
if (this.mode === 'view' || this.loading) {
@@ -1333,15 +1353,15 @@ export default {
return 'ebk-large-amount';
}
},
getDisplayAmount(amount, hideAmount) {
getDisplayAmount(amount, hideAmount, currencyCode) {
if (hideAmount) {
return this.getDisplayCurrency('***');
return this.getDisplayCurrency('***', currencyCode);
}
return this.getDisplayCurrency(amount);
return this.getDisplayCurrency(amount, currencyCode);
},
getDisplayCurrency(value) {
return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, false);
getDisplayCurrency(value, currencyCode) {
return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
},
getPrimaryCategoryName(categoryId, allCategories) {
return getTransactionPrimaryCategoryName(categoryId, allCategories);