migrate account edit page to composition API and typescript

src/components/desktop/AmountInput.vue

@@ -43,7 +43,7 @@ const props = defineProps<{
     class?: string;
     color?: string;
     density?: string;
-    currency: string;
+    currency?: string;
     showCurrency?: boolean;
     label?: string;
     placeholder?: string;

src/views/base/accounts/AccountEditPageBase.ts

@@ -0,0 +1,182 @@
+import { ref, computed, watch } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useAccountsStore } from '@/stores/account.ts';
+
+import type { TypeAndDisplayName } from '@/core/base.ts';
+import { AccountCategory, AccountType } from '@/core/account.ts';
+import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
+import type { LocalizedAccountCategory } from '@/core/account.ts';
+import type { Account } from '@/models/account.ts';
+
+import { setAccountSuitableIcon } from '@/lib/account.ts';
+
+export interface DayAndDisplayName {
+    readonly day: number;
+    readonly displayName: string;
+}
+
+export function useAccountEditPageBaseBase() {
+    const { tt, getAllCurrencies, getAllAccountCategories, getAllAccountTypes, getMonthdayShortName } = useI18n();
+    const accountsStore = useAccountsStore();
+
+    const editAccountId = ref<string | null>(null);
+    const clientSessionId = ref<string>('');
+    const loading = ref<boolean>(false);
+    const submitting = ref<boolean>(false);
+    const account = ref<Account>(accountsStore.generateNewAccountModel());
+    const subAccounts = ref<Account[]>([]);
+
+    const title = computed<string>(() => {
+        if (!editAccountId.value) {
+            return 'Add Account';
+        } else {
+            return 'Edit Account';
+        }
+    });
+
+    const saveButtonTitle = computed<string>(() => {
+        if (!editAccountId.value) {
+            return 'Add';
+        } else {
+            return 'Save';
+        }
+    });
+
+    const allAccountCategories = computed<LocalizedAccountCategory[]>(() => getAllAccountCategories());
+    const allAccountTypes = computed<TypeAndDisplayName[]>(() => getAllAccountTypes());
+    const allCurrencies = computed<LocalizedCurrencyInfo[]>(() => getAllCurrencies());
+
+    const allAvailableMonthDays = computed<DayAndDisplayName[]>(() => {
+        const allAvailableDays: DayAndDisplayName[] = [];
+
+        allAvailableDays.push({
+            day: 0,
+            displayName: tt('Not set'),
+        });
+
+        for (let i = 1; i <= 28; i++) {
+            allAvailableDays.push({
+                day: i,
+                displayName: getMonthdayShortName(i),
+            });
+        }
+
+        return allAvailableDays;
+    });
+
+    const isAccountSupportCreditCardStatementDate = computed<boolean>(() => account.value && account.value.category === AccountCategory.CreditCard.type);
+
+    function getAccountCreditCardStatementDate(statementDate?: number): string | null {
+        for (const item of allAvailableMonthDays.value) {
+            if (item.day === statementDate) {
+                return item.displayName;
+            }
+        }
+
+        return null;
+    }
+
+    function getInputEmptyProblemMessage(account: Account, isSubAccount: boolean): string | null {
+        if (!isSubAccount && !account.category) {
+            return 'Account category cannot be blank';
+        } else if (!isSubAccount && !account.type) {
+            return 'Account type cannot be blank';
+        } else if (!account.name) {
+            return 'Account name cannot be blank';
+        } else if (account.type === AccountType.SingleAccount.type && !account.currency) {
+            return 'Account currency cannot be blank';
+        } else {
+            return null;
+        }
+    }
+
+    function isInputEmpty(): boolean {
+        const isAccountEmpty = !!getInputEmptyProblemMessage(account.value, false);
+
+        if (isAccountEmpty) {
+            return true;
+        }
+
+        if (account.value.type === AccountType.MultiSubAccounts.type) {
+            for (let i = 0; i < subAccounts.value.length; i++) {
+                const isSubAccountEmpty = !!getInputEmptyProblemMessage(subAccounts.value[i], true);
+
+                if (isSubAccountEmpty) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    function getAccountOrSubAccountProblemMessage(): string | null {
+        let problemMessage = getInputEmptyProblemMessage(account.value, false);
+
+        if (!problemMessage && account.value.type === AccountType.MultiSubAccounts.type) {
+            for (let i = 0; i < subAccounts.value.length; i++) {
+                problemMessage = getInputEmptyProblemMessage(subAccounts.value[i], true);
+
+                if (problemMessage) {
+                    break;
+                }
+            }
+        }
+
+        return problemMessage;
+    }
+
+    function addSubAccount(): boolean {
+        if (account.value.type !== AccountType.MultiSubAccounts.type) {
+            return false;
+        }
+
+        const subAccount = accountsStore.generateNewSubAccountModel(account.value);
+        subAccounts.value.push(subAccount);
+        return true;
+    }
+
+    function setAccount(newAccount: Account): void {
+        account.value.from(newAccount);
+        subAccounts.value = [];
+
+        if (newAccount.childrenAccounts && newAccount.childrenAccounts.length > 0) {
+            for (let i = 0; i < newAccount.childrenAccounts.length; i++) {
+                const subAccount = accountsStore.generateNewSubAccountModel(account.value);
+                subAccount.from(newAccount.childrenAccounts[i]);
+
+                subAccounts.value.push(subAccount);
+            }
+        }
+    }
+
+    watch(() => account.value.category, (newValue, oldValue) => {
+        setAccountSuitableIcon(account.value, oldValue, newValue);
+    });
+
+    return {
+        // states
+        editAccountId,
+        clientSessionId,
+        loading,
+        submitting,
+        account,
+        subAccounts,
+        // computed states
+        title,
+        saveButtonTitle,
+        allAccountCategories,
+        allAccountTypes,
+        allCurrencies,
+        allAvailableMonthDays,
+        isAccountSupportCreditCardStatementDate,
+        // functions
+        getAccountCreditCardStatementDate,
+        isInputEmpty,
+        getAccountOrSubAccountProblemMessage,
+        addSubAccount,
+        setAccount
+    };
+}

src/views/desktop/accounts/list/dialogs/EditDialog.vue

@@ -1,19 +1,19 @@
 <template>
-    <v-dialog :width="account.type === allAccountTypes.MultiSubAccounts.type ? 1000 : 800" :persistent="!!persistent" v-model="showState">
+    <v-dialog :width="account.type === AccountType.MultiSubAccounts.type ? 1000 : 800" :persistent="!!persistent" v-model="showState">
         <v-card class="pa-2 pa-sm-4 pa-md-8">
             <template #title>
                 <div class="d-flex align-center justify-center">
                     <div class="d-flex w-100 align-center justify-center">
-                        <h4 class="text-h4">{{ $t(title) }}</h4>
+                        <h4 class="text-h4">{{ tt(title) }}</h4>
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="loading"></v-progress-circular>
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
-                           :disabled="loading || submitting || !!editAccountId || account.type !== allAccountTypes.MultiSubAccounts.type">
+                           :disabled="loading || submitting || !!editAccountId || account.type !== AccountType.MultiSubAccounts.type">
                         <v-icon :icon="icons.more" />
                         <v-menu activator="parent">
                             <v-list>
                                 <v-list-item :prepend-icon="icons.add"
-                                             :title="$t('Add Sub-account')"
+                                             :title="tt('Add Sub-account')"
                                              @click="addSubAccount"></v-list-item>
                             </v-list>
                         </v-menu>
@@ -21,14 +21,14 @@
                 </div>
             </template>
             <v-card-text class="d-flex flex-column flex-md-row mt-md-4 pt-0">
-                <div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts.type">
+                <div class="mb-4" v-if="account.type === AccountType.MultiSubAccounts.type">
                     <v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
                         <v-tab :value="-1">
-                            <span>{{ $t('Main Account') }}</span>
+                            <span>{{ tt('Main Account') }}</span>
                         </v-tab>
-                        <template v-if="account.type === allAccountTypes.MultiSubAccounts.type">
+                        <template v-if="account.type === AccountType.MultiSubAccounts.type">
                             <v-tab :key="idx" :value="idx" v-for="(subAccount, idx) in subAccounts">
-                                <span>{{ $t('Sub Account') + ' #' + (idx + 1) }}</span>
+                                <span>{{ tt('Sub Account') + ' #' + (idx + 1) }}</span>
                                 <v-btn class="ml-2" color="error" size="24" variant="text"
                                        :icon="icons.delete" v-if="!editAccountId"
                                        @click="removeSubAccount(subAccount)"></v-btn>
@@ -38,21 +38,21 @@
                 </div>
 
                 <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container"
-                          :class="{ 'ml-md-5': account.type === allAccountTypes.MultiSubAccounts.type }"
+                          :class="{ 'ml-md-5': account.type === AccountType.MultiSubAccounts.type }"
                           v-model="activeTab">
                     <v-window-item value="account">
                         <v-form class="mt-2">
                             <v-row>
-                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount.type || currentAccountIndex < 0">
+                                <v-col cols="12" md="12" v-if="account.type === AccountType.SingleAccount.type || currentAccountIndex < 0">
                                     <v-select
                                         item-title="displayName"
                                         item-value="type"
                                         persistent-placeholder
                                         :disabled="loading || submitting"
-                                        :label="$t('Account Category')"
+                                        :label="tt('Account Category')"
-                                        :placeholder="$t('Account Category')"
+                                        :placeholder="tt('Account Category')"
                                         :items="allAccountCategories"
-                                        :no-data-text="$t('No results')"
+                                        :no-data-text="tt('No results')"
                                         v-model="selectedAccount.category"
                                     >
                                         <template #item="{ props, item }">
@@ -71,16 +71,16 @@
                                         </template>
                                     </v-select>
                                 </v-col>
-                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount.type || currentAccountIndex < 0">
+                                <v-col cols="12" md="12" v-if="account.type === AccountType.SingleAccount.type || currentAccountIndex < 0">
                                     <v-select
                                         item-title="displayName"
                                         item-value="type"
                                         persistent-placeholder
                                         :disabled="loading || submitting || !!editAccountId"
-                                        :label="$t('Account Type')"
+                                        :label="tt('Account Type')"
-                                        :placeholder="$t('Account Type')"
+                                        :placeholder="tt('Account Type')"
-                                        :items="allAccountTypesArray"
+                                        :items="allAccountTypes"
-                                        :no-data-text="$t('No results')"
+                                        :no-data-text="tt('No results')"
                                         v-model="selectedAccount.type"
                                     />
                                 </v-col>
@@ -89,36 +89,36 @@
                                         type="text"
                                         persistent-placeholder
                                         :disabled="loading || submitting"
-                                        :label="currentAccountIndex < 0 ? $t('Account Name') : $t('Sub-account Name')"
+                                        :label="currentAccountIndex < 0 ? tt('Account Name') : tt('Sub-account Name')"
-                                        :placeholder="currentAccountIndex < 0 ? $t('Your account name') : $t('Your sub-account name')"
+                                        :placeholder="currentAccountIndex < 0 ? tt('Your account name') : tt('Your sub-account name')"
                                         v-model="selectedAccount.name"
                                     />
                                 </v-col>
                                 <v-col cols="12" md="6">
                                     <icon-select icon-type="account"
-                                                 :all-icon-infos="allAccountIcons"
+                                                 :all-icon-infos="ALL_ACCOUNT_ICONS"
-                                                 :label="currentAccountIndex < 0 ? $t('Account Icon') : $t('Sub-account Icon')"
+                                                 :label="currentAccountIndex < 0 ? tt('Account Icon') : tt('Sub-account Icon')"
                                                  :color="selectedAccount.color"
                                                  :disabled="loading || submitting"
                                                  v-model="selectedAccount.icon" />
                                 </v-col>
                                 <v-col cols="12" md="6">
-                                    <color-select :all-color-infos="allAccountColors"
+                                    <color-select :all-color-infos="ALL_ACCOUNT_COLORS"
-                                                  :label="currentAccountIndex < 0 ? $t('Account Color') : $t('Sub-account Color')"
+                                                  :label="currentAccountIndex < 0 ? tt('Account Color') : tt('Sub-account Color')"
                                                   :disabled="loading || submitting"
                                                   v-model="selectedAccount.color" />
                                 </v-col>
-                                <v-col cols="12" :md="currentAccountIndex < 0 && isAccountSupportCreditCardStatementDate() ? 6 : 12" v-if="account.type === allAccountTypes.SingleAccount.type || currentAccountIndex >= 0">
+                                <v-col cols="12" :md="currentAccountIndex < 0 && isAccountSupportCreditCardStatementDate ? 6 : 12" v-if="account.type === AccountType.SingleAccount.type || currentAccountIndex >= 0">
                                     <v-autocomplete
                                         item-title="displayName"
                                         item-value="currencyCode"
                                         auto-select-first
                                         persistent-placeholder
                                         :disabled="loading || submitting || !!editAccountId"
-                                        :label="$t('Currency')"
+                                        :label="tt('Currency')"
-                                        :placeholder="$t('Currency')"
+                                        :placeholder="tt('Currency')"
                                         :items="allCurrencies"
-                                        :no-data-text="$t('No results')"
+                                        :no-data-text="tt('No results')"
                                         v-model="selectedAccount.currency"
                                     >
                                         <template #append-inner>
@@ -126,37 +126,37 @@
                                         </template>
                                     </v-autocomplete>
                                 </v-col>
-                                <v-col cols="12" :md="account.type === allAccountTypes.SingleAccount.type || currentAccountIndex >= 0 ? 6 : 12" v-if="currentAccountIndex < 0 && isAccountSupportCreditCardStatementDate()">
+                                <v-col cols="12" :md="account.type === AccountType.SingleAccount.type || currentAccountIndex >= 0 ? 6 : 12" v-if="currentAccountIndex < 0 && isAccountSupportCreditCardStatementDate">
                                     <v-autocomplete
                                         item-title="displayName"
                                         item-value="day"
                                         auto-select-first
                                         persistent-placeholder
                                         :disabled="loading || submitting"
-                                        :label="$t('Statement Date')"
+                                        :label="tt('Statement Date')"
-                                        :placeholder="$t('Statement Date')"
+                                        :placeholder="tt('Statement Date')"
                                         :items="allAvailableMonthDays"
-                                        :no-data-text="$t('No results')"
+                                        :no-data-text="tt('No results')"
                                         v-model="account.creditCardStatementDate"
                                     ></v-autocomplete>
                                 </v-col>
                                 <v-col cols="12" :md="!editAccountId && selectedAccount.balance ? 6 : 12"
-                                       v-if="account.type === allAccountTypes.SingleAccount.type || currentAccountIndex >= 0">
+                                       v-if="account.type === AccountType.SingleAccount.type || currentAccountIndex >= 0">
                                     <amount-input :disabled="loading || submitting || !!editAccountId"
                                                   :persistent-placeholder="true"
                                                   :currency="selectedAccount.currency"
                                                   :show-currency="true"
-                                                  :label="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub-account Balance')"
+                                                  :label="currentAccountIndex < 0 ? tt('Account Balance') : tt('Sub-account Balance')"
-                                                  :placeholder="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub-account Balance')"
+                                                  :placeholder="currentAccountIndex < 0 ? tt('Account Balance') : tt('Sub-account Balance')"
                                                   v-model="selectedAccount.balance"/>
                                 </v-col>
                                 <v-col cols="12" md="6" v-show="selectedAccount.balance"
-                                       v-if="!editAccountId && (account.type === allAccountTypes.SingleAccount.type || currentAccountIndex >= 0)">
+                                       v-if="!editAccountId && (account.type === AccountType.SingleAccount.type || currentAccountIndex >= 0)">
                                     <date-time-select
                                         :disabled="loading || submitting"
-                                        :label="$t('Balance Time')"
+                                        :label="tt('Balance Time')"
                                         v-model="selectedAccount.balanceTime"
-                                        @error="showDateTimeError" />
+                                        @error="onShowDateTimeError" />
                                 </v-col>
                                 <v-col cols="12" md="12">
                                     <v-textarea
@@ -164,14 +164,14 @@
                                         persistent-placeholder
                                         rows="3"
                                         :disabled="loading || submitting"
-                                        :label="$t('Description')"
+                                        :label="tt('Description')"
-                                        :placeholder="currentAccountIndex < 0 ? $t('Your account description (optional)') : $t('Your sub-account description (optional)')"
+                                        :placeholder="currentAccountIndex < 0 ? tt('Your account description (optional)') : tt('Your sub-account description (optional)')"
                                         v-model="selectedAccount.comment"
                                     />
                                 </v-col>
                                 <v-col class="py-0" cols="12" md="12" v-if="editAccountId">
                                     <v-switch :disabled="loading || submitting"
-                                              :label="$t('Visible')" v-model="selectedAccount.visible"/>
+                                              :label="tt('Visible')" v-model="selectedAccount.visible"/>
                                 </v-col>
                             </v-row>
                         </v-form>
@@ -181,11 +181,11 @@
             <v-card-text class="overflow-y-visible">
                 <div class="w-100 d-flex justify-center mt-2 mt-sm-4 mt-md-6 gap-4">
                     <v-btn :disabled="isInputEmpty() || loading || submitting" @click="save">
-                        {{ $t(saveButtonTitle) }}
+                        {{ tt(saveButtonTitle) }}
                         <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                     </v-btn>
                     <v-btn color="secondary" variant="tonal"
-                           :disabled="loading || submitting" @click="cancel">{{ $t('Cancel') }}</v-btn>
+                           :disabled="loading || submitting" @click="cancel">{{ tt('Cancel') }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>
@@ -195,14 +195,21 @@
     <snack-bar ref="snackbar" />
 </template>
 
-<script>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
-import { useSettingsStore } from '@/stores/setting.ts';
+import SnackBar from '@/components/desktop/SnackBar.vue';
+
+import { ref, computed, useTemplateRef, watch } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useAccountEditPageBaseBase } from '@/views/base/accounts/AccountEditPageBase.ts';
+
 import { useAccountsStore } from '@/stores/account.ts';
 
-import { AccountType, AccountCategory } from '@/core/account.ts';
+import { AccountType } from '@/core/account.ts';
 import { ALL_ACCOUNT_ICONS } from '@/consts/icon.ts';
 import { ALL_ACCOUNT_COLORS } from '@/consts/color.ts';
+import type { Account } from '@/models/account.ts';
 
 import { isNumber } from '@/lib/common.ts';
 import { generateRandomUUID } from '@/lib/misc.ts';
@@ -214,290 +221,176 @@ import {
     mdiDeleteOutline
 } from '@mdi/js';
 
-export default {
+interface AccountEditResponse {
-    props: [
+    message: string;
-        'persistent',
-        'show'
-    ],
-    expose: [
-        'open'
-    ],
-    data() {
-        const accountsStore = useAccountsStore();
-        const newAccount = accountsStore.generateNewAccountModel();
-
-        return {
-            showState: false,
-            activeTab: 'account',
-            editAccountId: null,
-            clientSessionId: '',
-            loading: false,
-            account: newAccount,
-            subAccounts: [],
-            currentAccountIndex: -1,
-            submitting: false,
-            resolve: null,
-            reject: null,
-            icons: {
-                more: mdiDotsVertical,
-                add: mdiCreditCardPlusOutline,
-                delete: mdiDeleteOutline
-            }
-        };
-    },
-    computed: {
-        ...mapStores(useSettingsStore, useAccountsStore),
-        title() {
-            if (!this.editAccountId) {
-                return 'Add Account';
-            } else {
-                return 'Edit Account';
-            }
-        },
-        saveButtonTitle() {
-            if (!this.editAccountId) {
-                return 'Add';
-            } else {
-                return 'Save';
-            }
-        },
-        allAccountTypes() {
-            return AccountType.all();
-        },
-        allAccountCategories() {
-            return this.$locale.getAllAccountCategories();
-        },
-        allAccountTypesArray() {
-            return this.$locale.getAllAccountTypes();
-        },
-        allAccountIcons() {
-            return ALL_ACCOUNT_ICONS;
-        },
-        allAccountColors() {
-            return ALL_ACCOUNT_COLORS;
-        },
-        allCurrencies() {
-            return this.$locale.getAllCurrencies();
-        },
-        allAvailableMonthDays() {
-            const allAvailableDays = [];
-
-            allAvailableDays.push({
-                day: 0,
-                displayName: this.$t('Not set'),
-            });
-
-            for (let i = 1; i <= 28; i++) {
-                allAvailableDays.push({
-                    day: i,
-                    displayName: this.$locale.getMonthdayShortName(i),
-                });
-            }
-
-            return allAvailableDays;
-        },
-        selectedAccount() {
-            if (this.currentAccountIndex < 0) {
-                return this.account;
-            }
-
-            return this.subAccounts[this.currentAccountIndex];
-        }
-    },
-    watch: {
-        'account.category': function (newValue, oldValue) {
-            this.chooseSuitableIcon(oldValue, newValue);
-        },
-        'account.type': function () {
-            if (this.subAccounts.length < 1) {
-                this.addSubAccount();
-            }
-        }
-    },
-    methods: {
-        open(options) {
-            const self = this;
-            self.showState = true;
-            self.loading = true;
-            self.submitting = false;
-
-            const newAccount = self.accountsStore.generateNewAccountModel();
-            self.account.from(newAccount);
-            self.subAccounts = [];
-            self.currentAccountIndex = -1;
-
-            if (options && options.id) {
-                if (options.currentAccount) {
-                    self.setAccount(options.currentAccount);
-                }
-
-                self.editAccountId = options.id;
-                self.accountsStore.getAccount({
-                    accountId: self.editAccountId
-                }).then(account => {
-                    self.setAccount(account);
-                    self.loading = false;
-                }).catch(error => {
-                    self.loading = false;
-                    self.showState = false;
-
-                    if (!error.processed) {
-                        if (self.reject) {
-                            self.reject(error);
-                        }
-                    }
-                });
-            } else {
-                if (isNumber(options.category)) {
-                    self.account.category = options.category;
-                    self.chooseSuitableIcon(1, options.category);
-                }
-
-                self.editAccountId = null;
-                self.clientSessionId = generateRandomUUID();
-                self.loading = false;
-            }
-
-            return new Promise((resolve, reject) => {
-                self.resolve = resolve;
-                self.reject = reject;
-            });
-        },
-        addSubAccount() {
-            if (this.account.type !== this.allAccountTypes.MultiSubAccounts.type) {
-                return;
-            }
-
-            const subAccount = this.accountsStore.generateNewSubAccountModel(this.account);
-            this.subAccounts.push(subAccount);
-        },
-        removeSubAccount(subAccount) {
-            const self = this;
-
-            self.$refs.confirmDialog.open('Are you sure you want to remove this sub-account?').then(() => {
-                for (let i = 0; i < self.subAccounts.length; i++) {
-                    if (self.subAccounts[i] === subAccount) {
-                        self.subAccounts.splice(i, 1);
-
-                        if (self.currentAccountIndex >= self.subAccounts.length) {
-                            self.currentAccountIndex = self.subAccounts.length - 1;
-                        }
-                    }
-                }
-            });
-        },
-        save() {
-            const self = this;
-
-            let problemMessage = self.getInputEmptyProblemMessage(self.account, false);
-
-            if (!problemMessage && self.account.type === self.allAccountTypes.MultiSubAccounts.type) {
-                for (let i = 0; i < self.subAccounts.length; i++) {
-                    problemMessage = self.getInputEmptyProblemMessage(self.subAccounts[i], true);
-
-                    if (problemMessage) {
-                        break;
-                    }
-                }
-            }
-
-            if (problemMessage) {
-                self.$refs.snackbar.showMessage(problemMessage);
-                return;
-            }
-
-            self.submitting = true;
-
-            self.accountsStore.saveAccount({
-                account: self.account,
-                subAccounts: self.subAccounts,
-                isEdit: !!self.editAccountId,
-                clientSessionId: self.clientSessionId
-            }).then(() => {
-                self.submitting = false;
-
-                let message = 'You have saved this account';
-
-                if (!self.editAccountId) {
-                    message = 'You have added a new account';
-                }
-
-                if (self.resolve) {
-                    self.resolve({
-                        message: message
-                    });
-                }
-
-                self.showState = false;
-            }).catch(error => {
-                self.submitting = false;
-
-                if (!error.processed) {
-                    self.$refs.snackbar.showError(error);
-                }
-            });
-        },
-        cancel() {
-            if (this.reject) {
-                this.reject();
-            }
-
-            this.showState = false;
-        },
-        isAccountSupportCreditCardStatementDate() {
-            return this.account && this.account.category === AccountCategory.CreditCard.type;
-        },
-        chooseSuitableIcon(oldCategory, newCategory) {
-            setAccountSuitableIcon(this.account, oldCategory, newCategory);
-        },
-        isInputEmpty() {
-            const isAccountEmpty = !!this.getInputEmptyProblemMessage(this.account, false);
-
-            if (isAccountEmpty) {
-                return true;
-            }
-
-            if (this.account.type === this.allAccountTypes.MultiSubAccounts.type) {
-                for (let i = 0; i < this.subAccounts.length; i++) {
-                    const isSubAccountEmpty = !!this.getInputEmptyProblemMessage(this.subAccounts[i], true);
-
-                    if (isSubAccountEmpty) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        },
-        getInputEmptyProblemMessage(account, isSubAccount) {
-            if (!isSubAccount && !account.category) {
-                return 'Account category cannot be blank';
-            } else if (!isSubAccount && !account.type) {
-                return 'Account type cannot be blank';
-            } else if (!account.name) {
-                return 'Account name cannot be blank';
-            } else if (account.type === this.allAccountTypes.SingleAccount.type && !account.currency) {
-                return 'Account currency cannot be blank';
-            } else {
-                return null;
-            }
-        },
-        setAccount(account) {
-            this.account.from(account);
-            this.subAccounts = [];
-
-            if (account.childrenAccounts && account.childrenAccounts.length > 0) {
-                for (let i = 0; i < account.childrenAccounts.length; i++) {
-                    const subAccount = this.accountsStore.generateNewSubAccountModel(this.account);
-                    subAccount.from(account.childrenAccounts[i]);
-
-                    this.subAccounts.push(subAccount);
-                }
-            }
-        },
-        showDateTimeError(error) {
-            this.$refs.snackbar.showError(error);
-        }
-    }
 }
+
+type ConfirmDialogType = InstanceType<typeof ConfirmDialog>;
+type SnackBarType = InstanceType<typeof SnackBar>;
+
+defineProps<{
+    persistent?: boolean;
+    show?: boolean;
+}>();
+
+const { tt } = useI18n();
+const {
+    editAccountId,
+    clientSessionId,
+    loading,
+    submitting,
+    account,
+    subAccounts,
+    title,
+    saveButtonTitle,
+    allAccountCategories,
+    allAccountTypes,
+    allCurrencies,
+    allAvailableMonthDays,
+    isAccountSupportCreditCardStatementDate,
+    isInputEmpty,
+    getAccountOrSubAccountProblemMessage,
+    addSubAccount,
+    setAccount
+} = useAccountEditPageBaseBase();
+
+const accountsStore = useAccountsStore();
+
+const icons = {
+    more: mdiDotsVertical,
+    add: mdiCreditCardPlusOutline,
+    delete: mdiDeleteOutline
+};
+
+const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
+const snackbar = useTemplateRef<SnackBarType>('snackbar');
+
+const showState = ref<boolean>(false);
+const activeTab = ref<string>('account');
+const currentAccountIndex = ref<number>(-1);
+
+const selectedAccount = computed<Account>(() => {
+    if (currentAccountIndex.value < 0) {
+        return account.value;
+    }
+
+    return subAccounts.value[currentAccountIndex.value];
+});
+
+let resolveFunc: ((value: AccountEditResponse) => void) | null = null;
+let rejectFunc: ((reason?: unknown) => void) | null = null;
+
+function open(options?: { id?: string, currentAccount?: Account, category?: number }): Promise<AccountEditResponse> {
+    showState.value = true;
+    loading.value = true;
+    submitting.value = false;
+
+    const newAccount = accountsStore.generateNewAccountModel();
+    account.value.from(newAccount);
+    subAccounts.value = [];
+    currentAccountIndex.value = -1;
+
+    if (options && options.id) {
+        if (options.currentAccount) {
+            setAccount(options.currentAccount);
+        }
+
+        editAccountId.value = options.id;
+        accountsStore.getAccount({
+            accountId: editAccountId.value
+        }).then(response => {
+            setAccount(response);
+            loading.value = false;
+        }).catch(error => {
+            loading.value = false;
+            showState.value = false;
+
+            if (!error.processed) {
+                snackbar.value?.showError(error);
+            }
+        });
+    } else {
+        if (options && isNumber(options.category)) {
+            account.value.category = options.category;
+            setAccountSuitableIcon(account.value, 1, options.category);
+        }
+
+        editAccountId.value = null;
+        clientSessionId.value = generateRandomUUID();
+        loading.value = false;
+    }
+
+    return new Promise<AccountEditResponse>((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
+}
+
+function save(): void {
+    const problemMessage = getAccountOrSubAccountProblemMessage();
+
+    if (problemMessage) {
+        snackbar.value?.showMessage(problemMessage);
+        return;
+    }
+
+    submitting.value = true;
+
+    accountsStore.saveAccount({
+        account: account.value,
+        subAccounts: subAccounts.value,
+        isEdit: !!editAccountId.value,
+        clientSessionId: clientSessionId.value
+    }).then(() => {
+        submitting.value = false;
+
+        let message = 'You have saved this account';
+
+        if (!editAccountId.value) {
+            message = 'You have added a new account';
+        }
+
+        resolveFunc?.({ message });
+        showState.value = false;
+    }).catch(error => {
+        submitting.value = false;
+
+        if (!error.processed) {
+            snackbar.value?.showError(error);
+        }
+    });
+}
+
+function removeSubAccount(subAccount: Account): void {
+    confirmDialog.value?.open('Are you sure you want to remove this sub-account?').then(() => {
+        for (let i = 0; i < subAccounts.value.length; i++) {
+            if (subAccounts.value[i] === subAccount) {
+                subAccounts.value.splice(i, 1);
+
+                if (currentAccountIndex.value >= subAccounts.value.length) {
+                    currentAccountIndex.value = subAccounts.value.length - 1;
+                }
+            }
+        }
+    });
+}
+
+function cancel(): void {
+    rejectFunc?.();
+    showState.value = false;
+}
+
+function onShowDateTimeError(error: string): void {
+    snackbar.value?.showError(error);
+}
+
+watch(() => account.value.type, () => {
+    if (subAccounts.value.length < 1) {
+        addSubAccount();
+    }
+});
+
+defineExpose({
+    open
+});
 </script>

src/views/mobile/accounts/EditPage.vue

@@ -1,11 +1,11 @@
 <template>
     <f7-page @page:afterin="onPageAfterIn">
         <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-left :back-link="tt('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t(title)"></f7-nav-title>
+            <f7-nav-title :title="tt(title)"></f7-nav-title>
             <f7-nav-right>
-                <f7-link icon-f7="ellipsis" :class="{ 'disabled': editAccountId || account.type !== allAccountTypes.MultiSubAccounts.type }" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': editAccountId || account.type !== AccountType.MultiSubAccounts.type }" @click="showMoreActionSheet = true"></f7-link>
-                <f7-link :class="{ 'disabled': isInputEmpty() || submitting }" :text="$t(saveButtonTitle)" @click="save"></f7-link>
+                <f7-link :class="{ 'disabled': isInputEmpty() || submitting }" :text="tt(saveButtonTitle)" @click="save"></f7-link>
             </f7-nav-right>
         </f7-navbar>
 
@@ -18,8 +18,8 @@
             <f7-list-item
                 link="#" no-chevron
                 class="list-item-with-header-and-title"
-                :header="$t('Account Category')"
+                :header="tt('Account Category')"
-                :title="getAccountCategoryName(account.category)"
+                :title="findDisplayNameByType(allAccountCategories, account.category)"
                 @click="showAccountCategorySheet = true"
             >
                 <list-item-selection-sheet value-type="item"
@@ -35,13 +35,13 @@
                 link="#" no-chevron
                 class="list-item-with-header-and-title"
                 :class="{ 'disabled': editAccountId }"
-                :header="$t('Account Type')"
+                :header="tt('Account Type')"
-                :title="getAccountTypeName(account.type)"
+                :title="findDisplayNameByType(allAccountTypes, account.type)"
                 @click="showAccountTypeSheet = true"
             >
                 <list-item-selection-sheet value-type="item"
                                            key-field="type" value-field="type" title-field="displayName"
-                                           :items="allAccountTypesArray"
+                                           :items="allAccountTypes"
                                            v-model:show="showAccountTypeSheet"
                                            v-model="account.type">
                 </list-item-selection-sheet>
@@ -94,12 +94,12 @@
             <f7-list-input label="Description" type="textarea" placeholder="Your account description (optional)"></f7-list-input>
         </f7-list>
 
-        <f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading && account.type === allAccountTypes.SingleAccount.type">
+        <f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading && account.type === AccountType.SingleAccount.type">
             <f7-list-input
                 type="text"
                 clear-button
-                :label="$t('Account Name')"
+                :label="tt('Account Name')"
-                :placeholder="$t('Your account name')"
+                :placeholder="tt('Your account name')"
                 v-model:value="account.name"
             ></f7-list-input>
 
@@ -107,11 +107,11 @@
                 <template #default>
                     <div class="grid grid-cols-2">
                         <div class="list-item-subitem no-chevron">
-                            <a class="item-link" href="#" @click="account.showIconSelectionSheet = true">
+                            <a class="item-link" href="#" @click="accountContext.showIconSelectionSheet = true">
                                 <div class="item-content">
                                     <div class="item-inner">
                                         <div class="item-header">
-                                            <span>{{ $t('Account Icon') }}</span>
+                                            <span>{{ tt('Account Icon') }}</span>
                                         </div>
                                         <div class="item-title">
                                             <div class="list-item-custom-title no-padding">
@@ -122,18 +122,18 @@
                                 </div>
                             </a>
 
-                            <icon-selection-sheet :all-icon-infos="allAccountIcons"
+                            <icon-selection-sheet :all-icon-infos="ALL_ACCOUNT_ICONS"
                                                   :color="account.color"
-                                                  v-model:show="account.showIconSelectionSheet"
+                                                  v-model:show="accountContext.showIconSelectionSheet"
                                                   v-model="account.icon"
                             ></icon-selection-sheet>
                         </div>
                         <div class="list-item-subitem no-chevron">
-                            <a class="item-link" href="#" @click="account.showColorSelectionSheet = true">
+                            <a class="item-link" href="#" @click="accountContext.showColorSelectionSheet = true">
                                 <div class="item-content">
                                     <div class="item-inner">
                                         <div class="item-header">
-                                            <span>{{ $t('Account Color') }}</span>
+                                            <span>{{ tt('Account Color') }}</span>
                                         </div>
                                         <div class="item-title">
                                             <div class="list-item-custom-title no-padding">
@@ -144,8 +144,8 @@
                                 </div>
                             </a>
 
-                            <color-selection-sheet :all-color-infos="allAccountColors"
+                            <color-selection-sheet :all-color-infos="ALL_ACCOUNT_COLORS"
-                                                   v-model:show="account.showColorSelectionSheet"
+                                                   v-model:show="accountContext.showColorSelectionSheet"
                                                    v-model="account.color"
                             ></color-selection-sheet>
                         </div>
@@ -156,9 +156,9 @@
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :class="{ 'disabled': editAccountId }"
-                :header="$t('Currency')"
+                :header="tt('Currency')"
                 :no-chevron="!!editAccountId"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Name'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Name'), popupCloseLinkText: tt('Done') }"
             >
                 <template #title>
                     <div class="no-padding no-margin">
@@ -175,10 +175,10 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Statement Date')"
+                :header="tt('Statement Date')"
                 :title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Statement Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Statement Date'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Statement Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Statement Date'), popupCloseLinkText: tt('Done') }"
-                v-if="isAccountSupportCreditCardStatementDate()"
+                v-if="isAccountSupportCreditCardStatementDate"
             >
                 <select v-model="account.creditCardStatementDate">
                     <option :value="monthDay.day"
@@ -191,14 +191,14 @@
                 link="#" no-chevron
                 class="list-item-with-header-and-title"
                 :class="{ 'disabled': editAccountId }"
-                :header="$t('Account Balance')"
+                :header="tt('Account Balance')"
-                :title="getAccountBalance(account)"
+                :title="formatAmountWithCurrency(account.balance, account.currency)"
-                @click="account.showBalanceSheet = true"
+                @click="accountContext.showBalanceSheet = true"
             >
-                <number-pad-sheet :min-value="allowedMinAmount"
+                <number-pad-sheet :min-value="TRANSACTION_MIN_AMOUNT"
-                                  :max-value="allowedMaxAmount"
+                                  :max-value="TRANSACTION_MAX_AMOUNT"
                                   :currency="account.currency"
-                                  v-model:show="account.showBalanceSheet"
+                                  v-model:show="accountContext.showBalanceSheet"
                                   v-model="account.balance"
                 ></number-pad-sheet>
             </f7-list-item>
@@ -210,39 +210,39 @@
                 v-if="!editAccountId"
             >
                 <template #header>
-                    <div class="account-edit-balancetime-header" @click="showDateTimeDialog(account, 'time')">{{ $t('Balance Time') }}</div>
+                    <div class="account-edit-balancetime-header" @click="showDateTimeDialog(accountContext, 'time')">{{ tt('Balance Time') }}</div>
                 </template>
                 <template #title>
                     <div class="account-edit-balancetime-title">
-                        <div @click="showDateTimeDialog(account, 'date')">{{ getAccountBalanceDate(account.balanceTime) }}</div>&nbsp;<div class="account-edit-balancetime-time" @click="showDateTimeDialog(account, 'time')">{{ getAccountBalanceTime(account.balanceTime) }}</div>
+                        <div @click="showDateTimeDialog(accountContext, 'date')">{{ getAccountBalanceDate(account.balanceTime as number) }}</div>&nbsp;<div class="account-edit-balancetime-time" @click="showDateTimeDialog(accountContext, 'time')">{{ getAccountBalanceTime(account.balanceTime as number) }}</div>
                     </div>
                 </template>
-                <date-time-selection-sheet :init-mode="account.balanceDateTimeSheetMode"
+                <date-time-selection-sheet :init-mode="accountContext.balanceDateTimeSheetMode"
-                                           v-model:show="account.showBalanceDateTimeSheet"
+                                           v-model:show="accountContext.showBalanceDateTimeSheet"
                                            v-model="account.balanceTime">
                 </date-time-selection-sheet>
             </f7-list-item>
 
-            <f7-list-item :title="$t('Visible')" v-if="editAccountId">
+            <f7-list-item :title="tt('Visible')" v-if="editAccountId">
                 <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
             </f7-list-item>
 
             <f7-list-input
                 type="textarea"
                 style="height: auto"
-                :label="$t('Description')"
+                :label="tt('Description')"
-                :placeholder="$t('Your account description (optional)')"
+                :placeholder="tt('Your account description (optional)')"
                 v-textarea-auto-size
                 v-model:value="account.comment"
             ></f7-list-input>
         </f7-list>
 
-        <f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading && account.type === allAccountTypes.MultiSubAccounts.type">
+        <f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading && account.type === AccountType.MultiSubAccounts.type">
             <f7-list-input
                 type="text"
                 clear-button
-                :label="$t('Account Name')"
+                :label="tt('Account Name')"
-                :placeholder="$t('Your account name')"
+                :placeholder="tt('Your account name')"
                 v-model:value="account.name"
             ></f7-list-input>
 
@@ -250,11 +250,11 @@
                 <template #default>
                     <div class="grid grid-cols-2">
                         <div class="list-item-subitem no-chevron">
-                            <a class="item-link" href="#" @click="account.showIconSelectionSheet = true">
+                            <a class="item-link" href="#" @click="accountContext.showIconSelectionSheet = true">
                                 <div class="item-content">
                                     <div class="item-inner">
                                         <div class="item-header">
-                                            <span>{{ $t('Account Icon') }}</span>
+                                            <span>{{ tt('Account Icon') }}</span>
                                         </div>
                                         <div class="item-title">
                                             <div class="list-item-custom-title no-padding">
@@ -265,18 +265,18 @@
                                 </div>
                             </a>
 
-                            <icon-selection-sheet :all-icon-infos="allAccountIcons"
+                            <icon-selection-sheet :all-icon-infos="ALL_ACCOUNT_ICONS"
                                                   :color="account.color"
-                                                  v-model:show="account.showIconSelectionSheet"
+                                                  v-model:show="accountContext.showIconSelectionSheet"
                                                   v-model="account.icon"
                             ></icon-selection-sheet>
                         </div>
                         <div class="list-item-subitem no-chevron">
-                            <a class="item-link" href="#" @click="account.showColorSelectionSheet = true">
+                            <a class="item-link" href="#" @click="accountContext.showColorSelectionSheet = true">
                                 <div class="item-content">
                                     <div class="item-inner">
                                         <div class="item-header">
-                                            <span>{{ $t('Account Color') }}</span>
+                                            <span>{{ tt('Account Color') }}</span>
                                         </div>
                                         <div class="item-title">
                                             <div class="list-item-custom-title no-padding">
@@ -287,8 +287,8 @@
                                 </div>
                             </a>
 
-                            <color-selection-sheet :all-color-infos="allAccountColors"
+                            <color-selection-sheet :all-color-infos="ALL_ACCOUNT_COLORS"
-                                                   v-model:show="account.showColorSelectionSheet"
+                                                   v-model:show="accountContext.showColorSelectionSheet"
                                                    v-model="account.color"
                             ></color-selection-sheet>
                         </div>
@@ -298,10 +298,10 @@
 
             <f7-list-item
                 class="list-item-with-header-and-title list-item-no-item-after"
-                :header="$t('Statement Date')"
+                :header="tt('Statement Date')"
                 :title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Statement Date'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Statement Date'), popupCloseLinkText: $t('Done') }"
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Statement Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Statement Date'), popupCloseLinkText: tt('Done') }"
-                v-if="isAccountSupportCreditCardStatementDate()"
+                v-if="isAccountSupportCreditCardStatementDate"
             >
                 <select v-model="account.creditCardStatementDate">
                     <option :value="monthDay.day"
@@ -310,28 +310,28 @@
                 </select>
             </f7-list-item>
 
-            <f7-list-item :title="$t('Visible')" v-if="editAccountId">
+            <f7-list-item :title="tt('Visible')" v-if="editAccountId">
                 <f7-toggle :checked="account.visible" @toggle:change="account.visible = $event"></f7-toggle>
             </f7-list-item>
 
             <f7-list-input
                 type="textarea"
                 style="height: auto"
-                :label="$t('Description')"
+                :label="tt('Description')"
-                :placeholder="$t('Your account description (optional)')"
+                :placeholder="tt('Your account description (optional)')"
                 v-textarea-auto-size
                 v-model:value="account.comment"
             ></f7-list-input>
         </f7-list>
 
-        <f7-block class="no-padding no-margin" v-if="!loading && account.type === allAccountTypes.MultiSubAccounts.type">
+        <f7-block class="no-padding no-margin" v-if="!loading && account.type === AccountType.MultiSubAccounts.type">
             <f7-list strong inset dividers class="subaccount-edit-list margin-vertical"
                      :key="idx"
                      v-for="(subAccount, idx) in subAccounts">
                 <f7-list-item group-title>
-                    <small>{{ $t('Sub Account') + ' #' + (idx + 1) }}</small>
+                    <small>{{ tt('Sub Account') + ' #' + (idx + 1) }}</small>
                     <f7-button rasied fill class="subaccount-delete-button" color="red" icon-f7="trash" icon-size="16px"
-                               :tooltip="$t('Remove Sub-account')"
+                               :tooltip="tt('Remove Sub-account')"
                                v-if="!editAccountId"
                                @click="removeSubAccount(subAccount, false)">
                     </f7-button>
@@ -340,8 +340,8 @@
                 <f7-list-input
                     type="text"
                     clear-button
-                    :label="$t('Sub-account Name')"
+                    :label="tt('Sub-account Name')"
-                    :placeholder="$t('Your sub-account name')"
+                    :placeholder="tt('Your sub-account name')"
                     v-model:value="subAccount.name"
                 ></f7-list-input>
 
@@ -349,11 +349,11 @@
                     <template #default>
                         <div class="grid grid-cols-2">
                             <div class="list-item-subitem no-chevron">
-                                <a class="item-link" href="#" @click="subAccount.showIconSelectionSheet = true">
+                                <a class="item-link" href="#" @click="subAccountContexts[idx].showIconSelectionSheet = true">
                                     <div class="item-content">
                                         <div class="item-inner">
                                             <div class="item-header">
-                                                <span>{{ $t('Sub-account Icon') }}</span>
+                                                <span>{{ tt('Sub-account Icon') }}</span>
                                             </div>
                                             <div class="item-title">
                                                 <div class="list-item-custom-title no-padding">
@@ -364,18 +364,18 @@
                                     </div>
                                 </a>
 
-                                <icon-selection-sheet :all-icon-infos="allAccountIcons"
+                                <icon-selection-sheet :all-icon-infos="ALL_ACCOUNT_ICONS"
                                                       :color="subAccount.color"
-                                                      v-model:show="subAccount.showIconSelectionSheet"
+                                                      v-model:show="subAccountContexts[idx].showIconSelectionSheet"
                                                       v-model="subAccount.icon"
                                 ></icon-selection-sheet>
                             </div>
                             <div class="list-item-subitem no-chevron">
-                                <a class="item-link" href="#" @click="subAccount.showColorSelectionSheet = true">
+                                <a class="item-link" href="#" @click="subAccountContexts[idx].showColorSelectionSheet = true">
                                     <div class="item-content">
                                         <div class="item-inner">
                                             <div class="item-header">
-                                                <span>{{ $t('Sub-account Color') }}</span>
+                                                <span>{{ tt('Sub-account Color') }}</span>
                                             </div>
                                             <div class="item-title">
                                                 <div class="list-item-custom-title no-padding">
@@ -386,8 +386,8 @@
                                     </div>
                                 </a>
 
-                                <color-selection-sheet :all-color-infos="allAccountColors"
+                                <color-selection-sheet :all-color-infos="ALL_ACCOUNT_COLORS"
-                                                       v-model:show="subAccount.showColorSelectionSheet"
+                                                       v-model:show="subAccountContexts[idx].showColorSelectionSheet"
                                                        v-model="subAccount.color"
                                 ></color-selection-sheet>
                             </div>
@@ -398,9 +398,9 @@
                 <f7-list-item
                     class="list-item-with-header-and-title list-item-no-item-after"
                     :class="{ 'disabled': editAccountId }"
-                    :header="$t('Currency')"
+                    :header="tt('Currency')"
                     :no-chevron="!!editAccountId"
-                    smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Currency Name'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Currency Name'), popupCloseLinkText: $t('Done') }"
+                    smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Name'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Name'), popupCloseLinkText: tt('Done') }"
                 >
                     <template #title>
                         <div class="no-padding no-margin">
@@ -419,14 +419,14 @@
                     link="#" no-chevron
                     class="list-item-with-header-and-title"
                     :class="{ 'disabled': editAccountId }"
-                    :header="$t('Sub-account Balance')"
+                    :header="tt('Sub-account Balance')"
-                    :title="getAccountBalance(subAccount)"
+                    :title="formatAmountWithCurrency(subAccount.balance, subAccount.currency)"
-                    @click="subAccount.showBalanceSheet = true"
+                    @click="subAccountContexts[idx].showBalanceSheet = true"
                 >
-                    <number-pad-sheet :min-value="allowedMinAmount"
+                    <number-pad-sheet :min-value="TRANSACTION_MIN_AMOUNT"
-                                      :max-value="allowedMaxAmount"
+                                      :max-value="TRANSACTION_MAX_AMOUNT"
                                       :currency="subAccount.currency"
-                                      v-model:show="subAccount.showBalanceSheet"
+                                      v-model:show="subAccountContexts[idx].showBalanceSheet"
                                       v-model="subAccount.balance"
                     ></number-pad-sheet>
                 </f7-list-item>
@@ -438,28 +438,28 @@
                     v-if="!editAccountId"
                 >
                     <template #header>
-                        <div class="account-edit-balancetime-header" @click="showDateTimeDialog(subAccount, 'time')">{{ $t('Sub-account Balance Time') }}</div>
+                        <div class="account-edit-balancetime-header" @click="showDateTimeDialog(subAccountContexts[idx], 'time')">{{ tt('Sub-account Balance Time') }}</div>
                     </template>
                     <template #title>
                         <div class="account-edit-balancetime-title">
-                            <div @click="showDateTimeDialog(subAccount, 'date')">{{ getAccountBalanceDate(subAccount.balanceTime) }}</div>&nbsp;<div class="account-edit-balancetime-time" @click="showDateTimeDialog(subAccount, 'time')">{{ getAccountBalanceTime(subAccount.balanceTime) }}</div>
+                            <div @click="showDateTimeDialog(subAccountContexts[idx], 'date')">{{ getAccountBalanceDate(subAccount.balanceTime as number) }}</div>&nbsp;<div class="account-edit-balancetime-time" @click="showDateTimeDialog(subAccountContexts[idx], 'time')">{{ getAccountBalanceTime(subAccount.balanceTime as number) }}</div>
                         </div>
                     </template>
-                    <date-time-selection-sheet :init-mode="subAccount.balanceDateTimeSheetMode"
+                    <date-time-selection-sheet :init-mode="subAccountContexts[idx].balanceDateTimeSheetMode"
-                                               v-model:show="subAccount.showBalanceDateTimeSheet"
+                                               v-model:show="subAccountContexts[idx].showBalanceDateTimeSheet"
                                                v-model="subAccount.balanceTime">
                     </date-time-selection-sheet>
                 </f7-list-item>
 
-                <f7-list-item :title="$t('Visible')" v-if="editAccountId">
+                <f7-list-item :title="tt('Visible')" v-if="editAccountId">
                     <f7-toggle :checked="subAccount.visible" @toggle:change="subAccount.visible = $event"></f7-toggle>
                 </f7-list-item>
 
                 <f7-list-input
                     type="textarea"
                     style="height: auto"
-                    :label="$t('Description')"
+                    :label="tt('Description')"
-                    :placeholder="$t('Your sub-account description (optional)')"
+                    :placeholder="tt('Your sub-account description (optional)')"
                     v-textarea-auto-size
                     v-model:value="subAccount.comment"
                 ></f7-list-input>
@@ -468,341 +468,228 @@
 
         <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
             <f7-actions-group>
-                <f7-actions-button @click="addSubAccount">{{ $t('Add Sub-account') }}</f7-actions-button>
+                <f7-actions-button @click="addSubAccountAndContext">{{ tt('Add Sub-account') }}</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 remove this sub-account?') }}</f7-actions-label>
+                <f7-actions-label>{{ tt('Are you sure you want to remove this sub-account?') }}</f7-actions-label>
-                <f7-actions-button color="red" @click="removeSubAccount(subAccountToDelete, true)">{{ $t('Remove') }}</f7-actions-button>
+                <f7-actions-button color="red" @click="removeSubAccount(subAccountToDelete, true)">{{ tt('Remove') }}</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>
+<script setup lang="ts">
-import { mapStores } from 'pinia';
+import { ref, watch } from 'vue';
-import { useSettingsStore } from '@/stores/setting.ts';
+import type { Router } from 'framework7/types';
-import { useUserStore } from '@/stores/user.ts';
+
+import { useI18n } from '@/locales/helpers.ts';
+import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.ts';
+import { useAccountEditPageBaseBase } from '@/views/base/accounts/AccountEditPageBase.ts';
+
 import { useAccountsStore } from '@/stores/account.ts';
 
-import { AccountType, AccountCategory } from '@/core/account.ts';
+import { AccountType } from '@/core/account.ts';
 import { ALL_ACCOUNT_ICONS } from '@/consts/icon.ts';
 import { ALL_ACCOUNT_COLORS } from '@/consts/color.ts';
 import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
+import type { Account } from '@/models/account.ts';
 
-import { getNameByKeyValue } from '@/lib/common.ts';
+import { findDisplayNameByType } from '@/lib/common.ts';
 import { generateRandomUUID } from '@/lib/misc.ts';
-import { setAccountSuitableIcon } from '@/lib/account.ts';
 import {
     getTimezoneOffsetMinutes,
     getBrowserTimezoneOffsetMinutes,
     getActualUnixTimeForStore
 } from '@/lib/datetime.ts';
 
-export default {
+interface AccountContext {
-    props: [
+    showIconSelectionSheet: boolean;
-        'f7route',
+    showColorSelectionSheet: boolean;
-        'f7router'
+    showBalanceSheet: boolean;
-    ],
+    showBalanceDateTimeSheet: boolean;
-    data() {
+    balanceDateTimeSheetMode: string;
-        const accountsStore = useAccountsStore();
+}
-        const newAccount = accountsStore.generateNewAccountModel();
-        newAccount.showIconSelectionSheet = false;
-        newAccount.showColorSelectionSheet = false;
-        newAccount.showBalanceSheet = false;
-        newAccount.showBalanceDateTimeSheet = false;
-        newAccount.balanceDateTimeSheetMode = 'time';
 
-        return {
+const props = defineProps<{
-            editAccountId: null,
+    f7route: Router.Route;
-            clientSessionId: '',
+    f7router: Router.Router;
-            loading: false,
+}>();
-            loadingError: null,
+
-            account: newAccount,
+const { tt, getCurrencyName, formatUnixTimeToLongDate, formatUnixTimeToLongTime, formatAmountWithCurrency } = useI18n();
-            subAccounts: [],
+const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
-            subAccountToDelete: null,
+const {
-            submitting: false,
+    editAccountId,
-            showAccountCategorySheet: false,
+    clientSessionId,
-            showAccountTypeSheet: false,
+    loading,
-            showMoreActionSheet: false,
+    submitting,
-            showDeleteActionSheet: false
+    account,
-        };
+    subAccounts,
-    },
+    title,
-    computed: {
+    saveButtonTitle,
-        ...mapStores(useSettingsStore, useUserStore, useAccountsStore),
+    allAccountCategories,
-        title() {
+    allAccountTypes,
-            if (!this.editAccountId) {
+    allCurrencies,
-                return 'Add Account';
+    allAvailableMonthDays,
+    isAccountSupportCreditCardStatementDate,
+    getAccountCreditCardStatementDate,
+    isInputEmpty,
+    getAccountOrSubAccountProblemMessage,
+    addSubAccount,
+    setAccount
+} = useAccountEditPageBaseBase();
+
+const accountsStore = useAccountsStore();
+
+const DEFAULT_ACCOUNT_CONTEXT: AccountContext = {
+    showIconSelectionSheet: false,
+    showColorSelectionSheet: false,
+    showBalanceSheet: false,
+    showBalanceDateTimeSheet: false,
+    balanceDateTimeSheetMode: 'time'
+};
+
+const accountContext = ref<AccountContext>(Object.assign({}, DEFAULT_ACCOUNT_CONTEXT));
+const subAccountContexts = ref<AccountContext[]>([]);
+const subAccountToDelete = ref<Account | null>(null);
+const loadingError = ref<unknown | null>(null);
+const showAccountCategorySheet = ref<boolean>(false);
+const showAccountTypeSheet = ref<boolean>(false);
+const showMoreActionSheet = ref<boolean>(false);
+const showDeleteActionSheet = ref<boolean>(false);
+
+function getAccountBalanceDate(balanceTime: number): string {
+    return formatUnixTimeToLongDate(getActualUnixTimeForStore(balanceTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+}
+
+function getAccountBalanceTime(balanceTime: number): string {
+    return formatUnixTimeToLongTime(getActualUnixTimeForStore(balanceTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
+}
+
+function init(): void {
+    const query = props.f7route.query;
+
+    if (query['id']) {
+        loading.value = true;
+
+        editAccountId.value = query['id'];
+
+        accountsStore.getAccount({
+            accountId: editAccountId.value
+        }).then(response => {
+            setAccount(response);
+            subAccountContexts.value = [];
+
+            for (let i = 0; i < subAccounts.value.length; i++) {
+                subAccountContexts.value.push(Object.assign({}, DEFAULT_ACCOUNT_CONTEXT));
+            }
+
+            loading.value = false;
+        }).catch(error => {
+            if (error.processed) {
+                loading.value = false;
             } else {
-                return 'Edit Account';
+                loadingError.value = error;
+                showToast(error.message || error);
             }
-        },
+        });
-        saveButtonTitle() {
+    } else {
-            if (!this.editAccountId) {
+        clientSessionId.value = generateRandomUUID();
-                return 'Add';
+        loading.value = false;
-            } else {
+    }
-                return 'Save';
+}
-            }
-        },
-        allAccountTypes() {
-            return AccountType.all();
-        },
-        allAccountCategories() {
-            return this.$locale.getAllAccountCategories();
-        },
-        allAccountTypesArray() {
-            return this.$locale.getAllAccountTypes();
-        },
-        allAccountIcons() {
-            return ALL_ACCOUNT_ICONS;
-        },
-        allAccountColors() {
-            return ALL_ACCOUNT_COLORS;
-        },
-        allCurrencies() {
-            return this.$locale.getAllCurrencies();
-        },
-        allAvailableMonthDays() {
-            const allAvailableDays = [];
 
-            allAvailableDays.push({
+function save(): void {
-                day: 0,
+    const router = props.f7router;
-                displayName: this.$t('Not set'),
+    const problemMessage = getAccountOrSubAccountProblemMessage();
-            });
 
-            for (let i = 1; i <= 28; i++) {
+    if (problemMessage) {
-                allAvailableDays.push({
+        showAlert(problemMessage);
-                    day: i,
+        return;
-                    displayName: this.$locale.getMonthdayShortName(i),
+    }
-                });
-            }
 
-            return allAvailableDays;
+    submitting.value = true;
-        },
+    showLoading(() => submitting.value);
-        allowedMinAmount() {
-            return TRANSACTION_MIN_AMOUNT;
-        },
-        allowedMaxAmount() {
-            return TRANSACTION_MAX_AMOUNT;
-        }
-    },
-    watch: {
-        'account.category': function (newValue, oldValue) {
-            this.chooseSuitableIcon(oldValue, newValue);
-        },
-        'account.type': function () {
-            if (this.subAccounts.length < 1) {
-                this.addSubAccount();
-            }
-        }
-    },
-    created() {
-        const self = this;
-        const query = self.f7route.query;
 
-        if (query.id) {
+    accountsStore.saveAccount({
-            self.loading = true;
+        account: account.value,
+        subAccounts: subAccounts.value,
+        isEdit: !!editAccountId.value,
+        clientSessionId: clientSessionId.value
+    }).then(() => {
+        submitting.value = false;
+        hideLoading();
 
-            self.editAccountId = query.id;
+        if (!editAccountId.value) {
-
+            showToast('You have added a new account');
-            self.accountsStore.getAccount({
-                accountId: self.editAccountId
-            }).then(account => {
-                self.account.from(account);
-                self.subAccounts = [];
-
-                if (account.childrenAccounts && account.childrenAccounts.length > 0) {
-                    for (let i = 0; i < account.childrenAccounts.length; i++) {
-                        const subAccount = self.accountsStore.generateNewSubAccountModel(self.account);
-                        subAccount.from(account.childrenAccounts[i]);
-                        subAccount.showIconSelectionSheet = false;
-                        subAccount.showColorSelectionSheet = false;
-                        subAccount.showBalanceSheet = false;
-                        subAccount.showBalanceDateTimeSheet = false;
-                        subAccount.balanceDateTimeSheetMode = 'time';
-
-                        self.subAccounts.push(subAccount);
-                    }
-                }
-
-                self.loading = false;
-            }).catch(error => {
-                if (error.processed) {
-                    self.loading = false;
-                } else {
-                    self.loadingError = error;
-                    self.$toast(error.message || error);
-                }
-            });
         } else {
-            self.clientSessionId = generateRandomUUID();
+            showToast('You have saved this account');
-            self.loading = false;
         }
-    },
-    methods: {
-        onPageAfterIn() {
-            this.$routeBackOnError(this.f7router, 'loadingError');
-        },
-        addSubAccount() {
-            if (this.account.type !== this.allAccountTypes.MultiSubAccounts.type) {
-                return;
-            }
 
-            const subAccount = this.accountsStore.generateNewSubAccountModel(this.account);
+        router.back();
-            subAccount.showIconSelectionSheet = false;
+    }).catch(error => {
-            subAccount.showColorSelectionSheet = false;
+        submitting.value = false;
-            subAccount.showBalanceSheet = false;
+        hideLoading();
-            subAccount.showBalanceDateTimeSheet = false;
-            subAccount.balanceDateTimeSheetMode = 'time';
 
-            this.subAccounts.push(subAccount);
+        if (!error.processed) {
-        },
+            showToast(error.message || error);
-        removeSubAccount(subAccount, confirm) {
+        }
-            if (!subAccount) {
+    });
-                this.$alert('An error occurred');
+}
-                return;
-            }
 
-            if (!confirm) {
+function addSubAccountAndContext(): void {
-                this.subAccountToDelete = subAccount;
+    if (addSubAccount()) {
-                this.showDeleteActionSheet = true;
+        subAccountContexts.value.push(Object.assign({}, DEFAULT_ACCOUNT_CONTEXT));
-                return;
+    }
-            }
+}
 
-            this.showDeleteActionSheet = false;
+function removeSubAccount(subAccount: Account | null, confirm: boolean): void {
-            this.subAccountToDelete = null;
+    if (!subAccount) {
+        showAlert('An error occurred');
+        return;
+    }
 
-            for (let i = 0; i < this.subAccounts.length; i++) {
+    if (!confirm) {
-                if (this.subAccounts[i] === subAccount) {
+        subAccountToDelete.value = subAccount;
-                    this.subAccounts.splice(i, 1);
+        showDeleteActionSheet.value = true;
-                }
+        return;
-            }
+    }
-        },
-        save() {
-            const self = this;
-            const router = self.f7router;
 
-            let problemMessage = self.getInputEmptyProblemMessage(self.account, false);
+    showDeleteActionSheet.value = false;
+    subAccountToDelete.value = null;
 
-            if (!problemMessage && self.account.type === self.allAccountTypes.MultiSubAccounts.type) {
+    for (let i = 0; i < subAccounts.value.length; i++) {
-                for (let i = 0; i < self.subAccounts.length; i++) {
+        if (subAccounts.value[i] === subAccount) {
-                    problemMessage = self.getInputEmptyProblemMessage(self.subAccounts[i], true);
+            subAccounts.value.splice(i, 1);
-
+            subAccountContexts.value.splice(i, 1);
-                    if (problemMessage) {
-                        break;
-                    }
-                }
-            }
-
-            if (problemMessage) {
-                self.$alert(problemMessage);
-                return;
-            }
-
-            self.submitting = true;
-            self.$showLoading(() => self.submitting);
-
-            self.accountsStore.saveAccount({
-                account: self.account,
-                subAccounts: self.subAccounts,
-                isEdit: !!self.editAccountId,
-                clientSessionId: self.clientSessionId
-            }).then(() => {
-                self.submitting = false;
-                self.$hideLoading();
-
-                if (!self.editAccountId) {
-                    self.$toast('You have added a new account');
-                } else {
-                    self.$toast('You have saved this account');
-                }
-
-                router.back();
-            }).catch(error => {
-                self.submitting = false;
-                self.$hideLoading();
-
-                if (!error.processed) {
-                    self.$toast(error.message || error);
-                }
-            });
-        },
-        showDateTimeDialog(account, sheetMode) {
-            account.balanceDateTimeSheetMode = sheetMode;
-            account.showBalanceDateTimeSheet = true;
-        },
-        getCurrencyName(currencyCode) {
-            return this.$locale.getCurrencyName(currencyCode);
-        },
-        getAccountTypeName(accountType) {
-            return getNameByKeyValue(this.allAccountTypesArray, accountType, 'type', 'displayName');
-        },
-        getAccountCategoryName(accountCategory) {
-            return getNameByKeyValue(this.allAccountCategories, accountCategory, 'type', 'displayName');
-        },
-        getAccountCreditCardStatementDate(statementDate) {
-            return getNameByKeyValue(this.allAvailableMonthDays, statementDate, 'day', 'displayName');
-        },
-        getAccountBalance(account) {
-            return this.getDisplayCurrency(account.balance, account.currency);
-        },
-        getAccountBalanceDate(balanceTime) {
-            return this.$locale.formatUnixTimeToLongDate(this.userStore, getActualUnixTimeForStore(balanceTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-        },
-        getAccountBalanceTime(balanceTime) {
-            return this.$locale.formatUnixTimeToLongTime(this.userStore, getActualUnixTimeForStore(balanceTime, getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
-        },
-        getDisplayCurrency(value, currencyCode) {
-            return this.$locale.formatAmountWithCurrency(this.settingsStore, this.userStore, value, currencyCode);
-        },
-        isAccountSupportCreditCardStatementDate() {
-            return this.account && this.account.category === AccountCategory.CreditCard.type;
-        },
-        chooseSuitableIcon(oldCategory, newCategory) {
-            setAccountSuitableIcon(this.account, oldCategory, newCategory);
-        },
-        isInputEmpty() {
-            const isAccountEmpty = !!this.getInputEmptyProblemMessage(this.account, false);
-
-            if (isAccountEmpty) {
-                return true;
-            }
-
-            if (this.account.type === this.allAccountTypes.MultiSubAccounts.type) {
-                for (let i = 0; i < this.subAccounts.length; i++) {
-                    const isSubAccountEmpty = !!this.getInputEmptyProblemMessage(this.subAccounts[i], true);
-
-                    if (isSubAccountEmpty) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        },
-        getInputEmptyProblemMessage(account, isSubAccount) {
-            if (!isSubAccount && !account.category) {
-                return 'Account category cannot be blank';
-            } else if (!isSubAccount && !account.type) {
-                return 'Account type cannot be blank';
-            } else if (!account.name) {
-                return 'Account name cannot be blank';
-            } else if (account.type === this.allAccountTypes.SingleAccount.type && !account.currency) {
-                return 'Account currency cannot be blank';
-            } else {
-                return null;
-            }
         }
     }
 }
+
+function showDateTimeDialog(accountContext: AccountContext, sheetMode: string): void {
+    accountContext.balanceDateTimeSheetMode = sheetMode;
+    accountContext.showBalanceDateTimeSheet = true;
+}
+
+function onPageAfterIn(): void {
+    routeBackOnError(props.f7router, loadingError);
+}
+
+watch(() => account.value.type, () => {
+    if (subAccounts.value.length < 1) {
+        addSubAccountAndContext();
+    }
+});
+
+init();
 </script>
 
 <style>