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

src/views/mobile/settings/AccountFilterSettingsPage.vue

@@ -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();
 

src/views/mobile/settings/CategoryFilterSettingsPage.vue

@@ -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();
 

src/views/mobile/settings/PageSettingsPage.vue

@@ -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();