mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 08:14:25 +08:00
support showing hidden accounts in filtering page / dialog
This commit is contained in:
MaysWind
+33
-11
@@ -128,7 +128,7 @@ export function getCategorizedAccounts(allAccounts) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function getVisibleCategorizedAccounts(categorizedAccounts) {
|
||||
export function getCategorizedAccountsWithVisibleCount(categorizedAccounts) {
|
||||
const ret = {};
|
||||
|
||||
for (let i = 0; i < accountConstants.allCategories.length; i++) {
|
||||
@@ -139,8 +139,11 @@ export function getVisibleCategorizedAccounts(categorizedAccounts) {
|
||||
}
|
||||
|
||||
const allAccounts = categorizedAccounts[accountCategory.id].accounts;
|
||||
const visibleAccounts = [];
|
||||
const allVisibleSubAccounts = {};
|
||||
const allSubAccounts = {};
|
||||
const allVisibleSubAccountCounts = {};
|
||||
const allFirstVisibleSubAccountIndexes = {};
|
||||
let allVisibleAccountCount = 0;
|
||||
let firstVisibleAccountIndex = -1;
|
||||
|
||||
for (let j = 0; j < allAccounts.length; j++) {
|
||||
const account = allAccounts[j];
|
||||
@@ -149,36 +152,55 @@ export function getVisibleCategorizedAccounts(categorizedAccounts) {
|
||||
continue;
|
||||
}
|
||||
|
||||
visibleAccounts.push(account);
|
||||
allVisibleAccountCount++;
|
||||
|
||||
if (firstVisibleAccountIndex === -1) {
|
||||
firstVisibleAccountIndex = j;
|
||||
}
|
||||
|
||||
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++) {
|
||||
const subAccount = account.subAccounts[k];
|
||||
subAccounts.push(subAccount);
|
||||
|
||||
if (!subAccount.hidden) {
|
||||
visibleSubAccounts.push(subAccount);
|
||||
visibleSubAccountCount++;
|
||||
|
||||
if (firstVisibleSubAccountIndex === -1) {
|
||||
firstVisibleSubAccountIndex = k;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleSubAccounts.length > 0) {
|
||||
allVisibleSubAccounts[account.id] = visibleSubAccounts;
|
||||
if (subAccounts.length > 0) {
|
||||
allSubAccounts[account.id] = subAccounts;
|
||||
allVisibleSubAccountCounts[account.id] = visibleSubAccountCount;
|
||||
allFirstVisibleSubAccountIndexes[account.id] = firstVisibleSubAccountIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (visibleAccounts.length > 0) {
|
||||
if (allAccounts.length > 0) {
|
||||
ret[accountCategory.id] = {
|
||||
category: accountCategory.id,
|
||||
name: accountCategory.name,
|
||||
icon: accountCategory.defaultAccountIconId,
|
||||
visibleAccounts: visibleAccounts,
|
||||
visibleSubAccounts: allVisibleSubAccounts
|
||||
allAccounts: allAccounts,
|
||||
allVisibleAccountCount: allVisibleAccountCount,
|
||||
firstVisibleAccountIndex: firstVisibleAccountIndex,
|
||||
allSubAccounts: allSubAccounts,
|
||||
allVisibleSubAccountCounts: allVisibleSubAccountCounts,
|
||||
allFirstVisibleSubAccountIndexes: allFirstVisibleSubAccountIndexes
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
console.log(ret)
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 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-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 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-menu>
|
||||
</v-btn>
|
||||
@@ -60,51 +74,53 @@
|
||||
<v-expansion-panel :key="accountCategory.category"
|
||||
:value="accountCategory.category"
|
||||
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">
|
||||
<span class="ml-3">{{ $t(accountCategory.name) }}</span>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-list rounded density="comfortable" class="pa-0">
|
||||
<template :key="account.id"
|
||||
v-for="(account, idx) in accountCategory.visibleAccounts">
|
||||
<v-list-item>
|
||||
v-for="(account, idx) in accountCategory.allAccounts">
|
||||
<v-divider v-if="showHidden ? idx > 0 : (!account.hidden ? idx > accountCategory.firstVisibleAccountIndex : false)"/>
|
||||
|
||||
<v-list-item v-if="showHidden || !account.hidden">
|
||||
<template #prepend>
|
||||
<v-checkbox :model-value="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
|
||||
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
|
||||
@update:model-value="selectAccountOrSubAccounts(account, $event)">
|
||||
<template #label>
|
||||
<ItemIcon class="d-flex" icon-type="account"
|
||||
:icon-id="account.icon" :color="account.color"></ItemIcon>
|
||||
<ItemIcon class="d-flex" icon-type="account" :icon-id="account.icon"
|
||||
:color="account.color" :hidden-status="account.hidden"></ItemIcon>
|
||||
<span class="ml-3">{{ account.name }}</span>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
</template>
|
||||
</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-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"
|
||||
v-for="(subAccount, subIdx) in accountCategory.visibleSubAccounts[account.id]">
|
||||
<v-list-item>
|
||||
v-for="(subAccount, subIdx) in accountCategory.allSubAccounts[account.id]">
|
||||
<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>
|
||||
<v-checkbox :model-value="isAccountChecked(subAccount, filterAccountIds)"
|
||||
@update:model-value="selectAccount(subAccount, $event)">
|
||||
<template #label>
|
||||
<ItemIcon class="d-flex" icon-type="account"
|
||||
:icon-id="subAccount.icon" :color="subAccount.color"></ItemIcon>
|
||||
<ItemIcon class="d-flex" icon-type="account" :icon-id="subAccount.icon"
|
||||
:color="subAccount.color" :hidden-status="subAccount.hidden"></ItemIcon>
|
||||
<span class="ml-3">{{ subAccount.name }}</span>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-divider v-if="subIdx !== accountCategory.visibleSubAccounts[account.id].length - 1"/>
|
||||
</template>
|
||||
</v-list>
|
||||
|
||||
<v-divider v-if="idx !== accountCategory.visibleAccounts.length - 1"/>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-expansion-panel-text>
|
||||
@@ -131,7 +147,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
|
||||
import accountConstants from '@/consts/account.js';
|
||||
import { copyObjectTo } from '@/lib/common.js';
|
||||
import {
|
||||
getVisibleCategorizedAccounts,
|
||||
getCategorizedAccountsWithVisibleCount,
|
||||
selectAccountOrSubAccounts,
|
||||
selectAll,
|
||||
selectNone,
|
||||
@@ -144,6 +160,8 @@ import {
|
||||
mdiSelectAll,
|
||||
mdiSelect,
|
||||
mdiSelectInverse,
|
||||
mdiEyeOutline,
|
||||
mdiEyeOffOutline,
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
@@ -161,10 +179,13 @@ export default {
|
||||
loading: true,
|
||||
expandAccountCategories: accountConstants.allCategories.map(category => category.id),
|
||||
filterAccountIds: {},
|
||||
showHidden: false,
|
||||
icons: {
|
||||
selectAll: mdiSelectAll,
|
||||
selectNone: mdiSelect,
|
||||
selectInverse: mdiSelectInverse,
|
||||
show: mdiEyeOutline,
|
||||
hide: mdiEyeOffOutline,
|
||||
more: mdiDotsVertical
|
||||
}
|
||||
}
|
||||
@@ -188,11 +209,11 @@ export default {
|
||||
allAccountTypes() {
|
||||
return accountConstants.allAccountTypes;
|
||||
},
|
||||
allVisibleCategorizedAccounts() {
|
||||
return getVisibleCategorizedAccounts(this.accountsStore.allCategorizedAccounts);
|
||||
allCategorizedAccounts() {
|
||||
return getCategorizedAccountsWithVisibleCount(this.accountsStore.allCategorizedAccounts);
|
||||
},
|
||||
hasAnyAvailableAccount() {
|
||||
return this.accountsStore.allVisibleAccountsCount > 0;
|
||||
return this.accountsStore.allAvailableAccountsCount > 0;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@@ -44,7 +44,8 @@
|
||||
|
||||
<f7-block class="combination-list-wrapper margin-vertical"
|
||||
:key="accountCategory.category"
|
||||
v-for="accountCategory in allVisibleCategorizedAccounts"
|
||||
v-for="accountCategory in allCategorizedAccounts"
|
||||
v-show="showHidden || accountCategory.allVisibleAccountCount > 0"
|
||||
v-else-if="!loading && hasAnyAvailableAccount">
|
||||
<f7-accordion-item :opened="collapseStates[accountCategory.category].opened"
|
||||
@accordion:open="collapseStates[accountCategory.category].opened = true"
|
||||
@@ -66,30 +67,40 @@
|
||||
<f7-accordion-content :style="{ height: collapseStates[accountCategory.category].opened ? 'auto' : '' }">
|
||||
<f7-list strong inset dividers accordion-list class="combination-list-content">
|
||||
<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"
|
||||
:value="account.id"
|
||||
:checked="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
|
||||
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
|
||||
:key="account.id"
|
||||
v-for="account in accountCategory.visibleAccounts"
|
||||
v-for="account in accountCategory.allAccounts"
|
||||
v-show="showHidden || !account.hidden"
|
||||
@change="selectAccountOrSubAccounts">
|
||||
<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 #root>
|
||||
<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
|
||||
:title="subAccount.name"
|
||||
:value="subAccount.id"
|
||||
:checked="isAccountChecked(subAccount, filterAccountIds)"
|
||||
: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">
|
||||
<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>
|
||||
</f7-list-item>
|
||||
</ul>
|
||||
@@ -106,6 +117,10 @@
|
||||
<f7-actions-button @click="selectNone">{{ $t('Select None') }}</f7-actions-button>
|
||||
<f7-actions-button @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 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-button bold close>{{ $t('Cancel') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
@@ -123,7 +138,7 @@ import { useStatisticsStore } from '@/stores/statistics.js';
|
||||
import accountConstants from '@/consts/account.js';
|
||||
import { copyObjectTo } from '@/lib/common.js';
|
||||
import {
|
||||
getVisibleCategorizedAccounts,
|
||||
getCategorizedAccountsWithVisibleCount,
|
||||
selectAccountOrSubAccounts,
|
||||
selectAll,
|
||||
selectNone,
|
||||
@@ -145,6 +160,7 @@ export default {
|
||||
loadingError: null,
|
||||
type: null,
|
||||
filterAccountIds: {},
|
||||
showHidden: false,
|
||||
collapseStates: self.getCollapseStates(),
|
||||
showMoreActionSheet: false
|
||||
}
|
||||
@@ -168,11 +184,11 @@ export default {
|
||||
allAccountTypes() {
|
||||
return accountConstants.allAccountTypes;
|
||||
},
|
||||
allVisibleCategorizedAccounts() {
|
||||
return getVisibleCategorizedAccounts(this.accountsStore.allCategorizedAccounts);
|
||||
allCategorizedAccounts() {
|
||||
return getCategorizedAccountsWithVisibleCount(this.accountsStore.allCategorizedAccounts);
|
||||
},
|
||||
hasAnyAvailableAccount() {
|
||||
return this.accountsStore.allVisibleAccountsCount > 0;
|
||||
return this.accountsStore.allAvailableAccountsCount > 0;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Reference in New Issue
Block a user