From 021e523d6364a913a55bcbca878e9886f2537745 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 24 Jul 2024 00:10:29 +0800
Subject: [PATCH] support showing hidden tags in filtering page / dialog

---
 src/stores/transactionTag.js                  |  2 +-
 .../TransactionTagFilterSettingsCard.vue      | 36 +++++++++++++++----
 src/views/desktop/transactions/ListPage.vue   |  6 ++--
 .../TransactionTagFilterSettingsPage.vue      | 20 ++++++++---
 src/views/mobile/transactions/ListPage.vue    |  6 ++--
 5 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/src/stores/transactionTag.js b/src/stores/transactionTag.js
index 713b8d97..0efafb27 100644
--- a/src/stores/transactionTag.js
+++ b/src/stores/transactionTag.js
@@ -73,7 +73,7 @@ export const useTransactionTagsStore = defineStore('transactionTags', {
 
             return allVisibleTags;
         },
-        allVisibleTagsCount(state) {
+        allAvailableTagsCount(state) {
             return state.allTransactionTags.length;
         }
     },
diff --git a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
index 95a21511..3a72e39a 100644
--- a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
@@ -19,6 +19,13 @@
                             <v-list-item :prepend-icon="icons.selectInverse"
                                          :title="$t('Invert Selection')"
                                          @click="selectInvert"></v-list-item>
+                            <v-divider class="my-2"/>
+                            <v-list-item :prepend-icon="icons.show"
+                                         :title="$t('Show Hidden Transaction Tags')"
+                                         v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                            <v-list-item :prepend-icon="icons.hide"
+                                         :title="$t('Hide Hidden Transaction Tags')"
+                                         v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
                     </v-menu>
                 </v-btn>
@@ -40,6 +47,13 @@
                             <v-list-item :prepend-icon="icons.selectInverse"
                                          :title="$t('Invert Selection')"
                                          @click="selectInvert"></v-list-item>
+                            <v-divider class="my-2"/>
+                            <v-list-item :prepend-icon="icons.show"
+                                         :title="$t('Show Hidden Transaction Tags')"
+                                         v-if="!showHidden" @click="showHidden = true"></v-list-item>
+                            <v-list-item :prepend-icon="icons.hide"
+                                         :title="$t('Hide Hidden Transaction Tags')"
+                                         v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
                     </v-menu>
                 </v-btn>
@@ -64,13 +78,18 @@
                     <v-expansion-panel-text>
                         <v-list rounded density="comfortable" class="pa-0">
                             <template :key="transactionTag.id"
-                                      v-for="transactionTag in allVisibleTags">
-                                <v-list-item>
+                                      v-for="transactionTag in allTags">
+                                <v-list-item v-if="showHidden || !transactionTag.hidden">
                                     <template #prepend>
                                         <v-checkbox :model-value="!filterTagIds[transactionTag.id]"
                                                     @update:model-value="selectTransactionTag(transactionTag, $event)">
                                             <template #label>
-                                                <v-icon size="24" :icon="icons.tag"/>
+                                                <v-badge class="right-bottom-icon" color="secondary"
+                                                         location="bottom right" offset-x="2" offset-y="2" :icon="icons.hide"
+                                                         v-if="transactionTag.hidden">
+                                                    <v-icon size="24" :icon="icons.tag"/>
+                                                </v-badge>
+                                                <v-icon size="24" :icon="icons.tag" v-else-if="!transactionTag.hidden"/>
                                                 <span class="ml-3">{{ transactionTag.name }}</span>
                                             </template>
                                         </v-checkbox>
@@ -107,6 +126,8 @@ import {
     mdiSelectAll,
     mdiSelect,
     mdiSelectInverse,
+    mdiEyeOutline,
+    mdiEyeOffOutline,
     mdiDotsVertical,
     mdiPound
 } from '@mdi/js';
@@ -125,10 +146,13 @@ export default {
             loading: true,
             expandTagCategories: [ 'default' ],
             filterTagIds: {},
+            showHidden: false,
             icons: {
                 selectAll: mdiSelectAll,
                 selectNone: mdiSelect,
                 selectInverse: mdiSelectInverse,
+                show: mdiEyeOutline,
+                hide: mdiEyeOffOutline,
                 more: mdiDotsVertical,
                 tag: mdiPound
             }
@@ -142,11 +166,11 @@ export default {
         applyText() {
             return 'Apply';
         },
-        allVisibleTags() {
-            return this.transactionTagsStore.allVisibleTags;
+        allTags() {
+            return this.transactionTagsStore.allTransactionTags;
         },
         hasAnyAvailableTag() {
-            return this.transactionTagsStore.allVisibleTagsCount > 0;
+            return this.transactionTagsStore.allAvailableTagsCount > 0;
         }
     },
     created() {
diff --git a/src/views/desktop/transactions/ListPage.vue b/src/views/desktop/transactions/ListPage.vue
index 5e589e64..ba9bf65d 100644
--- a/src/views/desktop/transactions/ListPage.vue
+++ b/src/views/desktop/transactions/ListPage.vue
@@ -334,7 +334,7 @@
                                                         <v-list-item key="multiple" value="multiple" class="text-sm" density="compact"
                                                                      :class="{ 'list-item-selected': query.tagIds && queryAllFilterTagIdsCount > 1 }"
                                                                      :append-icon="(query.tagIds && queryAllFilterTagIdsCount > 1 ? icons.check : null)"
-                                                                     v-if="allVisibleTagsCount > 0">
+                                                                     v-if="allAvailableTagsCount > 0">
                                                             <v-list-item-title class="cursor-pointer"
                                                                                @click="showFilterTagDialog = true">
                                                                 <div class="d-flex align-center">
@@ -887,8 +887,8 @@ export default {
         allTransactionTags() {
             return this.transactionTagsStore.allTransactionTagsMap;
         },
-        allVisibleTagsCount() {
-            return this.transactionTagsStore.allVisibleTagsCount;
+        allAvailableTagsCount() {
+            return this.transactionTagsStore.allAvailableTagsCount;
         },
         recentMonthDateRanges() {
             return this.$locale.getAllRecentMonthDateRanges(this.userStore, true, true);
diff --git a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
index 0fd4404e..000d9166 100644
--- a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+++ b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
@@ -66,10 +66,15 @@
                                       :value="transactionTag.id"
                                       :checked="!filterTagIds[transactionTag.id]"
                                       :key="transactionTag.id"
-                                      v-for="transactionTag in allVisibleTags"
+                                      v-for="transactionTag in allTags"
+                                      v-show="showHidden || !transactionTag.hidden"
                                       @change="selectTransactionTag">
                             <template #media>
-                                <f7-icon f7="number"></f7-icon>
+                                <f7-icon f7="number">
+                                    <f7-badge color="gray" class="right-bottom-icon" v-if="transactionTag.hidden">
+                                        <f7-icon f7="eye_slash_fill"></f7-icon>
+                                    </f7-badge>
+                                </f7-icon>
                             </template>
                         </f7-list-item>
                     </f7-list>
@@ -83,6 +88,10 @@
                 <f7-actions-button @click="selectNone">{{ $t('Select None') }}</f7-actions-button>
                 <f7-actions-button @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 Tags') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Tags') }}</f7-actions-button>
+            </f7-actions-group>
             <f7-actions-group>
                 <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
             </f7-actions-group>
@@ -112,6 +121,7 @@ export default {
             loadingError: null,
             type: null,
             filterTagIds: {},
+            showHidden: false,
             collapseStates: {
                 'default': {
                     opened: true
@@ -128,11 +138,11 @@ export default {
         applyText() {
             return 'Apply';
         },
-        allVisibleTags() {
-            return this.transactionTagsStore.allVisibleTags;
+        allTags() {
+            return this.transactionTagsStore.allTransactionTags;
         },
         hasAnyAvailableTag() {
-            return this.transactionTagsStore.allVisibleTagsCount > 0;
+            return this.transactionTagsStore.allAvailableTagsCount > 0;
         }
     },
     created() {
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index 66872bce..ea5c4379 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -453,7 +453,7 @@
                     </template>
                 </f7-list-item>
                 <f7-list-item :class="{ 'list-item-selected': query.tagIds && queryAllFilterTagIdsCount > 1 }"
-                              :title="$t('Multiple Tags')" @click="filterMultipleTags()" v-if="allVisibleTagsCount > 0">
+                              :title="$t('Multiple Tags')" @click="filterMultipleTags()" v-if="allAvailableTagsCount > 0">
                     <template #after>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagIds && queryAllFilterTagIdsCount > 1"></f7-icon>
                     </template>
@@ -675,8 +675,8 @@ export default {
         allTransactionTags() {
             return this.transactionTagsStore.allTransactionTagsMap;
         },
-        allVisibleTagsCount() {
-            return this.transactionTagsStore.allVisibleTagsCount;
+        allAvailableTagsCount() {
+            return this.transactionTagsStore.allAvailableTagsCount;
         },
         allDateRanges() {
             return datetimeConstants.allDateRanges;