From 06ff9f249922434442baef444f215556d0479933 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 13 Aug 2023 01:35:52 +0800
Subject: [PATCH] add add/edit account dialog

---
 src/components/desktop/AmountInput.vue        |  53 +-
 src/lib/common.js                             |  29 +
 src/lib/i18n.js                               |  68 +++
 src/locales/en.js                             |   1 +
 src/locales/zh_Hans.js                        |   1 +
 src/views/desktop/accounts/ListPage.vue       |  41 +-
 .../accounts/list/dialogs/EditDialog.vue      | 551 ++++++++++++++++++
 7 files changed, 740 insertions(+), 4 deletions(-)
 create mode 100644 src/views/desktop/accounts/list/dialogs/EditDialog.vue

diff --git a/src/components/desktop/AmountInput.vue b/src/components/desktop/AmountInput.vue
index e53c91e8..c8f97df0 100644
--- a/src/components/desktop/AmountInput.vue
+++ b/src/components/desktop/AmountInput.vue
@@ -1,17 +1,34 @@
 <template>
-    <v-text-field type="number" :class="extraClass" :density="density" :disabled="disabled"
+    <v-text-field type="number" :class="extraClass"
+                  :density="density" :disabled="disabled"
+                  :label="label"
+                  :placeholder="placeholder"
+                  :persistent-placeholder="persistentPlaceholder"
                   :rules="enableRules ? rules : []" v-model="value"
-                  @keydown="onKeyUpDown" @keyup="onKeyUpDown"
-    ></v-text-field>
+                  @keydown="onKeyUpDown" @keyup="onKeyUpDown">
+        <template #prepend-inner v-if="currency && prependText">
+            <div style="margin-top: 2px">{{ prependText }}</div>
+        </template>
+        <template #append-inner v-if="currency && appendText">
+            <div class="text-no-wrap">{{ appendText }}</div>
+        </template>
+    </v-text-field>
 </template>
 
 <script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+
 import transactionConstants from '@/consts/transaction.js';
 
 export default {
     props: [
         'class',
         'density',
+        'currency',
+        'label',
+        'placeholder',
+        'persistentPlaceholder',
         'disabled',
         'enableRules',
         'modelValue'
@@ -40,6 +57,7 @@ export default {
         }
     },
     computed: {
+        ...mapStores(useSettingsStore),
         value: {
             get: function () {
                 return this.modelValue;
@@ -50,6 +68,32 @@ export default {
         },
         extraClass() {
             return this.class;
+        },
+        prependText() {
+            if (!this.currency) {
+                return '';
+            }
+
+            const texts = this.getDisplayCurrencyPrependAndAppendText();
+
+            if (!texts) {
+                return '';
+            }
+
+            return texts.prependText;
+        },
+        appendText() {
+            if (!this.currency) {
+                return '';
+            }
+
+            const texts = this.getDisplayCurrencyPrependAndAppendText();
+
+            if (!texts) {
+                return '';
+            }
+
+            return texts.appendText;
         }
     },
     methods: {
@@ -95,6 +139,9 @@ export default {
             } catch (e) {
                 e.target.value = 0;
             }
+        },
+        getDisplayCurrencyPrependAndAppendText() {
+            return this.$locale.getDisplayCurrencyPrependAndAppendText(this.currency, this.settingsStore.appSettings.currencyDisplayMode);
         }
     }
 }
diff --git a/src/lib/common.js b/src/lib/common.js
index 6e925216..3cdc71fe 100644
--- a/src/lib/common.js
+++ b/src/lib/common.js
@@ -167,6 +167,35 @@ export function limitText(value, maxLength) {
     return value.substring(0, maxLength - 3) + '...';
 }
 
+export function getTextBefore(fullText, text) {
+    if (!text) {
+        return fullText;
+    }
+
+    const index = fullText.indexOf(text);
+
+    if (index >= 0) {
+        return fullText.substring(0, index);
+    }
+
+    return '';
+}
+
+export function getTextAfter(fullText, text) {
+    if (!text) {
+        return fullText;
+    }
+
+    let index = fullText.indexOf(text);
+
+    if (index >= 0) {
+        index += text.length;
+        return fullText.substring(index);
+    }
+
+    return '';
+}
+
 export function base64encode(arrayBuffer) {
     if (!arrayBuffer || arrayBuffer.length === 0) {
         return null;
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index dd773543..ff2ceebe 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -4,12 +4,15 @@ import { defaultLanguage, allLanguages } from '@/locales/index.js';
 import datetime from '@/consts/datetime.js';
 import timezone from '@/consts/timezone.js';
 import currency from '@/consts/currency.js';
+import account from '@/consts/account.js';
 import category from '@/consts/category.js';
 import statistics from '@/consts/statistics.js';
 
 import {
     isString,
     isNumber,
+    getTextBefore,
+    getTextAfter,
     copyArrayTo
 } from './common.js';
 
@@ -685,6 +688,37 @@ function getDateRangeDisplayName(userStore, dateType, startTime, endTime, transl
     return `${displayStartTime} ~ ${displayEndTime}`;
 }
 
+function getAllAccountCategories(translateFn) {
+    const allAccountCategories = [];
+
+    for (let i = 0; i < account.allCategories.length; i++) {
+        const accountCategory = account.allCategories[i];
+
+        allAccountCategories.push({
+            id: accountCategory.id,
+            displayName: translateFn(accountCategory.name),
+            defaultAccountIconId: accountCategory.defaultAccountIconId
+        });
+    }
+
+    return allAccountCategories;
+}
+
+function getAllAccountTypes(translateFn) {
+    const allAccountTypes = [];
+
+    for (let i = 0; i < account.allAccountTypesArray.length; i++) {
+        const accountType = account.allAccountTypesArray[i];
+
+        allAccountTypes.push({
+            id: accountType.id,
+            displayName: translateFn(accountType.name)
+        });
+    }
+
+    return allAccountTypes;
+}
+
 function getAllStatisticsChartDataTypes(translateFn) {
     const allChartDataTypes = [];
 
@@ -891,6 +925,37 @@ function getDisplayCurrency(value, currencyCode, options, translateFn) {
     }
 }
 
+function getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMode, translateFn) {
+    const options = {
+        currencyDisplayMode: currencyDisplayMode,
+        notConvertValue: true
+    };
+
+    const placeholder = '***';
+    const finalText = getDisplayCurrency(placeholder, currencyCode, options, translateFn);
+
+    if (!finalText) {
+        return null;
+    }
+
+    let prependText = getTextBefore(finalText, placeholder);
+
+    if (prependText) {
+        prependText = prependText.trim();
+    }
+
+    let appendText = getTextAfter(finalText, placeholder);
+
+    if (appendText) {
+        appendText = appendText.trim();
+    }
+
+    return {
+        prependText: prependText,
+        appendText: appendText
+    };
+}
+
 function joinMultiText(textArray, translateFn) {
     if (!textArray || !textArray.length) {
         return '';
@@ -1123,6 +1188,8 @@ export function i18nFunctions(i18nGlobal) {
         getAllDateRanges: (includeCustom) => getAllDateRanges(includeCustom, i18nGlobal.t),
         getAllRecentMonthDateRanges: (userStore, includeAll, includeCustom) => getAllRecentMonthDateRanges(userStore, includeAll, includeCustom, i18nGlobal.t),
         getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
+        getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),
+        getAllAccountTypes: () => getAllAccountTypes(i18nGlobal.t),
         getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
         getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),
         getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t),
@@ -1130,6 +1197,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllDisplayExchangeRates: (exchangeRatesData) => getAllDisplayExchangeRates(exchangeRatesData, i18nGlobal.t),
         getEnableDisableOptions: () => getEnableDisableOptions(i18nGlobal.t),
         getDisplayCurrency: (value, currencyCode, options) => getDisplayCurrency(value, currencyCode, options, i18nGlobal.t),
+        getDisplayCurrencyPrependAndAppendText: (currencyCode, currencyDisplayMode) => getDisplayCurrencyPrependAndAppendText(currencyCode, currencyDisplayMode, i18nGlobal.t),
         joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t),
         setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
         setTimeZone: (timezone) => setTimeZone(timezone),
diff --git a/src/locales/en.js b/src/locales/en.js
index e257436d..a697dd75 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -877,6 +877,7 @@ export default {
     'Account Type': 'Account Type',
     'Account Name': 'Account Name',
     'Your account name': 'Your account name',
+    'Main Account': 'Main Account',
     'Sub Account': 'Sub Account',
     'Sub Account Name': 'Sub Account Name',
     'Your sub account name': 'Your sub account name',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 59cc5850..4252150e 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -877,6 +877,7 @@ export default {
     'Account Type': '账户类型',
     'Account Name': '账户名称',
     'Your account name': '你的账户名称',
+    'Main Account': '主账户',
     'Sub Account': '子账户',
     'Sub Account Name': '子账户名称',
     'Your sub account name': '你的子账户名称',
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index 42801c83..24dc2e31 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -176,16 +176,19 @@
                                                                     <v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :disabled="loading"
                                                                            :prepend-icon="element.hidden ? icons.show : icons.hide"
+                                                                           v-if="!activeSubAccount[element.id]"
                                                                            @click="hide(element, !element.hidden)">
                                                                         {{ element.hidden ? $t('Show') : $t('Hide') }}
                                                                     </v-btn>
                                                                     <v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :disabled="loading" :prepend-icon="icons.edit"
+                                                                           v-if="!activeSubAccount[element.id]"
                                                                            @click="edit(element)">
                                                                         {{ $t('Edit') }}
                                                                     </v-btn>
                                                                     <v-btn class="hover-display px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :disabled="loading" :prepend-icon="icons.remove"
+                                                                           v-if="!activeSubAccount[element.id]"
                                                                            @click="remove(element)">
                                                                         {{ $t('Delete') }}
                                                                     </v-btn>
@@ -208,11 +211,15 @@
         </v-col>
     </v-row>
 
+    <edit-dialog ref="editDialog" :persistent="true" />
+
     <confirm-dialog ref="confirmDialog"/>
     <snack-bar ref="snackbar" />
 </template>
 
 <script>
+import EditDialog from './list/dialogs/EditDialog.vue';
+
 import { useDisplay } from 'vuetify';
 
 import { mapStores } from 'pinia';
@@ -243,6 +250,9 @@ import {
 } from '@mdi/js';
 
 export default {
+    components: {
+        EditDialog
+    },
     data() {
         const { mdAndUp } = useDisplay();
 
@@ -470,10 +480,39 @@ export default {
             });
         },
         add() {
+            const self = this;
 
+            self.$refs.editDialog.open({
+                category: self.activeAccountCategoryId
+            }).then(result => {
+                if (result && result.message) {
+                    self.$refs.snackbar.showMessage(result.message);
+                }
+            }).catch(error => {
+                if (error) {
+                    self.$refs.snackbar.showError(error);
+                }
+            });
         },
-        edit() {
+        edit(account) {
+            const self = this;
 
+            self.$refs.editDialog.open({
+                id: account.id,
+                currentAccount: account
+            }).then(result => {
+                if (result && result.message) {
+                    self.$refs.snackbar.showMessage(result.message);
+                }
+
+                if (self.accountsStore.accountListStateInvalid && !self.loading) {
+                    self.reload(false);
+                }
+            }).catch(error => {
+                if (error) {
+                    self.$refs.snackbar.showError(error);
+                }
+            });
         },
         hide(account, hidden) {
             const self = this;
diff --git a/src/views/desktop/accounts/list/dialogs/EditDialog.vue b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
new file mode 100644
index 00000000..3b4c442e
--- /dev/null
+++ b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
@@ -0,0 +1,551 @@
+<template>
+    <v-dialog :width="account.type === allAccountTypes.MultiSubAccounts ? 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">
+                        <h5 class="text-h5">{{ $t(title) }}</h5>
+                        <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">
+                        <v-icon :icon="icons.more" />
+                        <v-menu activator="parent">
+                            <v-list>
+                                <v-list-item :prepend-icon="icons.add"
+                                             :title="$t('Add Sub Account')"
+                                             @click="addSubAccount"></v-list-item>
+                            </v-list>
+                        </v-menu>
+                    </v-btn>
+                </div>
+            </template>
+            <v-card-text class="d-flex flex-column flex-md-row mt-2 mt-md-4">
+                <div class="mb-4" v-if="account.type === allAccountTypes.MultiSubAccounts">
+                    <v-tabs direction="vertical" :disabled="loading || submitting" v-model="currentAccountIndex">
+                        <v-tab :value="-1">
+                            <span>{{ $t('Main Account') }}</span>
+                        </v-tab>
+                        <template v-if="account.type === allAccountTypes.MultiSubAccounts">
+                            <v-tab :key="idx" :value="idx" v-for="(subAccount, idx) in subAccounts">
+                                <span>{{ $t('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>
+                            </v-tab>
+                        </template>
+                    </v-tabs>
+                </div>
+
+                <v-window class="d-flex flex-grow-1 disable-tab-transition w-100-window-container"
+                          :class="{ 'ml-md-5': account.type === allAccountTypes.MultiSubAccounts }"
+                          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 || currentAccountIndex < 0">
+                                    <v-select
+                                        item-title="displayName"
+                                        item-value="id"
+                                        persistent-placeholder
+                                        :disabled="loading || submitting"
+                                        :label="$t('Account Category')"
+                                        :placeholder="$t('Account Category')"
+                                        :items="allAccountCategories"
+                                        :no-data-text="$t('No results')"
+                                        v-model="selectedAccount.category"
+                                    >
+                                        <template #item="{ props, item }">
+                                            <v-list-item :value="item.value" v-bind="props">
+                                                <template #title>
+                                                    <v-list-item-title>
+                                                        <div class="d-flex align-center">
+                                                            <ItemIcon icon-type="account"
+                                                                      :icon-id="item.raw.defaultAccountIconId"
+                                                                      v-if="item.raw" />
+                                                            <span class="ml-2">{{ item.title }}</span>
+                                                        </div>
+                                                    </v-list-item-title>
+                                                </template>
+                                            </v-list-item>
+                                        </template>
+                                    </v-select>
+                                </v-col>
+                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex < 0">
+                                    <v-select
+                                        item-title="displayName"
+                                        item-value="id"
+                                        persistent-placeholder
+                                        :disabled="loading || submitting || !!editAccountId"
+                                        :label="$t('Account Type')"
+                                        :placeholder="$t('Account Type')"
+                                        :items="allAccountTypesArray"
+                                        :no-data-text="$t('No results')"
+                                        v-model="selectedAccount.type"
+                                    />
+                                </v-col>
+                                <v-col cols="12" md="12">
+                                    <v-text-field
+                                        type="text"
+                                        clearable
+                                        persistent-placeholder
+                                        :disabled="loading || submitting"
+                                        :label="currentAccountIndex < 0 ? $t('Account Name') : $t('Sub Account Name')"
+                                        :placeholder="currentAccountIndex < 0 ? $t('Your account name') : $t('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"
+                                                 :label="currentAccountIndex < 0 ? $t('Account Icon') : $t('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"
+                                                  :label="currentAccountIndex < 0 ? $t('Account Color') : $t('Sub Account Color')"
+                                                  :disabled="loading || submitting"
+                                                  v-model="selectedAccount.color" />
+                                </v-col>
+                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
+                                    <v-autocomplete
+                                        item-title="displayName"
+                                        item-value="code"
+                                        auto-select-first
+                                        persistent-placeholder
+                                        :disabled="loading || submitting || !!editAccountId"
+                                        :label="$t('Currency')"
+                                        :placeholder="$t('Currency')"
+                                        :items="allCurrencies"
+                                        :no-data-text="$t('No results')"
+                                        v-model="selectedAccount.currency"
+                                    />
+                                </v-col>
+                                <v-col cols="12" md="12" v-if="account.type === allAccountTypes.SingleAccount || currentAccountIndex >= 0">
+                                    <amount-input persistent-placeholder
+                                                  :disabled="loading || submitting || !!editAccountId"
+                                                  :currency="selectedAccount.currency"
+                                                  :label="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
+                                                  :placeholder="currentAccountIndex < 0 ? $t('Account Balance') : $t('Sub Account Balance')"
+                                                  v-model="selectedAccount.balance"/>
+                                </v-col>
+                                <v-col cols="12" md="12">
+                                    <v-textarea
+                                        type="text"
+                                        persistent-placeholder
+                                        rows="3"
+                                        :disabled="loading || submitting"
+                                        :label="$t('Description')"
+                                        :placeholder="currentAccountIndex < 0 ? $t('Your account description (optional)') : $t('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 inset :disabled="loading || submitting"
+                                              :label="$t('Visible')" v-model="selectedAccount.visible"/>
+                                </v-col>
+                            </v-row>
+                        </v-form>
+                    </v-window-item>
+                </v-window>
+            </v-card-text>
+            <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) }}
+                        <v-progress-circular indeterminate size="24" 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>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+
+    <confirm-dialog ref="confirmDialog"/>
+    <snack-bar ref="snackbar" />
+</template>
+
+<script>
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/setting.js';
+import { useUserStore } from '@/stores/user.js';
+import { useAccountsStore } from '@/stores/account.js';
+
+import accountConstants from '@/consts/account.js';
+import iconConstants from '@/consts/icon.js';
+import colorConstants from '@/consts/color.js';
+import currencyConstants from '@/consts/currency.js';
+import { isNumber } from '@/lib/common.js';
+
+import {
+    mdiDotsVertical,
+    mdiCreditCardPlusOutline,
+    mdiDeleteOutline
+} from '@mdi/js';
+
+export default {
+    props: [
+        'persistent',
+        'show'
+    ],
+    expose: [
+        'open'
+    ],
+    data() {
+        const userStore = useUserStore();
+
+        return {
+            showState: false,
+            activeTab: 'account',
+            editAccountId: null,
+            loading: false,
+            account: {
+                category: 1,
+                type: accountConstants.allAccountTypes.SingleAccount,
+                name: '',
+                icon: iconConstants.defaultAccountIconId,
+                color: colorConstants.defaultAccountColor,
+                currency: userStore.currentUserDefaultCurrency,
+                balance: 0,
+                comment: '',
+                visible: true
+            },
+            subAccounts: [],
+            currentAccountIndex: -1,
+            submitting: false,
+            resolve: null,
+            reject: null,
+            icons: {
+                more: mdiDotsVertical,
+                add: mdiCreditCardPlusOutline,
+                delete: mdiDeleteOutline
+            }
+        };
+    },
+    computed: {
+        ...mapStores(useSettingsStore, useUserStore, useAccountsStore),
+        title() {
+            if (!this.editAccountId) {
+                return 'Add Account';
+            } else {
+                return 'Edit Account';
+            }
+        },
+        saveButtonTitle() {
+            if (!this.editAccountId) {
+                return 'Add';
+            } else {
+                return 'Save';
+            }
+        },
+        allAccountTypes() {
+            return accountConstants.allAccountTypes;
+        },
+        allAccountCategories() {
+            return this.$locale.getAllAccountCategories();
+        },
+        allAccountTypesArray() {
+            return this.$locale.getAllAccountTypes();
+        },
+        allAccountIcons() {
+            return iconConstants.allAccountIcons;
+        },
+        allAccountColors() {
+            return colorConstants.allAccountColors;
+        },
+        allCurrencies() {
+            return this.$locale.getAllCurrencies();
+        },
+        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;
+
+            self.account.id = null;
+            self.account.category = 1;
+            self.account.type = accountConstants.allAccountTypes.SingleAccount;
+            self.account.name = '';
+            self.account.icon = iconConstants.defaultAccountIconId;
+            self.account.color = colorConstants.defaultAccountColor;
+            self.account.currency = self.userStore.currentUserDefaultCurrency;
+            self.account.balance = 0;
+            self.account.comment = '';
+            self.account.visible = true;
+            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.loading = false;
+            }
+
+            return new Promise((resolve, reject) => {
+                self.resolve = resolve;
+                self.reject = reject;
+            });
+        },
+        addSubAccount() {
+            const self = this;
+
+            if (self.account.type !== self.allAccountTypes.MultiSubAccounts) {
+                return;
+            }
+
+            self.subAccounts.push({
+                category: null,
+                type: null,
+                name: '',
+                icon: self.account.icon,
+                color: self.account.color,
+                currency: self.userStore.currentUserDefaultCurrency,
+                balance: 0,
+                comment: '',
+                visible: true
+            });
+        },
+        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) {
+                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;
+
+            const subAccounts = [];
+
+            if (self.account.type === self.allAccountTypes.MultiSubAccounts) {
+                for (let i = 0; i < self.subAccounts.length; i++) {
+                    const subAccount = self.subAccounts[i];
+                    const submitAccount = {
+                        category: self.account.category,
+                        type: self.allAccountTypes.SingleAccount,
+                        name: subAccount.name,
+                        icon: subAccount.icon,
+                        color: subAccount.color,
+                        currency: subAccount.currency,
+                        balance: subAccount.balance * 100,
+                        comment: subAccount.comment
+                    };
+
+                    if (self.editAccountId) {
+                        submitAccount.id = subAccount.id;
+                        submitAccount.hidden = !subAccount.visible;
+                    }
+
+                    subAccounts.push(submitAccount);
+                }
+            }
+
+            const submitAccount = {
+                category: self.account.category,
+                type: self.account.type,
+                name: self.account.name,
+                icon: self.account.icon,
+                color: self.account.color,
+                currency: self.account.type === self.allAccountTypes.SingleAccount ? self.account.currency : currencyConstants.parentAccountCurrencyPlaceholder,
+                balance: self.account.type === self.allAccountTypes.SingleAccount ? self.account.balance * 100 : 0,
+                comment: self.account.comment,
+                subAccounts: self.account.type === self.allAccountTypes.SingleAccount ? null : subAccounts,
+            };
+
+            if (self.editAccountId) {
+                submitAccount.id = self.account.id;
+                submitAccount.hidden = !self.account.visible;
+            }
+
+            self.accountsStore.saveAccount({
+                account: submitAccount
+            }).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;
+        },
+        chooseSuitableIcon(oldCategory, newCategory) {
+            for (let i = 0; i < this.allAccountCategories.length; i++) {
+                if (this.allAccountCategories[i].id === oldCategory) {
+                    if (this.account.icon !== this.allAccountCategories[i].defaultAccountIconId) {
+                        return;
+                    } else {
+                        break;
+                    }
+                }
+            }
+
+            for (let i = 0; i < this.allAccountCategories.length; i++) {
+                if (this.allAccountCategories[i].id === newCategory) {
+                    this.account.icon = this.allAccountCategories[i].defaultAccountIconId;
+                }
+            }
+        },
+        isInputEmpty() {
+            const isAccountEmpty = !!this.getInputEmptyProblemMessage(this.account, false);
+
+            if (isAccountEmpty) {
+                return true;
+            }
+
+            if (this.account.type === this.allAccountTypes.MultiSubAccounts) {
+                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 empty';
+            } else if (!isSubAccount && !account.type) {
+                return 'Account type cannot be empty';
+            } else if (!account.name) {
+                return 'Account name cannot be empty';
+            } else if (account.type === this.allAccountTypes.SingleAccount && !account.currency) {
+                return 'Account currency cannot be empty';
+            } else {
+                return null;
+            }
+        },
+        setAccount(account) {
+            this.account.id = account.id;
+            this.account.category = account.category;
+            this.account.type = account.type;
+            this.account.name = account.name;
+            this.account.icon = account.icon;
+            this.account.color = account.color;
+            this.account.currency = account.currency;
+            this.account.balance = account.balance / 100;
+            this.account.comment = account.comment;
+            this.account.visible = !account.hidden;
+
+            this.subAccounts = [];
+
+            if (account.subAccounts && account.subAccounts.length > 0) {
+                for (let i = 0; i < account.subAccounts.length; i++) {
+                    const subAccount = account.subAccounts[i];
+
+                    this.subAccounts.push({
+                        id: subAccount.id,
+                        category: subAccount.category,
+                        type: subAccount.type,
+                        name: subAccount.name,
+                        icon: subAccount.icon,
+                        color: subAccount.color,
+                        currency: subAccount.currency,
+                        balance: subAccount.balance / 100,
+                        comment: subAccount.comment,
+                        visible: !subAccount.hidden
+                    });
+                }
+            }
+        }
+    }
+}
+</script>