From 84f7eab95d7e914f3c516d051d3c210ff8ebf9c3 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 24 Jul 2024 23:30:33 +0800
Subject: [PATCH] show no available tags when all tags are hidden

---
 src/stores/transactionTag.js                        |  3 +++
 .../cards/TransactionTagFilterSettingsCard.vue      | 13 ++++++++++---
 .../settings/TransactionTagFilterSettingsPage.vue   | 13 ++++++++++---
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/stores/transactionTag.js b/src/stores/transactionTag.js
index 0efafb27..da6eb148 100644
--- a/src/stores/transactionTag.js
+++ b/src/stores/transactionTag.js
@@ -75,6 +75,9 @@ export const useTransactionTagsStore = defineStore('transactionTags', {
         },
         allAvailableTagsCount(state) {
             return state.allTransactionTags.length;
+        },
+        allVisibleTagsCount(state) {
+            return state.allVisibleTags.length;
         }
     },
     actions: {
diff --git a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
index 3a72e39a..818e289f 100644
--- a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
@@ -65,11 +65,11 @@
                                :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]"></v-skeleton-loader>
         </div>
 
-        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-if="!loading && !hasAnyAvailableTag">
+        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-if="!loading && !hasAnyVisibleTag">
             <span class="text-body-1">{{ $t('No available tag') }}</span>
         </v-card-text>
 
-        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-else-if="!loading && hasAnyAvailableTag">
+        <v-card-text :class="{ 'mt-0 mt-sm-2 mt-md-4': dialogMode }" v-else-if="!loading && hasAnyVisibleTag">
             <v-expansion-panels class="tag-categories" multiple v-model="expandTagCategories">
                 <v-expansion-panel class="border" key="default" value="default">
                     <v-expansion-panel-title class="expand-panel-title-with-bg py-0">
@@ -104,7 +104,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="!hasAnyAvailableTag" @click="save">{{ $t(applyText) }}</v-btn>
+                <v-btn :disabled="!hasAnyVisibleTag" @click="save">{{ $t(applyText) }}</v-btn>
                 <v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
             </div>
         </v-card-text>
@@ -171,6 +171,13 @@ export default {
         },
         hasAnyAvailableTag() {
             return this.transactionTagsStore.allAvailableTagsCount > 0;
+        },
+        hasAnyVisibleTag() {
+            if (this.showHidden) {
+                return this.transactionTagsStore.allAvailableTagsCount > 0;
+            } else {
+                return this.transactionTagsStore.allVisibleTagsCount > 0;
+            }
         }
     },
     created() {
diff --git a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
index 000d9166..08d1ecef 100644
--- a/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+++ b/src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
@@ -5,7 +5,7 @@
             <f7-nav-title :title="$t(title)"></f7-nav-title>
             <f7-nav-right>
                 <f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableTag }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyAvailableTag }" @click="save"></f7-link>
+                <f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyVisibleTag }" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -37,11 +37,11 @@
             </f7-accordion-item>
         </f7-block>
 
-        <f7-list strong inset dividers accordion-list class="margin-top" v-if="!loading && !hasAnyAvailableTag">
+        <f7-list strong inset dividers accordion-list class="margin-top" v-if="!loading && !hasAnyVisibleTag">
             <f7-list-item :title="$t('No available tag')"></f7-list-item>
         </f7-list>
 
-        <f7-block class="combination-list-wrapper margin-vertical" key="default" v-if="!loading">
+        <f7-block class="combination-list-wrapper margin-vertical" key="default" v-show="!loading && hasAnyVisibleTag">
             <f7-accordion-item :opened="collapseStates['default'].opened"
                                @accordion:open="collapseStates['default'].opened = true"
                                @accordion:close="collapseStates['default'].opened = false">
@@ -143,6 +143,13 @@ export default {
         },
         hasAnyAvailableTag() {
             return this.transactionTagsStore.allAvailableTagsCount > 0;
+        },
+        hasAnyVisibleTag() {
+            if (this.showHidden) {
+                return this.transactionTagsStore.allAvailableTagsCount > 0;
+            } else {
+                return this.transactionTagsStore.allVisibleTagsCount > 0;
+            }
         }
     },
     created() {