support showing hidden categories in filtering page / dialog

This commit is contained in:
MaysWind
2024-07-25 00:43:21 +08:00
parent a00a67f3d1
commit 0620194c78
3 changed files with 148 additions and 67 deletions
+65 -31
View File
@@ -62,7 +62,7 @@ export function getTransactionSecondaryCategoryName(categoryId, allCategories) {
return '';
}
export function allVisibleTransactionCategories(allTransactionCategories, allowCategoryTypes) {
export function allTransactionCategoriesWithVisibleCount(allTransactionCategories, allowCategoryTypes) {
const ret = {};
const hasAllowCategoryTypes = allowCategoryTypes
&& (allowCategoryTypes[categoryConstants.allCategoryTypes.Income.toString()]
@@ -85,57 +85,80 @@ export function allVisibleTransactionCategories(allTransactionCategories, allowC
}
const allCategories = allTransactionCategories[categoryType];
const visibleCategories = [];
const allVisibleSubCategories = {};
const allSubCategories = {};
const allVisibleSubCategoryCounts = {};
const allFirstVisibleSubCategoryIndexes = {};
let allVisibleCategoryCount = 0;
let firstVisibleCategoryIndex = -1;
for (let j = 0; j < allCategories.length; j++) {
const category = allCategories[j];
if (category.hidden) {
continue;
if (!category.hidden) {
allVisibleCategoryCount++;
if (firstVisibleCategoryIndex === -1) {
firstVisibleCategoryIndex = j;
}
}
visibleCategories.push(category);
if (category.subCategories) {
const visibleSubCategories = [];
let visibleSubCategoryCount = 0;
let firstVisibleSubCategoryIndex = -1;
for (let k = 0; k < category.subCategories.length; k++) {
const subCategory = category.subCategories[k];
if (!subCategory.hidden) {
visibleSubCategories.push(subCategory);
visibleSubCategoryCount++;
if (firstVisibleSubCategoryIndex === -1) {
firstVisibleSubCategoryIndex = k;
}
}
}
if (visibleSubCategories.length > 0) {
allVisibleSubCategories[category.id] = visibleSubCategories;
if (category.subCategories.length > 0) {
allSubCategories[category.id] = category.subCategories;
allVisibleSubCategoryCounts[category.id] = visibleSubCategoryCount;
allFirstVisibleSubCategoryIndexes[category.id] = firstVisibleSubCategoryIndex;
}
}
}
ret[categoryType.toString()] = {
type: categoryType.toString(),
visibleCategories: visibleCategories,
visibleSubCategories: allVisibleSubCategories
allCategories: allCategories,
allVisibleCategoryCount: allVisibleCategoryCount,
firstVisibleCategoryIndex: firstVisibleCategoryIndex,
allSubCategories: allSubCategories,
allVisibleSubCategoryCounts: allVisibleSubCategoryCounts,
allFirstVisibleSubCategoryIndexes: allFirstVisibleSubCategoryIndexes
};
}
return ret;
}
export function allVisiblePrimaryTransactionCategoriesByType(allTransactionCategories, type) {
const allVisibleCategories = allVisibleTransactionCategories(allTransactionCategories);
export function allVisiblePrimaryTransactionCategoriesByType(allTransactionCategories, categoryType) {
const allCategories = allTransactionCategories[categoryType];
const visibleCategories = [];
if (!allVisibleCategories) {
return [];
if (!allCategories) {
return visibleCategories;
}
if (!allVisibleCategories[type.toString()]) {
return [];
for (let i = 0; i < allCategories.length; i++) {
const category = allCategories[i];
if (category.hidden) {
continue;
}
visibleCategories.push(category);
}
return allVisibleCategories[type.toString()].visibleCategories;
return visibleCategories;
}
export function getFinalCategoryIdsByFilteredCategoryIds(allTransactionCategoriesMap, filteredCategoryIds) {
@@ -248,32 +271,43 @@ export function getFirstAvailableSubCategoryId(categories, categoryId) {
return '';
}
export function hasAnyAvailableCategory(allVisibleTransactionCategories) {
for (let type in allVisibleTransactionCategories) {
if (!Object.prototype.hasOwnProperty.call(allVisibleTransactionCategories, type)) {
export function hasAnyAvailableCategory(allTransactionCategories, showHidden) {
for (let type in allTransactionCategories) {
if (!Object.prototype.hasOwnProperty.call(allTransactionCategories, type)) {
continue;
}
const categoryType = allVisibleTransactionCategories[type];
const categoryType = allTransactionCategories[type];
if (categoryType.visibleCategories && categoryType.visibleCategories.length > 0) {
return true;
if (showHidden) {
if (categoryType.allCategories && categoryType.allCategories.length > 0) {
return true;
}
} else {
if (categoryType.allVisibleCategoryCount > 0) {
return true;
}
}
}
return false;
}
export function hasAvailableCategory(allVisibleTransactionCategories) {
export function hasAvailableCategory(allTransactionCategories, showHidden) {
const result = {};
for (let type in allVisibleTransactionCategories) {
if (!Object.prototype.hasOwnProperty.call(allVisibleTransactionCategories, type)) {
for (let type in allTransactionCategories) {
if (!Object.prototype.hasOwnProperty.call(allTransactionCategories, type)) {
continue;
}
const categoryType = allVisibleTransactionCategories[type];
result[type] = categoryType.visibleCategories && categoryType.visibleCategories.length > 0;
const categoryType = allTransactionCategories[type];
if (showHidden) {
result[type] = categoryType.allCategories && categoryType.allCategories.length > 0;
} else {
result[type] = categoryType.allVisibleCategoryCount > 0;
}
}
return result;
@@ -12,13 +12,23 @@
<v-list>
<v-list-item :prepend-icon="icons.selectAll"
:title="$t('Select All')"
:disabled="!hasAnyVisibleCategory"
@click="selectAll"></v-list-item>
<v-list-item :prepend-icon="icons.selectNone"
:title="$t('Select None')"
:disabled="!hasAnyVisibleCategory"
@click="selectNone"></v-list-item>
<v-list-item :prepend-icon="icons.selectInverse"
:title="$t('Invert Selection')"
:disabled="!hasAnyVisibleCategory"
@click="selectInvert"></v-list-item>
<v-divider class="my-2"/>
<v-list-item :prepend-icon="icons.show"
:title="$t('Show Hidden Transaction Categories')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="icons.hide"
:title="$t('Hide Hidden Transaction Categories')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
@@ -33,13 +43,23 @@
<v-list>
<v-list-item :prepend-icon="icons.selectAll"
:title="$t('Select All')"
:disabled="!hasAnyVisibleCategory"
@click="selectAll"></v-list-item>
<v-list-item :prepend-icon="icons.selectNone"
:title="$t('Select None')"
:disabled="!hasAnyVisibleCategory"
@click="selectNone"></v-list-item>
<v-list-item :prepend-icon="icons.selectInverse"
:title="$t('Invert Selection')"
:disabled="!hasAnyVisibleCategory"
@click="selectInvert"></v-list-item>
<v-divider class="my-2"/>
<v-list-item :prepend-icon="icons.show"
:title="$t('Show Hidden Transaction Categories')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="icons.hide"
:title="$t('Hide Hidden Transaction Categories')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
@@ -56,7 +76,7 @@
<v-expansion-panel :key="transactionType.type"
:value="transactionType.type"
class="border"
v-for="transactionType in allVisibleTransactionCategories">
v-for="transactionType in allTransactionCategories">
<v-expansion-panel-title class="expand-panel-title-with-bg py-0">
<span class="ml-3">{{ getCategoryTypeName(transactionType.type) }}</span>
</v-expansion-panel-title>
@@ -65,44 +85,45 @@
<div class="py-3" v-if="!hasAvailableCategory[transactionType.type]">{{ $t('No available category') }}</div>
<template :key="category.id"
v-for="(category, idx) in transactionType.visibleCategories">
<v-list-item>
v-for="(category, idx) in transactionType.allCategories">
<v-divider v-if="showHidden ? idx > 0 : (!category.hidden ? idx > transactionType.firstVisibleCategoryIndex : false)"/>
<v-list-item v-if="showHidden || !category.hidden">
<template #prepend>
<v-checkbox :model-value="isSubCategoriesAllChecked(category, filterCategoryIds)"
:indeterminate="isSubCategoriesHasButNotAllChecked(category, filterCategoryIds)"
@update:model-value="selectSubCategories(category, $event)">
<template #label>
<ItemIcon class="d-flex" icon-type="category"
:icon-id="category.icon" :color="category.color"></ItemIcon>
<ItemIcon class="d-flex" icon-type="category" :icon-id="category.icon"
:color="category.color" :hidden-status="category.hidden"></ItemIcon>
<span class="ml-3">{{ category.name }}</span>
</template>
</v-checkbox>
</template>
</v-list-item>
<v-divider v-if="transactionType.visibleSubCategories[category.id]"/>
<v-divider v-if="(showHidden || !category.hidden) && ((showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id])"/>
<v-list rounded density="comfortable" class="pa-0 ml-4"
v-if="transactionType.visibleSubCategories[category.id]">
v-if="(showHidden || !category.hidden) && ((showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id])">
<template :key="subCategory.id"
v-for="(subCategory, subIdx) in transactionType.visibleSubCategories[category.id]">
<v-list-item>
v-for="(subCategory, subIdx) in transactionType.allSubCategories[category.id]">
<v-divider v-if="showHidden ? subIdx > 0 : (!subCategory.hidden ? subIdx > transactionType.allFirstVisibleSubCategoryIndexes[category.id] : false)"/>
<v-list-item v-if="showHidden || !subCategory.hidden">
<template #prepend>
<v-checkbox :model-value="isCategoryChecked(subCategory, filterCategoryIds)"
@update:model-value="selectCategory(subCategory, $event)">
<template #label>
<ItemIcon class="d-flex" icon-type="category"
:icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
<ItemIcon class="d-flex" icon-type="category" :icon-id="subCategory.icon"
:color="subCategory.color" :hidden-status="subCategory.hidden"></ItemIcon>
<span class="ml-3">{{ subCategory.name }}</span>
</template>
</v-checkbox>
</template>
</v-list-item>
<v-divider v-if="subIdx !== transactionType.visibleSubCategories[category.id].length - 1"/>
</template>
</v-list>
<v-divider v-if="idx !== transactionType.visibleCategories - 1"/>
</template>
</v-list>
</v-expansion-panel-text>
@@ -112,7 +133,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="!hasAnyAvailableCategory" @click="save">{{ $t(applyText) }}</v-btn>
<v-btn :disabled="!hasAnyVisibleCategory" @click="save">{{ $t(applyText) }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="cancel">{{ $t('Cancel') }}</v-btn>
</div>
</v-card-text>
@@ -129,7 +150,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
import categoryConstants from '@/consts/category.js';
import { copyObjectTo, arrayItemToObjectField } from '@/lib/common.js';
import {
allVisibleTransactionCategories,
allTransactionCategoriesWithVisibleCount,
hasAnyAvailableCategory,
hasAvailableCategory,
selectSubCategories,
@@ -145,6 +166,8 @@ import {
mdiSelectAll,
mdiSelect,
mdiSelectInverse,
mdiEyeOutline,
mdiEyeOffOutline,
mdiDotsVertical
} from '@mdi/js';
@@ -167,10 +190,13 @@ export default {
categoryConstants.allCategoryTypes.Transfer.toString()
],
filterCategoryIds: {},
showHidden: false,
icons: {
selectAll: mdiSelectAll,
selectNone: mdiSelect,
selectInverse: mdiSelectInverse,
show: mdiEyeOutline,
hide: mdiEyeOffOutline,
more: mdiDotsVertical
}
}
@@ -194,14 +220,17 @@ export default {
allowCategoryTypes() {
return this.categoryTypes ? arrayItemToObjectField(this.categoryTypes.split(','), true) : null;
},
allVisibleTransactionCategories() {
return allVisibleTransactionCategories(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
allTransactionCategories() {
return allTransactionCategoriesWithVisibleCount(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
},
hasAnyAvailableCategory() {
return hasAnyAvailableCategory(this.allVisibleTransactionCategories);
return hasAnyAvailableCategory(this.allTransactionCategories, true);
},
hasAnyVisibleCategory() {
return hasAnyAvailableCategory(this.allTransactionCategories, this.showHidden);
},
hasAvailableCategory() {
return hasAvailableCategory(this.allVisibleTransactionCategories);
return hasAvailableCategory(this.allTransactionCategories, this.showHidden);
}
},
created() {
@@ -5,7 +5,7 @@
<f7-nav-title :title="$t(title)"></f7-nav-title>
<f7-nav-right>
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="showMoreActionSheet = true"></f7-link>
<f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyAvailableCategory }" @click="save"></f7-link>
<f7-link :text="$t(applyText)" :class="{ 'disabled': !hasAnyVisibleCategory }" @click="save"></f7-link>
</f7-nav-right>
</f7-navbar>
@@ -50,7 +50,7 @@
<f7-block class="combination-list-wrapper margin-vertical"
:key="transactionType.type"
v-for="transactionType in allVisibleTransactionCategories"
v-for="transactionType in allTransactionCategories"
v-else-if="!loading">
<f7-accordion-item :opened="collapseStates[transactionType.type].opened"
@accordion:open="collapseStates[transactionType.type].opened = true"
@@ -75,30 +75,40 @@
</f7-list>
<f7-list strong inset dividers accordion-list class="combination-list-content" v-else-if="hasAvailableCategory[transactionType.type]">
<f7-list-item checkbox
:class="{ 'has-child-list-item': transactionType.visibleSubCategories[category.id] }"
:class="{ 'has-child-list-item': (showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id] }"
:title="category.name"
:value="category.id"
:checked="isSubCategoriesAllChecked(category, filterCategoryIds)"
:indeterminate="isSubCategoriesHasButNotAllChecked(category, filterCategoryIds)"
:key="category.id"
v-for="category in transactionType.visibleCategories"
v-for="category in transactionType.allCategories"
v-show="showHidden || !category.hidden"
@change="selectSubCategories">
<template #media>
<ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color"></ItemIcon>
<ItemIcon icon-type="category" :icon-id="category.icon" :color="category.color">
<f7-badge color="gray" class="right-bottom-icon" v-if="category.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
</ItemIcon>
</template>
<template #root>
<ul class="padding-left"
v-if="transactionType.visibleSubCategories[category.id]">
v-if="(showHidden && transactionType.allSubCategories[category.id]) || transactionType.allVisibleSubCategoryCounts[category.id]">
<f7-list-item checkbox
:title="subCategory.name"
:value="subCategory.id"
:checked="isCategoryChecked(subCategory, filterCategoryIds)"
:key="subCategory.id"
v-for="subCategory in transactionType.visibleSubCategories[category.id]"
v-for="subCategory in transactionType.allSubCategories[category.id]"
v-show="showHidden || !subCategory.hidden"
@change="selectCategory">
<template #media>
<ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color"></ItemIcon>
<ItemIcon icon-type="category" :icon-id="subCategory.icon" :color="subCategory.color">
<f7-badge color="gray" class="right-bottom-icon" v-if="subCategory.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
</ItemIcon>
</template>
</f7-list-item>
</ul>
@@ -111,9 +121,13 @@
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
<f7-actions-group>
<f7-actions-button @click="selectAll">{{ $t('Select All') }}</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 :class="{ 'disabled': !hasAnyVisibleCategory }" @click="selectAll">{{ $t('Select All') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleCategory }" @click="selectNone">{{ $t('Select None') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleCategory }" @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 Categories') }}</f7-actions-button>
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Categories') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
@@ -132,7 +146,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
import categoryConstants from '@/consts/category.js';
import { copyObjectTo, arrayItemToObjectField } from '@/lib/common.js';
import {
allVisibleTransactionCategories,
allTransactionCategoriesWithVisibleCount,
hasAnyAvailableCategory,
hasAvailableCategory,
selectSubCategories,
@@ -158,6 +172,7 @@ export default {
type: null,
allowCategoryTypes: null,
filterCategoryIds: {},
showHidden: false,
collapseStates: self.getCollapseStates(),
showMoreActionSheet: false
}
@@ -178,14 +193,17 @@ export default {
return 'Apply';
}
},
allVisibleTransactionCategories() {
return allVisibleTransactionCategories(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
allTransactionCategories() {
return allTransactionCategoriesWithVisibleCount(this.transactionCategoriesStore.allTransactionCategories, this.allowCategoryTypes);
},
hasAnyAvailableCategory() {
return hasAnyAvailableCategory(this.allVisibleTransactionCategories);
return hasAnyAvailableCategory(this.allTransactionCategories, true);
},
hasAnyVisibleCategory() {
return hasAnyAvailableCategory(this.allTransactionCategories, this.showHidden);
},
hasAvailableCategory() {
return hasAvailableCategory(this.allVisibleTransactionCategories);
return hasAvailableCategory(this.allTransactionCategories, this.showHidden);
}
},
created() {