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

src/views/base/settings/AccountFilterSettingPageBase.ts

@@ -4,6 +4,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
+import { useOverviewStore } from '@/stores/overview.ts';
 
 import type { Account, AccountCategoriesWithVisibleCount } from '@/models/account.ts';
 
@@ -13,11 +14,14 @@ import {
     isAccountOrSubAccountsAllChecked
 } from '@/lib/account.ts';
 
-export function useAccountFilterSettingPageBase(type?: string) {
+export type AccountFilterType = 'statisticsDefault' | 'statisticsCurrent' | 'homePageOverview' | 'transactionListCurrent' | 'accountListTotalAmount';
+
+export function useAccountFilterSettingPageBase(type?: AccountFilterType) {
     const settingsStore = useSettingsStore();
     const accountsStore = useAccountsStore();
     const transactionsStore = useTransactionsStore();
     const statisticsStore = useStatisticsStore();
+    const overviewStore = useOverviewStore();
 
     const loading = ref<boolean>(true);
     const showHidden = ref<boolean>(false);
@@ -40,7 +44,7 @@ export function useAccountFilterSettingPageBase(type?: string) {
     });
 
     const allowHiddenAccount = computed<boolean>(() => {
-        return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'transactionListCurrent';
+        return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'homePageOverview' || type === 'transactionListCurrent';
     });
 
     const allCategorizedAccounts = computed<AccountCategoriesWithVisibleCount[]>(() => getCategorizedAccountsWithVisibleCount(accountsStore.allCategorizedAccountsMap));
@@ -85,6 +89,9 @@ export function useAccountFilterSettingPageBase(type?: string) {
         } else if (type === 'statisticsCurrent') {
             filterAccountIds.value = Object.assign(allAccountIds, statisticsStore.transactionStatisticsFilter.filterAccountIds);
             return true;
+        } else if (type === 'homePageOverview') {
+            filterAccountIds.value = Object.assign(allAccountIds, settingsStore.appSettings.overviewAccountFilterInHomePage);
+            return true;
         } else if (type === 'transactionListCurrent') {
             for (const accountId in transactionsStore.allFilterAccountIds) {
                 if (!Object.prototype.hasOwnProperty.call(transactionsStore.allFilterAccountIds, accountId)) {
@@ -146,6 +153,9 @@ export function useAccountFilterSettingPageBase(type?: string) {
             changed = statisticsStore.updateTransactionStatisticsFilter({
                 filterAccountIds: filteredAccountIds
             });
+        } else if (type === 'homePageOverview') {
+            settingsStore.setOverviewAccountFilterInHomePage(filteredAccountIds);
+            overviewStore.updateTransactionOverviewInvalidState(true);
         } else if (type === 'transactionListCurrent') {
             changed = transactionsStore.updateTransactionListFilter({
                 accountIds: isAllSelected ? '' : finalAccountIds

src/views/base/settings/AppCloudSyncPageBase.ts

@@ -28,7 +28,9 @@ export const ALL_APPLICATION_CLOUD_SETTINGS: CategorizedApplicationCloudSettingI
         categoryName: 'Overview Page',
         items: [
             { settingKey: 'showAmountInHomePage', settingName: 'Show Amount', mobile: true, desktop: true },
-            { settingKey: 'timezoneUsedForStatisticsInHomePage', settingName: 'Timezone Used for Statistics', mobile: true, desktop: true }
+            { settingKey: 'timezoneUsedForStatisticsInHomePage', settingName: 'Timezone Used for Statistics', mobile: true, desktop: true },
+            { settingKey: 'overviewAccountFilterInHomePage', settingName: 'Accounts Included in Overview Statistics', mobile: true, desktop: true },
+            { settingKey: 'overviewTransactionCategoryFilterInHomePage', settingName: 'Transaction Categories Included in Overview Statistics', mobile: true, desktop: true }
         ]
     },
     {

src/views/base/settings/AppSettingsPageBase.ts

@@ -5,11 +5,16 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useSettingsStore } from '@/stores/setting.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
+import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
 
 import type { NameValue, TypeAndDisplayName } from '@/core/base.ts';
 import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';
+import { CategoryType } from '@/core/category.ts';
+import type { Account } from '@/models/account.ts';
+
+import { isObjectEmpty } from '@/lib/common.ts';
 
 export function useAppSettingPageBase() {
     const { tt, getAllTimezones, getAllTimezoneTypesUsedForStatistics, getAllCurrencySortingTypes, setTimeZone } = useI18n();
@@ -17,10 +22,12 @@ export function useAppSettingPageBase() {
     const settingsStore = useSettingsStore();
     const accountsStore = useAccountsStore();
     const transactionsStore = useTransactionsStore();
+    const transactionCategoriesStore = useTransactionCategoriesStore();
     const overviewStore = useOverviewStore();
     const statisticsStore = useStatisticsStore();
 
     const loadingAccounts = ref<boolean>(false);
+    const loadingTransactionCategories = ref<boolean>(false);
 
     const allThemes = computed<NameValue[]>(() => {
         return [
@@ -42,7 +49,9 @@ export function useAppSettingPageBase() {
         ];
     });
 
+    const hasAnyAccount = computed<boolean>(() => accountsStore.allPlainAccounts.length > 0);
     const hasAnyVisibleAccount = computed<boolean>(() => accountsStore.allVisibleAccountsCount > 0);
+    const hasAnyTransactionCategory = computed<boolean>(() => !isObjectEmpty(transactionCategoriesStore.allTransactionCategoriesMap));
 
     const timeZone = computed<string>({
         get: () => settingsStore.appSettings.timeZone,
@@ -114,12 +123,26 @@ export function useAppSettingPageBase() {
         set: (value: number) => settingsStore.setCurrencySortByInExchangeRatesPage(value)
     });
 
+    const accountsIncludedInHomePageOverviewDisplayContent = computed<string>(() => {
+        const excludeAccountIds = settingsStore.appSettings.overviewAccountFilterInHomePage;
+        return getIncludedAccountsDisplayContent(excludeAccountIds, accountsStore.allPlainAccounts);
+    });
+
     const accountsIncludedInTotalDisplayContent = computed<string>(() => {
-        if (loadingAccounts.value || !accountsStore.allVisiblePlainAccounts || !accountsStore.allVisiblePlainAccounts.length) {
+        const excludeAccountIds = settingsStore.appSettings.totalAmountExcludeAccountIds;
+        return getIncludedAccountsDisplayContent(excludeAccountIds, accountsStore.allVisiblePlainAccounts);
+    });
+
+    const transactionCategoriesIncludedInHomePageOverviewDisplayContent = computed<string>(() => {
+        const excludeAccountIds = settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage;
+        return getIncludedTransactionCategoriesDisplayContent(excludeAccountIds);
+    });
+
+    function getIncludedAccountsDisplayContent(excludeAccountIds: Record<string, boolean>, allAccounts: Account[]): string {
+        if (loadingAccounts.value || !allAccounts || !allAccounts.length) {
             return '';
         }
 
-        const excludeAccountIds = settingsStore.appSettings.totalAmountExcludeAccountIds;
         let hasExcludeAccount = false;
 
         for (const accountId in excludeAccountIds) {
@@ -137,27 +160,76 @@ export function useAppSettingPageBase() {
             return tt('All');
         }
 
-        let allVisibleAccountExcluded = true;
+        let allAccountExcluded = true;
 
-        for (let i = 0; i < accountsStore.allVisiblePlainAccounts.length; i++) {
-            const account = accountsStore.allVisiblePlainAccounts[i];
+        for (let i = 0; i < allAccounts.length; i++) {
+            const account = allAccounts[i];
 
             if (!excludeAccountIds[account.id]) {
-                allVisibleAccountExcluded = false;
+                allAccountExcluded = false;
                 break;
             }
         }
 
-        if (allVisibleAccountExcluded) {
+        if (allAccountExcluded) {
             return tt('None');
         }
 
         return tt('Partial');
-    });
+    }
+
+    function getIncludedTransactionCategoriesDisplayContent(excludeTransactionCategoryIds: Record<string, boolean>): string {
+        if (loadingTransactionCategories.value || !transactionCategoriesStore.allTransactionCategoriesMap) {
+            return '';
+        }
+
+        let hasExcludeTransactionCategory = false;
+
+        for (const transactionCategoryId in excludeTransactionCategoryIds) {
+            if (!Object.prototype.hasOwnProperty.call(excludeTransactionCategoryIds, transactionCategoryId)) {
+                continue;
+            }
+
+            if (excludeTransactionCategoryIds[transactionCategoryId] && transactionCategoriesStore.allTransactionCategoriesMap[transactionCategoryId]) {
+                hasExcludeTransactionCategory = true;
+                break;
+            }
+        }
+
+        if (!hasExcludeTransactionCategory) {
+            return tt('All');
+        }
+
+        let allTransactionCategoryExcluded = true;
+
+        for (const transactionCategoryId in transactionCategoriesStore.allTransactionCategoriesMap) {
+            if (!Object.prototype.hasOwnProperty.call(transactionCategoriesStore.allTransactionCategoriesMap, transactionCategoryId)) {
+                continue;
+            }
+
+            const transactionCategory = transactionCategoriesStore.allTransactionCategoriesMap[transactionCategoryId];
+
+            if (transactionCategory.type !== CategoryType.Income && transactionCategory.type !== CategoryType.Expense) {
+                continue;
+            }
+
+            if (!excludeTransactionCategoryIds[transactionCategory.id]) {
+                allTransactionCategoryExcluded = false;
+                break;
+            }
+        }
+
+        if (allTransactionCategoryExcluded) {
+            return tt('None');
+        }
+
+        return tt('Partial');
+    }
 
     return {
         // states
         loadingAccounts,
+        loadingTransactionCategories,
         // computed states
         allThemes,
         allTimezones,
@@ -165,7 +237,9 @@ export function useAppSettingPageBase() {
         allCurrencySortingTypes,
         allAutoSaveTransactionDraftTypes,
         timeZone,
+        hasAnyAccount,
         hasAnyVisibleAccount,
+        hasAnyTransactionCategory,
         isAutoUpdateExchangeRatesData,
         showAccountBalance,
         showAmountInHomePage,
@@ -176,6 +250,8 @@ export function useAppSettingPageBase() {
         autoSaveTransactionDraft,
         isAutoGetCurrentGeoLocation,
         currencySortByInExchangeRatesPage,
-        accountsIncludedInTotalDisplayContent
+        accountsIncludedInHomePageOverviewDisplayContent,
+        accountsIncludedInTotalDisplayContent,
+        transactionCategoriesIncludedInHomePageOverviewDisplayContent
     };
 }

src/views/base/settings/CategoryFilterSettingPageBase.ts

@@ -6,6 +6,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useTransactionCategoriesStore } from '@/stores/transactionCategory.ts';
 import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
+import { useOverviewStore } from '@/stores/overview.ts';
 
 import { CategoryType } from '@/core/category.ts';
 import type { TransactionCategory, TransactionCategoriesWithVisibleCount } from '@/models/transaction_category.ts';
@@ -21,13 +22,16 @@ import {
     isCategoryOrSubCategoriesAllChecked
 } from '@/lib/category.ts';
 
-export function useCategoryFilterSettingPageBase(type?: string, allowCategoryTypesStr?: string) {
+export type CategoryFilterType = 'statisticsDefault' | 'statisticsCurrent' | 'homePageOverview' | 'transactionListCurrent';
+
+export function useCategoryFilterSettingPageBase(type?: CategoryFilterType, allowCategoryTypesStr?: string) {
     const { tt } = useI18n();
 
     const settingsStore = useSettingsStore();
     const transactionCategoriesStore = useTransactionCategoriesStore();
     const transactionsStore = useTransactionsStore();
     const statisticsStore = useStatisticsStore();
+    const overviewStore = useOverviewStore();
 
     const allowCategoryTypes: Record<string, boolean> | undefined = allowCategoryTypesStr ? arrayItemToObjectField(allowCategoryTypesStr.split(','), true) : undefined;
 
@@ -100,6 +104,9 @@ export function useCategoryFilterSettingPageBase(type?: string, allowCategoryTyp
         } else if (type === 'statisticsCurrent') {
             filterCategoryIds.value = Object.assign(allCategoryIds, statisticsStore.transactionStatisticsFilter.filterCategoryIds);
             return true;
+        } else if (type === 'homePageOverview') {
+            filterCategoryIds.value = Object.assign(allCategoryIds, settingsStore.appSettings.overviewTransactionCategoryFilterInHomePage);
+            return true;
         } else if (type === 'transactionListCurrent') {
             for (const categoryId in transactionsStore.allFilterCategoryIds) {
                 if (!Object.prototype.hasOwnProperty.call(transactionsStore.allFilterCategoryIds, categoryId)) {
@@ -157,6 +164,9 @@ export function useCategoryFilterSettingPageBase(type?: string, allowCategoryTyp
             changed = statisticsStore.updateTransactionStatisticsFilter({
                 filterCategoryIds: filteredCategoryIds
             });
+        } else if (type === 'homePageOverview') {
+            settingsStore.setOverviewTransactionCategoryFilterInHomePage(filteredCategoryIds);
+            overviewStore.updateTransactionOverviewInvalidState(true);
         } else if (type === 'transactionListCurrent') {
             changed = transactionsStore.updateTransactionListFilter({
                 categoryIds: isAllSelected ? '' : finalCategoryIds