support showing hidden tags in filtering page / dialog

This commit is contained in:
MaysWind
2024-07-24 00:10:29 +08:00
parent 266dafa4a9
commit 021e523d63
5 changed files with 52 additions and 18 deletions
@@ -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() {
+3 -3
View File
@@ -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);