diff --git a/src/stores/account.ts b/src/stores/account.ts index f0fb96cc..c6335be0 100644 --- a/src/stores/account.ts +++ b/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; } diff --git a/src/styles/mobile/global.css b/src/styles/mobile/global.css index cfa7a5e0..8a14056d 100644 --- a/src/styles/mobile/global.css +++ b/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; diff --git a/src/views/base/accounts/AccountListPageBase.ts b/src/views/base/accounts/AccountListPageBase.ts index 81268d71..ed406f82 100644 --- a/src/views/base/accounts/AccountListPageBase.ts +++ b/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 }; } diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue index 35ba3e97..804c720f 100644 --- a/src/views/desktop/accounts/ListPage.vue +++ b/src/views/desktop/accounts/ListPage.vue @@ -230,7 +230,7 @@ {{ tt('Delete') }} - {{ accountBalance(element) }} + {{ accountBalance(element, activeSubAccount[element.id]) }} @@ -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; 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 diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue index 6f2921fb..de4c996d 100644 --- a/src/views/mobile/accounts/ListPage.vue +++ b/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 @@ - + @@ -111,13 +111,16 @@ {{ account.name }} + + {{ accountBalance(account) }} + (); -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; }