show account balance in account selection sheet in transaction edit page

src/views/mobile/transactions/Edit.vue

@@ -149,10 +149,13 @@
                         :title="transaction.sourceAccountId | accountName(allAccounts)"
                         @click="showSourceAccountSheet = true"
                     >
-                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category" primary-title-field="name"
+                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
-                                                              primary-icon-field="icon" primary-icon-type="account" :primary-title-i18n="true"
+                                                              primary-title-field="name" primary-footer-field="displayBalance"
+                                                              primary-icon-field="icon" primary-icon-type="account"
                                                               primary-sub-items-field="accounts"
-                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                              :primary-title-i18n="true"
+                                                              secondary-key-field="id" secondary-value-field="id"
+                                                              secondary-title-field="name" secondary-footer-field="displayBalance"
                                                               secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
                                                               :items="categoriedAccounts"
                                                               :show.sync="showSourceAccountSheet"
@@ -169,10 +172,13 @@
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
                         @click="showDestinationAccountSheet = true"
                     >
-                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category" primary-title-field="name"
+                        <two-column-list-item-selection-sheet primary-key-field="id" primary-value-field="category"
-                                                              primary-icon-field="icon" primary-icon-type="account" :primary-title-i18n="true"
+                                                              primary-title-field="name" primary-footer-field="displayBalance"
+                                                              primary-icon-field="icon" primary-icon-type="account"
                                                               primary-sub-items-field="accounts"
-                                                              secondary-key-field="id" secondary-value-field="id" secondary-title-field="name"
+                                                              :primary-title-i18n="true"
+                                                              secondary-key-field="id" secondary-value-field="id"
+                                                              secondary-title-field="name" secondary-footer-field="displayBalance"
                                                               secondary-icon-field="icon" secondary-icon-type="account" secondary-color-field="color"
                                                               :items="categoriedAccounts"
                                                               :show.sync="showDestinationAccountSheet"
@@ -251,6 +257,7 @@ export default {
             allTags: [],
             loading: true,
             submitting: false,
+            showAccountBalance: self.$settings.isShowAccountBalance(),
             showSourceAmountSheet: false,
             showDestinationAmountSheet: false,
             showCategorySheet: false,
@@ -293,6 +300,9 @@ export default {
                 return '';
             }
         },
+        defaultCurrency() {
+            return this.$user.getUserInfo() ? this.$user.getUserInfo().defaultCurrency : this.$t('default.currency');
+        },
         hasAvailableExpenseCategories() {
             if (!this.allCategories || !this.allCategories[this.$constants.category.allCategoryTypes.Expense] || !this.allCategories[this.$constants.category.allCategoryTypes.Expense].length) {
                 return false;
@@ -433,7 +443,11 @@ export default {
             }
 
             self.allAccounts = self.$utilities.getPlainAccounts(accountData.result);
+            self.setAccountsDisplayBalance(self.allAccounts);
+
             self.categoriedAccounts = self.$utilities.getCategorizedAccounts(self.allAccounts);
+            self.setCategoriesDisplayBalance(self.categoriedAccounts);
+
             self.allCategories = categoryData.result;
             self.allTags = tagData.result;
 
@@ -514,6 +528,55 @@ export default {
                 }
             }
         },
+        setAccountsDisplayBalance(accounts) {
+            for (let i = 0; i < accounts.length; i++) {
+                const account = accounts[i];
+
+                if (this.showAccountBalance) {
+                    account.displayBalance = this.$options.filters.currency(account.balance, account.currency);
+                } else {
+                    account.displayBalance = '***';
+                }
+            }
+        },
+        setCategoriesDisplayBalance(categorizedAccounts) {
+            for (let category in categorizedAccounts) {
+                if (!Object.prototype.hasOwnProperty.call(categorizedAccounts, category)) {
+                    continue;
+                }
+
+                const accountCategory = categorizedAccounts[category];
+
+                if (this.showAccountBalance) {
+                    const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(categorizedAccounts, account => account.category === accountCategory.category);
+                    let totalBalance = 0;
+                    let hasUnCalculatedAmount = false;
+
+                    for (let i = 0; i < accountsBalance.length; i++) {
+                        if (accountsBalance[i].currency === this.defaultCurrency) {
+                            totalBalance += accountsBalance[i].balance;
+                        } else {
+                            const balance = this.$exchangeRates.getOtherCurrencyAmount(accountsBalance[i].balance, accountsBalance[i].currency, this.defaultCurrency);
+
+                            if (!this.$utilities.isNumber(balance)) {
+                                hasUnCalculatedAmount = true;
+                                continue;
+                            }
+
+                            totalBalance += Math.floor(balance);
+                        }
+                    }
+
+                    if (hasUnCalculatedAmount) {
+                        totalBalance = totalBalance + '+';
+                    }
+
+                    accountCategory.displayBalance = this.$options.filters.currency(totalBalance, this.defaultCurrency);
+                } else {
+                    accountCategory.displayBalance = '***';
+                }
+            }
+        },
         getFontSizeByAmount(amount) {
             if (amount >= 100000000 || amount <= -100000000) {
                 return 32;