mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-22 02:34:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

support showing hidden accounts in filtering page / dialog

Browse Source
This commit is contained in:
MaysWind
2024-07-24 01:16:07 +08:00
parent 021e523d63
commit 7d6c7f49e5
3 changed files with 99 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/account.js
+35 -13
View File
@@ -128,7 +128,7 @@ export function getCategorizedAccounts(allAccounts) {
return ret; return ret;
} }
export function getVisibleCategorizedAccounts(categorizedAccounts) { export function getCategorizedAccountsWithVisibleCount(categorizedAccounts) {
const ret = {}; const ret = {};
for (let i = 0; i < accountConstants.allCategories.length; i++) { for (let i = 0; i < accountConstants.allCategories.length; i++) {
@@ -139,8 +139,11 @@ export function getVisibleCategorizedAccounts(categorizedAccounts) {
} }
const allAccounts = categorizedAccounts[accountCategory.id].accounts; const allAccounts = categorizedAccounts[accountCategory.id].accounts;
const visibleAccounts = []; const allSubAccounts = {};
const allVisibleSubAccounts = {}; const allVisibleSubAccountCounts = {};
const allFirstVisibleSubAccountIndexes = {};
let allVisibleAccountCount = 0;
let firstVisibleAccountIndex = -1;
for (let j = 0; j < allAccounts.length; j++) { for (let j = 0; j < allAccounts.length; j++) {
const account = allAccounts[j]; const account = allAccounts[j];
@@ -149,36 +152,55 @@ export function getVisibleCategorizedAccounts(categorizedAccounts) {
continue; continue;
} }
visibleAccounts.push(account); allVisibleAccountCount++;
if (firstVisibleAccountIndex === -1) {
firstVisibleAccountIndex = j;
}
if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && account.subAccounts) { if (account.type === accountConstants.allAccountTypes.MultiSubAccounts && account.subAccounts) {
const visibleSubAccounts = []; const subAccounts = [];
let visibleSubAccountCount = 0;
let firstVisibleSubAccountIndex = -1;
for (let k = 0; k < account.subAccounts.length; k++) { for (let k = 0; k < account.subAccounts.length; k++) {
const subAccount = account.subAccounts[k]; const subAccount = account.subAccounts[k];
subAccounts.push(subAccount);
if (!subAccount.hidden) { if (!subAccount.hidden) {
visibleSubAccounts.push(subAccount); visibleSubAccountCount++;
}
}
if (visibleSubAccounts.length > 0) { if (firstVisibleSubAccountIndex === -1) {
allVisibleSubAccounts[account.id] = visibleSubAccounts; firstVisibleSubAccountIndex = k;
} }
} }
} }
if (visibleAccounts.length > 0) { if (subAccounts.length > 0) {
allSubAccounts[account.id] = subAccounts;
allVisibleSubAccountCounts[account.id] = visibleSubAccountCount;
allFirstVisibleSubAccountIndexes[account.id] = firstVisibleSubAccountIndex;
}
}
}
if (allAccounts.length > 0) {
ret[accountCategory.id] = { ret[accountCategory.id] = {
category: accountCategory.id, category: accountCategory.id,
name: accountCategory.name, name: accountCategory.name,
icon: accountCategory.defaultAccountIconId, icon: accountCategory.defaultAccountIconId,
visibleAccounts: visibleAccounts, allAccounts: allAccounts,
visibleSubAccounts: allVisibleSubAccounts allVisibleAccountCount: allVisibleAccountCount,
firstVisibleAccountIndex: firstVisibleAccountIndex,
allSubAccounts: allSubAccounts,
allVisibleSubAccountCounts: allVisibleSubAccountCounts,
allFirstVisibleSubAccountIndexes: allFirstVisibleSubAccountIndexes
}; };
} }
} }
console.log(ret)
return ret; return ret;
} }
src/views/desktop/common/cards/AccountFilterSettingsCard.vue
+39 -18
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 Accounts')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="icons.hide"
:title="$t('Hide Hidden Accounts')"
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 Accounts')"
v-if="!showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="icons.hide"
:title="$t('Hide Hidden Accounts')"
v-if="showHidden" @click="showHidden = false"></v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-btn> </v-btn>
@@ -60,51 +74,53 @@
<v-expansion-panel :key="accountCategory.category" <v-expansion-panel :key="accountCategory.category"
:value="accountCategory.category" :value="accountCategory.category"
class="border" class="border"
v-for="accountCategory in allVisibleCategorizedAccounts"> v-for="accountCategory in allCategorizedAccounts"
v-show="showHidden || accountCategory.allVisibleAccountCount > 0">
<v-expansion-panel-title class="expand-panel-title-with-bg py-0"> <v-expansion-panel-title class="expand-panel-title-with-bg py-0">
<span class="ml-3">{{ $t(accountCategory.name) }}</span> <span class="ml-3">{{ $t(accountCategory.name) }}</span>
</v-expansion-panel-title> </v-expansion-panel-title>
<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="account.id" <template :key="account.id"
v-for="(account, idx) in accountCategory.visibleAccounts"> v-for="(account, idx) in accountCategory.allAccounts">
<v-list-item> <v-divider v-if="showHidden ? idx > 0 : (!account.hidden ? idx > accountCategory.firstVisibleAccountIndex : false)"/>
<v-list-item v-if="showHidden || !account.hidden">
<template #prepend> <template #prepend>
<v-checkbox :model-value="isAccountOrSubAccountsAllChecked(account, filterAccountIds)" <v-checkbox :model-value="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)" :indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
@update:model-value="selectAccountOrSubAccounts(account, $event)"> @update:model-value="selectAccountOrSubAccounts(account, $event)">
<template #label> <template #label>
<ItemIcon class="d-flex" icon-type="account" <ItemIcon class="d-flex" icon-type="account" :icon-id="account.icon"
:icon-id="account.icon" :color="account.color"></ItemIcon> :color="account.color" :hidden-status="account.hidden"></ItemIcon>
<span class="ml-3">{{ account.name }}</span> <span class="ml-3">{{ account.name }}</span>
</template> </template>
</v-checkbox> </v-checkbox>
</template> </template>
</v-list-item> </v-list-item>
<v-divider v-if="account.type === allAccountTypes.MultiSubAccounts && accountCategory.visibleSubAccounts[account.id]"/> <v-divider v-if="account.type === allAccountTypes.MultiSubAccounts && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id])"/>
<v-list rounded density="comfortable" class="pa-0 ml-4" <v-list rounded density="comfortable" class="pa-0 ml-4"
v-if="account.type === allAccountTypes.MultiSubAccounts && accountCategory.visibleSubAccounts[account.id]"> v-if="account.type === allAccountTypes.MultiSubAccounts && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id])">
<template :key="subAccount.id" <template :key="subAccount.id"
v-for="(subAccount, subIdx) in accountCategory.visibleSubAccounts[account.id]"> v-for="(subAccount, subIdx) in accountCategory.allSubAccounts[account.id]">
<v-list-item> <v-divider v-if="showHidden ? subIdx > 0 : (!subAccount.hidden ? subIdx > accountCategory.allFirstVisibleSubAccountIndexes[account.id] : false)"/>
<v-list-item v-if="showHidden || !subAccount.hidden">
<template #prepend> <template #prepend>
<v-checkbox :model-value="isAccountChecked(subAccount, filterAccountIds)" <v-checkbox :model-value="isAccountChecked(subAccount, filterAccountIds)"
@update:model-value="selectAccount(subAccount, $event)"> @update:model-value="selectAccount(subAccount, $event)">
<template #label> <template #label>
<ItemIcon class="d-flex" icon-type="account" <ItemIcon class="d-flex" icon-type="account" :icon-id="subAccount.icon"
:icon-id="subAccount.icon" :color="subAccount.color"></ItemIcon> :color="subAccount.color" :hidden-status="subAccount.hidden"></ItemIcon>
<span class="ml-3">{{ subAccount.name }}</span> <span class="ml-3">{{ subAccount.name }}</span>
</template> </template>
</v-checkbox> </v-checkbox>
</template> </template>
</v-list-item> </v-list-item>
<v-divider v-if="subIdx !== accountCategory.visibleSubAccounts[account.id].length - 1"/>
</template> </template>
</v-list> </v-list>
<v-divider v-if="idx !== accountCategory.visibleAccounts.length - 1"/>
</template> </template>
</v-list> </v-list>
</v-expansion-panel-text> </v-expansion-panel-text>
@@ -131,7 +147,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
import accountConstants from '@/consts/account.js'; import accountConstants from '@/consts/account.js';
import { copyObjectTo } from '@/lib/common.js'; import { copyObjectTo } from '@/lib/common.js';
import { import {
getVisibleCategorizedAccounts, getCategorizedAccountsWithVisibleCount,
selectAccountOrSubAccounts, selectAccountOrSubAccounts,
selectAll, selectAll,
selectNone, selectNone,
@@ -144,6 +160,8 @@ import {
mdiSelectAll, mdiSelectAll,
mdiSelect, mdiSelect,
mdiSelectInverse, mdiSelectInverse,
mdiEyeOutline,
mdiEyeOffOutline,
mdiDotsVertical mdiDotsVertical
} from '@mdi/js'; } from '@mdi/js';
@@ -161,10 +179,13 @@ export default {
loading: true, loading: true,
expandAccountCategories: accountConstants.allCategories.map(category => category.id), expandAccountCategories: accountConstants.allCategories.map(category => category.id),
filterAccountIds: {}, filterAccountIds: {},
showHidden: false,
icons: { icons: {
selectAll: mdiSelectAll, selectAll: mdiSelectAll,
selectNone: mdiSelect, selectNone: mdiSelect,
selectInverse: mdiSelectInverse, selectInverse: mdiSelectInverse,
show: mdiEyeOutline,
hide: mdiEyeOffOutline,
more: mdiDotsVertical more: mdiDotsVertical
} }
} }
@@ -188,11 +209,11 @@ export default {
allAccountTypes() { allAccountTypes() {
return accountConstants.allAccountTypes; return accountConstants.allAccountTypes;
}, },
allVisibleCategorizedAccounts() { allCategorizedAccounts() {
return getVisibleCategorizedAccounts(this.accountsStore.allCategorizedAccounts); return getCategorizedAccountsWithVisibleCount(this.accountsStore.allCategorizedAccounts);
}, },
hasAnyAvailableAccount() { hasAnyAvailableAccount() {
return this.accountsStore.allVisibleAccountsCount > 0; return this.accountsStore.allAvailableAccountsCount > 0;
} }
}, },
created() { created() {
src/views/mobile/settings/AccountFilterSettingsPage.vue
+27 -11
View File
@@ -44,7 +44,8 @@
<f7-block class="combination-list-wrapper margin-vertical" <f7-block class="combination-list-wrapper margin-vertical"
:key="accountCategory.category" :key="accountCategory.category"
v-for="accountCategory in allVisibleCategorizedAccounts" v-for="accountCategory in allCategorizedAccounts"
v-show="showHidden || accountCategory.allVisibleAccountCount > 0"
v-else-if="!loading && hasAnyAvailableAccount"> v-else-if="!loading && hasAnyAvailableAccount">
<f7-accordion-item :opened="collapseStates[accountCategory.category].opened" <f7-accordion-item :opened="collapseStates[accountCategory.category].opened"
@accordion:open="collapseStates[accountCategory.category].opened = true" @accordion:open="collapseStates[accountCategory.category].opened = true"
@@ -66,30 +67,40 @@
<f7-accordion-content :style="{ height: collapseStates[accountCategory.category].opened ? 'auto' : '' }"> <f7-accordion-content :style="{ height: collapseStates[accountCategory.category].opened ? 'auto' : '' }">
<f7-list strong inset dividers accordion-list class="combination-list-content"> <f7-list strong inset dividers accordion-list class="combination-list-content">
<f7-list-item checkbox <f7-list-item checkbox
:class="{ 'has-child-list-item': account.type === allAccountTypes.MultiSubAccounts && accountCategory.visibleSubAccounts[account.id] }" :class="{ 'has-child-list-item': account.type === allAccountTypes.MultiSubAccounts && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id]) }"
:title="account.name" :title="account.name"
:value="account.id" :value="account.id"
:checked="isAccountOrSubAccountsAllChecked(account, filterAccountIds)" :checked="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)" :indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
:key="account.id" :key="account.id"
v-for="account in accountCategory.visibleAccounts" v-for="account in accountCategory.allAccounts"
v-show="showHidden || !account.hidden"
@change="selectAccountOrSubAccounts"> @change="selectAccountOrSubAccounts">
<template #media> <template #media>
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"></ItemIcon> <ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
</ItemIcon>
</template> </template>
<template #root> <template #root>
<ul class="padding-left" <ul class="padding-left"
v-if="account.type === allAccountTypes.MultiSubAccounts && accountCategory.visibleSubAccounts[account.id]"> v-if="account.type === allAccountTypes.MultiSubAccounts && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id])">
<f7-list-item checkbox <f7-list-item checkbox
:title="subAccount.name" :title="subAccount.name"
:value="subAccount.id" :value="subAccount.id"
:checked="isAccountChecked(subAccount, filterAccountIds)" :checked="isAccountChecked(subAccount, filterAccountIds)"
:key="subAccount.id" :key="subAccount.id"
v-for="subAccount in accountCategory.visibleSubAccounts[account.id]" v-for="subAccount in accountCategory.allSubAccounts[account.id]"
v-show="showHidden || !subAccount.hidden"
@change="selectAccount"> @change="selectAccount">
<template #media> <template #media>
<ItemIcon icon-type="account" :icon-id="subAccount.icon" :color="subAccount.color"></ItemIcon> <ItemIcon icon-type="account" :icon-id="subAccount.icon" :color="subAccount.color">
<f7-badge color="gray" class="right-bottom-icon" v-if="subAccount.hidden">
<f7-icon f7="eye_slash_fill"></f7-icon>
</f7-badge>
</ItemIcon>
</template> </template>
</f7-list-item> </f7-list-item>
</ul> </ul>
@@ -106,6 +117,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 Accounts') }}</f7-actions-button>
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Accounts') }}</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>
@@ -123,7 +138,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
import accountConstants from '@/consts/account.js'; import accountConstants from '@/consts/account.js';
import { copyObjectTo } from '@/lib/common.js'; import { copyObjectTo } from '@/lib/common.js';
import { import {
getVisibleCategorizedAccounts, getCategorizedAccountsWithVisibleCount,
selectAccountOrSubAccounts, selectAccountOrSubAccounts,
selectAll, selectAll,
selectNone, selectNone,
@@ -145,6 +160,7 @@ export default {
loadingError: null, loadingError: null,
type: null, type: null,
filterAccountIds: {}, filterAccountIds: {},
showHidden: false,
collapseStates: self.getCollapseStates(), collapseStates: self.getCollapseStates(),
showMoreActionSheet: false showMoreActionSheet: false
} }
@@ -168,11 +184,11 @@ export default {
allAccountTypes() { allAccountTypes() {
return accountConstants.allAccountTypes; return accountConstants.allAccountTypes;
}, },
allVisibleCategorizedAccounts() { allCategorizedAccounts() {
return getVisibleCategorizedAccounts(this.accountsStore.allCategorizedAccounts); return getCategorizedAccountsWithVisibleCount(this.accountsStore.allCategorizedAccounts);
}, },
hasAnyAvailableAccount() { hasAnyAvailableAccount() {
return this.accountsStore.allVisibleAccountsCount > 0; return this.accountsStore.allAvailableAccountsCount > 0;
} }
}, },
created() { created() {