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

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
+16 -12
View File
@@ -36,7 +36,7 @@
</f7-card>
<f7-list strong inset dividers class="margin-top overview-transaction-list" :class="{ 'skeleton-text': loading }">
<f7-list-item :link="'/transaction/list?dateType=' + DateRange.Today.type" chevron-center>
<f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.Today.type })}`" chevron-center>
<template #media>
<f7-icon f7="calendar_today"></f7-icon>
</template>
@@ -66,7 +66,7 @@
</template>
</f7-list-item>
<f7-list-item :link="'/transaction/list?dateType=' + DateRange.ThisWeek.type" chevron-center>
<f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisWeek.type })}`" chevron-center>
<template #media>
<f7-icon f7="calendar"></f7-icon>
</template>
@@ -99,7 +99,7 @@
</template>
</f7-list-item>
<f7-list-item :link="'/transaction/list?dateType=' + DateRange.ThisMonth.type" chevron-center>
<f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisMonth.type })}`" chevron-center>
<template #media>
<f7-icon f7="calendar"></f7-icon>
</template>
@@ -132,7 +132,7 @@
</template>
</f7-list-item>
<f7-list-item :link="'/transaction/list?dateType=' + DateRange.ThisYear.type" chevron-center>
<f7-list-item :link="`/transaction/list?${overviewStore.getTransactionListPageParams({ dateType: DateRange.ThisYear.type })}`" chevron-center>
<template #media>
<f7-icon f7="square_stack_3d_up"></f7-icon>
</template>
@@ -207,6 +207,8 @@ import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
import { useHomePageBase } from '@/views/base/HomePageBase.ts';
import { useAccountsStore } from '@/stores/account.ts';
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.ts';
import { useOverviewStore } from '@/stores/overview.ts';
@@ -227,6 +229,8 @@ const {
getDisplayExpenseAmount
} = useHomePageBase();
const accountsStore = useAccountsStore();
const transactionCategoriesStore = useTransactionCategoriesStore();
const transactionTemplatesStore = useTransactionTemplatesStore();
const overviewStore = useOverviewStore();
@@ -248,9 +252,14 @@ function init(): void {
if (isUserLogined() && isUserUnlocked()) {
loading.value = true;
overviewStore.loadTransactionOverview({
force: false
}).then(() => {
const promises = [
accountsStore.loadAllAccounts({ force: false }),
transactionCategoriesStore.loadAllCategories({ force: false }),
transactionTemplatesStore.loadAllTemplates({ templateType: TemplateType.Normal.type, force: false }),
overviewStore.loadTransactionOverview({ force: false })
];
Promise.all(promises).then(() => {
loading.value = false;
}).catch(error => {
loading.value = false;
@@ -259,11 +268,6 @@ function init(): void {
showToast(error.message || error);
}
});
transactionTemplatesStore.loadAllTemplates({
templateType: TemplateType.Normal.type,
force: false
});
}
}
@@ -133,7 +133,10 @@ import type { Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.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';
@@ -174,7 +177,7 @@ const {
isAccountChecked,
loadFilterAccountIds,
saveFilterAccountIds
} = useAccountFilterSettingPageBase(query['type']);
} = useAccountFilterSettingPageBase(query['type'] as AccountFilterType);
const accountsStore = useAccountsStore();
@@ -140,7 +140,10 @@ import type { Router } from 'framework7/types';
import { useI18n } from '@/locales/helpers.ts';
import { useI18nUIComponents } from '@/lib/ui/mobile.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';
@@ -183,7 +186,7 @@ const {
getCategoryTypeName,
loadFilterCategoryIds,
saveFilterCategoryIds
} = useCategoryFilterSettingPageBase(query['type'], query['allowCategoryTypes']);
} = useCategoryFilterSettingPageBase(query['type'] as CategoryFilterType, query['allowCategoryTypes']);
const transactionCategoriesStore = useTransactionCategoriesStore();
+40 -1
View File
@@ -27,6 +27,24 @@
v-model="timezoneUsedForStatisticsInHomePage">
</list-item-selection-popup>
</f7-list-item>
<f7-list-item :disabled="!hasAnyAccount"
:title="tt('Accounts Included in Overview Statistics')"
link="/settings/filter/account?type=homePageOverview">
<template #after>
<f7-preloader v-if="loadingAccounts" />
<span v-else-if="!loadingAccounts">{{ accountsIncludedInHomePageOverviewDisplayContent }}</span>
</template>
</f7-list-item>
<f7-list-item :disabled="!hasAnyTransactionCategory"
:title="tt('Transaction Categories Included in Overview Statistics')"
:link="`/settings/filter/category?type=homePageOverview&allowCategoryTypes=${CategoryType.Income},${CategoryType.Expense}`">
<template #after>
<f7-preloader v-if="loadingTransactionCategories" />
<span v-else-if="!loadingTransactionCategories">{{ transactionCategoriesIncludedInHomePageOverviewDisplayContent }}</span>
</template>
</f7-list-item>
</f7-list>
<f7-block-title>{{ tt('Transaction List Page') }}</f7-block-title>
@@ -118,6 +136,9 @@ 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 { CategoryType } from '@/core/category.ts';
import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
@@ -125,7 +146,10 @@ const { tt } = useI18n();
const { showToast } = useI18nUIComponents();
const {
loadingAccounts,
loadingTransactionCategories,
hasAnyAccount,
hasAnyVisibleAccount,
hasAnyTransactionCategory,
allTimezoneTypesUsedForStatistics,
allCurrencySortingTypes,
allAutoSaveTransactionDraftTypes,
@@ -136,11 +160,14 @@ const {
autoSaveTransactionDraft,
isAutoGetCurrentGeoLocation,
currencySortByInExchangeRatesPage,
accountsIncludedInTotalDisplayContent
accountsIncludedInHomePageOverviewDisplayContent,
accountsIncludedInTotalDisplayContent,
transactionCategoriesIncludedInHomePageOverviewDisplayContent
} = useAppSettingPageBase();
const settingsStore = useSettingsStore();
const accountsStore = useAccountsStore();
const transactionCategoriesStore = useTransactionCategoriesStore();
const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
@@ -165,6 +192,18 @@ function init(): void {
showToast(error.message || error);
}
});
transactionCategoriesStore.loadAllCategories({
force: false
}).then(() => {
loadingTransactionCategories.value = false;
}).catch(error => {
loadingTransactionCategories.value = false;
if (!error.processed) {
showToast(error.message || error);
}
});
}
init();