From 173215d4c17cb1b5755fb39cb4e1d4139e945ab7 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 21 Dec 2020 01:22:44 +0800
Subject: [PATCH] modify account selection sheet

---
 .../TwoColumnListItemSelectionSheet.vue       | 64 +++++++++++---
 src/lib/utils.js                              | 60 ++++++++++++--
 src/views/mobile/accounts/List.vue            | 57 +++++++------
 src/views/mobile/transactions/Edit.vue        | 83 ++++++++-----------
 4 files changed, 171 insertions(+), 93 deletions(-)

diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index e829ced3..f3adec23 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -15,7 +15,7 @@
                                           v-for="item in items"
                                           :key="primaryKeyField ? item[primaryKeyField] : item"
                                           :value="primaryValueField ? item[primaryValueField] : item"
-                                          :title="primaryTitleField ? item[primaryTitleField] : item"
+                                          :title="primaryTitleField ? (primaryTitleI18n ? $t(item[primaryTitleField]) : item[primaryTitleField]) : (primaryTitleI18n ? $t(item) : item)"
                                           @click="onPrimaryItemClicked(item)">
                                 <f7-icon slot="media"
                                          :icon="item[primaryIconField] | icon(primaryIconType)"
@@ -33,7 +33,7 @@
                                           v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
                                           :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
                                           :value="secondaryValueField ? subItem[secondaryValueField] : subItem"
-                                          :title="secondaryTitleField ? subItem[secondaryTitleField] : subItem"
+                                          :title="secondaryTitleField ? (secondaryTitleI18n ? $t(subItem[secondaryTitleField]) : subItem[secondaryTitleField]) : (secondaryTitleI18n ? $t(subItem) : subItem)"
                                           @click="onSecondaryItemClicked(subItem)">
                                 <f7-icon slot="media"
                                          :icon="subItem[secondaryIconField] | icon(secondaryIconType)"
@@ -56,6 +56,7 @@ export default {
         'primaryKeyField',
         'primaryValueField',
         'primaryTitleField',
+        'primaryTitleI18n',
         'primaryIconField',
         'primaryIconType',
         'primaryColorField',
@@ -63,6 +64,7 @@ export default {
         'secondaryKeyField',
         'secondaryValueField',
         'secondaryTitleField',
+        'secondaryTitleI18n',
         'secondaryIconField',
         'secondaryIconType',
         'secondaryColorField',
@@ -80,10 +82,25 @@ export default {
     computed: {
         selectedPrimaryItem() {
             if (this.primaryValueField) {
-                for (let i = 0; i < this.items.length; i++) {
-                    const item = this.items[i];
-                    if (this.currentPrimaryValue === item[this.primaryValueField]) {
-                        return item;
+                if (this.$utilities.isArray(this.items)) {
+                    for (let i = 0; i < this.items.length; i++) {
+                        const item = this.items[i];
+
+                        if (this.currentPrimaryValue === item[this.primaryValueField]) {
+                            return item;
+                        }
+                    }
+                } else {
+                    for (let field in this.items) {
+                        if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
+                            continue;
+                        }
+
+                        const item = this.items[field];
+
+                        if (this.currentPrimaryValue === item[this.primaryValueField]) {
+                            return item;
+                        }
                     }
                 }
             } else {
@@ -125,21 +142,42 @@ export default {
                 return this.currentSecondaryValue === subItem;
             }
         },
+        isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue) {
+            for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
+                const secondaryItem = primaryItem[this.primarySubItemsField][i];
+
+                if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === secondaryValue) {
+                    return true;
+                } else if (!this.secondaryValueField && secondaryItem === secondaryValue) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
         getPrimaryValueBySecondaryValue(secondaryValue) {
             if (this.primarySubItemsField) {
-                for (let i = 0; i < this.items.length; i++) {
-                    const primaryItem = this.items[i];
+                if (this.$utilities.isArray(this.items)) {
+                    for (let i = 0; i < this.items.length; i++) {
+                        const primaryItem = this.items[i];
 
-                    for (let j = 0; j < primaryItem[this.primarySubItemsField].length; j++) {
-                        const secondaryItem = primaryItem[this.primarySubItemsField][j];
-
-                        if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === secondaryValue) {
+                        if (this.isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue)) {
                             if (this.primaryValueField) {
                                 return primaryItem[this.primaryValueField];
                             } else {
                                 return primaryItem;
                             }
-                        } else if (!this.secondaryValueField && secondaryItem === secondaryValue) {
+                        }
+                    }
+                } else {
+                    for (let field in this.items) {
+                        if (!Object.prototype.hasOwnProperty.call(this.items, field)) {
+                            continue;
+                        }
+
+                        const primaryItem = this.items[field];
+
+                        if (this.isPrimaryItemHasSecondaryValue(primaryItem, secondaryValue)) {
                             if (this.primaryValueField) {
                                 return primaryItem[this.primaryValueField];
                             } else {
diff --git a/src/lib/utils.js b/src/lib/utils.js
index c8be80c5..4dbed2d6 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -265,6 +265,35 @@ function parseUserAgent(ua) {
     };
 }
 
+function getCategoryInfo(categoryId) {
+    for (let i = 0; i < accountConstants.allCategories.length; i++) {
+        if (accountConstants.allCategories[i].id === categoryId) {
+            return accountConstants.allCategories[i];
+        }
+    }
+
+    return null;
+}
+
+function getPlainAccounts(allAccounts) {
+    const ret = [];
+
+    for (let i = 0; i < allAccounts.length; i++) {
+        const account = allAccounts[i];
+
+        if (account.type === accountConstants.allAccountTypes.SingleAccount) {
+            ret.push(account);
+        } else if (account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
+            for (let j = 0; j < account.subAccounts.length; j++) {
+                const subAccount = account.subAccounts[j];
+                ret.push(subAccount);
+            }
+        }
+    }
+
+    return ret;
+}
+
 function getCategorizedAccounts(allAccounts) {
     const ret = {};
 
@@ -272,11 +301,22 @@ function getCategorizedAccounts(allAccounts) {
         const account = allAccounts[i];
 
         if (!ret[account.category]) {
-            ret[account.category] = [];
+            const categoryInfo = getCategoryInfo(account.category);
+
+            if (categoryInfo) {
+                ret[account.category] = {
+                    category: account.category,
+                    name: categoryInfo.name,
+                    icon: categoryInfo.defaultAccountIconId,
+                    accounts: []
+                };
+            }
         }
 
-        const accountList = ret[account.category];
-        accountList.push(account);
+        if (ret[account.category]) {
+            const accountList = ret[account.category].accounts;
+            accountList.push(account);
+        }
     }
 
     return ret;
@@ -288,7 +328,11 @@ function getAccountByAccountId(categorizedAccounts, accountId) {
             continue;
         }
 
-        const accountList = categorizedAccounts[category];
+        if (!categorizedAccounts[category].accounts) {
+            continue;
+        }
+
+        const accountList = categorizedAccounts[category].accounts;
 
         for (let i = 0; i < accountList.length; i++) {
             if (accountList[i].id === accountId) {
@@ -307,12 +351,12 @@ function getAllFilteredAccountsBalance(categorizedAccounts, accountFilter) {
     for (let categoryIdx = 0; categoryIdx < allAccountCategories.length; categoryIdx++) {
         const accountCategory = allAccountCategories[categoryIdx];
 
-        if (!categorizedAccounts[accountCategory.id]) {
+        if (!categorizedAccounts[accountCategory.id] || !categorizedAccounts[accountCategory.id].accounts) {
             continue;
         }
 
-        for (let accountIdx = 0; accountIdx < categorizedAccounts[accountCategory.id].length; accountIdx++) {
-            const account = categorizedAccounts[accountCategory.id][accountIdx];
+        for (let accountIdx = 0; accountIdx < categorizedAccounts[accountCategory.id].accounts.length; accountIdx++) {
+            const account = categorizedAccounts[accountCategory.id].accounts[accountIdx];
 
             if (account.hidden || !accountFilter(account)) {
                 continue;
@@ -362,6 +406,8 @@ export default {
     stringToArrayBuffer,
     generateRandomString,
     parseUserAgent,
+    getCategoryInfo,
+    getPlainAccounts,
     getCategorizedAccounts,
     getAccountByAccountId,
     getAllFilteredAccountsBalance,
diff --git a/src/views/mobile/accounts/List.vue b/src/views/mobile/accounts/List.vue
index 71780a31..37ffb8ef 100644
--- a/src/views/mobile/accounts/List.vue
+++ b/src/views/mobile/accounts/List.vue
@@ -119,7 +119,7 @@
             </f7-card-header>
             <f7-card-content class="no-safe-areas" :padding="false">
                 <f7-list sortable :sortable-enabled="sortable" @sortable:sort="onSort">
-                    <f7-list-item v-for="account in accounts[accountCategory.id]" v-show="showHidden || !account.hidden"
+                    <f7-list-item v-for="account in categorizedAccounts[accountCategory.id].accounts" v-show="showHidden || !account.hidden"
                                   :key="account.id" :id="account | accountDomId"
                                   :class="{ 'nested-list-item': true, 'has-child-list-item': account.type === $constants.account.allAccountTypes.MultiSubAccounts }"
                                   :after="accountBalance(account) | currency(account.currency)"
@@ -195,7 +195,7 @@
 export default {
     data() {
         return {
-            accounts: {},
+            categorizedAccounts: {},
             loading: true,
             showHidden: false,
             sortable: false,
@@ -214,12 +214,12 @@ export default {
         allAccountCount() {
             let allAccountCount = 0;
 
-            for (let category in this.accounts) {
-                if (!Object.prototype.hasOwnProperty.call(this.accounts, category)) {
+            for (let category in this.categorizedAccounts) {
+                if (!Object.prototype.hasOwnProperty.call(this.categorizedAccounts, category)) {
                     continue;
                 }
 
-                allAccountCount += this.accounts[category].length;
+                allAccountCount += this.categorizedAccounts[category].accounts.length;
             }
 
             return allAccountCount;
@@ -228,12 +228,12 @@ export default {
             let allAccountCount = 0;
             let shownAccountCount = 0;
 
-            for (let category in this.accounts) {
-                if (!Object.prototype.hasOwnProperty.call(this.accounts, category)) {
+            for (let category in this.categorizedAccounts) {
+                if (!Object.prototype.hasOwnProperty.call(this.categorizedAccounts, category)) {
                     continue;
                 }
 
-                const accountList = this.accounts[category];
+                const accountList = this.categorizedAccounts[category].accounts;
 
                 for (let i = 0; i < accountList.length; i++) {
                     if (!accountList[i].hidden) {
@@ -257,7 +257,9 @@ export default {
             for (let i = 0; i < allAccountCategories.length; i++) {
                 const accountCategory = allAccountCategories[i];
 
-                if (this.$utilities.isArray(this.accounts[accountCategory.id]) && this.accounts[accountCategory.id].length) {
+                if (this.categorizedAccounts[accountCategory.id] &&
+                    this.$utilities.isArray(this.categorizedAccounts[accountCategory.id].accounts) &&
+                    this.categorizedAccounts[accountCategory.id].accounts.length) {
                     usedAccountCategories.push(accountCategory);
                 }
             }
@@ -269,7 +271,7 @@ export default {
                 return '***';
             }
 
-            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, () => true);
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.categorizedAccounts, () => true);
             let netAssets = 0;
             let hasUnCalculatedAmount = false;
 
@@ -299,7 +301,7 @@ export default {
                 return '***';
             }
 
-            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, account => account.isAsset);
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.categorizedAccounts, account => account.isAsset);
             let totalAssets = 0;
             let hasUnCalculatedAmount = false;
 
@@ -329,7 +331,7 @@ export default {
                 return '***';
             }
 
-            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, account => account.isLiability);
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.categorizedAccounts, account => account.isLiability);
             let totalLiabilities = 0;
             let hasUnCalculatedAmount = false;
 
@@ -370,7 +372,7 @@ export default {
                 return;
             }
 
-            self.accounts = self.$utilities.getCategorizedAccounts(data.result);
+            self.categorizedAccounts = self.$utilities.getCategorizedAccounts(data.result);
             self.loading = false;
         }).catch(error => {
             self.$logger.error('failed to load account list', error);
@@ -413,7 +415,7 @@ export default {
                     return;
                 }
 
-                self.accounts = self.$utilities.getCategorizedAccounts(data.result);
+                self.categorizedAccounts = self.$utilities.getCategorizedAccounts(data.result);
             }).catch(error => {
                 self.$logger.error('failed to reload account list', error);
 
@@ -429,14 +431,16 @@ export default {
             });
         },
         hasShownAccount(accountCategory) {
-            if (!this.accounts[accountCategory.id].length) {
+            if (!this.categorizedAccounts[accountCategory.id] ||
+                !this.categorizedAccounts[accountCategory.id].accounts ||
+                !this.categorizedAccounts[accountCategory.id].accounts.length) {
                 return false;
             }
 
             let shownCount = 0;
 
-            for (let i = 0; i < this.accounts[accountCategory.id].length; i++) {
-                const account = this.accounts[accountCategory.id][i];
+            for (let i = 0; i < this.categorizedAccounts[accountCategory.id].accounts.length; i++) {
+                const account = this.categorizedAccounts[accountCategory.id].accounts[i];
 
                 if (!account.hidden) {
                     shownCount++;
@@ -465,7 +469,7 @@ export default {
                 return '***';
             }
 
-            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, account => account.category === accountCategory.id);
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.categorizedAccounts, account => account.category === accountCategory.id);
             let totalBalance = 0;
             let hasUnCalculatedAmount = false;
 
@@ -506,14 +510,17 @@ export default {
             }
 
             const id = event.el.id.substr(8); // account_
-            const account = this.$utilities.getAccountByAccountId(this.accounts, id);
+            const account = this.$utilities.getAccountByAccountId(this.categorizedAccounts, id);
 
-            if (!account || !this.accounts[account.category] || !this.accounts[account.category][event.to]) {
+            if (!account ||
+                !this.categorizedAccounts[account.category] ||
+                !this.categorizedAccounts[account.category].accounts ||
+                !this.categorizedAccounts[account.category].accounts[event.to]) {
                 this.$toast('Unable to move account');
                 return;
             }
 
-            const accountList = this.accounts[account.category];
+            const accountList = this.categorizedAccounts[account.category].accounts;
             accountList.splice(event.to, 0, accountList.splice(event.from, 1)[0]);
 
             this.displayOrderModified = true;
@@ -530,12 +537,12 @@ export default {
 
             self.displayOrderSaving = true;
 
-            for (let category in self.accounts) {
-                if (!Object.prototype.hasOwnProperty.call(self.accounts, category)) {
+            for (let category in self.categorizedAccounts) {
+                if (!Object.prototype.hasOwnProperty.call(self.categorizedAccounts, category)) {
                     continue;
                 }
 
-                const accountList = self.accounts[category];
+                const accountList = self.categorizedAccounts[category].accounts;
 
                 for (let i = 0; i < accountList.length; i++) {
                     newDisplayOrders.push({
@@ -650,7 +657,7 @@ export default {
                 }
 
                 app.swipeout.delete($$(`#${self.$options.filters.accountDomId(account)}`), () => {
-                    const accountList = self.accounts[account.category];
+                    const accountList = self.categorizedAccounts[account.category].accounts;
                     for (let i = 0; i < accountList.length; i++) {
                         if (accountList[i].id === account.id) {
                             accountList.splice(i, 1);
diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue
index 9ead7b44..4d7a6d30 100644
--- a/src/views/mobile/transactions/Edit.vue
+++ b/src/views/mobile/transactions/Edit.vue
@@ -144,36 +144,40 @@
                     <f7-list-item
                         class="transaction-edit-account"
                         link="#"
-                        :class="{ 'disabled': !plainAllAccounts.length }"
+                        :class="{ 'disabled': !allAccounts.length }"
                         :header="$t(sourceAccountName)"
-                        :title="transaction.sourceAccountId | accountName(plainAllAccounts)"
+                        :title="transaction.sourceAccountId | accountName(allAccounts)"
                         @click="transaction.showSourceAccountSheet = true"
                     >
-                        <list-item-selection-sheet value-type="item"
-                                                   key-field="id" value-field="id" title-field="name"
-                                                   icon-field="icon" icon-type="account" color-field="color"
-                                                   :items="plainAllAccounts"
-                                                   :show.sync="transaction.showSourceAccountSheet"
-                                                   v-model="transaction.sourceAccountId">
-                        </list-item-selection-sheet>
+                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category" primary-title-field="name"
+                                                              primary-icon-field="icon" primary-icon-type="account" :primary-title-i18n="true"
+                                                              primary-sub-items-field="accounts"
+                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                              secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
+                                                              :items="categoriedAccounts"
+                                                              :show.sync="transaction.showSourceAccountSheet"
+                                                              v-model="transaction.sourceAccountId">
+                        </two-column-list-item-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-item
                         class="transaction-edit-account"
                         link="#"
-                        :class="{ 'disabled': !plainAllAccounts.length }"
+                        :class="{ 'disabled': !allAccounts.length }"
                         :header="$t('Destination Account')"
-                        :title="transaction.destinationAccountId | accountName(plainAllAccounts)"
+                        :title="transaction.destinationAccountId | accountName(allAccounts)"
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
                         @click="transaction.showDestinationAccountSheet = true"
                     >
-                        <list-item-selection-sheet value-type="item"
-                                                   key-field="id" value-field="id" title-field="name"
-                                                   icon-field="icon" icon-type="account" color-field="color"
-                                                   :items="plainAllAccounts"
-                                                   :show.sync="transaction.showDestinationAccountSheet"
-                                                   v-model="transaction.destinationAccountId">
-                        </list-item-selection-sheet>
+                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category" primary-title-field="name"
+                                                              primary-icon-field="icon" primary-icon-type="account" :primary-title-i18n="true"
+                                                              primary-sub-items-field="accounts"
+                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                              secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
+                                                              :items="categoriedAccounts"
+                                                              :show.sync="transaction.showDestinationAccountSheet"
+                                                              v-model="transaction.destinationAccountId">
+                        </two-column-list-item-selection-sheet>
                     </f7-list-item>
 
                     <f7-list-input
@@ -247,6 +251,7 @@ export default {
                 showDestinationAccountSheet: false
             },
             allAccounts: [],
+            categoriedAccounts: [],
             allCategories: {},
             allTags: [],
             loading: true,
@@ -318,25 +323,6 @@ export default {
         destinationAmountFontSize() {
             return this.getFontSizeByAmount(this.transaction.destinationAmount);
         },
-        plainAllAccounts() {
-            const ret = [];
-
-            for (let i = 0; i < this.allAccounts.length; i++) {
-                const account = this.allAccounts[i];
-
-                if (account.type === this.$constants.account.allAccountTypes.SingleAccount) {
-                    ret.push(account);
-                    continue;
-                }
-
-                for (let j = 0; j < account.subAccounts.length; j++) {
-                    const subAccount = account.subAccounts[j];
-                    ret.push(subAccount);
-                }
-            }
-
-            return ret;
-        },
         inputIsEmpty() {
             return !!this.inputEmptyProblemMessage;
         },
@@ -351,13 +337,13 @@ export default {
             } else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
                 let sourceAccount, destinationAccount = null;
 
-                for (let i = 0; i < this.plainAllAccounts.length; i++) {
-                    if (this.plainAllAccounts[i].id === this.transaction.sourceAccountId) {
-                        sourceAccount = this.plainAllAccounts[i];
+                for (let i = 0; i < this.allAccounts.length; i++) {
+                    if (this.allAccounts[i].id === this.transaction.sourceAccountId) {
+                        sourceAccount = this.allAccounts[i];
                     }
 
-                    if (this.plainAllAccounts[i].id === this.transaction.destinationAccountId) {
-                        destinationAccount = this.plainAllAccounts[i];
+                    if (this.allAccounts[i].id === this.transaction.destinationAccountId) {
+                        destinationAccount = this.allAccounts[i];
                     }
 
                     if (sourceAccount && destinationAccount) {
@@ -418,11 +404,11 @@ export default {
         }
 
         Promise.all(promises).then(function (responses) {
-            const accountDta = responses[0].data;
+            const accountData = responses[0].data;
             const categoryData = responses[1].data;
             const tagData = responses[2].data;
 
-            if (!accountDta || !accountDta.success || !accountDta.result) {
+            if (!accountData || !accountData.success || !accountData.result) {
                 self.$toast('Unable to get account list');
                 router.back();
                 return;
@@ -446,7 +432,8 @@ export default {
                 return;
             }
 
-            self.allAccounts = accountDta.result;
+            self.allAccounts = self.$utilities.getPlainAccounts(accountData.result);
+            self.categoriedAccounts = self.$utilities.getCategorizedAccounts(self.allAccounts);
             self.allCategories = categoryData.result;
             self.allTags = tagData.result;
 
@@ -465,9 +452,9 @@ export default {
                 self.transaction.transferCategory = self.getFirstAvailableCategoryId(self.allCategories[self.$constants.category.allCategoryTypes.Transfer]);
             }
 
-            if (self.plainAllAccounts.length) {
-                self.transaction.sourceAccountId = self.plainAllAccounts[0].id;
-                self.transaction.destinationAccountId = self.plainAllAccounts[0].id;
+            if (self.allAccounts.length) {
+                self.transaction.sourceAccountId = self.allAccounts[0].id;
+                self.transaction.destinationAccountId = self.allAccounts[0].id;
             }
 
             if (self.editTransactionId) {