transaction overview supports multi currencies

This commit is contained in:
MaysWind
2021-01-14 01:03:06 +08:00
parent 1a221c1dfc
commit 5a95ef07df
5 changed files with 163 additions and 42 deletions
+54 -3
View File
@@ -1,12 +1,15 @@
import services from '../lib/services.js';
import logger from '../lib/logger.js';
import utils from '../lib/utils.js';
import { getExchangedAmount } from "./exchangeRates.js";
import {
LOAD_TRANSACTION_OVERVIEW,
UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE,
} from './mutations.js';
export function loadTransactionOverview(context, { dateRange, force }) {
export function loadTransactionOverview(context, { defaultCurrency, dateRange, force }) {
if (!force && !context.state.transactionOverviewStateInvalid) {
return new Promise((resolve) => {
resolve(context.state.transactionOverview);
@@ -27,13 +30,61 @@ export function loadTransactionOverview(context, { dateRange, force }) {
return;
}
context.commit(LOAD_TRANSACTION_OVERVIEW, data.result);
const overview = data.result;
for (let field in overview) {
if (!Object.prototype.hasOwnProperty.call(overview, field)) {
continue;
}
const item = overview[field];
if (!item.amounts || !item.amounts.length) {
item.amounts = [];
}
let totalIncomeAmount = 0;
let totalExpenseAmount = 0;
let hasUnCalculatedTotalIncome = false;
let hasUnCalculatedTotalExpense = false;
for (let i = 0; i < item.amounts.length; i++) {
const amount = item.amounts[i];
if (amount.currency !== defaultCurrency) {
const incomeAmount = getExchangedAmount(context.state)(amount.incomeAmount, amount.currency, defaultCurrency);
const expenseAmount = getExchangedAmount(context.state)(amount.expenseAmount, amount.currency, defaultCurrency);
if (utils.isNumber(incomeAmount)) {
totalIncomeAmount += Math.floor(incomeAmount);
} else {
hasUnCalculatedTotalIncome = true;
}
if (utils.isNumber(expenseAmount)) {
totalExpenseAmount += Math.floor(expenseAmount);
} else {
hasUnCalculatedTotalExpense = true;
}
} else {
totalIncomeAmount += amount.incomeAmount;
totalExpenseAmount += amount.expenseAmount;
}
}
item.incomeAmount = totalIncomeAmount;
item.expenseAmount = totalExpenseAmount;
item.incompleteIncomeAmount = hasUnCalculatedTotalIncome;
item.incompleteExpenseAmount = hasUnCalculatedTotalExpense;
}
context.commit(LOAD_TRANSACTION_OVERVIEW, overview);
if (context.state.transactionOverviewStateInvalid) {
context.commit(UPDATE_TRANSACTION_OVERVIEW_INVALID_STATE, false);
}
resolve(data.result);
resolve(overview);
}).catch(error => {
if (force) {
logger.error('failed to force load transaction overview', error);
+23 -20
View File
@@ -20,7 +20,7 @@
</p>
<p class="no-margin">
<span class="month-expense" v-if="loading">0.00 USD</span>
<span class="month-expense" v-else-if="!loading">{{ thisMonthExpense | amount(showAmountInHomePage) | currency(defaultCurrency) }}</span>
<span class="month-expense" v-else-if="!loading">{{ thisMonthAmount.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(thisMonthAmount.incompleteExpenseAmount) }}</span>
<f7-link class="margin-left-half" @click="toggleShowAmountInHomePage()">
<f7-icon :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
</f7-link>
@@ -29,7 +29,7 @@
<small class="home-summary-misc" v-if="loading">Income of this month 0.00 USD</small>
<small class="home-summary-misc" v-else-if="!loading">
<span>{{ $t('Income of this month') }}</span>
<span>{{ thisMonthIncome | amount(showAmountInHomePage) | currency(defaultCurrency) }}</span>
<span>{{ thisMonthAmount.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(thisMonthAmount.incompleteIncomeAmount) }}</span>
</small>
</p>
</f7-card-header>
@@ -53,11 +53,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.today.incompleteIncomeAmount) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.today">{{ transactionOverview.today.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.today.incompleteExpenseAmount) }}</small>
</div>
</div>
</f7-list-item>
@@ -80,11 +80,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.thisWeek.incompleteIncomeAmount) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisWeek">{{ transactionOverview.thisWeek.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.thisWeek.incompleteExpenseAmount) }}</small>
</div>
</div>
</f7-list-item>
@@ -107,11 +107,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.thisMonth.incompleteIncomeAmount) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisMonth">{{ transactionOverview.thisMonth.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.thisMonth.incompleteExpenseAmount) }}</small>
</div>
</div>
</f7-list-item>
@@ -131,11 +131,11 @@
<div slot="after">
<div class="text-color-red">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.incomeAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.thisYear.incompleteIncomeAmount) }}</small>
</div>
<div class="text-color-teal">
<small v-if="loading">0.00 USD</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) }}</small>
<small v-else-if="!loading && transactionOverview.thisYear">{{ transactionOverview.thisYear.expenseAmount | amount(showAmountInHomePage) | currency(defaultCurrency) | completeAmount(transactionOverview.thisYear.incompleteExpenseAmount) }}</small>
</div>
</div>
</f7-list-item>
@@ -185,19 +185,17 @@ export default {
defaultCurrency() {
return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
},
thisMonthExpense() {
thisMonthAmount() {
if (!this.$store.state.transactionOverview || !this.$store.state.transactionOverview.thisMonth) {
return 0;
return {
incomeAmount : 0,
expenseAmount : 0,
incompleteIncomeAmount: false,
incompleteExpenseAmount : false
};
}
return this.$store.state.transactionOverview.thisMonth.expenseAmount;
},
thisMonthIncome() {
if (!this.$store.state.transactionOverview || !this.$store.state.transactionOverview.thisMonth) {
return 0;
}
return this.$store.state.transactionOverview.thisMonth.incomeAmount;
return this.$store.state.transactionOverview.thisMonth;
}
},
created() {
@@ -206,6 +204,7 @@ export default {
self.loading = true;
self.$store.dispatch('loadTransactionOverview', {
defaultCurrency: self.defaultCurrency,
dateRange: self.dateRange,
force: false
}).then(() => {
@@ -237,6 +236,7 @@ export default {
const self = this;
self.$store.dispatch('loadTransactionOverview', {
defaultCurrency: self.defaultCurrency,
dateRange: self.dateRange,
force: true
}).then(() => {
@@ -288,6 +288,9 @@ export default {
return amount;
},
completeAmount(amount, incomplete) {
return amount + (incomplete ? '+' : '');
},
monthNameLocalizedKey(monthName) {
return `datetime.${monthName}.long`;
}