mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 15:07:33 +08:00
code refactor
This commit is contained in:
MaysWind
+140
-61
@@ -1,40 +1,167 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
import { useUserStore } from './user.js';
|
||||
import { useExchangeRatesStore } from './exchangeRates.js';
|
||||
|
||||
import { isNumber, isEquals } from '@/lib/common.js';
|
||||
import {
|
||||
getTodayFirstUnixTime,
|
||||
getTodayLastUnixTime,
|
||||
getThisWeekFirstUnixTime,
|
||||
getThisWeekLastUnixTime,
|
||||
getThisMonthFirstUnixTime,
|
||||
getThisMonthLastUnixTime,
|
||||
getThisYearFirstUnixTime,
|
||||
getThisYearLastUnixTime
|
||||
} from '@/lib/datetime.js';
|
||||
import services from '@/lib/services.js';
|
||||
import logger from '@/lib/logger.js';
|
||||
|
||||
function updateTransactionDateRange(state) {
|
||||
const userStore = useUserStore();
|
||||
|
||||
state.transactionDataRange.today.startTime = getTodayFirstUnixTime();
|
||||
state.transactionDataRange.today.endTime = getTodayLastUnixTime();
|
||||
|
||||
state.transactionDataRange.thisWeek.startTime = getThisWeekFirstUnixTime(userStore.currentUserFirstDayOfWeek);
|
||||
state.transactionDataRange.thisWeek.endTime = getThisWeekLastUnixTime(userStore.currentUserFirstDayOfWeek);
|
||||
|
||||
state.transactionDataRange.thisMonth.startTime = getThisMonthFirstUnixTime();
|
||||
state.transactionDataRange.thisMonth.endTime = getThisMonthLastUnixTime();
|
||||
|
||||
state.transactionDataRange.thisYear.startTime = getThisYearFirstUnixTime();
|
||||
state.transactionDataRange.thisYear.endTime = getThisYearLastUnixTime();
|
||||
}
|
||||
|
||||
export const useOverviewStore = defineStore('overview', {
|
||||
state: () => ({
|
||||
transactionOverview: {},
|
||||
transactionDataRange: {
|
||||
today: {
|
||||
startTime: getTodayFirstUnixTime(),
|
||||
endTime: getTodayLastUnixTime()
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: getThisWeekFirstUnixTime(useUserStore().currentUserFirstDayOfWeek),
|
||||
endTime: getThisWeekLastUnixTime(useUserStore().currentUserFirstDayOfWeek)
|
||||
},
|
||||
thisMonth: {
|
||||
startTime: getThisMonthFirstUnixTime(),
|
||||
endTime: getThisMonthLastUnixTime()
|
||||
},
|
||||
thisYear: {
|
||||
startTime: getThisYearFirstUnixTime(),
|
||||
endTime: getThisYearLastUnixTime()
|
||||
}
|
||||
},
|
||||
transactionOverviewData: {},
|
||||
transactionOverviewStateInvalid: true
|
||||
}),
|
||||
getters: {
|
||||
transactionOverview(state) {
|
||||
const userStore = useUserStore();
|
||||
const exchangeRatesStore = useExchangeRatesStore();
|
||||
|
||||
const overviewData = state.transactionOverviewData;
|
||||
|
||||
if (!overviewData || !overviewData.thisMonth) {
|
||||
return {
|
||||
thisMonth: {
|
||||
valid: false,
|
||||
incomeAmount: 0,
|
||||
expenseAmount: 0,
|
||||
incompleteIncomeAmount: false,
|
||||
incompleteExpenseAmount: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const finalOverviewData = {};
|
||||
const defaultCurrency = userStore.currentUserDefaultCurrency;
|
||||
|
||||
[ 'today', 'thisWeek', 'thisMonth', 'thisYear' ].forEach(field => {
|
||||
if (!Object.prototype.hasOwnProperty.call(overviewData, field)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = overviewData[field];
|
||||
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
|
||||
let totalIncomeAmount = 0;
|
||||
let totalExpenseAmount = 0;
|
||||
let hasUnCalculatedTotalIncome = false;
|
||||
let hasUnCalculatedTotalExpense = false;
|
||||
|
||||
if (item.amounts) {
|
||||
for (let i = 0; i < item.amounts.length; i++) {
|
||||
const amount = item.amounts[i];
|
||||
|
||||
if (amount.currency !== defaultCurrency) {
|
||||
const incomeAmount = exchangeRatesStore.getExchangedAmount(amount.incomeAmount, amount.currency, defaultCurrency);
|
||||
const expenseAmount = exchangeRatesStore.getExchangedAmount(amount.expenseAmount, amount.currency, defaultCurrency);
|
||||
|
||||
if (isNumber(incomeAmount)) {
|
||||
totalIncomeAmount += Math.floor(incomeAmount);
|
||||
} else {
|
||||
hasUnCalculatedTotalIncome = true;
|
||||
}
|
||||
|
||||
if (isNumber(expenseAmount)) {
|
||||
totalExpenseAmount += Math.floor(expenseAmount);
|
||||
} else {
|
||||
hasUnCalculatedTotalExpense = true;
|
||||
}
|
||||
} else {
|
||||
totalIncomeAmount += amount.incomeAmount;
|
||||
totalExpenseAmount += amount.expenseAmount;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
finalOverviewData[field] = {
|
||||
valid: true,
|
||||
incomeAmount: totalIncomeAmount,
|
||||
expenseAmount: totalExpenseAmount,
|
||||
incompleteIncomeAmount: hasUnCalculatedTotalIncome,
|
||||
incompleteExpenseAmount: hasUnCalculatedTotalExpense,
|
||||
amounts: item.amounts || []
|
||||
};
|
||||
});
|
||||
|
||||
return finalOverviewData;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
updateTransactionOverviewInvalidState(invalidState) {
|
||||
this.transactionOverviewStateInvalid = invalidState;
|
||||
},
|
||||
resetTransactionOverview() {
|
||||
this.transactionOverview = {};
|
||||
this.transactionOverviewData = {};
|
||||
this.transactionOverviewStateInvalid = true;
|
||||
},
|
||||
loadTransactionOverview({ defaultCurrency, dateRange, force }) {
|
||||
loadTransactionOverview({ force }) {
|
||||
const self = this;
|
||||
const exchangeRatesStore = useExchangeRatesStore();
|
||||
let dateChanged = false;
|
||||
|
||||
if (!force && !self.transactionOverviewStateInvalid) {
|
||||
if (self.transactionDataRange.today.startTime !== getTodayFirstUnixTime()) {
|
||||
dateChanged = true;
|
||||
updateTransactionDateRange(self);
|
||||
}
|
||||
|
||||
if (!dateChanged && !force && !self.transactionOverviewStateInvalid) {
|
||||
return new Promise((resolve) => {
|
||||
resolve(self.transactionOverview);
|
||||
resolve(self.transactionOverviewData);
|
||||
});
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
services.getTransactionAmounts({
|
||||
today: dateRange.today,
|
||||
thisWeek: dateRange.thisWeek,
|
||||
thisMonth: dateRange.thisMonth,
|
||||
thisYear: dateRange.thisYear
|
||||
today: self.transactionDataRange.today,
|
||||
thisWeek: self.transactionDataRange.thisWeek,
|
||||
thisMonth: self.transactionDataRange.thisMonth,
|
||||
thisYear: self.transactionDataRange.thisYear
|
||||
}).then(response => {
|
||||
const data = response.data;
|
||||
|
||||
@@ -43,66 +170,18 @@ export const useOverviewStore = defineStore('overview', {
|
||||
return;
|
||||
}
|
||||
|
||||
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 = exchangeRatesStore.getExchangedAmount(amount.incomeAmount, amount.currency, defaultCurrency);
|
||||
const expenseAmount = exchangeRatesStore.getExchangedAmount(amount.expenseAmount, amount.currency, defaultCurrency);
|
||||
|
||||
if (isNumber(incomeAmount)) {
|
||||
totalIncomeAmount += Math.floor(incomeAmount);
|
||||
} else {
|
||||
hasUnCalculatedTotalIncome = true;
|
||||
}
|
||||
|
||||
if (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;
|
||||
}
|
||||
|
||||
if (self.transactionOverviewStateInvalid) {
|
||||
self.updateTransactionOverviewInvalidState(false);
|
||||
}
|
||||
|
||||
if (force && overview && isEquals(self.transactionOverview, overview)) {
|
||||
if (force && data.result && isEquals(self.transactionOverviewData, data.result)) {
|
||||
reject({ message: 'Data is up to date' });
|
||||
return;
|
||||
}
|
||||
|
||||
self.transactionOverview = overview;
|
||||
self.transactionOverviewData = data.result;
|
||||
|
||||
resolve(overview);
|
||||
resolve(data.result);
|
||||
}).catch(error => {
|
||||
if (force) {
|
||||
logger.error('failed to force load transaction overview', error);
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<v-card-text>
|
||||
<h5 class="text-2xl font-weight-medium text-primary">
|
||||
{{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.expenseAmount : '-' }}
|
||||
{{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }}
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
:icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
|
||||
<v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
|
||||
@@ -25,7 +25,7 @@
|
||||
</h5>
|
||||
<p>
|
||||
<span class="mr-2">{{ $t('Monthly income') }}</span>
|
||||
<span>{{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.incomeAmount : '-' }}</span>
|
||||
<span>{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
|
||||
</p>
|
||||
<v-btn size="small" to="/transactions">{{ $t('View Details') }}</v-btn>
|
||||
</v-card-text>
|
||||
@@ -36,8 +36,8 @@
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarToday"
|
||||
:title="$t('Today')"
|
||||
:expense-amount="transactionOverview.today && transactionOverview.today.valid ? transactionOverview.today.expenseAmount : '-'"
|
||||
:income-amount="transactionOverview.today && transactionOverview.today.valid ? transactionOverview.today.incomeAmount : '-'"
|
||||
:expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : '-'"
|
||||
:income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : '-'"
|
||||
:datetime="displayDateRange.today.displayTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -52,8 +52,8 @@
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarWeek"
|
||||
:title="$t('This Week')"
|
||||
:expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? transactionOverview.thisWeek.expenseAmount : '-'"
|
||||
:income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? transactionOverview.thisWeek.incomeAmount : '-'"
|
||||
:expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : '-'"
|
||||
:income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : '-'"
|
||||
:datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -68,8 +68,8 @@
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarMonth"
|
||||
:title="$t('This Month')"
|
||||
:expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? transactionOverview.thisMonth.expenseAmount : '-'"
|
||||
:income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? transactionOverview.thisMonth.incomeAmount : '-'"
|
||||
:expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-'"
|
||||
:income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-'"
|
||||
:datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -84,8 +84,8 @@
|
||||
<income-expense-overview-card
|
||||
:disabled="loadingOverview" :icon="icons.calendarYear"
|
||||
:title="$t('This Year')"
|
||||
:expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? transactionOverview.thisYear.expenseAmount : '-'"
|
||||
:income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? transactionOverview.thisYear.incomeAmount : '-'"
|
||||
:expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : '-'"
|
||||
:income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : '-'"
|
||||
:datetime="displayDateRange.thisYear.displayTime"
|
||||
>
|
||||
<template #menus>
|
||||
@@ -109,17 +109,7 @@ import { useUserStore } from '@/stores/user.js';
|
||||
import { useOverviewStore } from '@/stores/overview.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import {
|
||||
formatUnixTime,
|
||||
getTodayFirstUnixTime,
|
||||
getTodayLastUnixTime,
|
||||
getThisWeekFirstUnixTime,
|
||||
getThisWeekLastUnixTime,
|
||||
getThisMonthFirstUnixTime,
|
||||
getThisMonthLastUnixTime,
|
||||
getThisYearFirstUnixTime,
|
||||
getThisYearLastUnixTime
|
||||
} from '@/lib/datetime.js';
|
||||
import { formatUnixTime } from '@/lib/datetime.js';
|
||||
|
||||
import {
|
||||
mdiRefresh,
|
||||
@@ -139,8 +129,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
loadingOverview: true,
|
||||
todayFirstUnixTime: getTodayFirstUnixTime(),
|
||||
todayLastUnixTime: getTodayLastUnixTime(),
|
||||
icons: {
|
||||
refresh: mdiRefresh,
|
||||
eye: mdiEyeOutline,
|
||||
@@ -178,78 +166,29 @@ export default {
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
},
|
||||
dateRange() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
today: {
|
||||
startTime: self.todayFirstUnixTime,
|
||||
endTime: self.todayLastUnixTime
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: getThisWeekFirstUnixTime(self.firstDayOfWeek),
|
||||
endTime: getThisWeekLastUnixTime(self.firstDayOfWeek)
|
||||
},
|
||||
thisMonth: {
|
||||
startTime: getThisMonthFirstUnixTime(),
|
||||
endTime: getThisMonthLastUnixTime()
|
||||
},
|
||||
thisYear: {
|
||||
startTime: getThisYearFirstUnixTime(),
|
||||
endTime: getThisYearLastUnixTime()
|
||||
}
|
||||
};
|
||||
},
|
||||
displayDateRange() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
today: {
|
||||
displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.dateRange.today.startTime),
|
||||
displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.overviewStore.transactionDataRange.today.startTime),
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.endTime)
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.endTime)
|
||||
},
|
||||
thisMonth: {
|
||||
displayTime: formatUnixTime(self.dateRange.thisMonth.startTime, 'MMMM'),
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.endTime)
|
||||
displayTime: formatUnixTime(self.overviewStore.transactionDataRange.thisMonth.startTime, 'MMMM'),
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.endTime)
|
||||
},
|
||||
thisYear: {
|
||||
displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.dateRange.thisYear.startTime)
|
||||
displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.overviewStore.transactionDataRange.thisYear.startTime)
|
||||
}
|
||||
};
|
||||
},
|
||||
transactionOverview() {
|
||||
if (!this.overviewStore.transactionOverview || !this.overviewStore.transactionOverview.thisMonth) {
|
||||
return {
|
||||
thisMonth: {
|
||||
valid: false,
|
||||
incomeAmount: this.getDisplayAmount(0, false),
|
||||
expenseAmount: this.getDisplayAmount(0, false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const originalOverview = this.overviewStore.transactionOverview;
|
||||
const displayOverview = {};
|
||||
|
||||
[ 'today', 'thisWeek', 'thisMonth', 'thisYear' ].forEach(key => {
|
||||
if (!originalOverview[key]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = originalOverview[key];
|
||||
|
||||
displayOverview[key] = {
|
||||
valid: true,
|
||||
incomeAmount: this.getDisplayAmount(item.incomeAmount, item.incompleteIncomeAmount),
|
||||
expenseAmount: this.getDisplayAmount(item.expenseAmount, item.incompleteExpenseAmount)
|
||||
};
|
||||
});
|
||||
|
||||
return displayOverview;
|
||||
return this.overviewStore.transactionOverview;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -264,8 +203,6 @@ export default {
|
||||
self.loadingOverview = true;
|
||||
|
||||
self.overviewStore.loadTransactionOverview({
|
||||
defaultCurrency: self.defaultCurrency,
|
||||
dateRange: self.dateRange,
|
||||
force: force
|
||||
}).then(() => {
|
||||
self.loadingOverview = false;
|
||||
@@ -287,6 +224,12 @@ export default {
|
||||
}
|
||||
|
||||
return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
|
||||
},
|
||||
getDisplayIncomeAmount(category) {
|
||||
return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
|
||||
},
|
||||
getDisplayExpenseAmount(category) {
|
||||
return this.getDisplayAmount(category.expenseAmount, category.incompleteExpenseAmount);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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">{{ transactionOverview.thisMonth.expenseAmount }}</span>
|
||||
<span class="month-expense" v-else-if="!loading">{{ getDisplayExpenseAmount(transactionOverview.thisMonth) }}</span>
|
||||
<f7-link class="margin-left-half" @click="showAmountInHomePage = !showAmountInHomePage">
|
||||
<f7-icon class="ebk-hide-icon" :f7="showAmountInHomePage ? 'eye_slash_fill' : 'eye_fill'"></f7-icon>
|
||||
</f7-link>
|
||||
@@ -29,7 +29,7 @@
|
||||
<small class="home-summary-misc" v-if="loading">Monthly income 0.00 USD</small>
|
||||
<small class="home-summary-misc" v-else-if="!loading">
|
||||
<span>{{ $t('Monthly income') }}</span>
|
||||
<span>{{ transactionOverview.thisMonth.incomeAmount }}</span>
|
||||
<span>{{ getDisplayIncomeAmount(transactionOverview.thisMonth) }}</span>
|
||||
</small>
|
||||
</p>
|
||||
</f7-card-header>
|
||||
@@ -56,11 +56,11 @@
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ transactionOverview.today.incomeAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayIncomeAmount(transactionOverview.today) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ transactionOverview.today.expenseAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.today && transactionOverview.today.valid">{{ getDisplayExpenseAmount(transactionOverview.today) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -89,11 +89,11 @@
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ transactionOverview.thisWeek.incomeAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayIncomeAmount(transactionOverview.thisWeek) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ transactionOverview.thisWeek.expenseAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisWeek && transactionOverview.thisWeek.valid">{{ getDisplayExpenseAmount(transactionOverview.thisWeek) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -122,11 +122,11 @@
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ transactionOverview.thisMonth.incomeAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayIncomeAmount(transactionOverview.thisMonth) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ transactionOverview.thisMonth.expenseAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisMonth && transactionOverview.thisMonth.valid">{{ getDisplayExpenseAmount(transactionOverview.thisMonth) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -152,11 +152,11 @@
|
||||
<div class="overview-transaction-amount">
|
||||
<div class="text-color-red text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ transactionOverview.thisYear.incomeAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayIncomeAmount(transactionOverview.thisYear) }}</small>
|
||||
</div>
|
||||
<div class="text-color-teal text-align-right">
|
||||
<small v-if="loading">0.00 USD</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ transactionOverview.thisYear.expenseAmount }}</small>
|
||||
<small v-else-if="!loading && transactionOverview.thisYear && transactionOverview.thisYear.valid">{{ getDisplayExpenseAmount(transactionOverview.thisYear) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -194,24 +194,12 @@ import { useUserStore } from '@/stores/user.js';
|
||||
import { useOverviewStore } from '@/stores/overview.js';
|
||||
|
||||
import datetimeConstants from '@/consts/datetime.js';
|
||||
import {
|
||||
formatUnixTime,
|
||||
getTodayFirstUnixTime,
|
||||
getTodayLastUnixTime,
|
||||
getThisWeekFirstUnixTime,
|
||||
getThisWeekLastUnixTime,
|
||||
getThisMonthFirstUnixTime,
|
||||
getThisMonthLastUnixTime,
|
||||
getThisYearFirstUnixTime,
|
||||
getThisYearLastUnixTime
|
||||
} from '@/lib/datetime.js';
|
||||
import { formatUnixTime } from '@/lib/datetime.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
todayFirstUnixTime: getTodayFirstUnixTime(),
|
||||
todayLastUnixTime: getTodayLastUnixTime()
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -239,82 +227,29 @@ export default {
|
||||
allDateRanges() {
|
||||
return datetimeConstants.allDateRanges;
|
||||
},
|
||||
dateRange() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
today: {
|
||||
startTime: self.todayFirstUnixTime,
|
||||
endTime: self.todayLastUnixTime
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: getThisWeekFirstUnixTime(self.firstDayOfWeek),
|
||||
endTime: getThisWeekLastUnixTime(self.firstDayOfWeek)
|
||||
},
|
||||
thisMonth: {
|
||||
startTime: getThisMonthFirstUnixTime(),
|
||||
endTime: getThisMonthLastUnixTime()
|
||||
},
|
||||
thisYear: {
|
||||
startTime: getThisYearFirstUnixTime(),
|
||||
endTime: getThisYearLastUnixTime()
|
||||
}
|
||||
};
|
||||
},
|
||||
displayDateRange() {
|
||||
const self = this;
|
||||
|
||||
return {
|
||||
today: {
|
||||
displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.dateRange.today.startTime),
|
||||
displayTime: self.$locale.formatUnixTimeToLongDate(self.userStore, self.overviewStore.transactionDataRange.today.startTime),
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.endTime)
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisWeek.endTime)
|
||||
},
|
||||
thisMonth: {
|
||||
displayTime: formatUnixTime(self.dateRange.thisMonth.startTime, 'MMMM'),
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisMonth.endTime)
|
||||
displayTime: formatUnixTime(self.overviewStore.transactionDataRange.thisMonth.startTime, 'MMMM'),
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.overviewStore.transactionDataRange.thisMonth.endTime)
|
||||
},
|
||||
thisYear: {
|
||||
displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.dateRange.thisYear.startTime)
|
||||
displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.overviewStore.transactionDataRange.thisYear.startTime)
|
||||
}
|
||||
};
|
||||
},
|
||||
transactionOverview() {
|
||||
// make sure this computed property refers these property, so these property can trigger this computed property to update
|
||||
const isEnableThousandsSeparator = this.isEnableThousandsSeparator; // eslint-disable-line
|
||||
const currencyDisplayMode = this.currencyDisplayMode; // eslint-disable-line
|
||||
|
||||
if (!this.overviewStore.transactionOverview || !this.overviewStore.transactionOverview.thisMonth) {
|
||||
return {
|
||||
thisMonth: {
|
||||
valid: false,
|
||||
incomeAmount: this.getDisplayAmount(0, false),
|
||||
expenseAmount: this.getDisplayAmount(0, false)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const originalOverview = this.overviewStore.transactionOverview;
|
||||
const displayOverview = {};
|
||||
|
||||
[ 'today', 'thisWeek', 'thisMonth', 'thisYear' ].forEach(key => {
|
||||
if (!originalOverview[key]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = originalOverview[key];
|
||||
|
||||
displayOverview[key] = {
|
||||
valid: true,
|
||||
incomeAmount: this.getDisplayAmount(item.incomeAmount, item.incompleteIncomeAmount),
|
||||
expenseAmount: this.getDisplayAmount(item.expenseAmount, item.incompleteExpenseAmount)
|
||||
};
|
||||
});
|
||||
|
||||
return displayOverview;
|
||||
return this.overviewStore.transactionOverview;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -324,8 +259,6 @@ export default {
|
||||
self.loading = true;
|
||||
|
||||
self.overviewStore.loadTransactionOverview({
|
||||
defaultCurrency: self.defaultCurrency,
|
||||
dateRange: self.dateRange,
|
||||
force: false
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
@@ -340,16 +273,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
let dateChanged = false;
|
||||
|
||||
if (this.todayFirstUnixTime !== getTodayFirstUnixTime()) {
|
||||
dateChanged = true;
|
||||
|
||||
this.todayFirstUnixTime = getTodayFirstUnixTime();
|
||||
this.todayLastUnixTime = getTodayLastUnixTime();
|
||||
}
|
||||
|
||||
if ((dateChanged || this.overviewStore.transactionOverviewStateInvalid) && !this.loading) {
|
||||
if (!this.loading) {
|
||||
this.reload(null);
|
||||
}
|
||||
},
|
||||
@@ -358,8 +282,6 @@ export default {
|
||||
const force = !!done;
|
||||
|
||||
self.overviewStore.loadTransactionOverview({
|
||||
defaultCurrency: self.defaultCurrency,
|
||||
dateRange: self.dateRange,
|
||||
force: force
|
||||
}).then(() => {
|
||||
if (done) {
|
||||
@@ -385,6 +307,12 @@ export default {
|
||||
}
|
||||
|
||||
return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
|
||||
},
|
||||
getDisplayIncomeAmount(category) {
|
||||
return this.getDisplayAmount(category.incomeAmount, category.incompleteIncomeAmount);
|
||||
},
|
||||
getDisplayExpenseAmount(category) {
|
||||
return this.getDisplayAmount(category.expenseAmount, category.incompleteExpenseAmount);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user