add overview page
This commit is contained in:
MaysWind
@@ -821,6 +821,7 @@ export default {
|
||||
'PIN code is wrong': 'PIN code is wrong',
|
||||
'Sign Up': 'Sign Up',
|
||||
'Overview': 'Overview',
|
||||
'View Details': 'View Details',
|
||||
'Transaction List': 'Transaction List',
|
||||
'Account List': 'Account List',
|
||||
'This Week': 'This Week',
|
||||
|
||||
@@ -821,6 +821,7 @@ export default {
|
||||
'PIN code is wrong': 'PIN码错误',
|
||||
'Sign Up': '注册',
|
||||
'Overview': '总览',
|
||||
'View Details': '查看详情',
|
||||
'Transaction List': '交易列表',
|
||||
'Account List': '账户列表',
|
||||
'This Week': '本周',
|
||||
|
||||
@@ -1,13 +1,305 @@
|
||||
<template>
|
||||
<v-row class="match-height">
|
||||
overview
|
||||
<v-col cols="12" lg="4" md="12">
|
||||
<v-card :class="{ 'disabled': loadingOverview }">
|
||||
<template #title>
|
||||
<span class="text-2xl font-weight-bold">{{ displayDateRange.thisMonth.displayTime }}</span>
|
||||
<span>·</span>
|
||||
<small>{{ $t('Expense') }}</small>
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
class="ml-2" :icon="true"
|
||||
v-if="!loadingOverview" @click="reload(true)">
|
||||
<v-icon :icon="icons.refresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-progress-circular indeterminate size="24" class="ml-2" v-if="loadingOverview"></v-progress-circular>
|
||||
</template>
|
||||
|
||||
<v-card-text>
|
||||
<h5 class="text-2xl font-weight-medium text-primary">
|
||||
{{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.expenseAmount : '-' }}
|
||||
<v-btn density="compact" color="default" variant="text"
|
||||
:icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
|
||||
<v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
|
||||
</v-btn>
|
||||
</h5>
|
||||
<p>
|
||||
<span class="mr-2">{{ $t('Monthly income') }}</span>
|
||||
<span>{{ transactionOverview && transactionOverview.thisMonth ? transactionOverview.thisMonth.incomeAmount : '-' }}</span>
|
||||
</p>
|
||||
<v-btn size="small" to="/transactions">{{ $t('View Details') }}</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" lg="2" md="6">
|
||||
<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 : '-'"
|
||||
:datetime="displayDateRange.today.displayTime"
|
||||
>
|
||||
<template #menus>
|
||||
<v-list-item :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
|
||||
: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 : '-'"
|
||||
:datetime="displayDateRange.thisWeek.startTime + '-' + displayDateRange.thisWeek.endTime"
|
||||
>
|
||||
<template #menus>
|
||||
<v-list-item :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
|
||||
: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 : '-'"
|
||||
:datetime="displayDateRange.thisMonth.startTime + '-' + displayDateRange.thisMonth.endTime"
|
||||
>
|
||||
<template #menus>
|
||||
<v-list-item :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" lg="2" md="6">
|
||||
<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 : '-'"
|
||||
:datetime="displayDateRange.thisYear.displayTime"
|
||||
>
|
||||
<template #menus>
|
||||
<v-list-item :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-snackbar v-model="showSnackbar">
|
||||
{{ snackbarMessage }}
|
||||
|
||||
<template #actions>
|
||||
<v-btn color="primary" variant="text" @click="showSnackbar = false">{{ $t('Close') }}</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
import IncomeExpenseOverviewCard from './overview/IncomeExpenseOverviewCard.vue';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
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 {
|
||||
mdiRefresh,
|
||||
mdiEyeOutline,
|
||||
mdiEyeOffOutline,
|
||||
mdiCalendarTodayOutline,
|
||||
mdiCalendarWeekOutline,
|
||||
mdiCalendarMonthOutline,
|
||||
mdiLayersTripleOutline,
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IncomeExpenseOverviewCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingOverview: true,
|
||||
todayFirstUnixTime: getTodayFirstUnixTime(),
|
||||
todayLastUnixTime: getTodayLastUnixTime(),
|
||||
showSnackbar: false,
|
||||
snackbarMessage: '',
|
||||
icons: {
|
||||
refresh: mdiRefresh,
|
||||
eye: mdiEyeOutline,
|
||||
eyeSlash: mdiEyeOffOutline,
|
||||
calendarToday: mdiCalendarTodayOutline,
|
||||
calendarWeek: mdiCalendarWeekOutline,
|
||||
calendarMonth: mdiCalendarMonthOutline,
|
||||
calendarYear: mdiLayersTripleOutline,
|
||||
more: mdiDotsVertical
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useSettingsStore, useUserStore, useOverviewStore),
|
||||
showAmountInHomePage: {
|
||||
get: function() {
|
||||
return this.settingsStore.appSettings.showAmountInHomePage;
|
||||
},
|
||||
set: function(value) {
|
||||
this.settingsStore.setShowAmountInHomePage(value);
|
||||
}
|
||||
},
|
||||
isEnableThousandsSeparator() {
|
||||
return this.settingsStore.appSettings.thousandsSeparator;
|
||||
},
|
||||
currencyDisplayMode() {
|
||||
return this.settingsStore.appSettings.currencyDisplayMode;
|
||||
},
|
||||
defaultCurrency() {
|
||||
return this.userStore.currentUserDefaultCurrency;
|
||||
},
|
||||
firstDayOfWeek() {
|
||||
return this.userStore.currentUserFirstDayOfWeek;
|
||||
},
|
||||
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),
|
||||
},
|
||||
thisWeek: {
|
||||
startTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.thisWeek.startTime),
|
||||
endTime: self.$locale.formatUnixTimeToLongMonthDay(self.userStore, self.dateRange.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)
|
||||
},
|
||||
thisYear: {
|
||||
displayTime: self.$locale.formatUnixTimeToLongYear(self.userStore, self.dateRange.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;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$user.isUserLogined() && this.$user.isUserUnlocked()) {
|
||||
this.reload(false);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload(force) {
|
||||
const self = this;
|
||||
|
||||
self.loadingOverview = true;
|
||||
|
||||
self.overviewStore.loadTransactionOverview({
|
||||
defaultCurrency: self.defaultCurrency,
|
||||
dateRange: self.dateRange,
|
||||
force: force
|
||||
}).then(() => {
|
||||
self.loadingOverview = false;
|
||||
|
||||
if (force) {
|
||||
self.showSnackbarMessage(self.$t('Data has been updated'));
|
||||
}
|
||||
}).catch(error => {
|
||||
self.loadingOverview = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.showSnackbarMessage(self.$tError(error.message || error));
|
||||
}
|
||||
});
|
||||
},
|
||||
getDisplayAmount(amount, incomplete) {
|
||||
if (!this.showAmountInHomePage) {
|
||||
return this.$locale.getDisplayCurrency('***', this.defaultCurrency);
|
||||
}
|
||||
|
||||
return this.$locale.getDisplayCurrency(amount, this.defaultCurrency) + (incomplete ? '+' : '');
|
||||
},
|
||||
showSnackbarMessage(message) {
|
||||
this.showSnackbar = true;
|
||||
this.snackbarMessage = message;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<v-card :class="{ 'disabled': disabled }">
|
||||
<v-card-text class="d-flex align-center">
|
||||
<v-avatar color="secondary" size="38">
|
||||
<v-icon size="24" :icon="icon" />
|
||||
</v-avatar>
|
||||
<span class="text-base font-weight-bold ml-3">{{ title }}</span>
|
||||
<v-spacer/>
|
||||
<v-btn density="compact" color="default" variant="text" class="ml-2" :icon="true">
|
||||
<v-icon :icon="icons.more" />
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<slot name="menus"></slot>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-card-text class="pb-2">
|
||||
<div class="d-flex align-center mb-2">
|
||||
<span class="font-weight-semibold text-truncate text-red text-h5 text-expense me-2">{{ expenseAmount }}</span>
|
||||
</div>
|
||||
<span class="text-truncate text-h6 text-income">{{ incomeAmount }}</span>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<span class="text-caption">{{ datetime }}</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'disabled',
|
||||
'icon',
|
||||
'title',
|
||||
'expenseAmount',
|
||||
'incomeAmount',
|
||||
'datetime'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
icons: {
|
||||
more: mdiDotsVertical
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user