migrate account list page to composition API and typescript
This commit is contained in:
MaysWind
@@ -765,7 +765,6 @@ export function translateError(message, translateFn) {
|
||||
|
||||
export function i18nFunctions(i18nGlobal) {
|
||||
return {
|
||||
getCurrencyName: (currencyCode) => getCurrencyName(currencyCode, i18nGlobal.t),
|
||||
getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
|
||||
getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
|
||||
getMultiMonthdayShortNames: (monthdays) => getMultiMonthdayShortNames(monthdays, i18nGlobal.t),
|
||||
@@ -787,7 +786,6 @@ export function i18nFunctions(i18nGlobal) {
|
||||
getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
|
||||
getAllTransactionTagFilterTypes: () => getAllTransactionTagFilterTypes(i18nGlobal.t),
|
||||
getAllSupportedImportFileTypes: () => getAllSupportedImportFileTypes(i18nGlobal, i18nGlobal.t),
|
||||
getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t),
|
||||
joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t)
|
||||
getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t)
|
||||
};
|
||||
}
|
||||
|
||||
@@ -943,7 +943,7 @@ export const useAccountsStore = defineStore('accounts', () => {
|
||||
});
|
||||
}
|
||||
|
||||
function deleteAccount({ account, beforeResolve }: { account: Account, beforeResolve: BeforeResolveFunction }): Promise<boolean> {
|
||||
function deleteAccount({ account, beforeResolve }: { account: Account, beforeResolve?: BeforeResolveFunction }): Promise<boolean> {
|
||||
return new Promise((resolve, reject) => {
|
||||
services.deleteAccount({
|
||||
id: account.id
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
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 { Account, CategorizedAccount } from '@/models/account.ts';
|
||||
|
||||
export function useAccountListPageBaseBase() {
|
||||
const { formatAmountWithCurrency } = useI18n();
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const userStore = useUserStore();
|
||||
const accountsStore = useAccountsStore();
|
||||
|
||||
const loading = ref<boolean>(true);
|
||||
const showHidden = ref<boolean>(false);
|
||||
const displayOrderModified = ref<boolean>(false);
|
||||
|
||||
const showAccountBalance = computed<boolean>({
|
||||
get: () => settingsStore.appSettings.showAccountBalance,
|
||||
set: (value) => settingsStore.setShowAccountBalance(value)
|
||||
});
|
||||
|
||||
const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
|
||||
|
||||
const allAccounts = computed<Account[]>(() => accountsStore.allAccounts);
|
||||
const allCategorizedAccountsMap = computed<Record<number, CategorizedAccount>>(() => accountsStore.allCategorizedAccountsMap);
|
||||
const allAccountCount = computed<number>(() => accountsStore.allAvailableAccountsCount);
|
||||
|
||||
const netAssets = computed<string>(() => {
|
||||
const netAssets = accountsStore.getNetAssets(showAccountBalance.value);
|
||||
return formatAmountWithCurrency(netAssets, defaultCurrency.value);
|
||||
});
|
||||
|
||||
const totalAssets = computed<string>(() => {
|
||||
const totalAssets = accountsStore.getTotalAssets(showAccountBalance.value);
|
||||
return formatAmountWithCurrency(totalAssets, defaultCurrency.value);
|
||||
});
|
||||
|
||||
const totalLiabilities = computed<string>(() => {
|
||||
const totalLiabilities = accountsStore.getTotalLiabilities(showAccountBalance.value);
|
||||
return formatAmountWithCurrency(totalLiabilities, defaultCurrency.value);
|
||||
});
|
||||
|
||||
function accountCategoryTotalBalance(accountCategory?: AccountCategory): string {
|
||||
if (!accountCategory) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const totalBalance = accountsStore.getAccountCategoryTotalBalance(showAccountBalance.value, accountCategory);
|
||||
return formatAmountWithCurrency(totalBalance, defaultCurrency.value);
|
||||
}
|
||||
|
||||
return {
|
||||
// states
|
||||
loading,
|
||||
showHidden,
|
||||
displayOrderModified,
|
||||
// computed states
|
||||
showAccountBalance,
|
||||
defaultCurrency,
|
||||
allAccounts,
|
||||
allCategorizedAccountsMap,
|
||||
allAccountCount,
|
||||
netAssets,
|
||||
totalAssets,
|
||||
totalLiabilities,
|
||||
// functions
|
||||
accountCategoryTotalBalance
|
||||
};
|
||||
}
|
||||
@@ -5,21 +5,21 @@
|
||||
<v-layout>
|
||||
<v-navigation-drawer :permanent="alwaysShowNav" v-model="showNav">
|
||||
<div class="mx-6 my-4">
|
||||
<span class="text-subtitle-2">{{ $t('Net assets') }}</span>
|
||||
<span class="text-subtitle-2">{{ tt('Net assets') }}</span>
|
||||
<p class="account-statistic-item-value text-income text-truncate mt-1 mb-3">
|
||||
<span v-if="!loading || allAccountCount > 0">{{ netAssets }}</span>
|
||||
<span v-else-if="loading && allAccountCount <= 0">
|
||||
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
<span class="text-subtitle-2">{{ $t('Total liabilities') }}</span>
|
||||
<span class="text-subtitle-2">{{ tt('Total liabilities') }}</span>
|
||||
<p class="account-statistic-item-value text-expense text-truncate mt-1 mb-3">
|
||||
<span v-if="!loading || allAccountCount > 0">{{ totalLiabilities }}</span>
|
||||
<span v-else-if="loading && allAccountCount <= 0">
|
||||
<v-skeleton-loader class="skeleton-no-margin pt-2 pb-1" type="text" :loading="true"></v-skeleton-loader>
|
||||
</span>
|
||||
</p>
|
||||
<span class="text-subtitle-2">{{ $t('Total assets') }}</span>
|
||||
<span class="text-subtitle-2">{{ tt('Total assets') }}</span>
|
||||
<p class="account-statistic-item-value mt-1">
|
||||
<span v-if="!loading || allAccountCount > 0">{{ totalAssets }}</span>
|
||||
<span v-else-if="loading && allAccountCount <= 0">
|
||||
@@ -31,7 +31,7 @@
|
||||
<v-tabs show-arrows class="account-category-tabs my-4" direction="vertical"
|
||||
:disabled="loading" v-model="activeAccountCategoryType">
|
||||
<v-tab class="tab-text-truncate" :key="accountCategory.type" :value="accountCategory.type"
|
||||
v-for="accountCategory in allAccountCategories">
|
||||
v-for="accountCategory in AccountCategory.values()">
|
||||
<ItemIcon icon-type="account" :icon-id="accountCategory.defaultAccountIconId" />
|
||||
<div class="d-flex flex-column text-truncate ml-2">
|
||||
<small class="text-truncate text-left smaller" v-if="!loading || allAccountCount > 0">{{ accountCategoryTotalBalance(accountCategory) }}</small>
|
||||
@@ -39,7 +39,7 @@
|
||||
<v-skeleton-loader class="skeleton-no-margin"
|
||||
width="100px" height="16" type="text" :loading="true"></v-skeleton-loader>
|
||||
</small>
|
||||
<span class="text-truncate text-left">{{ $t(accountCategory.name) }}</span>
|
||||
<span class="text-truncate text-left">{{ tt(accountCategory.name) }}</span>
|
||||
</div>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
@@ -54,19 +54,19 @@
|
||||
:ripple="false" :icon="true" @click="showNav = !showNav">
|
||||
<v-icon :icon="icons.menu" size="24" />
|
||||
</v-btn>
|
||||
<span>{{ $t('Account List') }}</span>
|
||||
<span>{{ tt('Account List') }}</span>
|
||||
<v-btn class="ml-3" color="default" variant="outlined"
|
||||
:disabled="loading" @click="add">{{ $t('Add') }}</v-btn>
|
||||
:disabled="loading" @click="add">{{ tt('Add') }}</v-btn>
|
||||
<v-btn class="ml-3" color="primary" variant="tonal"
|
||||
:disabled="loading" @click="saveSortResult"
|
||||
v-if="displayOrderModified">{{ $t('Save Display Order') }}</v-btn>
|
||||
v-if="displayOrderModified">{{ tt('Save Display Order') }}</v-btn>
|
||||
<v-btn density="compact" color="default" variant="text" size="24"
|
||||
class="ml-2" :icon="true" :loading="loading" @click="reload">
|
||||
class="ml-2" :icon="true" :loading="loading" @click="reload(true)">
|
||||
<template #loader>
|
||||
<v-progress-circular indeterminate size="20"/>
|
||||
</template>
|
||||
<v-icon :icon="icons.refresh" size="24" />
|
||||
<v-tooltip activator="parent">{{ $t('Refresh') }}</v-tooltip>
|
||||
<v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<v-btn density="comfortable" color="default" variant="text" class="ml-2"
|
||||
@@ -75,10 +75,10 @@
|
||||
<v-menu activator="parent">
|
||||
<v-list>
|
||||
<v-list-item :prepend-icon="icons.show"
|
||||
:title="$t('Show Hidden Accounts')"
|
||||
:title="tt('Show Hidden Accounts')"
|
||||
v-if="!showHidden" @click="showHidden = true"></v-list-item>
|
||||
<v-list-item :prepend-icon="icons.hide"
|
||||
:title="$t('Hide Hidden Accounts')"
|
||||
:title="tt('Hide Hidden Accounts')"
|
||||
v-if="showHidden" @click="showHidden = false"></v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
@@ -87,18 +87,18 @@
|
||||
</template>
|
||||
|
||||
<v-card-text class="accounts-overview-title text-truncate pt-0">
|
||||
<span class="accounts-overview-subtitle">{{ $t('Balance') }}</span>
|
||||
<v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && !hasAccount(activeAccountCategory)"></v-skeleton-loader>
|
||||
<span class="accounts-overview-amount ml-3" v-else-if="!loading || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span>
|
||||
<span class="accounts-overview-subtitle">{{ tt('Balance') }}</span>
|
||||
<v-skeleton-loader class="skeleton-no-margin ml-3 mb-2" width="120px" type="text" :loading="true" v-if="loading && activeAccountCategory && !hasAccount(activeAccountCategory)"></v-skeleton-loader>
|
||||
<span class="accounts-overview-amount ml-3" v-else-if="!loading || !activeAccountCategory || hasAccount(activeAccountCategory)">{{ activeAccountCategoryTotalBalance }}</span>
|
||||
<v-btn class="ml-2" density="compact" color="default" variant="text"
|
||||
:icon="true" :disabled="loading"
|
||||
@click="showAccountBalance = !showAccountBalance">
|
||||
<v-icon :icon="showAccountBalance ? icons.eyeSlash : icons.eye" size="20" />
|
||||
<v-tooltip activator="parent">{{ showAccountBalance ? $t('Hide Account Balance') : $t('Show Account Balance') }}</v-tooltip>
|
||||
<v-tooltip activator="parent">{{ showAccountBalance ? tt('Hide Account Balance') : tt('Show Account Balance') }}</v-tooltip>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
|
||||
<v-row class="pl-6 pr-6 pr-md-8" v-if="loading && !hasAccount(activeAccountCategory)">
|
||||
<v-row class="pl-6 pr-6 pr-md-8" v-if="loading && activeAccountCategory && !hasAccount(activeAccountCategory)">
|
||||
<v-col cols="12">
|
||||
<v-card border class="card-title-with-bg account-card mb-8 h-auto">
|
||||
<template #title>
|
||||
@@ -119,7 +119,7 @@
|
||||
<div class="d-flex account-toolbar align-center">
|
||||
<v-btn class="px-2" density="comfortable" color="default" variant="text"
|
||||
:disabled="true" :prepend-icon="icons.transactions">
|
||||
{{ $t('Transaction List') }}
|
||||
{{ tt('Transaction List') }}
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<span class="account-balance ml-2">
|
||||
@@ -132,9 +132,9 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row class="pl-5 pr-2 pr-md-4" v-if="!loading && !hasAccount(activeAccountCategory)">
|
||||
<v-row class="pl-5 pr-2 pr-md-4" v-if="!loading && activeAccountCategory && !hasAccount(activeAccountCategory)">
|
||||
<v-col cols="12">
|
||||
{{ $t('No available account') }}
|
||||
{{ tt('No available account') }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
ghost-class="dragging-item"
|
||||
:disabled="activeAccountCategoryVisibleAccountCount <= 1"
|
||||
:list="allCategorizedAccountsMap[activeAccountCategory.type].accounts"
|
||||
v-if="allCategorizedAccountsMap[activeAccountCategory.type] && allCategorizedAccountsMap[activeAccountCategory.type].accounts && allCategorizedAccountsMap[activeAccountCategory.type].accounts.length"
|
||||
v-if="activeAccountCategory && allCategorizedAccountsMap[activeAccountCategory.type] && allCategorizedAccountsMap[activeAccountCategory.type].accounts && allCategorizedAccountsMap[activeAccountCategory.type].accounts.length"
|
||||
@change="onMove"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
@@ -165,11 +165,11 @@
|
||||
<span class="align-self-center">
|
||||
<v-icon :class="!loading && activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
|
||||
:icon="icons.drag"/>
|
||||
<v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ $t('Drag to Reorder') }}</v-tooltip>
|
||||
<v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4" v-if="element.type === allAccountTypes.MultiSubAccounts.type">
|
||||
<div class="mt-4" v-if="element.type === AccountType.MultiSubAccounts.type">
|
||||
<v-btn-toggle
|
||||
class="account-subaccounts"
|
||||
variant="outlined"
|
||||
@@ -181,10 +181,10 @@
|
||||
v-model="activeSubAccount[element.id]"
|
||||
>
|
||||
<v-btn :value="''">
|
||||
<span>{{ $t('All') }}</span>
|
||||
<span>{{ tt('All') }}</span>
|
||||
</v-btn>
|
||||
<v-btn :key="subAccount.id" :value="subAccount.id"
|
||||
v-for="subAccount in element.subAccounts"
|
||||
v-for="subAccount in element.childrenAccounts"
|
||||
v-show="showHidden || !subAccount.hidden">
|
||||
<ItemIcon size="1.5rem" icon-type="account" :icon-id="subAccount.icon"
|
||||
:color="subAccount.color" :hidden-status="subAccount.hidden" />
|
||||
@@ -205,7 +205,7 @@
|
||||
<v-btn class="px-2" density="comfortable" color="default" variant="text"
|
||||
:disabled="loading" :prepend-icon="icons.transactions"
|
||||
:to="`/transaction/list?accountIds=${accountOrSubAccountId(element)}`">
|
||||
{{ $t('Transaction List') }}
|
||||
{{ tt('Transaction List') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
|
||||
:class="{ 'd-none': loading, 'hover-display': !loading }"
|
||||
@@ -213,21 +213,21 @@
|
||||
:prepend-icon="element.hidden ? icons.show : icons.hide"
|
||||
v-if="!activeSubAccount[element.id]"
|
||||
@click="hide(element, !element.hidden)">
|
||||
{{ element.hidden ? $t('Show') : $t('Hide') }}
|
||||
{{ element.hidden ? tt('Show') : tt('Hide') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
|
||||
:class="{ 'd-none': loading, 'hover-display': !loading }"
|
||||
:disabled="loading" :prepend-icon="icons.edit"
|
||||
v-if="!activeSubAccount[element.id]"
|
||||
@click="edit(element)">
|
||||
{{ $t('Edit') }}
|
||||
{{ tt('Edit') }}
|
||||
</v-btn>
|
||||
<v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
|
||||
:class="{ 'd-none': loading, 'hover-display': !loading }"
|
||||
:disabled="loading" :prepend-icon="icons.remove"
|
||||
v-if="!activeSubAccount[element.id]"
|
||||
@click="remove(element)">
|
||||
{{ $t('Delete') }}
|
||||
{{ tt('Delete') }}
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<span class="account-balance ml-2">{{ accountBalance(element) }}</span>
|
||||
@@ -254,19 +254,23 @@
|
||||
<snack-bar ref="snackbar" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
import EditDialog from './list/dialogs/EditDialog.vue';
|
||||
|
||||
import { ref, computed, useTemplateRef, watch } from 'vue';
|
||||
import { useDisplay } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useAccountListPageBaseBase } from '@/views/base/accounts/AccountListPageBase.ts';
|
||||
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
|
||||
|
||||
import { AccountType, AccountCategory } from '@/core/account.ts';
|
||||
import { isObject } from '@/lib/common.ts';
|
||||
import type { Account } from '@/models/account.ts';
|
||||
|
||||
import { isObject, isString } from '@/lib/common.ts';
|
||||
|
||||
import {
|
||||
mdiEyeOutline,
|
||||
@@ -281,330 +285,282 @@ import {
|
||||
mdiDotsVertical
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditDialog
|
||||
},
|
||||
data() {
|
||||
const { mdAndUp } = useDisplay();
|
||||
type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
|
||||
type SnackBarType = InstanceType<typeof SnackBar>;
|
||||
type EditDialogType = InstanceType<typeof EditDialog>;
|
||||
|
||||
return {
|
||||
activeAccountCategoryType: AccountCategory.Default.type,
|
||||
activeTab: 'accountPage',
|
||||
activeSubAccount: {},
|
||||
loading: true,
|
||||
displayOrderModified: false,
|
||||
alwaysShowNav: mdAndUp.value,
|
||||
showNav: mdAndUp.value,
|
||||
showHidden: false,
|
||||
icons: {
|
||||
eye: mdiEyeOutline,
|
||||
eyeSlash: mdiEyeOffOutline,
|
||||
refresh: mdiRefresh,
|
||||
square: mdiSquareRounded,
|
||||
menu: mdiMenu,
|
||||
edit: mdiPencilOutline,
|
||||
show: mdiEyeOutline,
|
||||
hide: mdiEyeOffOutline,
|
||||
remove: mdiDeleteOutline,
|
||||
transactions: mdiListBoxOutline,
|
||||
drag: mdiDrag,
|
||||
more: mdiDotsVertical
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useExchangeRatesStore),
|
||||
defaultCurrency() {
|
||||
return this.userStore.currentUserDefaultCurrency;
|
||||
},
|
||||
allAccountTypes() {
|
||||
return AccountType.all();
|
||||
},
|
||||
allAccountCategories() {
|
||||
return AccountCategory.values();
|
||||
},
|
||||
allAccounts() {
|
||||
return this.accountsStore.allAccounts;
|
||||
},
|
||||
allCategorizedAccountsMap() {
|
||||
return this.accountsStore.allCategorizedAccountsMap;
|
||||
},
|
||||
allAccountCount() {
|
||||
return this.accountsStore.allAvailableAccountsCount;
|
||||
},
|
||||
netAssets() {
|
||||
const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(netAssets, this.defaultCurrency);
|
||||
},
|
||||
totalAssets() {
|
||||
const totalAssets = this.accountsStore.getTotalAssets(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
|
||||
},
|
||||
totalLiabilities() {
|
||||
const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
|
||||
},
|
||||
activeAccountCategory() {
|
||||
return AccountCategory.valueOf(this.activeAccountCategoryType);
|
||||
},
|
||||
activeAccountCategoryTotalBalance() {
|
||||
return this.accountCategoryTotalBalance(this.activeAccountCategory);
|
||||
},
|
||||
activeAccountCategoryVisibleAccountCount() {
|
||||
if (!this.allCategorizedAccountsMap[this.activeAccountCategory.type] || !this.allCategorizedAccountsMap[this.activeAccountCategory.type].accounts) {
|
||||
return 0;
|
||||
}
|
||||
const display = useDisplay();
|
||||
|
||||
const accounts = this.allCategorizedAccountsMap[this.activeAccountCategory.type].accounts;
|
||||
const { tt, getCurrencyName, formatAmountWithCurrency, joinMultiText } = useI18n();
|
||||
|
||||
if (this.showHidden) {
|
||||
return accounts.length;
|
||||
}
|
||||
const {
|
||||
loading,
|
||||
showHidden,
|
||||
displayOrderModified,
|
||||
showAccountBalance,
|
||||
allAccounts,
|
||||
allCategorizedAccountsMap,
|
||||
allAccountCount,
|
||||
netAssets,
|
||||
totalAssets,
|
||||
totalLiabilities,
|
||||
accountCategoryTotalBalance
|
||||
} = useAccountListPageBaseBase();
|
||||
|
||||
let visibleCount = 0;
|
||||
const accountsStore = useAccountsStore();
|
||||
|
||||
for (let i = 0; i < accounts.length; i++) {
|
||||
if (!accounts[i].hidden) {
|
||||
visibleCount++;
|
||||
}
|
||||
}
|
||||
const icons = {
|
||||
eye: mdiEyeOutline,
|
||||
eyeSlash: mdiEyeOffOutline,
|
||||
refresh: mdiRefresh,
|
||||
square: mdiSquareRounded,
|
||||
menu: mdiMenu,
|
||||
edit: mdiPencilOutline,
|
||||
show: mdiEyeOutline,
|
||||
hide: mdiEyeOffOutline,
|
||||
remove: mdiDeleteOutline,
|
||||
transactions: mdiListBoxOutline,
|
||||
drag: mdiDrag,
|
||||
more: mdiDotsVertical
|
||||
};
|
||||
|
||||
return visibleCount;
|
||||
},
|
||||
showAccountBalance: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showAccountBalance;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowAccountBalance(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.reload(false);
|
||||
},
|
||||
setup() {
|
||||
const display = useDisplay();
|
||||
const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
|
||||
const snackbar = useTemplateRef<SnackBarType>('snackbar');
|
||||
const editDialog = useTemplateRef<EditDialogType>('editDialog');
|
||||
|
||||
return {
|
||||
display: display
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'display.mdAndUp.value': function (newValue) {
|
||||
this.alwaysShowNav = newValue;
|
||||
const activeAccountCategoryType = ref<number>(AccountCategory.Default.type);
|
||||
const activeTab = ref<string>('accountPage');
|
||||
const activeSubAccount = ref<Record<string, string>>({});
|
||||
const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
|
||||
const showNav = ref<boolean>(display.mdAndUp.value);
|
||||
|
||||
if (!this.showNav) {
|
||||
this.showNav = newValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reload(force) {
|
||||
const self = this;
|
||||
const activeAccountCategory = computed<AccountCategory | undefined>(() => AccountCategory.valueOf(activeAccountCategoryType.value));
|
||||
const activeAccountCategoryTotalBalance = computed<string>(() => accountCategoryTotalBalance(activeAccountCategory.value));
|
||||
|
||||
self.loading = true;
|
||||
const activeAccountCategoryVisibleAccountCount = computed<number>(() => {
|
||||
if (!activeAccountCategory.value || !allCategorizedAccountsMap.value[activeAccountCategory.value.type] || !allCategorizedAccountsMap.value[activeAccountCategory.value.type].accounts) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
self.accountsStore.loadAllAccounts({
|
||||
force: force
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
self.displayOrderModified = false;
|
||||
const accounts = allCategorizedAccountsMap.value[activeAccountCategory.value.type].accounts;
|
||||
|
||||
if (self.allAccounts) {
|
||||
for (let i = 0; i < self.allAccounts.length; i++) {
|
||||
const account = self.allAccounts[i];
|
||||
if (showHidden.value) {
|
||||
return accounts.length;
|
||||
}
|
||||
|
||||
if (account.type === self.allAccountTypes.MultiSubAccounts.type && !self.activeSubAccount[account.id]) {
|
||||
self.activeSubAccount[account.id] = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
let visibleCount = 0;
|
||||
|
||||
if (force) {
|
||||
self.$refs.snackbar.showMessage('Account list has been updated');
|
||||
}
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
if (error && error.isUpToDate) {
|
||||
self.displayOrderModified = false;
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
hasAccount(accountCategory) {
|
||||
if (this.showHidden) {
|
||||
return this.accountsStore.hasAccount(accountCategory, false);
|
||||
} else {
|
||||
return this.accountsStore.hasAccount(accountCategory, true);
|
||||
}
|
||||
},
|
||||
accountOrSubAccountId(account) {
|
||||
return account.getAccountOrSubAccountId(this.activeSubAccount[account.id]);
|
||||
},
|
||||
accountComment(account) {
|
||||
return account.getAccountOrSubAccountComment(this.activeSubAccount[account.id]);
|
||||
},
|
||||
accountCurrency(account) {
|
||||
const self = this;
|
||||
|
||||
if (account.type === self.allAccountTypes.SingleAccount.type) {
|
||||
return self.$locale.getCurrencyName(account.currency);
|
||||
} else if (account.type === self.allAccountTypes.MultiSubAccounts.type) {
|
||||
const subAccountCurrencies = account.getSubAccountCurrencies(self.showHidden, self.activeSubAccount[account.id])
|
||||
.map(currencyCode => self.$locale.getCurrencyName(currencyCode));
|
||||
return self.$locale.joinMultiText(subAccountCurrencies);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
accountBalance(account) {
|
||||
if (account.type === this.allAccountTypes.SingleAccount.type) {
|
||||
const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
|
||||
return this.getDisplayCurrency(balance, account.currency);
|
||||
} else if (account.type === this.allAccountTypes.MultiSubAccounts.type) {
|
||||
const balanceResult = this.accountsStore.getAccountSubAccountBalance(this.showAccountBalance, this.showHidden, account, this.activeSubAccount[account.id]);
|
||||
|
||||
if (!isObject(balanceResult)) {
|
||||
return this.getDisplayCurrency(balanceResult, this.defaultCurrency);
|
||||
}
|
||||
|
||||
return this.getDisplayCurrency(balanceResult.balance, balanceResult.currency);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
accountCategoryTotalBalance(accountCategory) {
|
||||
const totalBalance = this.accountsStore.getAccountCategoryTotalBalance(this.showAccountBalance, accountCategory);
|
||||
return this.getDisplayCurrency(totalBalance, this.defaultCurrency);
|
||||
},
|
||||
onMove(event) {
|
||||
if (!event || !event.moved) {
|
||||
return;
|
||||
}
|
||||
|
||||
const self = this;
|
||||
const moveEvent = event.moved;
|
||||
|
||||
if (!moveEvent.element || !moveEvent.element.id) {
|
||||
self.$refs.snackbar.showMessage('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
self.accountsStore.changeAccountDisplayOrder({
|
||||
accountId: moveEvent.element.id,
|
||||
from: moveEvent.oldIndex,
|
||||
to: moveEvent.newIndex,
|
||||
updateListOrder: false,
|
||||
updateGlobalListOrder: true
|
||||
}).then(() => {
|
||||
self.displayOrderModified = true;
|
||||
}).catch(error => {
|
||||
self.$refs.snackbar.showError(error);
|
||||
});
|
||||
},
|
||||
saveSortResult() {
|
||||
const self = this;
|
||||
|
||||
if (!self.displayOrderModified) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.accountsStore.updateAccountDisplayOrders().then(() => {
|
||||
self.loading = false;
|
||||
self.displayOrderModified = false;
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
add() {
|
||||
const self = this;
|
||||
|
||||
self.$refs.editDialog.open({
|
||||
category: self.activeAccountCategoryType
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
self.$refs.snackbar.showMessage(result.message);
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
edit(account) {
|
||||
const self = this;
|
||||
|
||||
self.$refs.editDialog.open({
|
||||
id: account.id,
|
||||
currentAccount: account
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
self.$refs.snackbar.showMessage(result.message);
|
||||
}
|
||||
|
||||
if (self.accountsStore.accountListStateInvalid && !self.loading) {
|
||||
self.reload(false);
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
hide(account, hidden) {
|
||||
const self = this;
|
||||
|
||||
self.loading = true;
|
||||
|
||||
self.accountsStore.hideAccount({
|
||||
account: account,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
remove(account) {
|
||||
const self = this;
|
||||
|
||||
self.$refs.confirmDialog.open('Are you sure you want to delete this account?').then(() => {
|
||||
self.loading = true;
|
||||
|
||||
self.accountsStore.deleteAccount({
|
||||
account: account
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
self.loading = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
getDisplayCurrency(value, currencyCode) {
|
||||
return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
|
||||
for (let i = 0; i < accounts.length; i++) {
|
||||
if (!accounts[i].hidden) {
|
||||
visibleCount++;
|
||||
}
|
||||
}
|
||||
|
||||
return visibleCount;
|
||||
});
|
||||
|
||||
function reload(force: boolean): void {
|
||||
loading.value = true;
|
||||
|
||||
accountsStore.loadAllAccounts({
|
||||
force: force
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
displayOrderModified.value = false;
|
||||
|
||||
if (allAccounts.value) {
|
||||
for (let i = 0; i < allAccounts.value.length; i++) {
|
||||
const account = allAccounts.value[i];
|
||||
|
||||
if (account.type === AccountType.MultiSubAccounts.type && !activeSubAccount.value[account.id]) {
|
||||
activeSubAccount.value[account.id] = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (force) {
|
||||
snackbar.value?.showMessage('Account list has been updated');
|
||||
}
|
||||
}).catch(error => {
|
||||
loading.value = false;
|
||||
|
||||
if (error && error.isUpToDate) {
|
||||
displayOrderModified.value = false;
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function hasAccount(accountCategory: AccountCategory): boolean {
|
||||
return accountsStore.hasAccount(accountCategory, !showHidden.value);
|
||||
}
|
||||
|
||||
function accountOrSubAccountId(account: Account): string | null {
|
||||
return account.getAccountOrSubAccountId(activeSubAccount.value[account.id]);
|
||||
}
|
||||
|
||||
function accountComment(account: Account): string | null {
|
||||
return account.getAccountOrSubAccountComment(activeSubAccount.value[account.id]);
|
||||
}
|
||||
|
||||
function accountCurrency(account: Account): string | null {
|
||||
if (account.type === AccountType.SingleAccount.type) {
|
||||
return getCurrencyName(account.currency);
|
||||
} else if (account.type === AccountType.MultiSubAccounts.type) {
|
||||
const subAccountCurrencies = account.getSubAccountCurrencies(showHidden.value, activeSubAccount.value[account.id])
|
||||
.map(currencyCode => getCurrencyName(currencyCode));
|
||||
return joinMultiText(subAccountCurrencies);
|
||||
} else {
|
||||
return 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
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
snackbar.value?.showMessage(result.message);
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function edit(account: Account): void {
|
||||
editDialog.value?.open({
|
||||
id: account.id,
|
||||
currentAccount: account
|
||||
}).then(result => {
|
||||
if (result && result.message) {
|
||||
snackbar.value?.showMessage(result.message);
|
||||
}
|
||||
|
||||
if (accountsStore.accountListStateInvalid && !loading.value) {
|
||||
reload(false);
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function hide(account: Account, hidden: boolean): void {
|
||||
loading.value = true;
|
||||
|
||||
accountsStore.hideAccount({
|
||||
account: account,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
}).catch(error => {
|
||||
loading.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function remove(account: Account): void {
|
||||
confirmDialog.value?.open('Are you sure you want to delete this account?').then(() => {
|
||||
loading.value = true;
|
||||
|
||||
accountsStore.deleteAccount({
|
||||
account: account
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
}).catch(error => {
|
||||
loading.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveSortResult(): void {
|
||||
if (!displayOrderModified.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
accountsStore.updateAccountDisplayOrders().then(() => {
|
||||
loading.value = false;
|
||||
displayOrderModified.value = false;
|
||||
}).catch(error => {
|
||||
loading.value = false;
|
||||
|
||||
if (!error.processed) {
|
||||
snackbar.value?.showError(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onMove(event: { moved: { element: { id: string }, oldIndex: number, newIndex: number } }): void {
|
||||
if (!event || !event.moved) {
|
||||
return;
|
||||
}
|
||||
|
||||
const moveEvent = event.moved;
|
||||
|
||||
if (!moveEvent.element || !moveEvent.element.id) {
|
||||
snackbar.value?.showMessage('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
accountsStore.changeAccountDisplayOrder({
|
||||
accountId: moveEvent.element.id,
|
||||
from: moveEvent.oldIndex,
|
||||
to: moveEvent.newIndex,
|
||||
updateListOrder: false,
|
||||
updateGlobalListOrder: true
|
||||
}).then(() => {
|
||||
displayOrderModified.value = true;
|
||||
}).catch(error => {
|
||||
snackbar.value?.showError(error);
|
||||
});
|
||||
}
|
||||
|
||||
watch(() => display.mdAndUp.value, (newValue) => {
|
||||
alwaysShowNav.value = newValue;
|
||||
|
||||
if (!showNav.value) {
|
||||
showNav.value = newValue;
|
||||
}
|
||||
});
|
||||
|
||||
reload(false);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
|
||||
<f7-navbar>
|
||||
<f7-nav-left :back-link="$t('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="$t('Account List')"></f7-nav-title>
|
||||
<f7-nav-left :back-link="tt('Back')"></f7-nav-left>
|
||||
<f7-nav-title :title="tt('Account List')"></f7-nav-title>
|
||||
<f7-nav-right class="navbar-compact-icons">
|
||||
<f7-link icon-f7="ellipsis" :class="{ 'disabled': !allAccountCount }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
|
||||
<f7-link href="/account/add" icon-f7="plus" v-if="!sortable"></f7-link>
|
||||
<f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
|
||||
<f7-link :text="tt('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
|
||||
</f7-nav-right>
|
||||
</f7-navbar>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<f7-card-header class="display-block" style="padding-top: 120px;">
|
||||
<p class="no-margin">
|
||||
<small class="card-header-content" v-if="loading">Net assets</small>
|
||||
<small class="card-header-content" v-else-if="!loading">{{ $t('Net assets') }}</small>
|
||||
<small class="card-header-content" v-else-if="!loading">{{ tt('Net assets') }}</small>
|
||||
</p>
|
||||
<p class="no-margin">
|
||||
<span class="net-assets" v-if="loading">0.00 USD</span>
|
||||
@@ -28,10 +28,10 @@
|
||||
<span>Total assets | Total liabilities</span>
|
||||
</small>
|
||||
<small class="account-overview-info" v-else-if="!loading">
|
||||
<span>{{ $t('Total assets') }}</span>
|
||||
<span>{{ tt('Total assets') }}</span>
|
||||
<span>{{ totalAssets }}</span>
|
||||
<span>|</span>
|
||||
<span>{{ $t('Total liabilities') }}</span>
|
||||
<span>{{ tt('Total liabilities') }}</span>
|
||||
<span>{{ totalLiabilities }}</span>
|
||||
</small>
|
||||
</p>
|
||||
@@ -64,11 +64,11 @@
|
||||
</div>
|
||||
|
||||
<f7-list strong inset dividers class="margin-vertical" v-if="!loading && noAvailableAccount">
|
||||
<f7-list-item :title="$t('No available account')"></f7-list-item>
|
||||
<f7-list-item :title="tt('No available account')"></f7-list-item>
|
||||
</f7-list>
|
||||
|
||||
<div :key="accountCategory.type"
|
||||
v-for="accountCategory in allAccountCategories"
|
||||
v-for="accountCategory in AccountCategory.values()"
|
||||
v-show="(showHidden && hasAccount(accountCategory, false)) || hasAccount(accountCategory, true)">
|
||||
<f7-list strong inset dividers sortable class="list-has-group-title account-list margin-vertical"
|
||||
:sortable-enabled="sortable"
|
||||
@@ -76,14 +76,14 @@
|
||||
@sortable:sort="onSort">
|
||||
<f7-list-item group-title :sortable="false">
|
||||
<small>
|
||||
<span>{{ $t(accountCategory.name) }}</span>
|
||||
<span>{{ tt(accountCategory.name) }}</span>
|
||||
<span style="margin-left: 10px">{{ accountCategoryTotalBalance(accountCategory) }}</span>
|
||||
</small>
|
||||
</f7-list-item>
|
||||
<f7-list-item swipeout
|
||||
class="nested-list-item"
|
||||
:id="getAccountDomId(account)"
|
||||
:class="{ 'has-child-list-item': account.type === allAccountTypes.MultiSubAccounts.type && hasVisibleSubAccount(account), 'actual-first-child': account.id === firstShowingIds.accounts[accountCategory.type], 'actual-last-child': account.id === lastShowingIds.accounts[accountCategory.type] }"
|
||||
: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)"
|
||||
:link="!sortable ? '/transaction/list?accountIds=' + account.id : null"
|
||||
:key="account.id"
|
||||
@@ -91,7 +91,7 @@
|
||||
v-show="showHidden || !account.hidden"
|
||||
@taphold="setSortable()"
|
||||
>
|
||||
<template #media v-if="account.type !== allAccountTypes.MultiSubAccounts.type || !hasVisibleSubAccount(account)">
|
||||
<template #media v-if="account.type !== AccountType.MultiSubAccounts.type || !hasVisibleSubAccount(account)">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
@@ -102,7 +102,7 @@
|
||||
<template #title>
|
||||
<div class="display-flex padding-top-half padding-bottom-half">
|
||||
<ItemIcon icon-type="account" :icon-id="account.icon" :color="account.color"
|
||||
v-if="account.type === allAccountTypes.MultiSubAccounts.type && hasVisibleSubAccount(account)">
|
||||
v-if="account.type === AccountType.MultiSubAccounts.type && hasVisibleSubAccount(account)">
|
||||
<f7-badge color="gray" class="right-bottom-icon" v-if="account.hidden">
|
||||
<f7-icon f7="eye_slash_fill"></f7-icon>
|
||||
</f7-badge>
|
||||
@@ -112,7 +112,7 @@
|
||||
<div class="item-footer" v-if="account.comment">{{ account.comment }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<li v-if="account.type === allAccountTypes.MultiSubAccounts.type">
|
||||
<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] }"
|
||||
@@ -120,7 +120,7 @@
|
||||
:title="subAccount.name" :footer="subAccount.comment" :after="accountBalance(subAccount)"
|
||||
:link="!sortable ? '/transaction/list?accountIds=' + subAccount.id : null"
|
||||
:key="subAccount.id"
|
||||
v-for="subAccount in account.subAccounts"
|
||||
v-for="subAccount in account.childrenAccounts"
|
||||
v-show="showHidden || !subAccount.hidden"
|
||||
>
|
||||
<template #media>
|
||||
@@ -141,7 +141,7 @@
|
||||
</f7-swipeout-button>
|
||||
</f7-swipeout-actions>
|
||||
<f7-swipeout-actions right v-if="!sortable">
|
||||
<f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(account)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="orange" close :text="tt('Edit')" @click="edit(account)"></f7-swipeout-button>
|
||||
<f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(account, false)">
|
||||
<f7-icon f7="trash"></f7-icon>
|
||||
</f7-swipeout-button>
|
||||
@@ -152,307 +152,279 @@
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Accounts') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Accounts') }}</f7-actions-button>
|
||||
<f7-actions-button @click="setSortable()">{{ tt('Sort') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ tt('Show Hidden Accounts') }}</f7-actions-button>
|
||||
<f7-actions-button v-if="showHidden" @click="showHidden = false">{{ tt('Hide Hidden Accounts') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
<f7-actions-group>
|
||||
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
|
||||
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
</f7-actions>
|
||||
|
||||
<f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
|
||||
<f7-actions-group>
|
||||
<f7-actions-label>{{ $t('Are you sure you want to delete this account?') }}</f7-actions-label>
|
||||
<f7-actions-button color="red" @click="remove(accountToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
|
||||
<f7-actions-label>{{ tt('Are you sure you want to delete this account?') }}</f7-actions-label>
|
||||
<f7-actions-button color="red" @click="remove(accountToDelete, true)">{{ tt('Delete') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
<f7-actions-group>
|
||||
<f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
|
||||
<f7-actions-button bold close>{{ tt('Cancel') }}</f7-actions-button>
|
||||
</f7-actions-group>
|
||||
</f7-actions>
|
||||
</f7-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/setting.ts';
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import type { Router } from 'framework7/types';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
|
||||
import { useAccountListPageBaseBase } from '@/views/base/accounts/AccountListPageBase.ts';
|
||||
|
||||
import { useAccountsStore } from '@/stores/account.ts';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.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';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'f7router'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
loadingError: null,
|
||||
showHidden: false,
|
||||
sortable: false,
|
||||
accountToDelete: null,
|
||||
showMoreActionSheet: false,
|
||||
showDeleteActionSheet: false,
|
||||
displayOrderModified: false,
|
||||
displayOrderSaving: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useSettingsStore, useUserStore, useAccountsStore, useExchangeRatesStore),
|
||||
defaultCurrency() {
|
||||
return this.userStore.currentUserDefaultCurrency;
|
||||
},
|
||||
allAccountTypes() {
|
||||
return AccountType.all();
|
||||
},
|
||||
allAccountCategories() {
|
||||
return AccountCategory.values();
|
||||
},
|
||||
allCategorizedAccountsMap() {
|
||||
return this.accountsStore.allCategorizedAccountsMap;
|
||||
},
|
||||
allAccountCount() {
|
||||
return this.accountsStore.allAvailableAccountsCount;
|
||||
},
|
||||
firstShowingIds() {
|
||||
return this.accountsStore.getFirstShowingIds(this.showHidden);
|
||||
},
|
||||
lastShowingIds() {
|
||||
return this.accountsStore.getLastShowingIds(this.showHidden);
|
||||
},
|
||||
noAvailableAccount() {
|
||||
if (this.showHidden) {
|
||||
return this.accountsStore.allAvailableAccountsCount < 1;
|
||||
} else {
|
||||
return this.accountsStore.allVisibleAccountsCount < 1;
|
||||
}
|
||||
},
|
||||
netAssets() {
|
||||
const netAssets = this.accountsStore.getNetAssets(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(netAssets, this.defaultCurrency);
|
||||
},
|
||||
totalAssets() {
|
||||
const totalAssets = this.accountsStore.getTotalAssets(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(totalAssets, this.defaultCurrency);
|
||||
},
|
||||
totalLiabilities() {
|
||||
const totalLiabilities = this.accountsStore.getTotalLiabilities(this.showAccountBalance);
|
||||
return this.getDisplayCurrency(totalLiabilities, this.defaultCurrency);
|
||||
},
|
||||
showAccountBalance: {
|
||||
get: function () {
|
||||
return this.settingsStore.appSettings.showAccountBalance;
|
||||
},
|
||||
set: function (value) {
|
||||
this.settingsStore.setShowAccountBalance(value);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const self = this;
|
||||
const props = defineProps<{
|
||||
f7router: Router.Router;
|
||||
}>();
|
||||
|
||||
self.loading = true;
|
||||
const { tt, formatAmountWithCurrency } = useI18n();
|
||||
const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
|
||||
|
||||
self.accountsStore.loadAllAccounts({
|
||||
force: false
|
||||
}).then(() => {
|
||||
self.loading = false;
|
||||
}).catch(error => {
|
||||
if (error.processed) {
|
||||
self.loading = false;
|
||||
} else {
|
||||
self.loadingError = error;
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onPageAfterIn() {
|
||||
if (this.accountsStore.accountListStateInvalid && !this.loading) {
|
||||
this.reload(null);
|
||||
}
|
||||
const {
|
||||
loading,
|
||||
showHidden,
|
||||
displayOrderModified,
|
||||
showAccountBalance,
|
||||
allCategorizedAccountsMap,
|
||||
allAccountCount,
|
||||
netAssets,
|
||||
totalAssets,
|
||||
totalLiabilities,
|
||||
accountCategoryTotalBalance
|
||||
} = useAccountListPageBaseBase();
|
||||
|
||||
this.$routeBackOnError(this.f7router, 'loadingError');
|
||||
},
|
||||
reload(done) {
|
||||
if (this.sortable) {
|
||||
done();
|
||||
return;
|
||||
}
|
||||
const accountsStore = useAccountsStore();
|
||||
|
||||
const self = this;
|
||||
const force = !!done;
|
||||
const loadingError = ref<unknown | null>(null);
|
||||
const sortable = ref<boolean>(false);
|
||||
const accountToDelete = ref<Account | null>(null);
|
||||
const showMoreActionSheet = ref<boolean>(false);
|
||||
const showDeleteActionSheet = ref<boolean>(false);
|
||||
const displayOrderSaving = ref<boolean>(false);
|
||||
|
||||
self.accountsStore.loadAllAccounts({
|
||||
force: force
|
||||
}).then(() => {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
|
||||
if (force) {
|
||||
self.$toast('Account list has been updated');
|
||||
}
|
||||
}).catch(error => {
|
||||
if (done) {
|
||||
done();
|
||||
}
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
hasAccount(accountCategory, visibleOnly) {
|
||||
return this.accountsStore.hasAccount(accountCategory, visibleOnly);
|
||||
},
|
||||
hasVisibleSubAccount(account) {
|
||||
return this.accountsStore.hasVisibleSubAccount(this.showHidden, account);
|
||||
},
|
||||
accountBalance(account) {
|
||||
const balance = this.accountsStore.getAccountBalance(this.showAccountBalance, account);
|
||||
return this.getDisplayCurrency(balance, account.currency);
|
||||
},
|
||||
accountCategoryTotalBalance(accountCategory) {
|
||||
const totalBalance = this.accountsStore.getAccountCategoryTotalBalance(this.showAccountBalance, accountCategory);
|
||||
return this.getDisplayCurrency(totalBalance, this.defaultCurrency);
|
||||
},
|
||||
setSortable() {
|
||||
if (this.sortable) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.showHidden = true;
|
||||
this.sortable = true;
|
||||
this.displayOrderModified = false;
|
||||
},
|
||||
onSort(event) {
|
||||
const self = this;
|
||||
|
||||
if (!event || !event.el || !event.el.id) {
|
||||
self.$toast('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
const id = self.parseAccountIdFromDomId(event.el.id);
|
||||
|
||||
if (!id) {
|
||||
self.$toast('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
self.accountsStore.changeAccountDisplayOrder({
|
||||
accountId: id,
|
||||
from: event.from - 1, // first item in the list is title, so the index need minus one
|
||||
to: event.to - 1,
|
||||
updateListOrder: true,
|
||||
updateGlobalListOrder: true
|
||||
}).then(() => {
|
||||
self.displayOrderModified = true;
|
||||
}).catch(error => {
|
||||
self.$toast(error.message || error);
|
||||
});
|
||||
},
|
||||
saveSortResult() {
|
||||
const self = this;
|
||||
|
||||
if (!self.displayOrderModified) {
|
||||
self.showHidden = false;
|
||||
self.sortable = false;
|
||||
return;
|
||||
}
|
||||
|
||||
self.displayOrderSaving = true;
|
||||
self.$showLoading();
|
||||
|
||||
self.accountsStore.updateAccountDisplayOrders().then(() => {
|
||||
self.displayOrderSaving = false;
|
||||
self.$hideLoading();
|
||||
|
||||
self.showHidden = false;
|
||||
self.sortable = false;
|
||||
self.displayOrderModified = false;
|
||||
}).catch(error => {
|
||||
self.displayOrderSaving = false;
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
edit(account) {
|
||||
this.f7router.navigate('/account/edit?id=' + account.id);
|
||||
},
|
||||
hide(account, hidden) {
|
||||
const self = this;
|
||||
|
||||
self.$showLoading();
|
||||
|
||||
self.accountsStore.hideAccount({
|
||||
account: account,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
}).catch(error => {
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
remove(account, confirm) {
|
||||
const self = this;
|
||||
|
||||
if (!account) {
|
||||
self.$alert('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm) {
|
||||
self.accountToDelete = account;
|
||||
self.showDeleteActionSheet = true;
|
||||
return;
|
||||
}
|
||||
|
||||
self.showDeleteActionSheet = false;
|
||||
self.accountToDelete = null;
|
||||
self.$showLoading();
|
||||
|
||||
self.accountsStore.deleteAccount({
|
||||
account: account,
|
||||
beforeResolve: (done) => {
|
||||
onSwipeoutDeleted(self.getAccountDomId(account), done);
|
||||
}
|
||||
}).then(() => {
|
||||
self.$hideLoading();
|
||||
}).catch(error => {
|
||||
self.$hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
self.$toast(error.message || error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getDisplayCurrency(value, currencyCode) {
|
||||
return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
|
||||
},
|
||||
getAccountDomId(account) {
|
||||
return 'account_' + account.id;
|
||||
},
|
||||
parseAccountIdFromDomId(domId) {
|
||||
if (!domId || domId.indexOf('account_') !== 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return domId.substring(8); // account_
|
||||
}
|
||||
const firstShowingIds = computed<AccountShowingIds>(() => accountsStore.getFirstShowingIds(showHidden.value));
|
||||
const lastShowingIds = computed<AccountShowingIds>(() => accountsStore.getLastShowingIds(showHidden.value));
|
||||
const noAvailableAccount = computed<boolean>(() => {
|
||||
if (showHidden.value) {
|
||||
return accountsStore.allAvailableAccountsCount < 1;
|
||||
} else {
|
||||
return accountsStore.allVisibleAccountsCount < 1;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
function hasAccount(accountCategory: AccountCategory, visibleOnly: boolean): boolean {
|
||||
return accountsStore.hasAccount(accountCategory, visibleOnly);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function parseAccountIdFromDomId(domId: string): string | null {
|
||||
if (!domId || domId.indexOf('account_') !== 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return domId.substring(8); // account_
|
||||
}
|
||||
|
||||
function init(): void {
|
||||
loading.value = true;
|
||||
|
||||
accountsStore.loadAllAccounts({
|
||||
force: false
|
||||
}).then(() => {
|
||||
loading.value = false;
|
||||
}).catch(error => {
|
||||
if (error.processed) {
|
||||
loading.value = false;
|
||||
} else {
|
||||
loadingError.value = error;
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reload(done: (() => void) | null): void {
|
||||
if (sortable.value) {
|
||||
done?.();
|
||||
return;
|
||||
}
|
||||
|
||||
const force = !!done;
|
||||
|
||||
accountsStore.loadAllAccounts({
|
||||
force: force
|
||||
}).then(() => {
|
||||
done?.();
|
||||
|
||||
if (force) {
|
||||
showToast('Account list has been updated');
|
||||
}
|
||||
}).catch(error => {
|
||||
done?.();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function edit(account: Account): void {
|
||||
props.f7router.navigate('/account/edit?id=' + account.id);
|
||||
}
|
||||
|
||||
function hide(account: Account, hidden: boolean): void {
|
||||
showLoading();
|
||||
|
||||
accountsStore.hideAccount({
|
||||
account: account,
|
||||
hidden: hidden
|
||||
}).then(() => {
|
||||
hideLoading();
|
||||
}).catch(error => {
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function remove(account: Account | null, confirm: boolean): void {
|
||||
if (!account) {
|
||||
showAlert('An error occurred');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm) {
|
||||
accountToDelete.value = account;
|
||||
showDeleteActionSheet.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
showDeleteActionSheet.value = false;
|
||||
accountToDelete.value = null;
|
||||
showLoading();
|
||||
|
||||
accountsStore.deleteAccount({
|
||||
account: account,
|
||||
beforeResolve: (done) => {
|
||||
onSwipeoutDeleted(getAccountDomId(account), done);
|
||||
}
|
||||
}).then(() => {
|
||||
hideLoading();
|
||||
}).catch(error => {
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setSortable(): void {
|
||||
if (sortable.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
showHidden.value = true;
|
||||
sortable.value = true;
|
||||
displayOrderModified.value = false;
|
||||
}
|
||||
|
||||
function onSort(event: { el: { id: string }; from: number; to: number }): void {
|
||||
if (!event || !event.el || !event.el.id) {
|
||||
showToast('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
const id = parseAccountIdFromDomId(event.el.id);
|
||||
|
||||
if (!id) {
|
||||
showToast('Unable to move account');
|
||||
return;
|
||||
}
|
||||
|
||||
accountsStore.changeAccountDisplayOrder({
|
||||
accountId: id,
|
||||
from: event.from - 1, // first item in the list is title, so the index need minus one
|
||||
to: event.to - 1,
|
||||
updateListOrder: true,
|
||||
updateGlobalListOrder: true
|
||||
}).then(() => {
|
||||
displayOrderModified.value = true;
|
||||
}).catch(error => {
|
||||
showToast(error.message || error);
|
||||
});
|
||||
}
|
||||
|
||||
function saveSortResult(): void {
|
||||
if (!displayOrderModified.value) {
|
||||
showHidden.value = false;
|
||||
sortable.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
displayOrderSaving.value = true;
|
||||
showLoading();
|
||||
|
||||
accountsStore.updateAccountDisplayOrders().then(() => {
|
||||
displayOrderSaving.value = false;
|
||||
hideLoading();
|
||||
|
||||
showHidden.value = false;
|
||||
sortable.value = false;
|
||||
displayOrderModified.value = false;
|
||||
}).catch(error => {
|
||||
displayOrderSaving.value = false;
|
||||
hideLoading();
|
||||
|
||||
if (!error.processed) {
|
||||
showToast(error.message || error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onPageAfterIn(): void {
|
||||
if (accountsStore.accountListStateInvalid && !loading.value) {
|
||||
reload(null);
|
||||
}
|
||||
|
||||
routeBackOnError(props.f7router, loadingError);
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user