From 387df07659b99d43fd6e5d5d91517e9d8ccf4732 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 24 May 2025 22:25:23 +0800
Subject: [PATCH] fix transaction list not display after expand the month
 transaction list

---
 src/stores/transaction.ts                  |  6 ++--
 src/views/mobile/transactions/ListPage.vue | 41 ++++++++++++----------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/stores/transaction.ts b/src/stores/transaction.ts
index e7f0a692..d67f2bdf 100644
--- a/src/stores/transaction.ts
+++ b/src/stores/transaction.ts
@@ -1274,9 +1274,9 @@ export const useTransactionsStore = defineStore('transactions', () => {
         return services.getTransactionPictureUrlWithToken(pictureInfo.originalUrl, disableBrowserCache);
     }
 
-    function collapseMonthInTransactionList({ month, collapse }: { month: TransactionMonthList, collapse: boolean }): void {
-        if (month) {
-            month.opened = !collapse;
+    function collapseMonthInTransactionList({ monthList, collapse }: { monthList: TransactionMonthList, collapse: boolean }): void {
+        if (monthList) {
+            monthList.opened = !collapse;
         }
     }
 
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index 193f058e..72d3c9a3 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -177,7 +177,9 @@
                   :key="transactionMonthList.yearMonth" v-for="(transactionMonthList) in transactions">
             <f7-accordion-item :opened="transactionMonthList.opened"
                                @accordion:open="collapseTransactionMonthList(transactionMonthList, false)"
-                               @accordion:close="collapseTransactionMonthList(transactionMonthList, true)">
+                               @accordion:opened="onTransactionMonthListCollapseStateChanged"
+                               @accordion:close="collapseTransactionMonthList(transactionMonthList, true)"
+                               @accordion:closed="onTransactionMonthListCollapseStateChanged">
                 <f7-block-title :id="getTransactionMonthTitleDomId(transactionMonthList.yearMonth)" v-if="pageType === TransactionListPageType.List.type">
                     <f7-accordion-toggle>
                         <f7-list strong inset dividers media-list
@@ -202,13 +204,15 @@
                         </f7-list>
                     </f7-accordion-toggle>
                 </f7-block-title>
-                <f7-accordion-content :style="{ height: getTransactionMonthListHeight(transactionMonthList) }">
+                <f7-accordion-content>
+                    <f7-block :style="{ height: getTransactionMonthListHeight(transactionMonthList) }"
+                              v-if="isTransactionMonthListInvisible(transactionMonthList)" />
                     <f7-list strong inset dividers media-list accordion-list
                              class="transaction-info-list transaction-month-list combination-list-content"
                              :id="getTransactionMonthListDomId(transactionMonthList.yearMonth)"
                              v-if="!isTransactionMonthListInvisible(transactionMonthList)"
                     >
-                        <f7-list-item swipeout chevron-center
+                        <f7-list-item swipeout chevron-center accordion-item
                                       class="transaction-info"
                                       :id="getTransactionDomId(transaction)"
                                       :link="transaction.type !== TransactionType.ModifyBalance ? `/transaction/detail?id=${transaction.id}&type=${transaction.type}` : null"
@@ -807,14 +811,14 @@ function getTransactionDomId(transaction: Transaction): string {
 }
 
 function isTransactionMonthListInvisible(transactionMonthList: TransactionMonthList): boolean {
-    if (!transactionMonthList.opened) {
-        return true;
-    }
-
     if (!transactionYearMonthListHeights.value[transactionMonthList.yearMonth]) {
         return false;
     }
 
+    if (!transactionMonthList.opened) {
+        return true;
+    }
+
     if (transactionInvisibleYearMonths.value[transactionMonthList.yearMonth]) {
         return true;
     }
@@ -823,10 +827,6 @@ function isTransactionMonthListInvisible(transactionMonthList: TransactionMonthL
 }
 
 function getTransactionMonthListHeight(transactionMonthList: TransactionMonthList): string {
-    if (!transactionMonthList.opened) {
-        return '';
-    }
-
     if (isTransactionMonthListInvisible(transactionMonthList)) {
         return transactionYearMonthListHeights.value[transactionMonthList.yearMonth] + 'px';
     }
@@ -1407,17 +1407,15 @@ function remove(transaction: Transaction | null, confirm: boolean): void {
     });
 }
 
-function collapseTransactionMonthList(month: TransactionMonthList, collapse: boolean): void {
+function collapseTransactionMonthList(monthList: TransactionMonthList, collapse: boolean): void {
     transactionsStore.collapseMonthInTransactionList({
-        month: month,
+        monthList: monthList,
         collapse: collapse
     });
 
-    nextTick(() => {
-        return setTransactionMonthListHeights(false);
-    }).then(() => {
-        setTransactionInvisibleYearMonthList();
-    });
+    if (!collapse && transactionInvisibleYearMonths.value[monthList.yearMonth]) {
+        delete transactionInvisibleYearMonths.value[monthList.yearMonth];
+    }
 }
 
 function onPopoverOpen(event: { $el: Framework7Dom }): void {
@@ -1443,6 +1441,13 @@ function onScroll(): void {
     setTransactionInvisibleYearMonthList();
 }
 
+function onTransactionMonthListCollapseStateChanged(): void {
+    setTransactionMonthListHeights(false)
+        .then(() => {
+            setTransactionInvisibleYearMonthList();
+        });
+}
+
 onMounted(() => {
     window.addEventListener('resize', onResize);
     onInfiniteScrolling(onScroll);