add net assets/total assets/total liabilities in account list page

src/consts/account.js

@@ -2,36 +2,43 @@ const allAccountCategories = [
     {
         id: 1,
         name: 'Cash',
+        isAsset: true,
         defaultAccountIconId: '1'
     },
     {
         id: 2,
         name: 'Debit Card',
+        isAsset: true,
         defaultAccountIconId: '2'
     },
     {
         id: 3,
         name: 'Credit Card',
+        isLiability: true,
         defaultAccountIconId: '2'
     },
     {
         id: 4,
         name: 'Virtual Account',
+        isAsset: true,
         defaultAccountIconId: '3'
     },
     {
         id: 5,
         name: 'Debt Account',
+        isLiability: true,
         defaultAccountIconId: '4'
     },
     {
         id: 6,
         name: 'Receivables',
+        isAsset: true,
         defaultAccountIconId: '5'
     },
     {
         id: 7,
         name: 'Investment Account',
+        isAsset: true,
         defaultAccountIconId: '6'
     }
 ];

src/lib/utils.js

@@ -1,3 +1,5 @@
+import accountConstants from '../consts/account.js'
+
 function isFunction(val) {
     return typeof(val) === 'function';
 }
@@ -61,6 +63,40 @@ function getAccountByAccountId(categorizedAccounts, accountId) {
     return null;
 }
 
+function getAllFilteredAccountsBalance(categorizedAccounts, accountCategoryFilter) {
+    const allAccountCategories = accountConstants.allCategories;
+    const ret = [];
+
+    for (let categoryIdx = 0; categoryIdx < allAccountCategories.length; categoryIdx++) {
+        const accountCategory = allAccountCategories[categoryIdx];
+
+        if (!accountCategoryFilter(accountCategory) || !categorizedAccounts[accountCategory.id]) {
+            continue;
+        }
+
+        for (let accountIdx = 0; accountIdx < categorizedAccounts[accountCategory.id].length; accountIdx++) {
+            const account = categorizedAccounts[accountCategory.id][accountIdx];
+
+            if (account.type === accountConstants.allAccountTypes.SingleAccount) {
+                ret.push({
+                    balance: account.balance,
+                    currency: account.currency
+                });
+            } else if (account.type === accountConstants.allAccountTypes.MultiSubAccounts) {
+                for (let subAccountIdx = 0; subAccountIdx < account.subAccounts.length; subAccountIdx++) {
+                    const subAccount = account.subAccounts[subAccountIdx];
+                    ret.push({
+                        balance: subAccount.balance,
+                        currency: subAccount.currency
+                    });
+                }
+            }
+        }
+    }
+
+    return ret;
+}
+
 export default {
     isFunction,
     isObject,
@@ -70,4 +106,5 @@ export default {
     isBoolean,
     getCategorizedAccounts,
     getAccountByAccountId,
+    getAllFilteredAccountsBalance,
 };

src/locales/en.js

@@ -301,6 +301,9 @@ export default {
     'Transaction Details': 'Transaction Details',
     'Account List': 'Account List',
     'New Transaction': 'New Transaction',
+    'Net assets': 'Net assets',
+    'Total assets': 'Total assets',
+    'Total liabilities': 'Total liabilities',
     'Expense': 'Expense',
     'Income': 'Income',
     'Transfer': 'Transfer',

src/locales/zh_Hans.js

@@ -301,6 +301,9 @@ export default {
     'Transaction Details': '交易详情',
     'Account List': '账户列表',
     'New Transaction': '新交易',
+    'Net assets': '净资产',
+    'Total assets': '总资产',
+    'Total liabilities': '总负债',
     'Expense': '支出',
     'Income': '收入',
     'Transfer': '转账',

src/views/mobile/accounts/AccountList.vue

@@ -9,6 +9,24 @@
             </f7-nav-right>
         </f7-navbar>
 
+        <f7-card :class="{ 'bg-color-yellow': true, 'skeleton-text': loading }">
+            <f7-card-header class="display-block" style="padding-top: 100px;">
+                <small :style="{ opacity: 0.6 }">{{ $t('Net assets') }}</small><br />
+                <big>{{ netAssets | currency(defaultCurrency) }}</big>
+                <f7-link class="margin-left-half" @click="toggleShowAccountBalance()">
+                    <f7-icon :f7="showAccountBalance ? 'eye_slash_fill' : 'eye_fill'" size="18px"></f7-icon>
+                </f7-link>
+                <br />
+                <small class="account-overview-info" :style="{ opacity: 0.6 }">
+                    <span>{{ $t('Total assets') }}</span>
+                    <span>{{ totalAssets | currency(defaultCurrency) }}</span>
+                    <span>|</span>
+                    <span>{{ $t('Total liabilities') }}</span>
+                    <span>{{ totalLiabilities | currency(defaultCurrency) }}</span>
+                </small>
+            </f7-card-header>
+        </f7-card>
+
         <f7-card class="skeleton-text" v-if="loading">
             <f7-card-header>Account Category</f7-card-header>
             <f7-card-content :padding="false">
@@ -47,7 +65,12 @@
         </f7-card>
 
         <f7-card v-for="accountCategory in usedAccountCategories" :key="accountCategory.id" v-show="showHidden || hasShownAccount(accountCategory)">
-            <f7-card-header>{{ $t(accountCategory.name) }}</f7-card-header>
+            <f7-card-header>
+                <small :style="{ opacity: 0.6 }">
+                    <span>{{ $t(accountCategory.name) }}</span>
+                    <span style="margin-left: 10px">{{ accountCategoryTotalBalance(accountCategory) | currency(defaultCurrency) }}</span>
+                </small>
+            </f7-card-header>
             <f7-card-content :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"
@@ -109,11 +132,15 @@ export default {
             loading: true,
             showHidden: false,
             sortable: false,
+            showAccountBalance: this.$settings.isShowAccountBalance(),
             displayOrderModified: false,
             displayOrderSaving: false
         };
     },
     computed: {
+        defaultCurrency() {
+            return this.$user.getUserInfo() ? this.$user.getUserInfo().defaultCurrency : this.$t('default.currency');
+        },
         noAvailableAccount() {
             let allAccountCount = 0;
             let shownAccountCount = 0;
@@ -153,6 +180,63 @@ export default {
             }
 
             return usedAccountCategories;
+        },
+        netAssets() {
+            if (!this.showAccountBalance) {
+                return '---';
+            }
+
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, () => true);
+            let netAssets = 0;
+
+            for (let i = 0; i < accountsBalance.length; i++) {
+                if (accountsBalance[i].currency === this.defaultCurrency) {
+                    netAssets += accountsBalance[i].balance;
+                } else {
+                    // TODO: calculate exchange rate
+                    netAssets += accountsBalance[i].balance;
+                }
+            }
+
+            return netAssets;
+        },
+        totalAssets() {
+            if (!this.showAccountBalance) {
+                return '---';
+            }
+
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, category => category.isAsset);
+            let totalAssets = 0;
+
+            for (let i = 0; i < accountsBalance.length; i++) {
+                if (accountsBalance[i].currency === this.defaultCurrency) {
+                    totalAssets += accountsBalance[i].balance;
+                } else {
+                    // TODO: calculate exchange rate
+                    totalAssets += accountsBalance[i].balance;
+                }
+            }
+
+            return totalAssets;
+        },
+        totalLiabilities() {
+            if (!this.showAccountBalance) {
+                return '---';
+            }
+
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, category => category.isLiability);
+            let totalLiabilities = 0;
+
+            for (let i = 0; i < accountsBalance.length; i++) {
+                if (accountsBalance[i].currency === this.defaultCurrency) {
+                    totalLiabilities += accountsBalance[i].balance;
+                } else {
+                    // TODO: calculate exchange rate
+                    totalLiabilities += accountsBalance[i].balance;
+                }
+            }
+
+            return totalLiabilities;
         }
     },
     created() {
@@ -227,17 +311,40 @@ export default {
 
             return shownCount > 0;
         },
+        toggleShowAccountBalance() {
+            this.showAccountBalance = !this.showAccountBalance;
+            this.$settings.setShowAccountBalance(this.showAccountBalance);
+        },
         accountBalance(account) {
             if (account.type !== this.$constants.account.allAccountTypes.SingleAccount) {
                 return null;
             }
 
-            if (this.$settings.isShowAccountBalance()) {
+            if (this.showAccountBalance) {
                 return account.balance;
             } else {
                 return '---';
             }
         },
+        accountCategoryTotalBalance(accountCategory) {
+            if (!this.showAccountBalance) {
+                return '---';
+            }
+
+            const accountsBalance = this.$utilities.getAllFilteredAccountsBalance(this.accounts, category => category.id === accountCategory.id);
+            let totalBalance = 0;
+
+            for (let i = 0; i < accountsBalance.length; i++) {
+                if (accountsBalance[i].currency === this.defaultCurrency) {
+                    totalBalance += accountsBalance[i].balance;
+                } else {
+                    // TODO: calculate exchange rate
+                    totalBalance += accountsBalance[i].balance;
+                }
+            }
+
+            return totalBalance;
+        },
         setSortable() {
             this.showHidden = true;
             this.sortable = true;
@@ -404,3 +511,13 @@ export default {
     }
 };
 </script>
+
+<style>
+.account-overview-info > span {
+    margin-right: 4px;
+}
+
+.account-overview-info > span:last-child {
+    margin-right: 0;
+}
+</style>