From 8659e9ea37e5d73c4487703a639b08b75bc25ab6 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Tue, 1 Aug 2023 01:31:27 +0800 Subject: [PATCH] add asset summary card in home page, add 6 more months in trend card --- pkg/api/transactions.go | 2 +- src/lib/services.js | 26 +- src/locales/en.js | 4 +- src/locales/zh_Hans.js | 4 +- src/stores/overview.js | 72 ++++-- src/views/desktop/HomePage.vue | 233 +++++++++++++----- .../overview/IncomeExpenseOverviewCard.vue | 8 +- .../overview/MonthlyIncomeAndExpenseCard.vue | 26 +- 8 files changed, 267 insertions(+), 108 deletions(-) diff --git a/pkg/api/transactions.go b/pkg/api/transactions.go index 73a9272b..b4b4cd15 100644 --- a/pkg/api/transactions.go +++ b/pkg/api/transactions.go @@ -290,7 +290,7 @@ func (a *TransactionsApi) TransactionAmountsHandler(c *core.Context) (interface{ return nil, errs.ErrQueryItemsEmpty } - if len(requestItems) > 10 { + if len(requestItems) > 20 { log.WarnfWithRequestId(c, "[transactions.TransactionAmountsHandler] parse request failed, because there are too many items") return nil, errs.ErrQueryItemsTooMuch } diff --git a/src/lib/services.js b/src/lib/services.js index be202737..9bd1fa67 100644 --- a/src/lib/services.js +++ b/src/lib/services.js @@ -258,7 +258,7 @@ export default { return axios.get('v1/transactions/statistics.json' + (queryParams.length ? '?' + queryParams.join('&') : '')); }, - getTransactionAmounts: ({ today, thisWeek, thisMonth, thisYear, lastMonth, monthBeforeLastMonth, monthBeforeLast2Months, monthBeforeLast3Months, monthBeforeLast4Months }) => { + getTransactionAmounts: ({ today, thisWeek, thisMonth, thisYear, lastMonth, monthBeforeLastMonth, monthBeforeLast2Months, monthBeforeLast3Months, monthBeforeLast4Months, monthBeforeLast5Months, monthBeforeLast6Months, monthBeforeLast7Months, monthBeforeLast8Months, monthBeforeLast9Months, monthBeforeLast10Months }) => { const queryParams = []; if (today) { @@ -297,6 +297,30 @@ export default { queryParams.push(`monthBeforeLast4Months_${monthBeforeLast4Months.startTime}_${monthBeforeLast4Months.endTime}`); } + if (monthBeforeLast5Months) { + queryParams.push(`monthBeforeLast5Months_${monthBeforeLast5Months.startTime}_${monthBeforeLast5Months.endTime}`); + } + + if (monthBeforeLast6Months) { + queryParams.push(`monthBeforeLast6Months_${monthBeforeLast6Months.startTime}_${monthBeforeLast6Months.endTime}`); + } + + if (monthBeforeLast7Months) { + queryParams.push(`monthBeforeLast7Months_${monthBeforeLast7Months.startTime}_${monthBeforeLast7Months.endTime}`); + } + + if (monthBeforeLast8Months) { + queryParams.push(`monthBeforeLast8Months_${monthBeforeLast8Months.startTime}_${monthBeforeLast8Months.endTime}`); + } + + if (monthBeforeLast9Months) { + queryParams.push(`monthBeforeLast9Months_${monthBeforeLast9Months.startTime}_${monthBeforeLast9Months.endTime}`); + } + + if (monthBeforeLast10Months) { + queryParams.push(`monthBeforeLast10Months_${monthBeforeLast10Months.startTime}_${monthBeforeLast10Months.endTime}`); + } + return axios.get('v1/transactions/amounts.json' + (queryParams.length ? '?query=' + queryParams.join('|') : '')); }, getTransaction: ({ id }) => { diff --git a/src/locales/en.js b/src/locales/en.js index 9c51cf04..c87bb5b2 100644 --- a/src/locales/en.js +++ b/src/locales/en.js @@ -71,7 +71,8 @@ export default { 'hoursBehindDefaultTimezone': '{hours} hour(s) behind default timezone', 'hoursAheadOfDefaultTimezone': '{hours} hour(s) ahead of default timezone', 'hoursMinutesBehindDefaultTimezone': '{hours} hour(s) and {minutes} minutes behind default timezone', - 'hoursMinutesAheadOfDefaultTimezone': '{hours} hour(s) and {minutes} minutes ahead of default timezone' + 'hoursMinutesAheadOfDefaultTimezone': '{hours} hour(s) and {minutes} minutes ahead of default timezone', + 'youHaveAccounts': 'You have recorded {count} accounts' } }, 'dataExport': { @@ -837,6 +838,7 @@ export default { 'PIN code is wrong': 'PIN code is wrong', 'Sign Up': 'Sign Up', 'Overview': 'Overview', + 'Asset Summary': 'Asset Summary', 'Trend in Income and Expense': 'Trend in Income and Expense', 'View Details': 'View Details', 'Transaction List': 'Transaction List', diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js index a1747981..a3507080 100644 --- a/src/locales/zh_Hans.js +++ b/src/locales/zh_Hans.js @@ -71,7 +71,8 @@ export default { 'hoursBehindDefaultTimezone': '比默认时区晚{hours}小时', 'hoursAheadOfDefaultTimezone': '比默认时区早{hours}小时', 'hoursMinutesBehindDefaultTimezone': '比默认时区晚{hours}小时{minutes}分', - 'hoursMinutesAheadOfDefaultTimezone': '比默认时区早{time}小时{minutes}分' + 'hoursMinutesAheadOfDefaultTimezone': '比默认时区早{time}小时{minutes}分', + 'youHaveAccounts': '您已经记录 {count} 个账户' } }, 'dataExport': { @@ -837,6 +838,7 @@ export default { 'PIN code is wrong': 'PIN码错误', 'Sign Up': '注册', 'Overview': '总览', + 'Asset Summary': '资产概要', 'Trend in Income and Expense': '收入与支出趋势', 'View Details': '查看详情', 'Transaction List': '交易列表', diff --git a/src/stores/overview.js b/src/stores/overview.js index ddf6ae80..142fd9bf 100644 --- a/src/stores/overview.js +++ b/src/stores/overview.js @@ -39,14 +39,10 @@ function updateTransactionDateRange(state) { state.transactionDataRange.monthBeforeLastMonth.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 2, 'months'); state.transactionDataRange.monthBeforeLastMonth.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 2, 'months'); - state.transactionDataRange.monthBeforeLast2Months.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 3, 'months'); - state.transactionDataRange.monthBeforeLast2Months.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 3, 'months'); - - state.transactionDataRange.monthBeforeLast3Months.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 4, 'months'); - state.transactionDataRange.monthBeforeLast3Months.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 4, 'months'); - - state.transactionDataRange.monthBeforeLast4Months.startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 5, 'months'); - state.transactionDataRange.monthBeforeLast4Months.endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 5, 'months'); + for (let i = 2; i <= 10; i++) { + state.transactionDataRange[`monthBeforeLast${i}Months`].startTime = getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), i + 1, 'months'); + state.transactionDataRange[`monthBeforeLast${i}Months`].endTime = getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), i + 1, 'months'); + } } export const useOverviewStore = defineStore('overview', { @@ -87,10 +83,34 @@ export const useOverviewStore = defineStore('overview', { monthBeforeLast4Months: { startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 5, 'months'), endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 5, 'months') + }, + monthBeforeLast5Months: { + startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 6, 'months'), + endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 6, 'months') + }, + monthBeforeLast6Months: { + startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 7, 'months'), + endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 7, 'months') + }, + monthBeforeLast7Months: { + startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 8, 'months'), + endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 8, 'months') + }, + monthBeforeLast8Months: { + startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 9, 'months'), + endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 9, 'months') + }, + monthBeforeLast9Months: { + startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 10, 'months'), + endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 10, 'months') + }, + monthBeforeLast10Months: { + startTime: getUnixTimeBeforeUnixTime(getThisMonthFirstUnixTime(), 11, 'months'), + endTime: getUnixTimeBeforeUnixTime(getThisMonthLastUnixTime(), 11, 'months') } }, transactionOverviewOptions: { - loadLast5Months: false + loadLast11Months: false }, transactionOverviewData: {}, transactionOverviewStateInvalid: true @@ -117,7 +137,23 @@ export const useOverviewStore = defineStore('overview', { const finalOverviewData = {}; const defaultCurrency = userStore.currentUserDefaultCurrency; - [ 'today', 'thisWeek', 'thisMonth', 'thisYear', 'lastMonth', 'monthBeforeLastMonth', 'monthBeforeLast2Months', 'monthBeforeLast3Months', 'monthBeforeLast4Months' ].forEach(field => { + [ + 'today', + 'thisWeek', + 'thisMonth', + 'thisYear', + 'lastMonth', + 'monthBeforeLastMonth', + 'monthBeforeLast2Months', + 'monthBeforeLast3Months', + 'monthBeforeLast4Months', + 'monthBeforeLast5Months', + 'monthBeforeLast6Months', + 'monthBeforeLast7Months', + 'monthBeforeLast8Months', + 'monthBeforeLast9Months', + 'monthBeforeLast10Months' + ].forEach(field => { if (!Object.prototype.hasOwnProperty.call(overviewData, field)) { return; } @@ -178,11 +214,11 @@ export const useOverviewStore = defineStore('overview', { }, resetTransactionOverview() { updateTransactionDateRange(this); - this.transactionOverviewOptions.loadLast5Months = false; + this.transactionOverviewOptions.loadLast11Months = false; this.transactionOverviewData = {}; this.transactionOverviewStateInvalid = true; }, - loadTransactionOverview({ force, loadLast5Months }) { + loadTransactionOverview({ force, loadLast11Months }) { const self = this; let dateChanged = false; let rangeChanged = false; @@ -192,7 +228,7 @@ export const useOverviewStore = defineStore('overview', { updateTransactionDateRange(self); } - if (loadLast5Months && !self.transactionOverviewOptions.loadLast5Months) { + if (loadLast11Months && !self.transactionOverviewOptions.loadLast11Months) { rangeChanged = true; } @@ -209,12 +245,18 @@ export const useOverviewStore = defineStore('overview', { thisYear: self.transactionDataRange.thisYear }; - if (loadLast5Months) { + if (loadLast11Months) { requestParams.lastMonth = self.transactionDataRange.lastMonth; requestParams.monthBeforeLastMonth = self.transactionDataRange.monthBeforeLastMonth; requestParams.monthBeforeLast2Months = self.transactionDataRange.monthBeforeLast2Months; requestParams.monthBeforeLast3Months = self.transactionDataRange.monthBeforeLast3Months; requestParams.monthBeforeLast4Months = self.transactionDataRange.monthBeforeLast4Months; + requestParams.monthBeforeLast5Months = self.transactionDataRange.monthBeforeLast5Months; + requestParams.monthBeforeLast6Months = self.transactionDataRange.monthBeforeLast6Months; + requestParams.monthBeforeLast7Months = self.transactionDataRange.monthBeforeLast7Months; + requestParams.monthBeforeLast8Months = self.transactionDataRange.monthBeforeLast8Months; + requestParams.monthBeforeLast9Months = self.transactionDataRange.monthBeforeLast9Months; + requestParams.monthBeforeLast10Months = self.transactionDataRange.monthBeforeLast10Months; } return new Promise((resolve, reject) => { @@ -236,7 +278,7 @@ export const useOverviewStore = defineStore('overview', { } self.transactionOverviewData = data.result; - self.transactionOverviewOptions.loadLast5Months = loadLast5Months; + self.transactionOverviewOptions.loadLast11Months = loadLast11Months; resolve(data.result); }).catch(error => { diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue index dcef0e68..581d092d 100644 --- a/src/views/desktop/HomePage.vue +++ b/src/views/desktop/HomePage.vue @@ -40,68 +40,136 @@ - - -