zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

support showing hidden tags in filtering page / dialog

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/stores/transactionTag.js
+1 -1
View File
@@ -73,7 +73,7 @@ export const useTransactionTagsStore = defineStore('transactionTags', {
return allVisibleTags; return allVisibleTags;
}, },
allVisibleTagsCount(state) { allAvailableTagsCount(state) {
return state.allTransactionTags.length; return state.allTransactionTags.length;
} }
}, },
src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
+30 -6
View File
@@ -19,6 +19,13 @@
<v-list-item :prepend-icon="icons.selectInverse" <v-list-item :prepend-icon="icons.selectInverse"
:title="$t('Invert Selection')" :title="$t('Invert Selection')"
@click="selectInvert"></v-list-item> @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-list>
</v-menu> </v-menu>
</v-btn> </v-btn>
@@ -40,6 +47,13 @@
<v-list-item :prepend-icon="icons.selectInverse" <v-list-item :prepend-icon="icons.selectInverse"
:title="$t('Invert Selection')" :title="$t('Invert Selection')"
@click="selectInvert"></v-list-item> @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-list>
</v-menu> </v-menu>
</v-btn> </v-btn>
@@ -64,13 +78,18 @@
<v-expansion-panel-text> <v-expansion-panel-text>
<v-list rounded density="comfortable" class="pa-0"> <v-list rounded density="comfortable" class="pa-0">
<template :key="transactionTag.id" <template :key="transactionTag.id"
v-for="transactionTag in allVisibleTags"> v-for="transactionTag in allTags">
<v-list-item> <v-list-item v-if="showHidden || !transactionTag.hidden">
<template #prepend> <template #prepend>
<v-checkbox :model-value="!filterTagIds[transactionTag.id]" <v-checkbox :model-value="!filterTagIds[transactionTag.id]"
@update:model-value="selectTransactionTag(transactionTag, $event)"> @update:model-value="selectTransactionTag(transactionTag, $event)">
<template #label> <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> <span class="ml-3">{{ transactionTag.name }}</span>
</template> </template>
</v-checkbox> </v-checkbox>
@@ -107,6 +126,8 @@ import {
mdiSelectAll, mdiSelectAll,
mdiSelect, mdiSelect,
mdiSelectInverse, mdiSelectInverse,
mdiEyeOutline,
mdiEyeOffOutline,
mdiDotsVertical, mdiDotsVertical,
mdiPound mdiPound
} from '@mdi/js'; } from '@mdi/js';
@@ -125,10 +146,13 @@ export default {
loading: true, loading: true,
expandTagCategories: [ 'default' ], expandTagCategories: [ 'default' ],
filterTagIds: {}, filterTagIds: {},
showHidden: false,
icons: { icons: {
selectAll: mdiSelectAll, selectAll: mdiSelectAll,
selectNone: mdiSelect, selectNone: mdiSelect,
selectInverse: mdiSelectInverse, selectInverse: mdiSelectInverse,
show: mdiEyeOutline,
hide: mdiEyeOffOutline,
more: mdiDotsVertical, more: mdiDotsVertical,
tag: mdiPound tag: mdiPound
} }
@@ -142,11 +166,11 @@ export default {
applyText() { applyText() {
return 'Apply'; return 'Apply';
}, },
allVisibleTags() { allTags() {
return this.transactionTagsStore.allVisibleTags; return this.transactionTagsStore.allTransactionTags;
}, },
hasAnyAvailableTag() { hasAnyAvailableTag() {
return this.transactionTagsStore.allVisibleTagsCount > 0; return this.transactionTagsStore.allAvailableTagsCount > 0;
} }
}, },
created() { created() {
src/views/desktop/transactions/ListPage.vue
+3 -3
View File
@@ -334,7 +334,7 @@
<v-list-item key="multiple" value="multiple" class="text-sm" density="compact" <v-list-item key="multiple" value="multiple" class="text-sm" density="compact"
:class="{ 'list-item-selected': query.tagIds && queryAllFilterTagIdsCount > 1 }" :class="{ 'list-item-selected': query.tagIds && queryAllFilterTagIdsCount > 1 }"
:append-icon="(query.tagIds && queryAllFilterTagIdsCount > 1 ? icons.check : null)" :append-icon="(query.tagIds && queryAllFilterTagIdsCount > 1 ? icons.check : null)"
v-if="allVisibleTagsCount > 0"> v-if="allAvailableTagsCount > 0">
<v-list-item-title class="cursor-pointer" <v-list-item-title class="cursor-pointer"
@click="showFilterTagDialog = true"> @click="showFilterTagDialog = true">
<div class="d-flex align-center"> <div class="d-flex align-center">
@@ -887,8 +887,8 @@ export default {
allTransactionTags() { allTransactionTags() {
return this.transactionTagsStore.allTransactionTagsMap; return this.transactionTagsStore.allTransactionTagsMap;
}, },
allVisibleTagsCount() { allAvailableTagsCount() {
return this.transactionTagsStore.allVisibleTagsCount; return this.transactionTagsStore.allAvailableTagsCount;
}, },
recentMonthDateRanges() { recentMonthDateRanges() {
return this.$locale.getAllRecentMonthDateRanges(this.userStore, true, true); return this.$locale.getAllRecentMonthDateRanges(this.userStore, true, true);
src/views/mobile/settings/TransactionTagFilterSettingsPage.vue
+15 -5
View File
@@ -66,10 +66,15 @@
:value="transactionTag.id" :value="transactionTag.id"
:checked="!filterTagIds[transactionTag.id]" :checked="!filterTagIds[transactionTag.id]"
:key="transactionTag.id" :key="transactionTag.id"
v-for="transactionTag in allVisibleTags" v-for="transactionTag in allTags"
v-show="showHidden || !transactionTag.hidden"
@change="selectTransactionTag"> @change="selectTransactionTag">
<template #media> <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> </template>
</f7-list-item> </f7-list-item>
</f7-list> </f7-list>
@@ -83,6 +88,10 @@
<f7-actions-button @click="selectNone">{{ $t('Select None') }}</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 @click="selectInvert">{{ $t('Invert Selection') }}</f7-actions-button>
</f7-actions-group> </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-group>
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button> <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
</f7-actions-group> </f7-actions-group>
@@ -112,6 +121,7 @@ export default {
loadingError: null, loadingError: null,
type: null, type: null,
filterTagIds: {}, filterTagIds: {},
showHidden: false,
collapseStates: { collapseStates: {
'default': { 'default': {
opened: true opened: true
@@ -128,11 +138,11 @@ export default {
applyText() { applyText() {
return 'Apply'; return 'Apply';
}, },
allVisibleTags() { allTags() {
return this.transactionTagsStore.allVisibleTags; return this.transactionTagsStore.allTransactionTags;
}, },
hasAnyAvailableTag() { hasAnyAvailableTag() {
return this.transactionTagsStore.allVisibleTagsCount > 0; return this.transactionTagsStore.allAvailableTagsCount > 0;
} }
}, },
created() { created() {
src/views/mobile/transactions/ListPage.vue
+3 -3
View File
@@ -453,7 +453,7 @@
</template> </template>
</f7-list-item> </f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.tagIds && queryAllFilterTagIdsCount > 1 }" <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> <template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagIds && queryAllFilterTagIdsCount > 1"></f7-icon> <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagIds && queryAllFilterTagIdsCount > 1"></f7-icon>
</template> </template>
@@ -675,8 +675,8 @@ export default {
allTransactionTags() { allTransactionTags() {
return this.transactionTagsStore.allTransactionTagsMap; return this.transactionTagsStore.allTransactionTagsMap;
}, },
allVisibleTagsCount() { allAvailableTagsCount() {
return this.transactionTagsStore.allVisibleTagsCount; return this.transactionTagsStore.allAvailableTagsCount;
}, },
allDateRanges() { allDateRanges() {
return datetimeConstants.allDateRanges; return datetimeConstants.allDateRanges;