From 7dd4be38701401ae3a55b13ffe9b5190f7bc9b9a Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 18 Dec 2020 01:05:51 +0800
Subject: [PATCH] add more function in transaction edit page

---
 src/consts/transaction.js              |  10 +
 src/lib/services.js                    |   3 +
 src/lib/utils.js                       |   5 +
 src/locales/en.js                      |   1 +
 src/locales/zh_Hans.js                 |   1 +
 src/mobile-main.js                     |   2 +
 src/router/mobile.js                   |  11 +-
 src/views/mobile/Home.vue              |   2 +-
 src/views/mobile/transactions/Edit.vue | 402 +++++++++++++++++++++++++
 src/views/mobile/transactions/New.vue  | 317 -------------------
 10 files changed, 433 insertions(+), 321 deletions(-)
 create mode 100644 src/consts/transaction.js
 create mode 100644 src/views/mobile/transactions/Edit.vue
 delete mode 100644 src/views/mobile/transactions/New.vue

diff --git a/src/consts/transaction.js b/src/consts/transaction.js
new file mode 100644
index 00000000..c8d930ba
--- /dev/null
+++ b/src/consts/transaction.js
@@ -0,0 +1,10 @@
+const allTransactionTypes = {
+    ModifyBalance: 1,
+    Income: 2,
+    Expense: 3,
+    Transfer: 4
+};
+
+export default {
+    allTransactionTypes: allTransactionTypes,
+};
diff --git a/src/lib/services.js b/src/lib/services.js
index c084526a..63fda984 100644
--- a/src/lib/services.js
+++ b/src/lib/services.js
@@ -213,6 +213,9 @@ export default {
             id
         });
     },
+    getTransaction: ({ id }) => {
+        return axios.get('v1/transactions/get.json?id=' + id);
+    },
     getAllTransactionCategories: ({ type, parentId }) => {
         return axios.get('v1/transaction/categories/list.json?type=' + (type || '0') + '&parent_id=' + (parentId || parentId === 0 ? parentId : '-1'));
     },
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 681539b4..c8be80c5 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -37,6 +37,10 @@ function formatDate(date, format) {
     return moment(date).format(format);
 }
 
+function getUnixTime(date) {
+    return moment(date).unix();
+}
+
 function copyObjectTo(fromObject, toObject) {
     if (!isObject(fromObject)) {
         return toObject;
@@ -347,6 +351,7 @@ export default {
     isNumber,
     isBoolean,
     formatDate,
+    getUnixTime,
     copyObjectTo,
     copyArrayTo,
     appendThousandsSeparator,
diff --git a/src/locales/en.js b/src/locales/en.js
index 15f8e8f8..df66d4fb 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -509,6 +509,7 @@ export default {
     'Transaction Time': 'Transaction Time',
     'Tags': 'Tags',
     'Your transaction description (optional)': 'Your transaction description (optional)',
+    'Unable to get transaction': 'Unable to get transaction',
     'User Profile': 'User Profile',
     'Language': 'Language',
     'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',
diff --git a/src/locales/zh_Hans.js b/src/locales/zh_Hans.js
index 2a9686dd..c9033d77 100644
--- a/src/locales/zh_Hans.js
+++ b/src/locales/zh_Hans.js
@@ -509,6 +509,7 @@ export default {
     'Transaction Time': '交易时间',
     'Tags': '标签',
     'Your transaction description (optional)': '你的交易描述 (可选)',
+    'Unable to get transaction': '无法获取交易',
     'User Profile': '用户信息',
     'Language': '语言',
     'Auto Update Exchange Rates Data': '自动更新汇率数据',
diff --git a/src/mobile-main.js b/src/mobile-main.js
index d26fce8d..d1f8d84e 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -20,6 +20,7 @@ import currency from './consts/currency.js';
 import colors from './consts/color.js';
 import icons from './consts/icon.js';
 import account from './consts/account.js';
+import transaction from './consts/transaction.js';
 import category from './consts/category.js';
 import licenses from './consts/licenses.js';
 import version from './lib/version.js';
@@ -62,6 +63,7 @@ Vue.prototype.$constants = {
     colors: colors,
     icons: icons,
     account: account,
+    transaction: transaction,
     category: category,
 };
 
diff --git a/src/router/mobile.js b/src/router/mobile.js
index 66d499b9..d58b51b1 100644
--- a/src/router/mobile.js
+++ b/src/router/mobile.js
@@ -6,7 +6,7 @@ import SignUpPage from '../views/mobile/Signup.vue';
 import UnlockPage from '../views/mobile/Unlock.vue';
 
 import TransactionDetailPage from '../views/mobile/transactions/Detail.vue';
-import TransactionNewPage from '../views/mobile/transactions/New.vue';
+import TransactionEditPage from '../views/mobile/transactions/Edit.vue';
 
 import AccountListPage from '../views/mobile/accounts/List.vue';
 import AccountEditPage from '../views/mobile/accounts/Edit.vue';
@@ -140,8 +140,13 @@ const routes = [
         beforeEnter: checkLogin
     },
     {
-        path: '/transaction/new',
-        component: TransactionNewPage,
+        path: '/transaction/add',
+        component: TransactionEditPage,
+        beforeEnter: checkLogin
+    },
+    {
+        path: '/transaction/edit',
+        component: TransactionEditPage,
         beforeEnter: checkLogin
     },
     {
diff --git a/src/views/mobile/Home.vue b/src/views/mobile/Home.vue
index 982891aa..a785a5aa 100644
--- a/src/views/mobile/Home.vue
+++ b/src/views/mobile/Home.vue
@@ -17,7 +17,7 @@
                 <f7-icon f7="creditcard"></f7-icon>
                 <span class="tabbar-label">{{ $t('Accounts') }}</span>
             </f7-link>
-            <f7-link href="/transaction/new">
+            <f7-link href="/transaction/add">
                 <f7-icon f7="plus_square" size="42px" class="lab-tarbar-big-icon"></f7-icon>
             </f7-link>
             <f7-link href="/statistic/overview">
diff --git a/src/views/mobile/transactions/Edit.vue b/src/views/mobile/transactions/Edit.vue
new file mode 100644
index 00000000..4f6bf664
--- /dev/null
+++ b/src/views/mobile/transactions/Edit.vue
@@ -0,0 +1,402 @@
+<template>
+    <f7-page>
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t(title)"></f7-nav-title>
+            <f7-nav-right>
+                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save"></f7-link>
+            </f7-nav-right>
+
+            <f7-subnavbar>
+                <f7-segmented strong>
+                    <f7-button :text="$t('Expense')" :active="transaction.type === $constants.transaction.allTransactionTypes.Expense" @click="transaction.type = $constants.transaction.allTransactionTypes.Expense"></f7-button>
+                    <f7-button :text="$t('Income')" :active="transaction.type === $constants.transaction.allTransactionTypes.Income" @click="transaction.type = $constants.transaction.allTransactionTypes.Income"></f7-button>
+                    <f7-button :text="$t('Transfer')" :active="transaction.type === $constants.transaction.allTransactionTypes.Transfer" @click="transaction.type = $constants.transaction.allTransactionTypes.Transfer"></f7-button>
+                </f7-segmented>
+            </f7-subnavbar>
+        </f7-navbar>
+
+        <f7-card class="skeleton-text" v-if="loading">
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list>
+                    <f7-list-item
+                        class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        header="Expense Amount" title="0.00">
+                    </f7-list-item>
+                    <f7-list-item header="Category" placeholder="Category"></f7-list-item>
+                    <f7-list-input label="Account" placeholder="Account Name"></f7-list-input>
+                    <f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input>
+                    <f7-list-item header="Tags" link="#"></f7-list-item>
+                    <f7-list-input type="textarea" label="Description" placeholder="Your transaction description (optional)"></f7-list-input>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+
+        <f7-card v-else-if="!loading">
+            <f7-card-content class="no-safe-areas" :padding="false">
+                <f7-list form>
+                    <f7-list-item
+                        class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        :class="{ 'color-theme-teal': transaction.type === $constants.transaction.allTransactionTypes.Expense, 'color-theme-red': transaction.type === $constants.transaction.allTransactionTypes.Income }"
+                        :style="{ fontSize: sourceAmountFontSize + 'px' }"
+                        :header="$t(sourceAmountName)"
+                        :title="transaction.sourceAmount | currency"
+                        @click="transaction.showSourceAmountSheet = true"
+                    >
+                        <NumberPadSheet min-value="-999999999.99" max-value="999999999.99"
+                                        :show.sync="transaction.showSourceAmountSheet"
+                                        v-model="transaction.sourceAmount"
+                        ></NumberPadSheet>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        :style="{ fontSize: destinationAmountFontSize + 'px' }"
+                        :header="$t('Transfer In Amount')"
+                        :title="transaction.destinationAmount | currency"
+                        @click="transaction.showDestinationAmountSheet = true"
+                        v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
+                    >
+                        <NumberPadSheet min-value="-999999999.99" max-value="999999999.99"
+                                        :show.sync="transaction.showDestinationAmountSheet"
+                                        v-model="transaction.destinationAmount"
+                        ></NumberPadSheet>
+                    </f7-list-item>
+
+                    <f7-list-item
+                        :header="$t('Category')"
+                    >
+                    </f7-list-item>
+
+                    <f7-list-input
+                        type="select"
+                        :class="{ 'disabled': !plainAllAccounts.length }"
+                        :label="$t(sourceAccountName)"
+                        :value="transaction.sourceAccountId"
+                        @input="transaction.sourceAccountId = $event.target.value"
+                    >
+                        <option v-for="account in plainAllAccounts"
+                                :key="account.id"
+                                :value="account.id">{{ account.name }}</option>
+                    </f7-list-input>
+
+                    <f7-list-input
+                        type="select"
+                        :class="{ 'disabled': !plainAllAccounts.length }"
+                        :label="$t('Destination Account')"
+                        :value="transaction.destinationAccountId"
+                        v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
+                        @input="transaction.destinationAccountId = $event.target.value"
+                    >
+                        <option v-for="account in plainAllAccounts"
+                                :key="account.id"
+                                :value="account.id">{{ account.name }}</option>
+                    </f7-list-input>
+
+                    <f7-list-input
+                        :label="$t('Transaction Time')"
+                        type="datetime-local"
+                        class="transaction-edit-time"
+                        :value="transaction.time"
+                        @input="transaction.time = $event.target.value"
+                    >
+                    </f7-list-input>
+
+                    <f7-list-item :header="$t('Tags')" link="#"
+                                  smart-select :smart-select-params="{ openIn: 'popup', setValueText: false, searchbar: true, searchbarPlaceholder: $t('Tag Title'), searchbarDisableText: $t('Cancel'), pageTitle: $t('Tags'), closeOnSelect: true, popupCloseLinkText: $t('Close') }">
+                        <select multiple v-model="transaction.tagIds">
+                            <option v-for="tag in allTags"
+                                    :key="tag.id"
+                                    :value="tag.id">{{ tag.name }}</option>
+                        </select>
+                        <f7-block class="margin-top-half no-padding" slot="footer" v-if="transaction.tagIds.length">
+                            <f7-chip class="transaction-edit-tag" media-bg-color="black"
+                                     v-for="tagId in transaction.tagIds"
+                                     :key="tagId"
+                                     :text="tagId | tagName(allTags)">
+                                <f7-icon slot="media" f7="number"></f7-icon>
+                            </f7-chip>
+                        </f7-block>
+                    </f7-list-item>
+
+                    <f7-list-input
+                        type="textarea"
+                        :label="$t('Description')"
+                        :placeholder="$t('Your transaction description (optional)')"
+                        :value="transaction.comment"
+                        @input="transaction.comment = $event.target.value"
+                    ></f7-list-input>
+                </f7-list>
+            </f7-card-content>
+        </f7-card>
+    </f7-page>
+</template>
+
+<script>
+export default {
+    data() {
+        const self = this;
+        const now = new Date();
+
+        return {
+            editTransactionId: null,
+            transaction: {
+                type: 3,
+                unixTime: self.$utilities.getUnixTime(now),
+                time: self.$utilities.formatDate(now, 'YYYY-MM-DDTHH:mm'),
+                sourceAccountId: '',
+                destinationAccountId: '',
+                sourceAmount: 0,
+                destinationAmount: 0,
+                tagIds: [],
+                comment: '',
+                showSourceAmountSheet: false,
+                showDestinationAmountSheet: false
+            },
+            allAccounts: [],
+            allCategories: {},
+            allTags: [],
+            loading: true,
+            submitting: false
+        };
+    },
+    computed: {
+        title() {
+            if (!this.editTransactionId) {
+                return 'Add Transaction';
+            } else {
+                return 'Edit Transaction';
+            }
+        },
+        saveButtonTitle() {
+            if (!this.editTransactionId) {
+                return 'Add';
+            } else {
+                return 'Save';
+            }
+        },
+        sourceAmountName() {
+            if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense) {
+                return 'Expense Amount';
+            } else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
+                return 'Income Amount';
+            } else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
+                return 'Transfer Out Amount';
+            } else {
+                return '';
+            }
+        },
+        sourceAccountName() {
+            if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense || this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
+                return 'Account';
+            } else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
+                return 'Source Account';
+            } else {
+                return '';
+            }
+        },
+        sourceAmountFontSize() {
+            return this.getFontSizeByAmount(this.transaction.sourceAmount);
+        },
+        destinationAmountFontSize() {
+            return this.getFontSizeByAmount(this.transaction.destinationAmount);
+        },
+        plainAllAccounts() {
+            const ret = [];
+
+            for (let i = 0; i < this.allAccounts.length; i++) {
+                const account = this.allAccounts[i];
+
+                if (account.type === this.$constants.account.allAccountTypes.SingleAccount) {
+                    ret.push(account);
+                    continue;
+                }
+
+                for (let j = 0; j < account.subAccounts.length; j++) {
+                    const subAccount = account.subAccounts[j];
+                    ret.push(subAccount);
+                }
+            }
+
+            return ret;
+        },
+        inputIsEmpty() {
+            return !!this.inputEmptyProblemMessage;
+        },
+        inputEmptyProblemMessage() {
+            return null;
+        }
+    },
+    watch: {
+        'transaction.sourceAmount': function (newValue, oldValue) {
+            if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense || this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
+                this.transaction.destinationAmount = newValue;
+            } else if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Transfer) {
+                let sourceAccount, destinationAccount = null;
+
+                for (let i = 0; i < this.plainAllAccounts.length; i++) {
+                    if (this.plainAllAccounts[i].id === this.transaction.sourceAccountId) {
+                        sourceAccount = this.plainAllAccounts[i];
+                    }
+
+                    if (this.plainAllAccounts[i].id === this.transaction.destinationAccountId) {
+                        destinationAccount = this.plainAllAccounts[i];
+                    }
+
+                    if (sourceAccount && destinationAccount) {
+                        break;
+                    }
+                }
+
+                if (sourceAccount && destinationAccount && sourceAccount.currency !== destinationAccount.currency) {
+                    oldValue = Math.floor(this.$exchangeRates.getOtherCurrencyAmount(oldValue, sourceAccount.currency, destinationAccount.currency));
+                    newValue = Math.floor(this.$exchangeRates.getOtherCurrencyAmount(newValue, sourceAccount.currency, destinationAccount.currency));
+                }
+
+                if (!sourceAccount || !destinationAccount || this.transaction.destinationAmount === oldValue) {
+                    this.transaction.destinationAmount = newValue;
+                }
+            }
+        },
+        'transaction.destinationAmount': function (newValue) {
+            if (this.transaction.type === this.$constants.transaction.allTransactionTypes.Expense || this.transaction.type === this.$constants.transaction.allTransactionTypes.Income) {
+                this.transaction.sourceAmount = newValue;
+            }
+        },
+        'transaction.time': function (newValue) {
+            this.transaction.unixTime = this.$utilities.getUnixTime(newValue);
+        }
+    },
+    created() {
+        const self = this;
+        const query = self.$f7route.query;
+        const router = self.$f7router;
+
+        self.loading = true;
+
+        const promises = [
+            self.$services.getAllAccounts({ visibleOnly: true }),
+            self.$services.getAllTransactionCategories({}),
+            self.$services.getAllTransactionTags()
+        ];
+
+        if (query.id) {
+            self.editTransactionId = query.id;
+            promises.push(self.$services.getTransaction({ id: self.editTransactionId }));
+        }
+
+        Promise.all(promises).then(function (responses) {
+            const accountDta = responses[0].data;
+            const categoryData = responses[1].data;
+            const tagData = responses[2].data;
+
+            if (!accountDta || !accountDta.success || !accountDta.result) {
+                self.$toast('Unable to get account list');
+                router.back();
+                return;
+            }
+
+            if (!categoryData || !categoryData.success || !categoryData.result) {
+                self.$toast('Unable to get category list');
+                router.back();
+                return;
+            }
+
+            if (!tagData || !tagData.success || !tagData.result) {
+                self.$toast('Unable to get tag list');
+                router.back();
+                return;
+            }
+
+            if (self.editTransactionId && (!responses[3] || !responses[3].data || !responses[3].data.success || !responses[3].data.result)) {
+                self.$toast('Unable to get transaction');
+                router.back();
+                return;
+            }
+
+            self.allAccounts = accountDta.result;
+            self.allCategories = categoryData.result;
+            self.allTags = tagData.result;
+
+            if (self.editTransactionId) {
+                const transaction = responses[3].data.result;
+
+                self.transaction.type = transaction.type;
+                self.transaction.unixTime = transaction.time;
+                self.transaction.time = self.$utilities.formatDate(transaction.time, 'YYYY-MM-DDTHH:mm');
+                self.transaction.sourceAccountId = transaction.sourceAccountId;
+                self.transaction.destinationAccountId = transaction.destinationAccountId;
+                self.transaction.sourceAmount = transaction.sourceAmount;
+                self.transaction.destinationAmount = transaction.destinationAmount;
+                self.transaction.tagIds = transaction.tagIds;
+                self.transaction.comment = transaction.comment;
+            } else if (!self.editTransactionId && self.plainAllAccounts.length) {
+                self.transaction.sourceAccountId = self.plainAllAccounts[0].id;
+                self.transaction.destinationAccountId = self.plainAllAccounts[0].id;
+            }
+
+            self.loading = false;
+        }).catch(errors => {
+            self.$logger.error('failed to load essential data for editing transaction', errors);
+
+            for (let i = 0; i < errors.length; i++) {
+                const error = errors[i];
+
+                if (error.response && error.response.data && error.response.data.errorMessage) {
+                    self.$toast({ error: error.response.data });
+                    router.back();
+                    return;
+                } else if (!error.processed) {
+                    self.$toast('An error has occurred');
+                    router.back();
+                    return;
+                }
+            }
+        });
+    },
+    methods: {
+        save() {
+
+        },
+        getFontSizeByAmount(amount) {
+            if (amount >= 100000000 || amount <= -100000000) {
+                return 32;
+            } else if (amount >= 1000000 || amount <= -1000000) {
+                return 36;
+            } else {
+                return 40;
+            }
+        }
+    },
+    filters: {
+        tagName(tagId, allTags) {
+            for (let i = 0; i < allTags.length; i++) {
+                if (allTags[i].id === tagId) {
+                    return allTags[i].name;
+                }
+            }
+
+            return '';
+        }
+    }
+};
+</script>
+
+<style>
+.transaction-edit-amount {
+    line-height: 53px;
+    color: var(--f7-theme-color);
+}
+
+.transaction-edit-amount .item-title {
+    font-weight: bolder;
+}
+
+.transaction-edit-time input[type="datetime-local"] {
+    max-width: inherit;
+}
+
+.transaction-edit-tag {
+    margin-right: 4px;
+}
+</style>
diff --git a/src/views/mobile/transactions/New.vue b/src/views/mobile/transactions/New.vue
deleted file mode 100644
index a68041a4..00000000
--- a/src/views/mobile/transactions/New.vue
+++ /dev/null
@@ -1,317 +0,0 @@
-<template>
-    <f7-page>
-        <f7-navbar>
-            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
-            <f7-nav-title :title="$t(title)"></f7-nav-title>
-            <f7-nav-right>
-                <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" :text="$t(saveButtonTitle)" @click="save"></f7-link>
-            </f7-nav-right>
-
-            <f7-subnavbar>
-                <f7-segmented strong>
-                    <f7-button tab-link="#expense" :text="$t('Expense')" tab-link-active></f7-button>
-                    <f7-button tab-link="#income" :text="$t('Income')"></f7-button>
-                    <f7-button tab-link="#transfer" :text="$t('Transfer')"></f7-button>
-                </f7-segmented>
-            </f7-subnavbar>
-        </f7-navbar>
-
-        <f7-tabs>
-            <f7-tab id="expense" tab-active class="page-content no-padding-top">
-                <f7-card>
-                    <f7-card-content class="no-safe-areas" :padding="false">
-                        <f7-list form>
-                            <f7-list-item
-                                class="color-theme-teal transaction-edit-amount padding-top-half padding-bottom-half"
-                                :header="$t('Expense Amount')"
-                                :title="transaction.destinationAmount | currency"
-                                @click="transaction.showDestinationAmountSheet = true"
-                            >
-                                <NumberPadSheet :show.sync="transaction.showDestinationAmountSheet"
-                                                v-model="transaction.destinationAmount"
-                                ></NumberPadSheet>
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Category')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Account')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-input
-                                :label="$t('Transaction Time')"
-                                type="datetime-local"
-                                class="transaction-edit-time"
-                                :value="transaction.time"
-                                @input="transaction.time = $event.target.value"
-                            >
-                            </f7-list-input>
-
-                            <f7-list-item
-                                :header="$t('Tags')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-input
-                                type="textarea"
-                                :label="$t('Description')"
-                                :placeholder="$t('Your transaction description (optional)')"
-                                :value="transaction.comment"
-                                @input="transaction.comment = $event.target.value"
-                            ></f7-list-input>
-                        </f7-list>
-                    </f7-card-content>
-                </f7-card>
-            </f7-tab>
-            <f7-tab id="income" class="page-content no-padding-top">
-                <f7-card>
-                    <f7-card-content class="no-safe-areas" :padding="false">
-                        <f7-list form>
-                            <f7-list-item
-                                class="color-theme-red transaction-edit-amount padding-top-half padding-bottom-half"
-                                :header="$t('Income Amount')"
-                                :title="transaction.destinationAmount | currency"
-                                @click="transaction.showDestinationAmountSheet = true"
-                            >
-                                <NumberPadSheet :show.sync="transaction.showDestinationAmountSheet"
-                                                v-model="transaction.destinationAmount"
-                                ></NumberPadSheet>
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Category')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Account')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-input
-                                :label="$t('Transaction Time')"
-                                type="datetime-local"
-                                class="transaction-edit-time"
-                                :value="transaction.time"
-                                @input="transaction.time = $event.target.value"
-                            >
-                            </f7-list-input>
-
-                            <f7-list-item
-                                :header="$t('Tags')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-input
-                                type="textarea"
-                                :label="$t('Description')"
-                                :placeholder="$t('Your transaction description (optional)')"
-                                :value="transaction.comment"
-                                @input="transaction.comment = $event.target.value"
-                            ></f7-list-input>
-                        </f7-list>
-                    </f7-card-content>
-                </f7-card>
-            </f7-tab>
-            <f7-tab id="transfer" class="page-content no-padding-top">
-                <f7-card>
-                    <f7-card-content class="no-safe-areas" :padding="false">
-                        <f7-list form>
-                            <f7-list-item
-                                class="transaction-edit-amount padding-top-half padding-bottom-half"
-                                :header="$t('Transfer Out Amount')"
-                                :title="transaction.sourceAmount | currency"
-                                @click="transaction.showSourceAmountSheet = true"
-                            >
-                                <NumberPadSheet :show.sync="transaction.showSourceAmountSheet"
-                                                v-model="transaction.sourceAmount"
-                                ></NumberPadSheet>
-                            </f7-list-item>
-
-                            <f7-list-item
-                                class="transaction-edit-amount padding-top-half padding-bottom-half"
-                                :header="$t('Transfer In Amount')"
-                                :title="transaction.destinationAmount | currency"
-                                @click="transaction.showDestinationAmountSheet = true"
-                            >
-                                <NumberPadSheet :show.sync="transaction.showDestinationAmountSheet"
-                                                v-model="transaction.destinationAmount"
-                                ></NumberPadSheet>
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Category')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Source Account')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-item
-                                :header="$t('Destination Account')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-input
-                                :label="$t('Transaction Time')"
-                                type="datetime-local"
-                                class="transaction-edit-time"
-                                :value="transaction.time"
-                                @input="transaction.time = $event.target.value"
-                            >
-                            </f7-list-input>
-
-                            <f7-list-item
-                                :header="$t('Tags')"
-                            >
-                            </f7-list-item>
-
-                            <f7-list-input
-                                type="textarea"
-                                :label="$t('Description')"
-                                :placeholder="$t('Your transaction description (optional)')"
-                                :value="transaction.comment"
-                                @input="transaction.comment = $event.target.value"
-                            ></f7-list-input>
-                        </f7-list>
-                    </f7-card-content>
-                </f7-card>
-            </f7-tab>
-        </f7-tabs>
-    </f7-page>
-</template>
-
-<script>
-export default {
-    data() {
-        const self = this;
-
-        return {
-            editTransactionId: null,
-            transaction: {
-                sourceAmount: 0,
-                destinationAmount: 0,
-                time: self.$utilities.formatDate(new Date(), 'YYYY-MM-DDTHH:mm'),
-                comment: '',
-                showSourceAmountSheet: false,
-                showDestinationAmountSheet: false
-            },
-            allAccounts: [],
-            allCategories: {},
-            allTags: [],
-            submitting: false
-        };
-    },
-    computed: {
-        title() {
-            if (!this.editTransactionId) {
-                return 'Add Transaction';
-            } else {
-                return 'Edit Transaction';
-            }
-        },
-        saveButtonTitle() {
-            if (!this.editTransactionId) {
-                return 'Add';
-            } else {
-                return 'Save';
-            }
-        },
-        inputIsEmpty() {
-            return !!this.inputEmptyProblemMessage;
-        },
-        inputEmptyProblemMessage() {
-            return null;
-        }
-    },
-    watch: {
-        'transaction.sourceAmount': function (newValue) {
-            this.transaction.destinationAmount = newValue;
-        },
-        'transaction.destinationAmount': function (newValue) {
-            this.transaction.sourceAmount = newValue;
-        }
-    },
-    created() {
-        const self = this;
-        const router = self.$f7router;
-
-        self.loading = true;
-
-        const promises = [
-            self.$services.getAllAccounts(),
-            self.$services.getAllTransactionCategories({}),
-            self.$services.getAllTransactionTags()
-        ];
-
-        Promise.all(promises).then(function (responses) {
-            const accountDta = responses[0].data;
-            const categoryData = responses[1].data;
-            const tagData = responses[2].data;
-
-            if (!accountDta || !accountDta.success || !accountDta.result) {
-                self.$toast('Unable to get account list');
-                router.back();
-                return;
-            }
-
-            if (!categoryData || !categoryData.success || !categoryData.result) {
-                self.$toast('Unable to get category list');
-                router.back();
-                return;
-            }
-
-            if (!tagData || !tagData.success || !tagData.result) {
-                self.$toast('Unable to get tag list');
-                router.back();
-                return;
-            }
-
-            self.allAccounts = accountDta.result;
-            self.allCategories = categoryData.result;
-            self.allTags = tagData.result;
-
-            self.loading = false;
-        }).catch(errors => {
-            self.$logger.error('failed to load essential data for editing transaction', errors);
-
-            for (let i = 0; i < errors.length; i++) {
-                const error = errors[i];
-
-                if (error.response && error.response.data && error.response.data.errorMessage) {
-                    self.$toast({ error: error.response.data });
-                    router.back();
-                    return;
-                } else if (!error.processed) {
-                    self.$toast('An error has occurred');
-                    router.back();
-                    return;
-                }
-            }
-        });
-    },
-    methods: {
-        save() {
-
-        }
-    }
-};
-</script>
-
-<style>
-.transaction-edit-amount {
-    font-size: 40px;
-    font-weight: bolder;
-    color: var(--f7-theme-color);
-}
-
-.transaction-edit-time input[type="datetime-local"] {
-    max-width: inherit;
-}
-</style>