From d7518147b41ee9c49a05818f7fe8e09837600db0 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 6 Feb 2021 21:09:20 +0800
Subject: [PATCH] support collapsing list in account/category filter page

---
 src/Mobile.vue                                |   6 +
 .../statistics/AccountFilterSettings.vue      | 115 ++++++++++++------
 .../statistics/CategoryFilterSettings.vue     | 106 ++++++++++------
 src/views/mobile/transactions/List.vue        |  10 +-
 4 files changed, 152 insertions(+), 85 deletions(-)

diff --git a/src/Mobile.vue b/src/Mobile.vue
index 9d9748c3..c61f53fb 100644
--- a/src/Mobile.vue
+++ b/src/Mobile.vue
@@ -194,6 +194,12 @@ i.icon.la, i.icon.las, i.icon.lab {
     opacity: 0.6;
 }
 
+.card-chevron-icon {
+    color: var(--f7-list-chevron-icon-color);
+    font-size: var(--f7-list-chevron-icon-font-size);
+    font-weight: bolder;
+}
+
 .nested-list-item .item-title {
     width: 100%;
 }
diff --git a/src/views/mobile/statistics/AccountFilterSettings.vue b/src/views/mobile/statistics/AccountFilterSettings.vue
index 7b2d9963..51d419ff 100644
--- a/src/views/mobile/statistics/AccountFilterSettings.vue
+++ b/src/views/mobile/statistics/AccountFilterSettings.vue
@@ -11,9 +11,12 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small class="card-header-content">
-                    <span>Account Category</span>
-                </small>
+                <f7-accordion-toggle class="full-line">
+                    <small class="card-header-content">
+                        <span>Account Category</span>
+                    </small>
+                    <f7-icon class="card-chevron-icon float-right" f7="chevron_up"></f7-icon>
+                </f7-accordion-toggle>
             </f7-card-header>
 
             <f7-card-content class="no-safe-areas" :padding="false">
@@ -27,9 +30,12 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small class="card-header-content">
-                    <span>Account Category 2</span>
-                </small>
+                <f7-accordion-toggle class="full-line">
+                    <small class="card-header-content">
+                        <span>Account Category 2</span>
+                    </small>
+                    <f7-icon class="card-chevron-icon float-right" f7="chevron_up"></f7-icon>
+                </f7-accordion-toggle>
             </f7-card-header>
 
             <f7-card-content class="no-safe-areas" :padding="false">
@@ -46,43 +52,52 @@
 
         <f7-block class="no-padding no-margin" v-if="!loading">
             <f7-card v-for="accountCategory in allAccountCategories" :key="accountCategory.id" v-show="hasShownAccount(accountCategory)">
-                <f7-card-header>
-                    <small class="card-header-content">
-                        <span>{{ $t(accountCategory.name) }}</span>
-                    </small>
-                </f7-card-header>
-                <f7-card-content class="no-safe-areas" :padding="false">
-                    <f7-list v-if="categorizedAccounts[accountCategory.id]">
-                        <f7-list-item checkbox v-for="account in categorizedAccounts[accountCategory.id].accounts"
-                                      v-show="!account.hidden"
-                                      :key="account.id"
-                                      :title="account.name"
-                                      :value="account.id"
-                                      :checked="account | accountOrSubAccountsAllChecked(filterAccountIds)"
-                                      :indeterminate="account | accountOrSubAccountsHasButNotAllChecked(filterAccountIds)"
-                                      @change="selectAccountOrSubAccounts">
-                            <f7-icon slot="media"
-                                     :icon="account.icon | accountIcon"
-                                     :style="account.color | accountIconStyle('var(--default-icon-color)')">
-                            </f7-icon>
-
-                            <ul slot="root" v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts" class="padding-left">
-                                <f7-list-item checkbox v-for="subAccount in account.subAccounts"
-                                              v-show="!subAccount.hidden"
-                                              :key="subAccount.id"
-                                              :title="subAccount.name"
-                                              :value="subAccount.id"
-                                              :checked="subAccount | accountChecked(filterAccountIds) "
-                                              @change="selectAccount">
+                <f7-accordion-item :opened="collapseStates[accountCategory.id].opened"
+                                   @accordion:open="collapseStates[accountCategory.id].opened = true"
+                                   @accordion:close="collapseStates[accountCategory.id].opened = false">
+                    <f7-card-header>
+                        <f7-accordion-toggle class="full-line">
+                            <small class="card-header-content">
+                                <span>{{ $t(accountCategory.name) }}</span>
+                            </small>
+                            <f7-icon class="card-chevron-icon float-right" :f7="collapseStates[accountCategory.id].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
+                        </f7-accordion-toggle>
+                    </f7-card-header>
+                    <f7-card-content class="no-safe-areas" :padding="false" accordion-list>
+                        <f7-accordion-content :style="{ height: collapseStates[accountCategory.id].opened ? 'auto' : '' }">
+                            <f7-list v-if="categorizedAccounts[accountCategory.id]">
+                                <f7-list-item checkbox v-for="account in categorizedAccounts[accountCategory.id].accounts"
+                                              v-show="!account.hidden"
+                                              :key="account.id"
+                                              :title="account.name"
+                                              :value="account.id"
+                                              :checked="account | accountOrSubAccountsAllChecked(filterAccountIds)"
+                                              :indeterminate="account | accountOrSubAccountsHasButNotAllChecked(filterAccountIds)"
+                                              @change="selectAccountOrSubAccounts">
                                     <f7-icon slot="media"
-                                             :icon="subAccount.icon | accountIcon"
-                                             :style="subAccount.color | accountIconStyle('var(--default-icon-color)')">
+                                             :icon="account.icon | accountIcon"
+                                             :style="account.color | accountIconStyle('var(--default-icon-color)')">
                                     </f7-icon>
+
+                                    <ul slot="root" v-if="account.type === $constants.account.allAccountTypes.MultiSubAccounts" class="padding-left">
+                                        <f7-list-item checkbox v-for="subAccount in account.subAccounts"
+                                                      v-show="!subAccount.hidden"
+                                                      :key="subAccount.id"
+                                                      :title="subAccount.name"
+                                                      :value="subAccount.id"
+                                                      :checked="subAccount | accountChecked(filterAccountIds) "
+                                                      @change="selectAccount">
+                                            <f7-icon slot="media"
+                                                     :icon="subAccount.icon | accountIcon"
+                                                     :style="subAccount.color | accountIconStyle('var(--default-icon-color)')">
+                                            </f7-icon>
+                                        </f7-list-item>
+                                    </ul>
                                 </f7-list-item>
-                            </ul>
-                        </f7-list-item>
-                    </f7-list>
-                </f7-card-content>
+                            </f7-list>
+                        </f7-accordion-content>
+                    </f7-card-content>
+                </f7-accordion-item>
             </f7-card>
         </f7-block>
 
@@ -102,10 +117,13 @@
 <script>
 export default {
     data: function () {
+        const self = this;
+
         return {
             loading: true,
             modifyDefault: false,
             filterAccountIds: {},
+            collapseStates: self.getCollapseStates(),
             showMoreActionSheet: false
         }
     },
@@ -274,6 +292,23 @@ export default {
             }
 
             return false;
+        },
+        getCollapseStates() {
+            const collapseStates = {};
+
+            for (let categoryType in this.$constants.account.allCategories) {
+                if (!Object.prototype.hasOwnProperty.call(this.$constants.account.allCategories, categoryType)) {
+                    continue;
+                }
+
+                const accountCategory = this.$constants.account.allCategories[categoryType];
+
+                collapseStates[accountCategory.id] = {
+                    opened: true
+                };
+            }
+
+            return collapseStates;
         }
     },
     filters: {
diff --git a/src/views/mobile/statistics/CategoryFilterSettings.vue b/src/views/mobile/statistics/CategoryFilterSettings.vue
index fa11095a..e74b0b0f 100644
--- a/src/views/mobile/statistics/CategoryFilterSettings.vue
+++ b/src/views/mobile/statistics/CategoryFilterSettings.vue
@@ -11,9 +11,12 @@
 
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>
-                <small class="card-header-content">
-                    <span>Transaction Category</span>
-                </small>
+                <f7-accordion-toggle class="full-line">
+                    <small class="card-header-content">
+                        <span>Transaction Category</span>
+                    </small>
+                    <f7-icon class="card-chevron-icon float-right" f7="chevron_up"></f7-icon>
+                </f7-accordion-toggle>
             </f7-card-header>
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list>
@@ -51,43 +54,52 @@
 
         <f7-block class="no-padding no-margin" v-if="!loading">
             <f7-card v-for="(categories, categoryType) in allTransactionCategories" :key="categoryType">
-                <f7-card-header>
-                    <small class="card-header-content">
-                        <span>{{ categoryType | categoryTypeName($constants.category.allCategoryTypes) | localized }}</span>
-                    </small>
-                </f7-card-header>
-                <f7-card-content class="no-safe-areas" :padding="false">
-                    <f7-list>
-                        <f7-list-item checkbox v-for="category in categories"
-                                      v-show="!category.hidden"
-                                      :key="category.id"
-                                      :title="category.name"
-                                      :value="category.id"
-                                      :checked="category | subCategoriesAllChecked(filterCategoryIds)"
-                                      :indeterminate="category | subCategoriesHasButNotAllChecked(filterCategoryIds)"
-                                      @change="selectSubCategories">
-                            <f7-icon slot="media"
-                                     :icon="category.icon | categoryIcon"
-                                     :style="category.color | categoryIconStyle('var(--default-icon-color)')">
-                            </f7-icon>
-
-                            <ul slot="root" v-if="category.subCategories.length" class="padding-left">
-                                <f7-list-item checkbox v-for="subCategory in category.subCategories"
-                                              v-show="!subCategory.hidden"
-                                              :key="subCategory.id"
-                                              :title="subCategory.name"
-                                              :value="subCategory.id"
-                                              :checked="subCategory | categoryChecked(filterCategoryIds) "
-                                              @change="selectCategory">
+                <f7-accordion-item :opened="collapseStates[categoryType].opened"
+                                   @accordion:open="collapseStates[categoryType].opened = true"
+                                   @accordion:close="collapseStates[categoryType].opened = false">
+                    <f7-card-header>
+                        <f7-accordion-toggle class="full-line">
+                            <small class="card-header-content">
+                                <span>{{ categoryType | categoryTypeName($constants.category.allCategoryTypes) | localized }}</span>
+                            </small>
+                            <f7-icon class="card-chevron-icon float-right" :f7="collapseStates[categoryType].opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
+                        </f7-accordion-toggle>
+                    </f7-card-header>
+                    <f7-card-content class="no-safe-areas" :padding="false" accordion-list>
+                        <f7-accordion-content :style="{ height: collapseStates[categoryType].opened ? 'auto' : '' }">
+                            <f7-list>
+                                <f7-list-item checkbox v-for="category in categories"
+                                              v-show="!category.hidden"
+                                              :key="category.id"
+                                              :title="category.name"
+                                              :value="category.id"
+                                              :checked="category | subCategoriesAllChecked(filterCategoryIds)"
+                                              :indeterminate="category | subCategoriesHasButNotAllChecked(filterCategoryIds)"
+                                              @change="selectSubCategories">
                                     <f7-icon slot="media"
-                                             :icon="subCategory.icon | categoryIcon"
-                                             :style="subCategory.color | categoryIconStyle('var(--default-icon-color)')">
+                                             :icon="category.icon | categoryIcon"
+                                             :style="category.color | categoryIconStyle('var(--default-icon-color)')">
                                     </f7-icon>
+
+                                    <ul slot="root" v-if="category.subCategories.length" class="padding-left">
+                                        <f7-list-item checkbox v-for="subCategory in category.subCategories"
+                                                      v-show="!subCategory.hidden"
+                                                      :key="subCategory.id"
+                                                      :title="subCategory.name"
+                                                      :value="subCategory.id"
+                                                      :checked="subCategory | categoryChecked(filterCategoryIds) "
+                                                      @change="selectCategory">
+                                            <f7-icon slot="media"
+                                                     :icon="subCategory.icon | categoryIcon"
+                                                     :style="subCategory.color | categoryIconStyle('var(--default-icon-color)')">
+                                            </f7-icon>
+                                        </f7-list-item>
+                                    </ul>
                                 </f7-list-item>
-                            </ul>
-                        </f7-list-item>
-                    </f7-list>
-                </f7-card-content>
+                            </f7-list>
+                        </f7-accordion-content>
+                    </f7-card-content>
+                </f7-accordion-item>
             </f7-card>
         </f7-block>
 
@@ -107,10 +119,13 @@
 <script>
 export default {
     data: function () {
+        const self = this;
+
         return {
             loading: true,
             modifyDefault: false,
             filterCategoryIds: {},
+            collapseStates: self.getCollapseStates(),
             showMoreActionSheet: false
         }
     },
@@ -251,6 +266,23 @@ export default {
                     this.filterCategoryIds[category.id] = !this.filterCategoryIds[category.id];
                 }
             }
+        },
+        getCollapseStates() {
+            const collapseStates = {};
+
+            for (let categoryTypeField in this.$constants.category.allCategoryTypes) {
+                if (!Object.prototype.hasOwnProperty.call(this.$constants.category.allCategoryTypes, categoryTypeField)) {
+                    continue;
+                }
+
+                const categoryType = this.$constants.category.allCategoryTypes[categoryTypeField];
+
+                collapseStates[categoryType] = {
+                    opened: true
+                };
+            }
+
+            return collapseStates;
         }
     },
     filters: {
diff --git a/src/views/mobile/transactions/List.vue b/src/views/mobile/transactions/List.vue
index 6a750a48..fbaa886f 100644
--- a/src/views/mobile/transactions/List.vue
+++ b/src/views/mobile/transactions/List.vue
@@ -47,7 +47,7 @@
                         <span>0.00 USD</span>
                         <span>0.00 USD</span>
                     </small>
-                    <f7-icon class="transaction-month-card-chevron-icon float-right" f7="chevron_up"></f7-icon>
+                    <f7-icon class="card-chevron-icon float-right" f7="chevron_up"></f7-icon>
                 </div>
             </f7-card-header>
             <f7-card-content class="no-safe-areas" :padding="false">
@@ -147,7 +147,7 @@
                                 {{ transactionMonthList.totalAmount.expense | currency(defaultCurrency) | expense(transactionMonthList.totalAmount.incompleteExpense) }}
                             </span>
                         </small>
-                        <f7-icon class="transaction-month-card-chevron-icon float-right" :f7="transactionMonthList.opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
+                        <f7-icon class="card-chevron-icon float-right" :f7="transactionMonthList.opened ? 'chevron_up' : 'chevron_down'"></f7-icon>
                     </f7-accordion-toggle>
                 </f7-card-header>
                 <f7-card-content class="no-safe-areas" :padding="false" accordion-list>
@@ -778,12 +778,6 @@ export default {
 </script>
 
 <style>
-.transaction-month-card-chevron-icon {
-    color: var(--f7-list-chevron-icon-color);
-    font-size: var(--f7-list-chevron-icon-font-size);
-    font-weight: bolder;
-}
-
 .transaction-amount-statistics > span {
     margin-left: 4px;
 }