mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-17 08:14:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

support filtering accounts and transaction categories for overview in home page (#209)

Browse Source
This commit is contained in:
MaysWind
2025-09-07 13:57:07 +08:00
parent 3ae72623ad
commit ce9378c43f
33 changed files with 459 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/HomePage.vue
+14 -6
View File
@@ -34,7 +34,7 @@
<span v-if="!loadingOverview || (transactionOverview && transactionOverview.thisMonth && transactionOverview.thisMonth.valid)">{{ transactionOverview && transactionOverview.thisMonth ? getDisplayIncomeAmount(transactionOverview.thisMonth) : '-' }}</span>
<v-skeleton-loader class="d-inline-block skeleton-no-margin mt-2" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
</div>
<v-btn size="small" to="/transaction/list?dateType=7">{{ tt('View Details') }}</v-btn>
<v-btn size="small" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisMonth.type })}`">{{ tt('View Details') }}</v-btn>
<v-img class="overview-card-background img-with-direction"
src="img/desktop/card-background.png"/>
<v-img class="overview-card-background-image img-with-direction"
@@ -119,7 +119,7 @@
:datetime="displayDateRange?.today?.displayTime || ''"
>
<template #menus>
<v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.Today.type">
<v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.Today.type })}`">
<v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
</v-list-item>
</template>
@@ -135,7 +135,7 @@
:datetime="displayDateRange?.thisWeek?.startTime + '-' + displayDateRange?.thisWeek?.endTime"
>
<template #menus>
<v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisWeek.type">
<v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisWeek.type })}`">
<v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
</v-list-item>
</template>
@@ -151,7 +151,7 @@
:datetime="displayDateRange?.thisMonth?.startTime + '-' + displayDateRange?.thisMonth?.endTime"
>
<template #menus>
<v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisMonth.type">
<v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisMonth.type })}`">
<v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
</v-list-item>
</template>
@@ -167,7 +167,7 @@
:datetime="displayDateRange?.thisYear?.displayTime || ''"
>
<template #menus>
<v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisYear.type">
<v-list-item :prepend-icon="mdiListBoxOutline" :to="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisYear.type })}`">
<v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
</v-list-item>
</template>
@@ -199,6 +199,7 @@ import { useI18n } from '@/locales/helpers.ts';
import { useHomePageBase } from '@/views/base/HomePageBase.ts';
import { useAccountsStore } from '@/stores/account.ts';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import { useOverviewStore } from '@/stores/overview.ts';
import { type NumeralSystem } from '@/core/numeral.ts';
@@ -242,6 +243,7 @@ const {
} = useHomePageBase();
const accountsStore = useAccountsStore();
const transactionCategoriesStore = useTransactionCategoriesStore();
const overviewStore = useOverviewStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar');
@@ -258,7 +260,12 @@ function clickMonthlyIncomeOrExpense(e: MonthlyIncomeAndExpenseCardClickEvent):
const maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
const type = e.transactionType;
router.push(`/transaction/list?type=${type}&dateType=${DateRange.Custom.type}&maxTime=${maxTime}&minTime=${minTime}`);
router.push(`/transaction/list?${overviewStore.getTransactionListPageParams({
type: type,
dateType: DateRange.Custom.type,
minTime: minTime,
maxTime: maxTime
})}`);
}
const monthlyIncomeAndExpenseData = computed<TransactionMonthlyIncomeAndExpenseData[]>(() => {
@@ -298,6 +305,7 @@ function reload(force: boolean): void {
const promises = [
accountsStore.loadAllAccounts({ force: false }),
transactionCategoriesStore.loadAllCategories({ force: false }),
overviewStore.loadTransactionOverview({ force: force, loadLast11Months: true })
];
src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue
+67 -1
View File
@@ -110,6 +110,38 @@
v-model="timezoneUsedForStatisticsInHomePage"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
class="always-cursor-pointer"
item-title="displayName"
item-value="type"
persistent-placeholder
:loading="loadingAccounts"
:readonly="true"
:disabled="!hasAnyAccount"
:label="tt('Accounts Included in Overview Statistics')"
:placeholder="tt('Accounts Included in Overview Statistics')"
:model-value="accountsIncludedInHomePageOverviewDisplayContent"
@click="showAccountsIncludedInHomePageOverviewDialog = true"
/>
</v-col>
<v-col cols="12" md="6">
<v-text-field
class="always-cursor-pointer"
item-title="displayName"
item-value="type"
persistent-placeholder
:loading="loadingTransactionCategories"
:readonly="true"
:disabled="!hasAnyTransactionCategory"
:label="tt('Transaction Categories Included in Overview Statistics')"
:placeholder="tt('Transaction Categories Included in Overview Statistics')"
:model-value="transactionCategoriesIncludedInHomePageOverviewDisplayContent"
@click="showTransactionCategoriesIncludedInHomePageOverviewDialog = true"
/>
</v-col>
</v-row>
</v-card-text>
</v-form>
@@ -241,6 +273,16 @@
</v-col>
</v-row>
<v-dialog width="800" v-model="showAccountsIncludedInHomePageOverviewDialog">
<account-filter-settings-card type="homePageOverview" :dialog-mode="true"
@settings:change="showAccountsIncludedInHomePageOverviewDialog = false" />
</v-dialog>
<v-dialog width="800" v-model="showTransactionCategoriesIncludedInHomePageOverviewDialog">
<category-filter-settings-card type="homePageOverview" :dialog-mode="true" :category-types="`${CategoryType.Income},${CategoryType.Expense}`"
@settings:change="showTransactionCategoriesIncludedInHomePageOverviewDialog = false" />
</v-dialog>
<v-dialog width="800" v-model="showAccountsIncludedInTotalDialog">
<account-filter-settings-card type="accountListTotalAmount" :dialog-mode="true"
@settings:change="showAccountsIncludedInTotalDialog = false" />
@@ -252,6 +294,7 @@
<script setup lang="ts">
import SnackBar from '@/components/desktop/SnackBar.vue';
import AccountFilterSettingsCard from '@/views/desktop/common/cards/AccountFilterSettingsCard.vue';
import CategoryFilterSettingsCard from '@/views/desktop/common/cards/CategoryFilterSettingsCard.vue';
import { ref, computed, useTemplateRef } from 'vue';
import { useTheme } from 'vuetify';
@@ -261,9 +304,12 @@ import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase
import { useSettingsStore } from '@/stores/setting.ts';
import { useAccountsStore } from '@/stores/account.ts';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import type { LocalizedSwitchOption } from '@/core/base.ts';
import { ThemeType } from '@/core/theme.ts';
import { CategoryType } from '@/core/category.ts';
import { getSystemTheme } from '@/lib/ui/common.ts';
type SnackBarType = InstanceType<typeof SnackBar>;
@@ -273,12 +319,15 @@ const theme = useTheme();
const { tt, getAllEnableDisableOptions } = useI18n();
const {
loadingAccounts,
loadingTransactionCategories,
allThemes,
allTimezones,
allTimezoneTypesUsedForStatistics,
allCurrencySortingTypes,
allAutoSaveTransactionDraftTypes,
hasAnyAccount,
hasAnyVisibleAccount,
hasAnyTransactionCategory,
timeZone,
isAutoUpdateExchangeRatesData,
showAccountBalance,
@@ -290,14 +339,19 @@ const {
autoSaveTransactionDraft,
isAutoGetCurrentGeoLocation,
currencySortByInExchangeRatesPage,
accountsIncludedInTotalDisplayContent
accountsIncludedInHomePageOverviewDisplayContent,
accountsIncludedInTotalDisplayContent,
transactionCategoriesIncludedInHomePageOverviewDisplayContent
} = useAppSettingPageBase();
const settingsStore = useSettingsStore();
const accountsStore = useAccountsStore();
const transactionCategoriesStore = useTransactionCategoriesStore();
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const showAccountsIncludedInHomePageOverviewDialog = ref<boolean>(false);
const showTransactionCategoriesIncludedInHomePageOverviewDialog = ref<boolean>(false);
const showAccountsIncludedInTotalDialog = ref<boolean>(false);
const enableDisableOptions = computed<LocalizedSwitchOption[]>(() => getAllEnableDisableOptions());
@@ -336,6 +390,18 @@ function init(): void {
snackbar.value?.showError(error);
}
});
transactionCategoriesStore.loadAllCategories({
force: false
}).then(() => {
loadingTransactionCategories.value = false;
}).catch(error => {
loadingTransactionCategories.value = false;
if (!error.processed) {
snackbar.value?.showError(error);
}
});
}
init();
src/views/desktop/common/cards/AccountFilterSettingsCard.vue
+5 -2
View File
@@ -151,7 +151,10 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
import { ref, useTemplateRef } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useAccountFilterSettingPageBase } from '@/views/base/settings/AccountFilterSettingPageBase.ts';
import {
type AccountFilterType,
useAccountFilterSettingPageBase
} from '@/views/base/settings/AccountFilterSettingPageBase.ts';
import { useAccountsStore } from '@/stores/account.ts';
@@ -179,7 +182,7 @@ import {
type SnackBarType = InstanceType<typeof SnackBar>;
const props = defineProps<{
type: string;
type: AccountFilterType;
dialogMode?: boolean;
autoSave?: boolean;
}>();
src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
+5 -2
View File
@@ -148,7 +148,10 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
import { ref, useTemplateRef } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { useCategoryFilterSettingPageBase } from '@/views/base/settings/CategoryFilterSettingPageBase.ts';
import {
type CategoryFilterType,
useCategoryFilterSettingPageBase
} from '@/views/base/settings/CategoryFilterSettingPageBase.ts';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
@@ -176,7 +179,7 @@ import {
type SnackBarType = InstanceType<typeof SnackBar>;
const props = defineProps<{
type: string;
type: CategoryFilterType;
dialogMode?: boolean;
autoSave?: boolean;
categoryTypes?: string;