migrate account list page to composition API and typescript

src/views/mobile/accounts/ListPage.vue

@@ -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>