zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add asset summary card in home page, add 6 more months in trend card

Browse Source
This commit is contained in:
MaysWind
2023-08-01 01:31:27 +08:00
parent 4cff481d61
commit 8659e9ea37
8 changed files with 267 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/api/transactions.go
+1 -1
View File
@@ -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
}
src/lib/services.js
+25 -1
View File
@@ -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 }) => {
src/locales/en.js
+3 -1
View File
@@ -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',
src/locales/zh_Hans.js
+3 -1
View File
@@ -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': '交易列表',
src/stores/overview.js
+57 -15
View File
@@ -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 => {
src/views/desktop/HomePage.vue
+168 -65
View File
@@ -40,68 +40,136 @@
</v-card>
</v-col>
<v-col cols="12" lg="2" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
:title="$t('Today')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.Today.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
<v-col cols="12" lg="8" md="12">
<v-card :class="{ 'disabled': loadingOverview }">
<template #title>
<span>{{ $t('Asset Summary') }}</span>
</template>
</income-expense-overview-card>
<v-card-text>
<h6 class="text-sm font-weight-medium mb-6">
<span>{{ $t('format.misc.youHaveAccounts', { count: allAccounts.length }) }}</span>
</h6>
<v-row>
<v-col cols="12" md="4">
<div class="d-flex align-center">
<div class="me-3">
<v-avatar rounded color="secondary" size="42" class="elevation-1">
<v-icon size="24" :icon="icons.totalAssets"/>
</v-avatar>
</div>
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Total assets') }}</span>
<span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalAssets }}</span>
<v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</div>
</div>
</v-col>
<v-col cols="12" md="4">
<div class="d-flex align-center">
<div class="me-3">
<v-avatar rounded color="expense" size="42" class="elevation-1">
<v-icon size="24" :icon="icons.totalLiabilities"/>
</v-avatar>
</div>
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Total liabilities') }}</span>
<span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ totalLiabilities }}</span>
<v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</div>
</div>
</v-col>
<v-col cols="12" md="4">
<div class="d-flex align-center">
<div class="me-3">
<v-avatar rounded color="primary" size="42" class="elevation-1">
<v-icon size="24" :icon="icons.netAssets"/>
</v-avatar>
</div>
<div class="d-flex flex-column">
<span class="text-caption">{{ $t('Net assets') }}</span>
<span class="text-h6" v-if="!loadingOverview || (allAccounts && allAccounts.length)">{{ netAssets }}</span>
<v-skeleton-loader class="overview-card-skeleton mt-3 mb-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!allAccounts || !allAccounts.length)"></v-skeleton-loader>
</div>
</div>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" lg="2" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
:title="$t('This Week')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisWeek.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
</v-col>
<v-col cols="12" md="6">
<v-row>
<v-col cols="12" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
:title="$t('Today')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.Today.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
</v-col>
<v-col cols="12" lg="2" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
:title="$t('This Month')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisMonth.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
</v-col>
<v-col cols="12" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
:title="$t('This Week')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisWeek.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
</v-col>
<v-col cols="12" lg="2" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
:title="$t('This Year')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisYear.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
<v-col cols="12" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
:title="$t('This Month')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisMonth.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
</v-col>
<v-col cols="12" md="6">
<income-expense-overview-card
:loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
:title="$t('This Year')"
: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>
<v-list-item :prepend-icon="icons.viewDetails" :to="'/transactions?dateType=' + allDateRanges.ThisYear.type">
<v-list-item-title>{{ $t('View Details') }}</v-list-item-title>
</v-list-item>
</template>
</income-expense-overview-card>
</v-col>
</v-row>
</v-col>
<v-col cols="12" md="6">
@@ -122,6 +190,7 @@ import MonthlyIncomeAndExpenseCard from './overview/MonthlyIncomeAndExpenseCard.
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.js';
import { useUserStore } from '@/stores/user.js';
import { useAccountsStore } from '@/stores/account.js';
import { useOverviewStore } from '@/stores/overview.js';
import datetimeConstants from '@/consts/datetime.js';
@@ -131,7 +200,9 @@ import {
mdiRefresh,
mdiEyeOutline,
mdiEyeOffOutline,
mdiCartOutline,
mdiBankOutline,
mdiCreditCardOutline,
mdiPiggyBankOutline,
mdiCalendarTodayOutline,
mdiCalendarWeekOutline,
mdiCalendarMonthOutline,
@@ -152,7 +223,9 @@ export default {
refresh: mdiRefresh,
eye: mdiEyeOutline,
eyeSlash: mdiEyeOffOutline,
cart: mdiCartOutline,
totalAssets: mdiBankOutline,
totalLiabilities: mdiCreditCardOutline,
netAssets: mdiPiggyBankOutline,
calendarToday: mdiCalendarTodayOutline,
calendarWeek: mdiCalendarWeekOutline,
calendarMonth: mdiCalendarMonthOutline,
@@ -163,7 +236,7 @@ export default {
};
},
computed: {
...mapStores(useSettingsStore, useUserStore, useOverviewStore),
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useOverviewStore),
isDarkMode() {
return this.globalTheme.global.name.value === 'dark';
},
@@ -181,6 +254,21 @@ export default {
allDateRanges() {
return datetimeConstants.allDateRanges;
},
allAccounts() {
return this.accountsStore.allAccounts;
},
netAssets() {
const netAssets = this.accountsStore.getNetAssets(this.showAmountInHomePage);
return this.getDisplayCurrency(netAssets, this.defaultCurrency);
},
totalAssets() {
const totalAssets = this.accountsStore.getTotalAssets(this.showAmountInHomePage);
return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
},
totalLiabilities() {
const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAmountInHomePage);
return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
},
displayDateRange() {
const self = this;
@@ -213,7 +301,20 @@ export default {
return data;
}
[ 'monthBeforeLast4Months', 'monthBeforeLast3Months', 'monthBeforeLast2Months', 'monthBeforeLastMonth', 'lastMonth', 'thisMonth' ].forEach(fieldName => {
[
'monthBeforeLast10Months',
'monthBeforeLast9Months',
'monthBeforeLast8Months',
'monthBeforeLast7Months',
'monthBeforeLast6Months',
'monthBeforeLast5Months',
'monthBeforeLast4Months',
'monthBeforeLast3Months',
'monthBeforeLast2Months',
'monthBeforeLastMonth',
'lastMonth',
'thisMonth'
].forEach(fieldName => {
if (!Object.prototype.hasOwnProperty.call(self.transactionOverview, fieldName)) {
return;
}
@@ -256,10 +357,12 @@ export default {
self.loadingOverview = true;
self.overviewStore.loadTransactionOverview({
force: force,
loadLast5Months: true
}).then(() => {
const promises = [
self.accountsStore.loadAllAccounts({ force: false }),
self.overviewStore.loadTransactionOverview({ force: force, loadLast11Months: true })
];
Promise.all(promises).then(() => {
self.loadingOverview = false;
if (force) {
src/views/desktop/overview/IncomeExpenseOverviewCard.vue
+4 -4
View File
@@ -15,13 +15,13 @@
</v-menu>
</v-btn>
</v-card-text>
<v-card-text class="pb-2">
<v-card-text class="mt-1 pb-2">
<div class="font-weight-semibold text-truncate text-red text-h5 text-income me-2 mb-2" v-if="!loading || incomeAmount">{{ incomeAmount }}</div>
<v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
<v-skeleton-loader class="income-expense-overview-card-skeleton mt-4 mb-6" type="text" width="120px" :loading="true" v-else-if="loading && !incomeAmount"></v-skeleton-loader>
<div class="text-truncate text-h6 text-expense" v-if="!loading || expenseAmount">{{ expenseAmount }}</div>
<v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
<v-skeleton-loader class="income-expense-overview-card-skeleton mb-2" type="text" width="120px" :loading="true" v-else-if="loading && !expenseAmount"></v-skeleton-loader>
</v-card-text>
<v-card-text>
<v-card-text class="mt-6">
<span class="text-caption">{{ datetime }}</span>
</v-card-text>
</v-card>
src/views/desktop/overview/MonthlyIncomeAndExpenseCard.vue
+6 -20
View File
@@ -6,23 +6,9 @@
<v-card-text class="overview-monthly-chart-container overview-monthly-chart-overlay" v-if="loading && !hasAnyData">
<div class="overview-monthly-chart-skeleton-container h-100" style="margin-top: -30px">
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
</div>
<div class="d-flex w-100 h-100 align-center justify-center">
<v-skeleton-loader width="40" height="200" :loading="true"></v-skeleton-loader>
<div class="d-flex w-100 h-100 align-center justify-center"
:key="itemIdx" v-for="itemIdx in [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]">
<v-skeleton-loader width="16" height="200" :loading="true"></v-skeleton-loader>
</div>
</div>
</v-card-text>
@@ -238,7 +224,7 @@ export default {
show: false
}
},
barMaxWidth: 40,
barMaxWidth: 16,
data: incomeAmounts
},
{
@@ -257,7 +243,7 @@ export default {
show: false
}
},
barMaxWidth: 40,
barMaxWidth: 16,
data: expenseAmounts
}
]
@@ -301,7 +287,7 @@ export default {
.overview-monthly-chart-skeleton-container {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.overview-monthly-chart-tooltip-indicator {