From 0620194c782ac6038d8006686267086cc569b5d6 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Thu, 25 Jul 2024 00:43:21 +0800
Subject: [PATCH] support showing hidden categories in filtering page / dialog

---
 src/lib/category.js                           | 96 +++++++++++++------
 .../cards/CategoryFilterSettingsCard.vue      | 69 +++++++++----
 .../settings/CategoryFilterSettingsPage.vue   | 50 ++++++----
 3 files changed, 148 insertions(+), 67 deletions(-)

diff --git a/src/lib/category.js b/src/lib/category.js
index e8320672..099286b0 100644
--- a/src/lib/category.js
+++ b/src/lib/category.js
@@ -62,7 +62,7 @@ export function getTransactionSecondaryCategoryName(categoryId, allCategories) {
     return '';
 }
 
-export function allVisibleTransactionCategories(allTransactionCategories, allowCategoryTypes) {
+export function allTransactionCategoriesWithVisibleCount(allTransactionCategories, allowCategoryTypes) {
     const ret = {};
     const hasAllowCategoryTypes = allowCategoryTypes
         && (allowCategoryTypes[categoryConstants.allCategoryTypes.Income.toString()]
@@ -85,57 +85,80 @@ export function allVisibleTransactionCategories(allTransactionCategories, allowC
         }
 
         const allCategories = allTransactionCategories[categoryType];
-        const visibleCategories = [];
-        const allVisibleSubCategories = {};
+        const allSubCategories = {};
+        const allVisibleSubCategoryCounts = {};
+        const allFirstVisibleSubCategoryIndexes = {};
+        let allVisibleCategoryCount = 0;
+        let firstVisibleCategoryIndex = -1;
 
         for (let j = 0; j < allCategories.length; j++) {
             const category = allCategories[j];
 
-            if (category.hidden) {
-                continue;
+            if (!category.hidden) {
+                allVisibleCategoryCount++;
+
+                if (firstVisibleCategoryIndex === -1) {
+                    firstVisibleCategoryIndex = j;
+                }
             }
 
-            visibleCategories.push(category);
-
             if (category.subCategories) {
-                const visibleSubCategories = [];
+                let visibleSubCategoryCount = 0;
+                let firstVisibleSubCategoryIndex = -1;
 
                 for (let k = 0; k < category.subCategories.length; k++) {
                     const subCategory = category.subCategories[k];
 
                     if (!subCategory.hidden) {
-                        visibleSubCategories.push(subCategory);
+                        visibleSubCategoryCount++;
+
+                        if (firstVisibleSubCategoryIndex === -1) {
+                            firstVisibleSubCategoryIndex = k;
+                        }
                     }
                 }
 
-                if (visibleSubCategories.length > 0) {
-                    allVisibleSubCategories[category.id] = visibleSubCategories;
+                if (category.subCategories.length > 0) {
+                    allSubCategories[category.id] = category.subCategories;
+                    allVisibleSubCategoryCounts[category.id] = visibleSubCategoryCount;
+                    allFirstVisibleSubCategoryIndexes[category.id] = firstVisibleSubCategoryIndex;
                 }
             }
         }
 
         ret[categoryType.toString()] = {
             type: categoryType.toString(),
-            visibleCategories: visibleCategories,
-            visibleSubCategories: allVisibleSubCategories
+            allCategories: allCategories,
+            allVisibleCategoryCount: allVisibleCategoryCount,
+            firstVisibleCategoryIndex: firstVisibleCategoryIndex,
+            allSubCategories: allSubCategories,
+            allVisibleSubCategoryCounts: allVisibleSubCategoryCounts,
+            allFirstVisibleSubCategoryIndexes: allFirstVisibleSubCategoryIndexes
         };
     }
 
     return ret;
 }
 
-export function allVisiblePrimaryTransactionCategoriesByType(allTransactionCategories, type) {
-    const allVisibleCategories = allVisibleTransactionCategories(allTransactionCategories);
+export function allVisiblePrimaryTransactionCategoriesByType(allTransactionCategories, categoryType) {
+    const allCategories = allTransactionCategories[categoryType];
+    const visibleCategories = [];
 
-    if (!allVisibleCategories) {
-        return [];
+    if (!allCategories) {
+        return visibleCategories;
     }
 
-    if (!allVisibleCategories[type.toString()]) {
-        return [];
+    for (let i = 0; i < allCategories.length; i++) {
+        const category = allCategories[i];
+
+        if (category.hidden) {
+            continue;
+        }
+
+        visibleCategories.push(category);
     }
 
-    return allVisibleCategories[type.toString()].visibleCategories;
+    return visibleCategories;
 }
 
 export function getFinalCategoryIdsByFilteredCategoryIds(allTransactionCategoriesMap, filteredCategoryIds) {
@@ -248,32 +271,43 @@ export function getFirstAvailableSubCategoryId(categories, categoryId) {
     return '';
 }
 
-export function hasAnyAvailableCategory(allVisibleTransactionCategories) {
-    for (let type in allVisibleTransactionCategories) {
-        if (!Object.prototype.hasOwnProperty.call(allVisibleTransactionCategories, type)) {
+export function hasAnyAvailableCategory(allTransactionCategories, showHidden) {
+    for (let type in allTransactionCategories) {
+        if (!Object.prototype.hasOwnProperty.call(allTransactionCategories, type)) {
             continue;
         }
 
-        const categoryType = allVisibleTransactionCategories[type];
+        const categoryType = allTransactionCategories[type];
 
-        if (categoryType.visibleCategories && categoryType.visibleCategories.length > 0) {
-            return true;
+        if (showHidden) {
+            if (categoryType.allCategories && categoryType.allCategories.length > 0) {
+                return true;
+            }
+        } else {
+            if (categoryType.allVisibleCategoryCount > 0) {
+                return true;
+            }
         }
     }
 
     return false;
 }
 
-export function hasAvailableCategory(allVisibleTransactionCategories) {
+export function hasAvailableCategory(allTransactionCategories, showHidden) {
     const result = {};
 
-    for (let type in allVisibleTransactionCategories) {
-        if (!Object.prototype.hasOwnProperty.call(allVisibleTransactionCategories, type)) {
+    for (let type in allTransactionCategories) {
+        if (!Object.prototype.hasOwnProperty.call(allTransactionCategories, type)) {
             continue;
         }
 
-        const categoryType = allVisibleTransactionCategories[type];
-        result[type] = categoryType.visibleCategories && categoryType.visibleCategories.length > 0;
+        const categoryType = allTransactionCategories[type];
+
+        if (showHidden) {
+            result[type] = categoryType.allCategories && categoryType.allCategories.length > 0;
+        } else {
+            result[type] = categoryType.allVisibleCategoryCount > 0;
+        }
     }
 
     return result;
diff --git a/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue b/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
index 7a1f53eb..99f977a2 100644
--- a/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
@@ -12,13 +12,23 @@
                         <v-list>
                             <v-list-item :prepend-icon="icons.selectAll"
                                          :title="$t('Select All')"
+                                         :disabled="!hasAnyVisibleCategory"
                                          @click="selectAll"></v-list-item>
                             <v-list-item :prepend-icon="icons.selectNone"
                                          :title="$t('Select None')"
+                                         :disabled="!hasAnyVisibleCategory"
                                          @click="selectNone"></v-list-item>
                             <v-list-item :prepend-icon="icons.selectInverse"
                                          :title="$t('Invert Selection')"
+                                         :disabled="!hasAnyVisibleCategory"
                                          @click="selectInvert"></v-list-item>
+                            <v-divider class="my-2"/>
+                            <v-list-item :prepend-icon="icons.show"
+                                         :title="$t('Show Hidden Transaction Categories')"
+                                         v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                            <v-list-item :prepend-icon="icons.hide"
+                                         :title="$t('Hide Hidden Transaction Categories')"
+                                         v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
                     </v-menu>
                 </v-btn>
@@ -33,13 +43,23 @@
                         <v-list>
                             <v-list-item :prepend-icon="icons.selectAll"
                                          :title="$t('Select All')"
+                                         :disabled="!hasAnyVisibleCategory"
                                          @click="selectAll"></v-list-item>
                             <v-list-item :prepend-icon="icons.selectNone"
                                          :title="$t('Select None')"
+                                         :disabled="!hasAnyVisibleCategory"
                                          @click="selectNone"></v-list-item>
                             <v-list-item :prepend-icon="icons.selectInverse"
                                          :title="$t('Invert Selection')"
+                                         :disabled="!hasAnyVisibleCategory"
                                          @click="selectInvert"></v-list-item>
+                            <v-divider class="my-2"/>
+                            <v-list-item :prepend-icon="icons.show"
+                                         :title="$t('Show Hidden Transaction Categories')"
+                                         v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                            <v-list-item :prepend-icon="icons.hide"
+                                         :title="$t('Hide Hidden Transaction Categories')"
+                                         v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
                     </v-menu>
                 </v-btn>
@@ -56,7 +76,7 @@
                 <v-expansion-panel :key="transactionType.type"
                                    :value="transactionType.type"
                                    class="border"
-                                   v-for="transactionType in allVisibleTransactionCategories">
+                                   v-for="transactionType in allTransactionCategories">
                     <v-expansion-panel-title class="expand-panel-title-with-bg py-0">
                         <span class="ml-3">{{ getCategoryTypeName(transactionType.type) }}</span>
                     </v-expansion-panel-title>
@@ -65,44 +85,45 @@
                             <div class="py-3" v-if="!hasAvailableCategory[transactionType.type]">{{ $t('No available category') }}</div>
 
                             <template :key="category.id"
-                                      v-for="(category, idx) in transactionType.visibleCategories">
-                                <v-list-item>
+                                      v-for="(category, idx) in transactionType.allCategories">
+                                <v-divider v-if="showHidden ? idx > 0 : (!category.hidden ? idx > transactionType.firstVisibleCategoryIndex : false)"/>
+
+                                <v-list-item v-if="showHidden || !category.hidden">
                                     <template #prepend>
                                         <v-checkbox :model-value="isSubCategoriesAllChecked(category, filterCategoryIds)"
                                                     :indeterminate="isSubCategoriesHasButNotAllChecked(category, filterCategoryIds)"
                                                     @update:model-value="selectSubCategories(category, $event)">
                                             <template #label>
-                                                <ItemIcon class="d-flex" icon-type="category"
-                                                          :icon-id="category.icon" :color="category.color"></ItemIcon>
+                                                <ItemIcon class="d-flex" icon-type="category" :icon-id="category.icon"
+                                                          :color="category.color" :hidden-status="category.hidden"></ItemIcon>
                                                 <span class="ml-3">{{ category.name }}</span>
                                             </template>
                                         </v-checkbox>
                                     </template>
                                 </v-list-item>
 
-                                <v-divider v-if="transactionType.visibleSubCategories[category.id]"/>
+                                <v-divider v-if="(showHidden || !category.hidden) && ((showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id])"/>
 
                                 <v-list rounded density="comfortable" class="pa-0 ml-4"
-                                        v-if="transactionType.visibleSubCategories[category.id]">
+                                        v-if="(showHidden || !category.hidden) && ((showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id])">
                                     <template :key="subCategory.id"
-                                              v-for="(subCategory, subIdx) in transactionType.visibleSubCategories[category.id]">
-                                        <v-list-item>
+                                              v-for="(subCategory, subIdx) in transactionType.allSubCategories[category.id]">
+                                        <v-divider v-if="showHidden ? subIdx > 0 : (!subCategory.hidden ? subIdx > transactionType.allFirstVisibleSubCategoryIndexes[category.id] : false)"/>
+
+                                        <v-list-item v-if="showHidden || !subCategory.hidden">
                                             <template #prepend>
                                                 <v-checkbox :model-value="isCategoryChecked(subCategory, filterCategoryIds)"
                                                             @update:model-value="selectCategory(subCategory, $event)">
                                                     <template #label>
-                                                        <ItemIcon class="d-flex" icon-type="category"
-                                                                  :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
+                                                        <ItemIcon class="d-flex" icon-type="category" :icon-id="subCategory.icon"
+                                                                  :color="subCategory.color" :hidden-status="subCategory.hidden"></ItemIcon>
                                                         <span class="ml-3">{{ subCategory.name }}</span>
                                                     </template>
                                                 </v-checkbox>
                                             </template>
                                         </v-list-item>
-                                        <v-divider v-if="subIdx !== transactionType.visibleSubCategories[category.id].length - 1"/>
                                     </template>
                                 </v-list>
-
-                                <v-divider v-if="idx !== transactionType.visibleCategories - 1"/>
                             </template>
                         </v-list>
                     </v-expansion-panel-text>
@@ -112,7 +133,7 @@
 
         <v-card-text class="overflow-y-visible" v-if="dialogMode">
             <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
-                <v-btn :disabled="!hasAnyAvailableCategory" @click="save">{{ $t(applyText) }}</v-btn>
+                <v-btn :disabled="!hasAnyVisibleCategory" @click="save">{{ $t(applyText) }}</v-btn>
                 <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
             </div>
         </v-card-text>
@@ -129,7 +150,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
 import categoryConstants from '@/consts/category.js';
 import { copyObjectTo, arrayItemToObjectField } from '@/lib/common.js';
 import {
-    allVisibleTransactionCategories,
+    allTransactionCategoriesWithVisibleCount,
     hasAnyAvailableCategory,
     hasAvailableCategory,
     selectSubCategories,
@@ -145,6 +166,8 @@ import {
     mdiSelectAll,
     mdiSelect,
     mdiSelectInverse,
+    mdiEyeOutline,
+    mdiEyeOffOutline,
     mdiDotsVertical
 } from '@mdi/js';
 
@@ -167,10 +190,13 @@ export default {
                 categoryConstants.allCategoryTypes.Transfer.toString()
             ],
             filterCategoryIds: {},
+            showHidden: false,
             icons: {
                 selectAll: mdiSelectAll,
                 selectNone: mdiSelect,
                 selectInverse: mdiSelectInverse,
+                show: mdiEyeOutline,
+                hide: mdiEyeOffOutline,
                 more: mdiDotsVertical
             }
         }
@@ -194,14 +220,17 @@ export default {
         allowCategoryTypes() {
             return this.categoryTypes ? arrayItemToObjectField(this.categoryTypes.split(','), true) : null;
         },
-        allVisibleTransactionCategories() {
-            return allVisibleTransactionCategories(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
+        allTransactionCategories() {
+            return allTransactionCategoriesWithVisibleCount(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
         },
         hasAnyAvailableCategory() {
-            return hasAnyAvailableCategory(this.allVisibleTransactionCategories);
+            return hasAnyAvailableCategory(this.allTransactionCategories, true);
+        },
+        hasAnyVisibleCategory() {
+            return hasAnyAvailableCategory(this.allTransactionCategories, this.showHidden);
         },
         hasAvailableCategory() {
-            return hasAvailableCategory(this.allVisibleTransactionCategories);
+            return hasAvailableCategory(this.allTransactionCategories, this.showHidden);
         }
     },
     created() {
diff --git a/src/views/mobile/settings/CategoryFilterSettingsPage.vue b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
index 1362aa61..37aeb22e 100644
--- a/src/views/mobile/settings/CategoryFilterSettingsPage.vue
+++ b/src/views/mobile/settings/CategoryFilterSettingsPage.vue
@@ -5,7 +5,7 @@
             <f7-nav-title :title="$t(title)"></f7-nav-title>
             <f7-nav-right>
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="save"></f7-link>
+                <f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyVisibleCategory }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -50,7 +50,7 @@
 
         <f7-block class="combination-list-wrapper margin-vertical"
                   :key="transactionType.type"
-                  v-for="transactionType in allVisibleTransactionCategories"
+                  v-for="transactionType in allTransactionCategories"
                   v-else-if="!loading">
             <f7-accordion-item :opened="collapseStates[transactionType.type].opened"
                                @accordion:open="collapseStates[transactionType.type].opened = true"
@@ -75,30 +75,40 @@
                     </f7-list>
                     <f7-list strong inset dividers accordion-list class="combination-list-content" v-else-if="hasAvailableCategory[transactionType.type]">
                         <f7-list-item checkbox
-                                      :class="{ 'has-child-list-item': transactionType.visibleSubCategories[category.id] }"
+                                      :class="{ 'has-child-list-item': (showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id] }"
                                       :title="category.name"
                                       :value="category.id"
                                       :checked="isSubCategoriesAllChecked(category, filterCategoryIds)"
                                       :indeterminate="isSubCategoriesHasButNotAllChecked(category, filterCategoryIds)"
                                       :key="category.id"
-                                      v-for="category in transactionType.visibleCategories"
+                                      v-for="category in transactionType.allCategories"
+                                      v-show="showHidden || !category.hidden"
                                       @change="selectSubCategories">
                             <template #media>
-                                <ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
+                                <ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color">
+                                    <f7-badge color="gray" class="right-bottom-icon" v-if="category.hidden">
+                                        <f7-icon f7="eye_slash_fill"></f7-icon>
+                                    </f7-badge>
+                                </ItemIcon>
                             </template>
 
                             <template #root>
                                 <ul class="padding-left"
-                                    v-if="transactionType.visibleSubCategories[category.id]">
+                                    v-if="(showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id]">
                                     <f7-list-item checkbox
                                                   :title="subCategory.name"
                                                   :value="subCategory.id"
                                                   :checked="isCategoryChecked(subCategory, filterCategoryIds)"
                                                   :key="subCategory.id"
-                                                  v-for="subCategory in transactionType.visibleSubCategories[category.id]"
+                                                  v-for="subCategory in transactionType.allSubCategories[category.id]"
+                                                  v-show="showHidden || !subCategory.hidden"
                                                   @change="selectCategory">
                                         <template #media>
-                                            <ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
+                                            <ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color">
+                                                <f7-badge color="gray" class="right-bottom-icon" v-if="subCategory.hidden">
+                                                    <f7-icon f7="eye_slash_fill"></f7-icon>
+                                                </f7-badge>
+                                            </ItemIcon>
                                         </template>
                                     </f7-list-item>
                                 </ul>
@@ -111,9 +121,13 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button @click="selectAll">{{ $t('Select All') }}</f7-actions-button>
-                <f7-actions-button @click="selectNone">{{ $t('Select None') }}</f7-actions-button>
-                <f7-actions-button @click="selectInvert">{{ $t('Invert Selection') }}</f7-actions-button>
+                <f7-actions-button :class="{ 'disabled': !hasAnyVisibleCategory }" @click="selectAll">{{ $t('Select All') }}</f7-actions-button>
+                <f7-actions-button :class="{ 'disabled': !hasAnyVisibleCategory }" @click="selectNone">{{ $t('Select None') }}</f7-actions-button>
+                <f7-actions-button :class="{ 'disabled': !hasAnyVisibleCategory }" @click="selectInvert">{{ $t('Invert Selection') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Transaction Categories') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Categories') }}</f7-actions-button>
             </f7-actions-group>
             <f7-actions-group>
                 <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
@@ -132,7 +146,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
 import categoryConstants from '@/consts/category.js';
 import { copyObjectTo, arrayItemToObjectField } from '@/lib/common.js';
 import {
-    allVisibleTransactionCategories,
+    allTransactionCategoriesWithVisibleCount,
     hasAnyAvailableCategory,
     hasAvailableCategory,
     selectSubCategories,
@@ -158,6 +172,7 @@ export default {
             type: null,
             allowCategoryTypes: null,
             filterCategoryIds: {},
+            showHidden: false,
             collapseStates: self.getCollapseStates(),
             showMoreActionSheet: false
         }
@@ -178,14 +193,17 @@ export default {
                 return 'Apply';
             }
         },
-        allVisibleTransactionCategories() {
-            return allVisibleTransactionCategories(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
+        allTransactionCategories() {
+            return allTransactionCategoriesWithVisibleCount(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
         },
         hasAnyAvailableCategory() {
-            return hasAnyAvailableCategory(this.allVisibleTransactionCategories);
+            return hasAnyAvailableCategory(this.allTransactionCategories, true);
+        },
+        hasAnyVisibleCategory() {
+            return hasAnyAvailableCategory(this.allTransactionCategories, this.showHidden);
         },
         hasAvailableCategory() {
-            return hasAvailableCategory(this.allVisibleTransactionCategories);
+            return hasAvailableCategory(this.allTransactionCategories, this.showHidden);
         }
     },
     created() {