From 96c233d5c51ed1bb24996953b20b9da5dd789afc Mon Sep 17 00:00:00 2001 From: MaysWind Date: Sat, 1 Jul 2023 01:58:31 +0800 Subject: [PATCH] code refactor --- src/stores/overview.js | 201 +++++++++++++++++++++++---------- src/views/desktop/HomePage.vue | 107 ++++-------------- src/views/mobile/HomePage.vue | 126 +++++---------------- 3 files changed, 192 insertions(+), 242 deletions(-) diff --git a/src/stores/overview.js b/src/stores/overview.js index 5878865f..f2737065 100644 --- a/src/stores/overview.js +++ b/src/stores/overview.js @@ -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); diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue index d5829346..1ea4f047 100644 --- a/src/views/desktop/HomePage.vue +++ b/src/views/desktop/HomePage.vue @@ -17,7 +17,7 @@
- {{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.expenseAmount : '-' }} + {{ transactionOverview && transactionOverview.thisMonth ? getDisplayExpenseAmount(transactionOverview.thisMonth) : '-' }} @@ -25,7 +25,7 @@

{{ $t('Monthly income') }} - {{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.incomeAmount : '-' }} + {{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}

{{ $t('View Details') }} @@ -36,8 +36,8 @@ @@ -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); } } }