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

add search box in filter account page / dialog

Browse Source
This commit is contained in:
MaysWind
2025-12-14 17:41:50 +08:00
parent aebd65449b
commit e825323bb0
22 changed files with 180 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/account.ts
+44 -60
View File
@@ -1,7 +1,7 @@
import { itemAndIndex, keys, keysIfValueEquals, values } from '@/core/base.ts';
import { keys, keysIfValueEquals, values } from '@/core/base.ts';
import { AccountType, AccountCategory } from '@/core/account.ts';
import { PARENT_ACCOUNT_CURRENCY_PLACEHOLDER } from '@/consts/currency.ts';
import { type AccountBalance, type CategorizedAccount, type AccountCategoriesWithVisibleCount, Account } from '@/models/account.ts';
import { type AccountBalance, type CategorizedAccount, Account } from '@/models/account.ts';
export function getCategorizedAccountsMap(allAccounts: Account[]): Record<number, CategorizedAccount> {
const ret: Record<number, CategorizedAccount> = {};
@@ -71,67 +71,63 @@ export function getAccountMapByName(allAccounts: Account[]): Record<string, Acco
return ret;
}
export function getCategorizedAccountsWithVisibleCount(categorizedAccountsMap: Record<number, CategorizedAccount>): AccountCategoriesWithVisibleCount[] {
const ret: AccountCategoriesWithVisibleCount[] = [];
export function filterCategorizedAccounts(categorizedAccountsMap: Record<number, CategorizedAccount>, allowAccountName?: string, showHidden?: boolean): Record<number, CategorizedAccount> {
const ret: Record<number, CategorizedAccount> = {};
const allCategories = AccountCategory.values();
const lowercaseFilterContent = allowAccountName ? allowAccountName.toLowerCase() : '';
for (const accountCategory of allCategories) {
const categorizedAccount = categorizedAccountsMap[accountCategory.type];
if (!categorizedAccount || !categorizedAccount.accounts) {
if (!categorizedAccount || !categorizedAccount.accounts || categorizedAccount.accounts.length < 1) {
continue;
}
const allAccounts = categorizedAccount.accounts;
const allSubAccounts: Record<string, Account[]> = {};
const allVisibleSubAccountCounts: Record<string, number> = {};
const allFirstVisibleSubAccountIndexes: Record<string, number> = {};
let allVisibleAccountCount = 0;
let firstVisibleAccountIndex = -1;
const allFilteredAccounts: Account[] = [];
for (const [account, accountIndex] of itemAndIndex(allAccounts)) {
if (!account.hidden) {
allVisibleAccountCount++;
if (firstVisibleAccountIndex === -1) {
firstVisibleAccountIndex = accountIndex;
}
for (const account of categorizedAccount.accounts) {
if (!showHidden && account.hidden) {
continue;
}
if (account.type === AccountType.MultiSubAccounts.type && account.subAccounts) {
let visibleSubAccountCount = 0;
let firstVisibleSubAccountIndex = -1;
const accountMatchesName = !lowercaseFilterContent || account.name.toLowerCase().includes(lowercaseFilterContent);
const filteredSubAccounts: Account[] = [];
for (const [subAccount, subAccountIndex] of itemAndIndex(account.subAccounts)) {
if (!subAccount.hidden) {
visibleSubAccountCount++;
if (firstVisibleSubAccountIndex === -1) {
firstVisibleSubAccountIndex = subAccountIndex;
}
if (account.subAccounts) {
for (const subAccount of account.subAccounts) {
if (!showHidden && subAccount.hidden) {
continue;
}
}
if (account.subAccounts.length > 0) {
allSubAccounts[account.id] = account.subAccounts;
allVisibleSubAccountCounts[account.id] = visibleSubAccountCount;
allFirstVisibleSubAccountIndexes[account.id] = firstVisibleSubAccountIndex;
if (!accountMatchesName && lowercaseFilterContent && !subAccount.name.toLowerCase().includes(lowercaseFilterContent)) {
continue;
}
const filteredSubAccount = subAccount.clone();
filteredSubAccounts.push(filteredSubAccount);
}
}
if (!accountMatchesName && filteredSubAccounts.length < 1) {
continue;
}
const filteredAccount = account.cloneSelf();
if (filteredAccount.type === AccountType.MultiSubAccounts.type) {
filteredAccount.subAccounts = filteredSubAccounts;
}
allFilteredAccounts.push(filteredAccount);
}
if (allAccounts.length > 0) {
ret.push({
category: accountCategory.type,
name: accountCategory.name,
icon: accountCategory.defaultAccountIconId,
allAccounts: allAccounts,
allVisibleAccountCount: allVisibleAccountCount,
firstVisibleAccountIndex: firstVisibleAccountIndex,
allSubAccounts: allSubAccounts,
allVisibleSubAccountCounts: allVisibleSubAccountCounts,
allFirstVisibleSubAccountIndexes: allFirstVisibleSubAccountIndexes
});
if (allFilteredAccounts.length > 0) {
ret[accountCategory.type] = {
category: categorizedAccount.category,
name: categorizedAccount.name,
icon: categorizedAccount.icon,
accounts: allFilteredAccounts
};
}
}
@@ -269,42 +265,30 @@ export function selectAllVisible(filterAccountIds: Record<string, boolean>, allA
}
}
export function selectAll(filterAccountIds: Record<string, boolean>, allAccountsMap: Record<string, Account>, skipHiddenAccount: boolean): void {
export function selectAll(filterAccountIds: Record<string, boolean>, allAccountsMap: Record<string, Account>): void {
for (const accountId of keys(filterAccountIds)) {
const account = allAccountsMap[accountId];
if (skipHiddenAccount && account && account.hidden) {
continue;
}
if (account && account.type === AccountType.SingleAccount.type) {
filterAccountIds[account.id] = false;
}
}
}
export function selectNone(filterAccountIds: Record<string, boolean>, allAccountsMap: Record<string, Account>, skipHiddenAccount: boolean): void {
export function selectNone(filterAccountIds: Record<string, boolean>, allAccountsMap: Record<string, Account>): void {
for (const accountId of keys(filterAccountIds)) {
const account = allAccountsMap[accountId];
if (skipHiddenAccount && account && account.hidden) {
continue;
}
if (account && account.type === AccountType.SingleAccount.type) {
filterAccountIds[account.id] = true;
}
}
}
export function selectInvert(filterAccountIds: Record<string, boolean>, allAccountsMap: Record<string, Account>, skipHiddenAccount: boolean): void {
export function selectInvert(filterAccountIds: Record<string, boolean>, allAccountsMap: Record<string, Account>): void {
for (const accountId of keys(filterAccountIds)) {
const account = allAccountsMap[accountId];
if (skipHiddenAccount && account && account.hidden) {
continue;
}
if (account && account.type === AccountType.SingleAccount.type) {
filterAccountIds[account.id] = !filterAccountIds[account.id];
}
src/locales/de.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Alle auswählen",
"Select None": "Keine auswählen",
"Invert Selection": "Auswahl umkehren",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Alle auf dieser Seite auswählen",
"Select None in This Page": "Keine auf dieser Seite auswählen",
"Invert Selection in This Page": "Auswahl auf dieser Seite umkehren",
src/locales/en.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Select All",
"Select None": "Select None",
"Invert Selection": "Invert Selection",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Select All in This Page",
"Select None in This Page": "Select None in This Page",
"Invert Selection in This Page": "Invert Selection in This Page",
src/locales/es.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Seleccionar Todo",
"Select None": "Seleccionar Nada",
"Invert Selection": "Invertir Selección",
"Select All Visible": "Seleccionar Visibles",
"Select All in This Page": "Seleccionar Todo en Esta Página",
"Select None in This Page": "No Seleccionar Ninguno en Esta Página",
"Invert Selection in This Page": "Invertir Selección en Esta Página",
src/locales/fr.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Tout sélectionner",
"Select None": "Ne rien sélectionner",
"Invert Selection": "Inverser la sélection",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Tout sélectionner dans cette page",
"Select None in This Page": "Ne rien sélectionner dans cette page",
"Invert Selection in This Page": "Inverser la sélection dans cette page",
src/locales/it.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Seleziona tutto",
"Select None": "Deseleziona tutto",
"Invert Selection": "Inverti selezione",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Seleziona tutto in questa pagina",
"Select None in This Page": "Deseleziona tutto in questa pagina",
"Invert Selection in This Page": "Inverti selezione in questa pagina",
src/locales/ja.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "すべて選択",
"Select None": "選択解除",
"Invert Selection": "選択を反転",
"Select All Visible": "Select All Visible",
"Select All in This Page": "このページをすべて選択",
"Select None in This Page": "このページの選択を解除",
"Invert Selection in This Page": "このページの選択を反転",
src/locales/kn.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "ಎಲ್ಲಾ ಆಯ್ಕೆಮಾಡಿ",
"Select None": "ಯಾವುದೂ ಆಯ್ಕೆ ಮಾಡಬೇಡಿ",
"Invert Selection": "ಆಯ್ಕೆಯನ್ನು ತಿರುಗಿಸಿ",
"Select All Visible": "ಗೋಚರಿಸುವ ಎಲ್ಲವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ",
"Select All in This Page": "ಈ ಪುಟದ ಎಲ್ಲವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ",
"Select None in This Page": "ಈ ಪುಟದಲ್ಲಿ ಯಾವುದನ್ನೂ ಆಯ್ಕೆ ಮಾಡಬೇಡಿ",
"Invert Selection in This Page": "ಈ ಪುಟದಲ್ಲಿ ಆಯ್ಕೆಯನ್ನು ತಿರುಗಿಸಿ",
src/locales/ko.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "전체 선택",
"Select None": "선택 해제",
"Invert Selection": "선택 반전",
"Select All Visible": "Select All Visible",
"Select All in This Page": "현재 페이지 전체 선택",
"Select None in This Page": "현재 페이지 선택 해제",
"Invert Selection in This Page": "현재 페이지 선택 반전",
src/locales/nl.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Alles selecteren",
"Select None": "Niets selecteren",
"Invert Selection": "Selectie omkeren",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Alles op deze pagina selecteren",
"Select None in This Page": "Niets op deze pagina selecteren",
"Invert Selection in This Page": "Selectie op deze pagina omkeren",
src/locales/pt_BR.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Selecionar Todos",
"Select None": "Selecionar Nenhum",
"Invert Selection": "Inverter Seleção",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Selecionar Todos nesta Página",
"Select None in This Page": "Selecionar Nenhum nesta Página",
"Invert Selection in This Page": "Inverter Seleção nesta Página",
src/locales/ru.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Выбрать все",
"Select None": "Отменить выбор",
"Invert Selection": "Инвертировать выбор",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Выбрать все на этой странице",
"Select None in This Page": "Отменить выбор на этой странице",
"Invert Selection in This Page": "Инвертировать выбор на этой странице",
src/locales/th.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "เลือกทั้งหมด",
"Select None": "ยกเลิกการเลือกทั้งหมด",
"Invert Selection": "สลับการเลือก",
"Select All Visible": "Select All Visible",
"Select All in This Page": "เลือกทั้งหมดในหน้านี้",
"Select None in This Page": "ยกเลิกการเลือกทั้งหมดในหน้านี้",
"Invert Selection in This Page": "สลับการเลือกในหน้านี้",
src/locales/tr.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Tümünü Seç",
"Select None": "Hiçbirini Seçme",
"Invert Selection": "Seçimi Tersine Çevir",
"Select All Visible": "Görünenlerin Tümünü Seç",
"Select All in This Page": "Bu Sayfadakilerin Tümünü Seç",
"Select None in This Page": "Bu Sayfadakilerin Hiçbirini Seçme",
"Invert Selection in This Page": "Bu Sayfadaki Seçimi Tersine Çevir",
src/locales/uk.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Вибрати все",
"Select None": "Скасувати вибір",
"Invert Selection": "Інвертувати вибір",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Вибрати все на цій сторінці",
"Select None in This Page": "Скасувати вибір на цій сторінці",
"Invert Selection in This Page": "Інвертувати вибір на цій сторінці",
src/locales/vi.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "Chọn tất cả",
"Select None": "Bỏ chọn tất cả",
"Invert Selection": "Đảo ngược lựa chọn",
"Select All Visible": "Select All Visible",
"Select All in This Page": "Chọn tất cả trong trang này",
"Select None in This Page": "Bỏ chọn tất cả trong trang này",
"Invert Selection in This Page": "Đảo ngược lựa chọn trong trang này",
src/locales/zh_Hans.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "全部选择",
"Select None": "全部不选",
"Invert Selection": "反向选择",
"Select All Visible": "全部选择可见",
"Select All in This Page": "本页全选",
"Select None in This Page": "本页不选",
"Invert Selection in This Page": "本页反选",
src/locales/zh_Hant.json
-1
View File
@@ -1551,7 +1551,6 @@
"Select All": "全選",
"Select None": "取消全選",
"Invert Selection": "反向選擇",
"Select All Visible": "全部選擇可見",
"Select All in This Page": "本頁全選",
"Select None in This Page": "取消本頁全選",
"Invert Selection in This Page": "本頁反向選擇",
src/models/account.ts
+21 -12
View File
@@ -349,6 +349,27 @@ export class Account implements AccountInfoResponse {
return subAccountCurrencies;
}
public cloneSelf(): Account {
return new Account(
this.id,
this.name,
this.parentId,
this.category,
this.type,
this.icon,
this.color,
this.currency,
this.balance,
this.comment,
this.displayOrder,
this.visible,
this.balanceTime,
this.creditCardStatementDate,
this.isAsset,
this.isLiability
);
}
public clone(): Account {
return new Account(
this.id,
@@ -658,18 +679,6 @@ export class CategorizedAccountWithDisplayBalance {
}
}
export interface AccountCategoriesWithVisibleCount {
readonly category: number;
readonly name: string;
readonly icon: string;
readonly allAccounts: Account[];
readonly allVisibleAccountCount: number;
readonly firstVisibleAccountIndex: number;
readonly allSubAccounts: Record<string, Account[]>;
readonly allVisibleSubAccountCounts: Record<string, number>;
readonly allFirstVisibleSubAccountIndexes: Record<string, number>;
}
export interface AccountShowingIds {
readonly accounts: Record<number, string>;
readonly subAccounts: Record<string, string>;
src/views/base/settings/AccountFilterSettingPageBase.ts
+30 -9
View File
@@ -7,10 +7,10 @@ import { useStatisticsStore } from '@/stores/statistics.ts';
import { useOverviewStore } from '@/stores/overview.ts';
import { keys, keysIfValueEquals, values } from '@/core/base.ts';
import type { Account, AccountCategoriesWithVisibleCount } from '@/models/account.ts';
import type {Account, CategorizedAccount} from '@/models/account.ts';
import {
getCategorizedAccountsWithVisibleCount,
filterCategorizedAccounts,
selectAccountOrSubAccounts,
isAccountOrSubAccountsAllChecked
} from '@/lib/account.ts';
@@ -26,6 +26,7 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType) {
const loading = ref<boolean>(true);
const showHidden = ref<boolean>(false);
const filterContent = ref<string>('');
const filterAccountIds = ref<Record<string, boolean>>({});
const title = computed<string>(() => {
@@ -48,15 +49,33 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType) {
return type === 'statisticsDefault' || type === 'statisticsCurrent' || type === 'homePageOverview' || type === 'transactionListCurrent';
});
const allCategorizedAccounts = computed<AccountCategoriesWithVisibleCount[]>(() => getCategorizedAccountsWithVisibleCount(accountsStore.allCategorizedAccountsMap));
const hasAnyAvailableAccount = computed<boolean>(() => accountsStore.allAvailableAccountsCount > 0);
const allCategorizedAccounts = computed<Record<number, CategorizedAccount>>(() => filterCategorizedAccounts(accountsStore.allCategorizedAccountsMap, filterContent.value, showHidden.value));
const allVisibleAccountMap = computed<Record<string, Account>>(() => {
const accountMap: Record<string, Account> = {};
const hasAnyVisibleAccount = computed<boolean>(() => {
if (showHidden.value) {
return accountsStore.allAvailableAccountsCount > 0;
} else {
return accountsStore.allVisibleAccountsCount > 0;
for (const accountCategory of values(allCategorizedAccounts.value)) {
for (const account of accountCategory.accounts) {
accountMap[account.id] = account;
if (account.subAccounts) {
for (const subAccount of account.subAccounts) {
accountMap[subAccount.id] = subAccount;
}
}
}
}
return accountMap;
});
const hasAnyAvailableAccount = computed<boolean>(() => accountsStore.allAvailableAccountsCount > 0);
const hasAnyVisibleAccount = computed<boolean>(() => {
for (const accountCategory of values(allCategorizedAccounts.value)) {
if (accountCategory.accounts.length > 0) {
return true;
}
}
return false;
});
function isAccountChecked(account: Account, filterAccountIds: Record<string, boolean>): boolean {
@@ -162,12 +181,14 @@ export function useAccountFilterSettingPageBase(type?: AccountFilterType) {
// states
loading,
showHidden,
filterContent,
filterAccountIds,
// computed states
title,
applyText,
allowHiddenAccount,
allCategorizedAccounts,
allVisibleAccountMap,
hasAnyAvailableAccount,
hasAnyVisibleAccount,
// functions
src/views/desktop/common/cards/AccountFilterSettingsCard.vue
+57 -97
View File
@@ -1,81 +1,48 @@
<template>
<v-card :class="{ 'pa-sm-1 pa-md-2': dialogMode }">
<template #title>
<div class="d-flex align-center justify-center" v-if="dialogMode">
<div class="w-100 text-center">
<h4 class="text-h4">{{ tt(title) }}</h4>
</div>
<v-btn density="comfortable" color="default" variant="text" class="ms-2"
:disabled="loading || !hasAnyAvailableAccount" :icon="true">
<v-icon :icon="mdiDotsVertical" />
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="mdiSelectAll"
:title="tt('Select All')"
:disabled="!hasAnyVisibleAccount"
@click="selectAllAccounts"></v-list-item>
<v-list-item :prepend-icon="mdiSelect"
:title="tt('Select None')"
:disabled="!hasAnyVisibleAccount"
@click="selectNoneAccounts"></v-list-item>
<v-list-item :prepend-icon="mdiSelectInverse"
:title="tt('Invert Selection')"
:disabled="!hasAnyVisibleAccount"
@click="selectInvertAccounts"></v-list-item>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiSelectAll"
:title="tt('Select All Visible')"
:disabled="!hasAnyVisibleAccount"
@click="selectAllVisibleAccounts"
v-if="allowHiddenAccount"></v-list-item>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiEyeOutline"
:title="tt('Show Hidden Accounts')"
v-if="allowHiddenAccount && !showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="mdiEyeOffOutline"
:title="tt('Hide Hidden Accounts')"
v-if="allowHiddenAccount && showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
</div>
<div class="d-flex align-center" v-else-if="!dialogMode">
<span>{{ tt(title) }}</span>
<v-spacer/>
<v-btn density="comfortable" color="default" variant="text" class="ms-2"
:disabled="loading" :icon="true">
<v-icon :icon="mdiDotsVertical" />
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="mdiSelectAll"
:title="tt('Select All')"
:disabled="!hasAnyVisibleAccount"
@click="selectAllAccounts"></v-list-item>
<v-list-item :prepend-icon="mdiSelect"
:title="tt('Select None')"
:disabled="!hasAnyVisibleAccount"
@click="selectNoneAccounts"></v-list-item>
<v-list-item :prepend-icon="mdiSelectInverse"
:title="tt('Invert Selection')"
:disabled="!hasAnyVisibleAccount"
@click="selectInvertAccounts"></v-list-item>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiSelectAll"
:title="tt('Select All Visible')"
:disabled="!hasAnyVisibleAccount"
@click="selectAllVisibleAccounts"
v-if="allowHiddenAccount"></v-list-item>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiEyeOutline"
:title="tt('Show Hidden Accounts')"
v-if="allowHiddenAccount && !showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="mdiEyeOffOutline"
:title="tt('Hide Hidden Accounts')"
v-if="allowHiddenAccount && showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
</div>
<v-row>
<v-col cols="6">
<div :class="{ 'text-h4': dialogMode, 'text-wrap': true }">
{{ tt(title) }}
</div>
</v-col>
<v-col cols="6" class="d-flex align-center">
<v-spacer v-if="!dialogMode"/>
<v-text-field density="compact" :disabled="loading || !hasAnyAvailableAccount"
:prepend-inner-icon="mdiMagnify"
:placeholder="tt('Find account')"
v-model="filterContent"
v-if="dialogMode"></v-text-field>
<v-btn density="comfortable" color="default" variant="text" class="ms-2"
:disabled="loading || !hasAnyAvailableAccount" :icon="true">
<v-icon :icon="mdiDotsVertical" />
<v-menu activator="parent">
<v-list>
<v-list-item :prepend-icon="mdiSelectAll"
:title="tt('Select All')"
:disabled="!hasAnyVisibleAccount"
@click="selectAllAccounts"></v-list-item>
<v-list-item :prepend-icon="mdiSelect"
:title="tt('Select None')"
:disabled="!hasAnyVisibleAccount"
@click="selectNoneAccounts"></v-list-item>
<v-list-item :prepend-icon="mdiSelectInverse"
:title="tt('Invert Selection')"
:disabled="!hasAnyVisibleAccount"
@click="selectInvertAccounts"></v-list-item>
<v-divider class="my-2" v-if="allowHiddenAccount"/>
<v-list-item :prepend-icon="mdiEyeOutline"
:title="tt('Show Hidden Accounts')"
v-if="allowHiddenAccount && !showHidden" @click="showHidden = true"></v-list-item>
<v-list-item :prepend-icon="mdiEyeOffOutline"
:title="tt('Hide Hidden Accounts')"
v-if="allowHiddenAccount && showHidden" @click="showHidden = false"></v-list-item>
</v-list>
</v-menu>
</v-btn>
</v-col>
</v-row>
</template>
<div v-if="loading">
@@ -92,18 +59,17 @@
<v-expansion-panel :key="accountCategory.category"
:value="accountCategory.category"
class="border"
v-for="accountCategory in allCategorizedAccounts"
v-show="showHidden || accountCategory.allVisibleAccountCount > 0">
v-for="accountCategory in allCategorizedAccounts">
<v-expansion-panel-title class="expand-panel-title-with-bg py-0">
<span class="ms-3">{{ tt(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.allAccounts">
<v-divider v-if="showHidden ? idx > 0 : (!account.hidden ? idx > accountCategory.firstVisibleAccountIndex : false)"/>
v-for="(account, idx) in accountCategory.accounts">
<v-divider v-if="idx > 0"/>
<v-list-item v-if="showHidden || !account.hidden">
<v-list-item>
<template #prepend>
<v-checkbox :model-value="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
@@ -117,13 +83,13 @@
</template>
</v-list-item>
<v-divider v-if="(showHidden || !account.hidden) && account.type === AccountType.MultiSubAccounts.type && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id])"/>
<v-divider v-if="account.type === AccountType.MultiSubAccounts.type && account.subAccounts && account.subAccounts.length > 0"/>
<v-list rounded density="comfortable" class="pa-0 ms-4"
v-if="(showHidden || !account.hidden) && account.type === AccountType.MultiSubAccounts.type && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id])">
v-if="account.type === AccountType.MultiSubAccounts.type && account.subAccounts && account.subAccounts.length > 0">
<template :key="subAccount.id"
v-for="(subAccount, subIdx) in accountCategory.allSubAccounts[account.id]">
<v-divider v-if="showHidden ? subIdx > 0 : (!subAccount.hidden ? subIdx > (accountCategory.allFirstVisibleSubAccountIndexes[account.id] as number) : false)"/>
v-for="(subAccount, subIdx) in account.subAccounts">
<v-divider v-if="subIdx > 0"/>
<v-list-item v-if="showHidden || !subAccount.hidden">
<template #prepend>
@@ -148,7 +114,7 @@
<v-card-text class="overflow-y-visible" v-if="dialogMode">
<div class="w-100 d-flex justify-center flex-wrap mt-sm-1 mt-md-2 gap-4">
<v-btn :disabled="!hasAnyVisibleAccount" @click="save">{{ tt(applyText) }}</v-btn>
<v-btn :disabled="!hasAnyAvailableAccount" @click="save">{{ tt(applyText) }}</v-btn>
<v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
</div>
</v-card-text>
@@ -175,7 +141,6 @@ import type { Account } from '@/models/account.ts';
import {
selectAccountOrSubAccounts,
selectAllVisible,
selectAll,
selectNone,
selectInvert,
@@ -184,6 +149,7 @@ import {
} from '@/lib/account.ts';
import {
mdiMagnify,
mdiSelectAll,
mdiSelect,
mdiSelectInverse,
@@ -209,11 +175,13 @@ const { tt } = useI18n();
const {
loading,
showHidden,
filterContent,
filterAccountIds,
title,
applyText,
allowHiddenAccount,
allCategorizedAccounts,
allVisibleAccountMap,
hasAnyAvailableAccount,
hasAnyVisibleAccount,
isAccountChecked,
@@ -262,7 +230,7 @@ function updateAccountSelected(account: Account, value: boolean | null): void {
}
function selectAllAccounts(): void {
selectAll(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
selectAll(filterAccountIds.value, allVisibleAccountMap.value);
if (props.autoSave) {
save();
@@ -270,7 +238,7 @@ function selectAllAccounts(): void {
}
function selectNoneAccounts(): void {
selectNone(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
selectNone(filterAccountIds.value, allVisibleAccountMap.value);
if (props.autoSave) {
save();
@@ -278,15 +246,7 @@ function selectNoneAccounts(): void {
}
function selectInvertAccounts(): void {
selectInvert(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
if (props.autoSave) {
save();
}
}
function selectAllVisibleAccounts(): void {
selectAllVisible(filterAccountIds.value, accountsStore.allAccountsMap);
selectInvert(filterAccountIds.value, allVisibleAccountMap.value);
if (props.autoSave) {
save();
src/views/mobile/settings/AccountFilterSettingsPage.vue
+28 -23
View File
@@ -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': !hasAnyAvailableAccount }" @click="showMoreActionSheet = true"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyVisibleAccount }" @click="save"></f7-link>
<f7-link icon-f7="checkmark_alt" :class="{ 'disabled': !hasAnyAvailableAccount }" @click="save"></f7-link>
</f7-nav-right>
<f7-subnavbar :inner="false">
<f7-searchbar
custom-searchs
:value="filterContent"
:placeholder="tt('Find account')"
:disable-button-text="tt('Cancel')"
@change="filterContent = $event.target.value"
></f7-searchbar>
</f7-subnavbar>
</f7-navbar>
<div class="skeleton-text" v-if="loading">
@@ -45,8 +55,7 @@
<f7-block class="no-margin no-padding" v-show="!loading && hasAnyVisibleAccount">
<f7-block class="combination-list-wrapper margin-vertical"
:key="accountCategory.category"
v-for="accountCategory in allCategorizedAccounts"
v-show="showHidden || accountCategory.allVisibleAccountCount > 0">
v-for="accountCategory in allCategorizedAccounts">
<f7-accordion-item :opened="collapseStates[accountCategory.category]!.opened"
@accordion:open="collapseStates[accountCategory.category]!.opened = true"
@accordion:close="collapseStates[accountCategory.category]!.opened = false">
@@ -65,14 +74,13 @@
<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 === AccountType.MultiSubAccounts.type && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id]) }"
:class="{ 'has-child-list-item': account.type === AccountType.MultiSubAccounts.type && account.subAccounts && account.subAccounts.length > 0 }"
:title="account.name"
:value="account.id"
:checked="isAccountOrSubAccountsAllChecked(account, filterAccountIds)"
:indeterminate="isAccountOrSubAccountsHasButNotAllChecked(account, filterAccountIds)"
:key="account.id"
v-for="account in accountCategory.allAccounts"
v-show="showHidden || !account.hidden"
v-for="account in accountCategory.accounts"
@change="updateAccountOrSubAccountsSelected">
<template #media>
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
@@ -84,14 +92,13 @@
<template #root>
<ul class="padding-inline-start"
v-if="account.type === AccountType.MultiSubAccounts.type && ((showHidden && accountCategory.allSubAccounts[account.id]) || accountCategory.allVisibleSubAccountCounts[account.id])">
v-if="account.type === AccountType.MultiSubAccounts.type && account.subAccounts && account.subAccounts.length > 0">
<f7-list-item checkbox
:title="subAccount.name"
:value="subAccount.id"
:checked="isAccountChecked(subAccount, filterAccountIds)"
:key="subAccount.id"
v-for="subAccount in accountCategory.allSubAccounts[account.id]"
v-show="showHidden || !subAccount.hidden"
v-for="subAccount in account.subAccounts"
@change="updateAccountSelected">
<template #media>
<ItemIcon icon-type="account" :icon-id="subAccount.icon" :color="subAccount.color">
@@ -116,9 +123,6 @@
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleAccount }" @click="selectNoneAccounts">{{ tt('Select None') }}</f7-actions-button>
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleAccount }" @click="selectInvertAccounts">{{ tt('Invert Selection') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group v-if="allowHiddenAccount">
<f7-actions-button :class="{ 'disabled': !hasAnyVisibleAccount }" @click="selectAllVisibleAccounts">{{ tt('Select All Visible') }}</f7-actions-button>
</f7-actions-group>
<f7-actions-group v-if="allowHiddenAccount">
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Accounts') }}</f7-actions-button>
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Accounts') }}</f7-actions-button>
@@ -146,7 +150,6 @@ import { useAccountsStore } from '@/stores/account.ts';
import { AccountType, AccountCategory } from '@/core/account.ts';
import {
selectAccountOrSubAccounts,
selectAllVisible,
selectAll,
selectNone,
selectInvert,
@@ -171,10 +174,12 @@ const { showToast, routeBackOnError } = useI18nUIComponents();
const {
loading,
showHidden,
filterContent,
filterAccountIds,
title,
allowHiddenAccount,
allCategorizedAccounts,
allVisibleAccountMap,
hasAnyAvailableAccount,
hasAnyVisibleAccount,
isAccountChecked,
@@ -224,7 +229,7 @@ function init(): void {
function updateAccountOrSubAccountsSelected(e: Event): void {
const target = e.target as HTMLInputElement;
const accountId = target.value;
const account = accountsStore.allAccountsMap[accountId];
const account = allVisibleAccountMap.value[accountId];
if (!account) {
return;
@@ -236,7 +241,7 @@ function updateAccountOrSubAccountsSelected(e: Event): void {
function updateAccountSelected(e: Event): void {
const target = e.target as HTMLInputElement;
const accountId = target.value;
const account = accountsStore.allAccountsMap[accountId];
const account = allVisibleAccountMap.value[accountId];
if (!account) {
return;
@@ -246,19 +251,15 @@ function updateAccountSelected(e: Event): void {
}
function selectAllAccounts(): void {
selectAll(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
selectAll(filterAccountIds.value, allVisibleAccountMap.value);
}
function selectNoneAccounts(): void {
selectNone(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
selectNone(filterAccountIds.value, allVisibleAccountMap.value);
}
function selectInvertAccounts(): void {
selectInvert(filterAccountIds.value, accountsStore.allAccountsMap, !allowHiddenAccount.value);
}
function selectAllVisibleAccounts(): void {
selectAllVisible(filterAccountIds.value, accountsStore.allAccountsMap);
selectInvert(filterAccountIds.value, allVisibleAccountMap.value);
}
function save(): void {
@@ -266,6 +267,10 @@ function save(): void {
props.f7router.back();
}
function onPageBeforeIn(): void {
filterContent.value = '';
}
function onPageAfterIn(): void {
routeBackOnError(props.f7router, loadingError);
}