show total balance of parent account in mobile version (#149)

src/stores/account.ts

@@ -633,7 +633,7 @@ export const useAccountsStore = defineStore('accounts', () => {
         }
     }
 
-    function getAccountSubAccountBalance(showAccountBalance: boolean, showHidden: boolean, account: Account, subAccountId: string): AccountDisplayBalance | null {
+    function getAccountSubAccountBalance(showAccountBalance: boolean, showHidden: boolean, account: Account, subAccountId?: string): AccountDisplayBalance | null {
         if (account.type !== AccountType.MultiSubAccounts.type) {
             return null;
         }

src/styles/mobile/global.css

@@ -579,7 +579,8 @@ i.icon.la, i.icon.las, i.icon.lab {
     background-color: var(--f7-list-link-pressed-bg-color);
 }
 
-.nested-list-item.has-child-list-item .item-link .item-inner .nested-list-item-child .item-link .item-inner {
+.nested-list-item.has-child-list-item .item-link .item-inner .nested-list-item-child .item-link .item-inner,
+.nested-list-item.has-child-list-item .item-link .item-inner .nested-list-item-inner {
     padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
 }
 
@@ -587,8 +588,13 @@ i.icon.la, i.icon.las, i.icon.lab {
     color: var(--f7-list-chevron-icon-color);
 }
 
+.nested-list-item .nested-list-item-inner {
+    align-items: center;
+}
+
 .nested-list-item .nested-list-item-title {
-    align-self: center;
+    width: 100%;
+    flex-shrink: 1;
     margin-right: var(--f7-list-item-media-margin);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -598,6 +604,16 @@ i.icon.la, i.icon.las, i.icon.lab {
     margin-left: var(--f7-list-item-media-margin);
 }
 
+.nested-list-item .nested-list-item-after {
+    white-space: nowrap;
+    flex-shrink: 0;
+    display: flex;
+    font-size: var(--f7-list-item-after-font-size);
+    color: var(--f7-list-item-after-text-color);
+    margin-left: auto;
+    padding-left: var(--f7-list-item-after-padding);
+}
+
 .nested-list-item.has-child-list-item > .swipeout-content > .item-content > .item-inner:after,
 .nested-list-item.has-child-list-item > .swipeout-content > .item-link > .item-content > .item-inner:after {
     background-color: transparent;

src/views/base/accounts/AccountListPageBase.ts

@@ -6,9 +6,11 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
-import type { AccountCategory } from '@/core/account.ts';
+import { type AccountCategory, AccountType } from '@/core/account.ts';
 import type { Account, CategorizedAccount } from '@/models/account.ts';
 
+import { isObject, isString } from '@/lib/common.ts';
+
 export function useAccountListPageBaseBase() {
     const { formatAmountWithCurrency } = useI18n();
 
@@ -55,6 +57,28 @@ export function useAccountListPageBaseBase() {
         return formatAmountWithCurrency(totalBalance, defaultCurrency.value);
     }
 
+    function accountBalance(account: Account, currentSubAccountId?: string): string | null {
+        if (account.type === AccountType.SingleAccount.type) {
+            const balance = accountsStore.getAccountBalance(showAccountBalance.value, account);
+
+            if (!isString(balance)) {
+                return '';
+            }
+
+            return formatAmountWithCurrency(balance, account.currency);
+        } else if (account.type === AccountType.MultiSubAccounts.type) {
+            const balanceResult = accountsStore.getAccountSubAccountBalance(showAccountBalance.value, showHidden.value, account, currentSubAccountId);
+
+            if (!isObject(balanceResult)) {
+                return '';
+            }
+
+            return formatAmountWithCurrency(balanceResult.balance, balanceResult.currency);
+        } else {
+            return null;
+        }
+    }
+
     return {
         // states
         loading,
@@ -70,6 +94,7 @@ export function useAccountListPageBaseBase() {
         totalAssets,
         totalLiabilities,
         // functions
-        accountCategoryTotalBalance
+        accountCategoryTotalBalance,
+        accountBalance
     };
 }

src/views/desktop/accounts/ListPage.vue

@@ -230,7 +230,7 @@
                                                                         {{ tt('Delete') }}
                                                                     </v-btn>
                                                                     <v-spacer/>
-                                                                    <span class="account-balance ml-2">{{ accountBalance(element) }}</span>
+                                                                    <span class="account-balance ml-2">{{ accountBalance(element, activeSubAccount[element.id]) }}</span>
                                                                 </div>
                                                             </v-card-text>
                                                         </v-card>
@@ -270,8 +270,6 @@ import { useAccountsStore } from '@/stores/account.ts';
 import { AccountType, AccountCategory } from '@/core/account.ts';
 import type { Account } from '@/models/account.ts';
 
-import { isObject, isString } from '@/lib/common.ts';
-
 import {
     mdiEyeOutline,
     mdiEyeOffOutline,
@@ -291,7 +289,7 @@ type EditDialogType = InstanceType<typeof EditDialog>;
 
 const display = useDisplay();
 
-const { tt, getCurrencyName, formatAmountWithCurrency, joinMultiText } = useI18n();
+const { tt, getCurrencyName, joinMultiText } = useI18n();
 
 const {
     loading,
@@ -304,7 +302,8 @@ const {
     netAssets,
     totalAssets,
     totalLiabilities,
-    accountCategoryTotalBalance
+    accountCategoryTotalBalance,
+    accountBalance
 } = useAccountListPageBaseBase();
 
 const accountsStore = useAccountsStore();
@@ -395,28 +394,6 @@ function accountCurrency(account: Account): string | null {
     }
 }
 
-function accountBalance(account: Account): string | null {
-    if (account.type === AccountType.SingleAccount.type) {
-        const balance = accountsStore.getAccountBalance(showAccountBalance.value, account);
-
-        if (!isString(balance)) {
-            return '';
-        }
-
-        return formatAmountWithCurrency(balance, account.currency);
-    } else if (account.type === AccountType.MultiSubAccounts.type) {
-        const balanceResult = accountsStore.getAccountSubAccountBalance(showAccountBalance.value, showHidden.value, account, activeSubAccount.value[account.id]);
-
-        if (!isObject(balanceResult)) {
-            return '';
-        }
-
-        return formatAmountWithCurrency(balanceResult.balance, balanceResult.currency);
-    } else {
-        return null;
-    }
-}
-
 function add(): void {
     editDialog.value?.open({
         category: activeAccountCategoryType.value

src/views/mobile/accounts/ListPage.vue

@@ -84,7 +84,7 @@
                               class="nested-list-item"
                               :id="getAccountDomId(account)"
                               :class="{ 'has-child-list-item': account.type === AccountType.MultiSubAccounts.type && hasVisibleSubAccount(account), 'actual-first-child': account.id === firstShowingIds.accounts[accountCategory.type], 'actual-last-child': account.id === lastShowingIds.accounts[accountCategory.type] }"
-                              :after="accountBalance(account)"
+                              :after="account.type === AccountType.SingleAccount.type ? accountBalance(account) : ''"
                               :link="!sortable ? '/transaction/list?accountIds=' + account.id : null"
                               :key="account.id"
                               v-for="account in allCategorizedAccountsMap[accountCategory.type].accounts"
@@ -100,7 +100,7 @@
                     </template>
 
                     <template #title>
-                        <div class="display-flex padding-top-half padding-bottom-half">
+                        <div class="nested-list-item-inner display-flex padding-top-half padding-bottom-half">
                             <ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"
                                       v-if="account.type === AccountType.MultiSubAccounts.type && hasVisibleSubAccount(account)">
                                 <f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
@@ -111,13 +111,16 @@
                                 <span>{{ account.name }}</span>
                                 <div class="item-footer" v-if="account.comment">{{ account.comment }}</div>
                             </div>
+                            <div class="nested-list-item-after" v-if="account.type === AccountType.MultiSubAccounts.type">
+                                <span>{{ accountBalance(account) }}</span>
+                            </div>
                         </div>
                         <li v-if="account.type === AccountType.MultiSubAccounts.type">
                             <ul class="no-padding">
                                 <f7-list-item class="no-sortable nested-list-item-child"
                                               :class="{ 'actual-first-child': subAccount.id === firstShowingIds.subAccounts[account.id], 'actual-last-child': subAccount.id === lastShowingIds.subAccounts[account.id] }"
                                               :id="getAccountDomId(subAccount)"
-                                              :title="subAccount.name" :footer="subAccount.comment" :after="accountBalance(subAccount)"
+                                              :title="subAccount.name" :footer="subAccount.comment" :after="accountBalance(account, subAccount.id)"
                                               :link="!sortable ? '/transaction/list?accountIds=' + subAccount.id : null"
                                               :key="subAccount.id"
                                               v-for="subAccount in account.subAccounts"
@@ -186,14 +189,13 @@ import { useAccountsStore } from '@/stores/account.ts';
 import { AccountType, AccountCategory } from '@/core/account.ts';
 import type { Account, AccountShowingIds } from '@/models/account.ts';
 
-import { isString } from '@/lib/common.ts';
 import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, formatAmountWithCurrency } = useI18n();
+const { tt } = useI18n();
 const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 
 const {
@@ -206,7 +208,8 @@ const {
     netAssets,
     totalAssets,
     totalLiabilities,
-    accountCategoryTotalBalance
+    accountCategoryTotalBalance,
+    accountBalance
 } = useAccountListPageBaseBase();
 
 const accountsStore = useAccountsStore();
@@ -236,16 +239,6 @@ function hasVisibleSubAccount(account: Account): boolean {
     return accountsStore.hasVisibleSubAccount(showHidden.value, account);
 }
 
-function accountBalance(account: Account): string {
-    const balance = accountsStore.getAccountBalance(showAccountBalance.value, account);
-
-    if (!isString(balance)) {
-        return '';
-    }
-
-    return formatAmountWithCurrency(balance, account.currency);
-}
-
 function getAccountDomId(account: Account): string {
     return 'account_' + account.id;
 }