add search box in tag filter page / dialog (#382)

This commit is contained in:
MaysWind
2025-12-13 01:16:51 +08:00
parent 44039438e0
commit e9c3001c28
20 changed files with 89 additions and 175 deletions
@@ -1,12 +1,22 @@
<template>
<f7-page @page:afterin="onPageAfterIn">
<f7-page with-subnavbar @page:beforein="onPageBeforeIn" @page:afterin="onPageAfterIn">
<f7-navbar>
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
<f7-nav-title :title="tt(title)"></f7-nav-title>
<f7-nav-right class="navbar-compact-icons">
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableTag }" @click="showMoreActionSheet = true"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleTag }" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyAvailableTag }" @click="save"></f7-link>
</f7-nav-right>
<f7-subnavbar :inner="false">
<f7-searchbar
custom-searchs
:value="filterContent"
:placeholder="tt('Find tag')"
:disable-button-text="tt('Cancel')"
@change="filterContent = $event.target.value"
></f7-searchbar>
</f7-subnavbar>
</f7-navbar>
<f7-block class="combination-list-wrapper margin-vertical skeleton-text" v-if="loading">
@@ -85,7 +95,7 @@
:value="transactionTag.id"
:key="transactionTag.id"
:after="tt(filterTagIds[transactionTag.id] === TransactionTagFilterState.Include ? 'Included' : filterTagIds[transactionTag.id] === TransactionTagFilterState.Exclude ? 'Excluded' : 'Default')"
v-for="transactionTag in allTags"
v-for="transactionTag in allVisibleTags"
v-show="showHidden || !transactionTag.hidden"
@click="currentTransactionTagId = transactionTag.id">
<template #media>
@@ -122,14 +132,9 @@
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(false, TransactionTagFilterState.Include)">{{ tt('Set All to Included') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(false, TransactionTagFilterState.Default)">{{ tt('Set All to Default') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(false, TransactionTagFilterState.Exclude)">{{ tt('Set All to Excluded') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(true, TransactionTagFilterState.Include)">{{ tt('Set All Visible Items to Included') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(true, TransactionTagFilterState.Default)">{{ tt('Set All Visible Items to Default') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(true, TransactionTagFilterState.Exclude)">{{ tt('Set All Visible Items to Excluded') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(TransactionTagFilterState.Include)">{{ tt('Set All to Included') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(TransactionTagFilterState.Default)">{{ tt('Set All to Default') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleTag }" @click="setAllTagsState(TransactionTagFilterState.Exclude)">{{ tt('Set All to Excluded') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Transaction Tags') }}</f7-actions-button>
@@ -174,13 +179,14 @@ const { showToast, routeBackOnError } = useI18nUIComponents();
const {
loading,
showHidden,
filterContent,
filterTagIds,
includeTagFilterType,
excludeTagFilterType,
includeTagsCount,
excludeTagsCount,
title,
allTags,
allVisibleTags,
hasAnyAvailableTag,
hasAnyVisibleTag,
loadFilterTagIds,
@@ -224,12 +230,8 @@ function updateCurrentTransactionTagState(state: number): void {
currentTransactionTagId.value = '';
}
function setAllTagsState(onlyVisible: boolean, value: TransactionTagFilterState): void {
for (const tag of allTags.value) {
if (onlyVisible && !showHidden.value && tag.hidden) {
continue;
}
function setAllTagsState(value: TransactionTagFilterState): void {
for (const tag of allVisibleTags.value) {
filterTagIds.value[tag.id] = value;
}
}
@@ -239,6 +241,10 @@ function save(): void {
props.f7router.back();
}
function onPageBeforeIn(): void {
filterContent.value = '';
}
function onPageAfterIn(): void {
routeBackOnError(props.f7router, loadingError);
}