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

use popover-close property to close popover

Browse Source
This commit is contained in:
MaysWind
2025-12-05 22:54:05 +08:00
parent eccea273e6
commit ee8aa2bb8e
5 changed files with 104 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/transactions/ListPage.vue
+66 -53
View File
@@ -30,14 +30,14 @@
</f7-subnavbar>
</f7-navbar>
<f7-popover class="chart-data-type-popover-menu"
v-model:opened="showTransactionListPageTypePopover">
<f7-popover class="chart-data-type-popover-menu">
<f7-list dividers>
<f7-list-item :title="tt(type.name)"
<f7-list-item link="#" no-chevron popover-close
:title="tt(type.name)"
:class="{ 'list-item-selected': pageType === type.type }"
:key="type.type"
v-for="type in TransactionListPageType.values()"
@click="changePageType(type.type); showTransactionListPageTypePopover = false">
@click="changePageType(type.type)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="pageType === type.type"></f7-icon>
</template>
@@ -299,11 +299,10 @@
<f7-link href="#" @click="loadMore(false)">{{ tt('Load More') }}</f7-link>
</f7-block>
<f7-popover class="date-popover-menu"
v-model:opened="showDatePopover"
@popover:open="onPopoverOpen">
<f7-popover class="date-popover-menu" @popover:open="onPopoverOpen">
<f7-list dividers>
<f7-list-item :title="dateRange.displayName"
<f7-list-item link="#" no-chevron popover-close
:title="dateRange.displayName"
:class="{ 'list-item-selected': query.dateType === dateRange.type }"
:key="dateRange.type"
v-for="dateRange in allDateRanges"
@@ -337,11 +336,12 @@
@update:modelValue="changeCustomMonthDateFilter">
</month-selection-sheet>
<f7-popover class="category-popover-menu"
v-model:opened="showCategoryPopover"
@popover:open="onPopoverOpen">
<f7-popover class="category-popover-menu" @popover:open="onPopoverOpen">
<f7-list dividers accordion-list>
<f7-list-item :class="{ 'list-item-selected': !query.categoryIds }" :title="tt('All')" @click="changeCategoryFilter('')">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': !query.categoryIds }"
:title="tt('All')"
@click="changeCategoryFilter('')">
<template #media>
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
</template>
@@ -349,7 +349,8 @@
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.categoryIds"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }"
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.categoryIds && queryAllFilterCategoryIdsCount > 1 }"
:title="tt('Multiple Categories')"
@click="filterMultipleCategories()"
v-if="allAvailableCategoriesCount > 0">
@@ -380,7 +381,8 @@
</template>
<f7-accordion-content>
<f7-list dividers class="padding-inline-start">
<f7-list-item :class="{ 'list-item-selected': query.categoryIds === category.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[category.id] }"
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.categoryIds === category.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[category.id] }"
:title="tt('All')" @click="changeCategoryFilter(category.id)">
<template #media>
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
@@ -389,8 +391,9 @@
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.categoryIds === category.id"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :title="subCategory.name"
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.categoryIds === subCategory.id, 'item-in-multiple-selection': queryAllFilterCategoryIdsCount > 1 && queryAllFilterCategoryIds[subCategory.id] }"
:title="subCategory.name"
:key="subCategory.id"
v-for="subCategory in category.subCategories"
v-show="!subCategory.hidden || query.categoryIds === subCategory.id"
@@ -412,11 +415,12 @@
</f7-list>
</f7-popover>
<f7-popover class="account-popover-menu"
v-model:opened="showAccountPopover"
@popover:open="onPopoverOpen">
<f7-popover class="account-popover-menu" @popover:open="onPopoverOpen">
<f7-list dividers>
<f7-list-item :class="{ 'list-item-selected': !query.accountIds }" :title="tt('All')" @click="changeAccountFilter('')">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': !query.accountIds }"
:title="tt('All')"
@click="changeAccountFilter('')">
<template #media>
<f7-icon f7="rectangle_grid_2x2"></f7-icon>
</template>
@@ -424,7 +428,8 @@
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.accountIds"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }"
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.accountIds && queryAllFilterAccountIdsCount > 1 }"
:title="tt('Multiple Accounts')"
@click="filterMultipleAccounts()"
v-if="allAvailableAccountsCount > 0">
@@ -435,8 +440,9 @@
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.accountIds && queryAllFilterAccountIdsCount > 1"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :title="account.name"
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.accountIds === account.id, 'item-in-multiple-selection': queryAllFilterAccountIdsCount > 1 && queryAllFilterAccountIds[account.id] }"
:title="account.name"
:key="account.id"
v-for="account in allAccounts"
v-show="(!account.hidden && (!allAccountsMap[account.parentId] || !allAccountsMap[account.parentId]!.hidden)) || query.accountIds === account.id"
@@ -455,33 +461,47 @@
</f7-list>
</f7-popover>
<f7-popover class="more-popover-menu"
v-model:opened="showMorePopover">
<f7-popover class="more-popover-menu">
<f7-list dividers>
<f7-list-item group-title>
<small>{{ tt('Type') }}</small>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.type === 0 }" :title="tt('All')" @click="changeTypeFilter(0)">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.type === 0 }"
:title="tt('All')"
@click="changeTypeFilter(0)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 0"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.type === 1 }" :title="tt('Modify Balance')" @click="changeTypeFilter(1)">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.type === 1 }"
:title="tt('Modify Balance')"
@click="changeTypeFilter(1)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 1"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.type === 2 }" :title="tt('Income')" @click="changeTypeFilter(2)">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.type === 2 }"
:title="tt('Income')"
@click="changeTypeFilter(2)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 2"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.type === 3 }" :title="tt('Expense')" @click="changeTypeFilter(3)">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.type === 3 }"
:title="tt('Expense')"
@click="changeTypeFilter(3)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 3"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.type === 4 }" :title="tt('Transfer')" @click="changeTypeFilter(4)">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.type === 4 }"
:title="tt('Transfer')"
@click="changeTypeFilter(4)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.type === 4"></f7-icon>
</template>
@@ -490,12 +510,16 @@
<f7-list-item group-title>
<small>{{ tt('Amount') }}</small>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': !query.amountFilter }" :title="tt('All')" @click="changeAmountFilter('')">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': !query.amountFilter }"
:title="tt('All')"
@click="changeAmountFilter('')">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.amountFilter"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :key="filterType.type"
<f7-list-item link="#" no-chevron popover-close
:key="filterType.type"
:class="{ 'list-item-selected': query.amountFilter && query.amountFilter.startsWith(`${filterType.type}:`) }"
:title="tt(filterType.name)"
v-for="filterType in AmountFilterType.values()"
@@ -509,24 +533,32 @@
<f7-list-item group-title>
<small>{{ tt('Tags') }}</small>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': !query.tagFilter }" :title="tt('All')" @click="changeTagFilter('')">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': !query.tagFilter }"
:title="tt('All')"
@click="changeTagFilter('')">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="!query.tagFilter"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.tagFilter === TransactionTagFilter.TransactionNoTagFilterValue }" :title="tt('Without Tags')" @click="changeTagFilter(TransactionTagFilter.TransactionNoTagFilterValue)">
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.tagFilter === TransactionTagFilter.TransactionNoTagFilterValue }"
:title="tt('Without Tags')"
@click="changeTagFilter(TransactionTagFilter.TransactionNoTagFilterValue)">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagFilter === TransactionTagFilter.TransactionNoTagFilterValue"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :class="{ 'list-item-selected': query.tagFilter && queryAllFilterTagIdsCount > 1 }"
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': query.tagFilter && queryAllFilterTagIdsCount > 1 }"
:title="tt('Multiple Tags')" @click="filterMultipleTags()" v-if="allAvailableTagsCount > 0">
<template #after>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="query.tagFilter && queryAllFilterTagIdsCount > 1"></f7-icon>
</template>
</f7-list-item>
<f7-list-item :title="transactionTag.name"
<f7-list-item link="#" no-chevron popover-close
:title="transactionTag.name"
:class="{ 'list-item-selected': queryAllFilterTagIdsCount === 1 && isDefined(queryAllFilterTagIds[transactionTag.id]), 'item-in-multiple-selection': queryAllFilterTagIdsCount > 1 && isDefined(queryAllFilterTagIds[transactionTag.id]) }"
:key="transactionTag.id"
v-for="transactionTag in allTransactionTags"
@@ -697,11 +729,6 @@ const loadingMore = ref<boolean>(false);
const transactionToDelete = ref<Transaction | null>(null);
const transactionInvisibleYearMonths = ref<Record<TextualYearMonth, boolean>>({});
const transactionYearMonthListHeights = ref<Record<TextualYearMonth, number>>({});
const showTransactionListPageTypePopover = ref<boolean>(false);
const showDatePopover = ref<boolean>(false);
const showCategoryPopover = ref<boolean>(false);
const showAccountPopover = ref<boolean>(false);
const showMorePopover = ref<boolean>(false);
const showCustomDateRangeSheet = ref<boolean>(false);
const showCustomMonthSheet = ref<boolean>(false);
const showDeleteActionSheet = ref<boolean>(false);
@@ -1040,7 +1067,6 @@ function changeDateFilter(dateType: number): void {
showCustomDateRangeSheet.value = true;
}
showDatePopover.value = false;
return;
} else if (query.value.dateType === dateType) {
return;
@@ -1074,8 +1100,6 @@ function changeDateFilter(dateType: number): void {
minTime: dateRange.minTime
});
showDatePopover.value = false;
if (changed) {
reload();
}
@@ -1207,8 +1231,6 @@ function changeTypeFilter(type: number): void {
categoryIds: newCategoryFilter
});
showMorePopover.value = false;
if (changed) {
reload();
}
@@ -1223,8 +1245,6 @@ function changeCategoryFilter(categoryIds: string): void {
categoryIds: categoryIds
});
showCategoryPopover.value = false;
if (changed) {
reload();
}
@@ -1249,8 +1269,6 @@ function changeAccountFilter(accountIds: string): void {
accountIds: accountIds
});
showAccountPopover.value = false;
if (changed) {
reload();
}
@@ -1269,8 +1287,6 @@ function changeTagFilter(tagFilter: string): void {
tagFilter: tagFilter
});
showMorePopover.value = false;
if (changed) {
reload();
}
@@ -1300,7 +1316,6 @@ function changeAmountFilter(filterType: string): void {
}
if (filterType) {
showMorePopover.value = false;
props.f7router.navigate(`/transaction/filter/amount?type=${filterType}&value=${query.value.amountFilter}`);
return;
}
@@ -1309,8 +1324,6 @@ function changeAmountFilter(filterType: string): void {
amountFilter: filterType
});
showMorePopover.value = false;
if (changed) {
reload();
}