From 77a5ccd7965329ebba58efc167eb57ca686e6185 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 4 Aug 2024 23:21:11 +0800
Subject: [PATCH] support editing templates for mobile version

---
 src/router/mobile.js                       |  10 +
 src/views/mobile/SettingsPage.vue          |   1 +
 src/views/mobile/templates/ListPage.vue    | 328 ++++++++++++++++++++-
 src/views/mobile/transactions/EditPage.vue | 208 ++++++++++---
 4 files changed, 499 insertions(+), 48 deletions(-)

diff --git a/src/router/mobile.js b/src/router/mobile.js
index 2e54ed66..a3fad734 100644
--- a/src/router/mobile.js
+++ b/src/router/mobile.js
@@ -297,6 +297,16 @@ const routes = [
         async: asyncResolve(TemplateListPage),
         beforeEnter: [checkLogin]
     },
+    {
+        path: '/template/add',
+        async: asyncResolve(TransactionEditPage),
+        beforeEnter: [checkLogin]
+    },
+    {
+        path: '/template/edit',
+        async: asyncResolve(TransactionEditPage),
+        beforeEnter: [checkLogin]
+    },
     {
         path: '(.*)',
         redirect: '/'
diff --git a/src/views/mobile/SettingsPage.vue b/src/views/mobile/SettingsPage.vue
index df54c10c..350756a2 100644
--- a/src/views/mobile/SettingsPage.vue
+++ b/src/views/mobile/SettingsPage.vue
@@ -7,6 +7,7 @@
             <f7-list-item :title="$t('User Profile')" link="/user/profile"></f7-list-item>
             <f7-list-item :title="$t('Transaction Categories')" link="/category/all"></f7-list-item>
             <f7-list-item :title="$t('Transaction Tags')" link="/tag/list"></f7-list-item>
+            <f7-list-item :title="$t('Transaction Templates')" link="/template/list"></f7-list-item>
             <f7-list-item :title="$t('Data Management')" link="/user/data/management"></f7-list-item>
             <f7-list-item :title="$t('Two-Factor Authentication')" link="/user/2fa"></f7-list-item>
             <f7-list-item :title="$t('Device & Sessions')" link="/user/sessions"></f7-list-item>
diff --git a/src/views/mobile/templates/ListPage.vue b/src/views/mobile/templates/ListPage.vue
index 9eab22b6..5121acaa 100644
--- a/src/views/mobile/templates/ListPage.vue
+++ b/src/views/mobile/templates/ListPage.vue
@@ -1,16 +1,340 @@
 <template>
-    <f7-page>
+    <f7-page :ptr="!sortable" @ptr:refresh="reload" @page:afterin="onPageAfterIn">
+        <f7-navbar>
+            <f7-nav-left :back-link="$t('Back')"></f7-nav-left>
+            <f7-nav-title :title="$t('Transaction Templates')"></f7-nav-title>
+            <f7-nav-right class="navbar-compact-icons">
+                <f7-link icon-f7="ellipsis" :class="{ 'disabled': !templates.length }" v-if="!sortable" @click="showMoreActionSheet = true"></f7-link>
+                <f7-link :href="'/template/add?templateType=' + templateType" icon-f7="plus" v-if="!sortable"></f7-link>
+                <f7-link :text="$t('Done')" :class="{ 'disabled': displayOrderSaving }" @click="saveSortResult" v-else-if="sortable"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+
+        <f7-list strong inset dividers class="margin-top skeleton-text" v-if="loading">
+            <f7-list-item title="Template Name"
+                          :key="itemIdx" v-for="itemIdx in [ 1, 2, 3 ]">
+                <template #media>
+                    <f7-icon f7="app_fill"></f7-icon>
+                </template>
+            </f7-list-item>
+        </f7-list>
+
+        <f7-list strong inset dividers class="margin-top" v-if="!loading && noAvailableTemplate">
+            <f7-list-item :title="$t('No available template')"></f7-list-item>
+        </f7-list>
+
+        <f7-list strong inset dividers sortable class="margin-top template-list"
+                 :sortable-enabled="sortable"
+                 v-if="!loading"
+                 @sortable:sort="onSort">
+            <f7-list-item swipeout
+                          :class="{ 'actual-first-child': template.id === firstShowingId, 'actual-last-child': template.id === lastShowingId }"
+                          :id="getTemplateDomId(template)"
+                          :title="template.name"
+                          :key="template.id"
+                          v-for="template in templates"
+                          v-show="showHidden || !template.hidden"
+                          @taphold="setSortable()">
+                <template #media>
+                    <f7-icon f7="doc_plaintext">
+                        <f7-badge color="gray" class="right-bottom-icon" v-if="template.hidden">
+                            <f7-icon f7="eye_slash_fill"></f7-icon>
+                        </f7-badge>
+                    </f7-icon>
+                </template>
+                <f7-swipeout-actions left v-if="sortable">
+                    <f7-swipeout-button :color="template.hidden ? 'blue' : 'gray'" class="padding-left padding-right"
+                                        overswipe close @click="hide(template, !template.hidden)">
+                        <f7-icon :f7="template.hidden ? 'eye' : 'eye_slash'"></f7-icon>
+                    </f7-swipeout-button>
+                </f7-swipeout-actions>
+                <f7-swipeout-actions right v-if="!sortable">
+                    <f7-swipeout-button color="orange" close :text="$t('Edit')" @click="edit(template)"></f7-swipeout-button>
+                    <f7-swipeout-button color="red" class="padding-left padding-right" @click="remove(template, false)">
+                        <f7-icon f7="trash"></f7-icon>
+                    </f7-swipeout-button>
+                </f7-swipeout-actions>
+            </f7-list-item>
+        </f7-list>
+
+        <f7-actions close-by-outside-click close-on-escape :opened="showMoreActionSheet" @actions:closed="showMoreActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-button @click="setSortable()">{{ $t('Sort') }}</f7-actions-button>
+                <f7-actions-button v-if="!showHidden" @click="showHidden = true">{{ $t('Show Hidden Transaction Templates') }}</f7-actions-button>
+                <f7-actions-button v-if="showHidden" @click="showHidden = false">{{ $t('Hide Hidden Transaction Templates') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
+
+        <f7-actions close-by-outside-click close-on-escape :opened="showDeleteActionSheet" @actions:closed="showDeleteActionSheet = false">
+            <f7-actions-group>
+                <f7-actions-label>{{ $t('Are you sure you want to delete this template?') }}</f7-actions-label>
+                <f7-actions-button color="red" @click="remove(templateToDelete, true)">{{ $t('Delete') }}</f7-actions-button>
+            </f7-actions-group>
+            <f7-actions-group>
+                <f7-actions-button bold close>{{ $t('Cancel') }}</f7-actions-button>
+            </f7-actions-group>
+        </f7-actions>
     </f7-page>
 </template>
 
 <script>
+import { mapStores } from 'pinia';
+import { useTransactionTemplatesStore } from '@/stores/transactionTemplate.js';
+
+import templateConstants from '@/consts/template.js';
+import { isDefined } from '@/lib/common.js';
+import { onSwipeoutDeleted } from '@/lib/ui.mobile.js';
+
 export default {
     props: [
         'f7router'
     ],
-}
+    data() {
+        return {
+            templateType: templateConstants.allTemplateTypes.Normal,
+            loading: true,
+            loadingError: null,
+            showHidden: false,
+            sortable: false,
+            templateToDelete: null,
+            showMoreActionSheet: false,
+            showDeleteActionSheet: false,
+            displayOrderModified: false,
+            displayOrderSaving: false
+        };
+    },
+    computed: {
+        ...mapStores(useTransactionTemplatesStore),
+        templates() {
+            return this.transactionTemplatesStore.allTransactionTemplates[this.templateType] || [];
+        },
+        firstShowingId() {
+            for (let i = 0; i < this.templates.length; i++) {
+                if (this.showHidden || !this.templates[i].hidden) {
+                    return this.templates[i].id;
+                }
+            }
+
+            return null;
+        },
+        lastShowingId() {
+            for (let i = this.templates.length - 1; i >= 0; i--) {
+                if (this.showHidden || !this.templates[i].hidden) {
+                    return this.templates[i].id;
+                }
+            }
+
+            return null;
+        },
+        noAvailableTemplate() {
+            for (let i = 0; i < this.templates.length; i++) {
+                if (this.showHidden || !this.templates[i].hidden) {
+                    return false;
+                }
+            }
+
+            return true;
+        }
+    },
+    created() {
+        const self = this;
+
+        self.loading = true;
+
+        self.transactionTemplatesStore.loadAllTemplates({
+            templateType: self.templateType,
+            force: false
+        }).then(() => {
+            self.loading = false;
+        }).catch(error => {
+            if (error.processed) {
+                self.loading = false;
+            } else {
+                self.loadingError = error;
+                self.$toast(error.message || error);
+            }
+        });
+    },
+    methods: {
+        onPageAfterIn() {
+            if ((!isDefined(this.transactionTemplatesStore.transactionTemplateListStatesInvalid[this.templateType]) || this.transactionTemplatesStore.transactionTemplateListStatesInvalid[this.templateType]) && !this.loading) {
+                this.reload(null);
+            }
+
+            this.$routeBackOnError(this.f7router, 'loadingError');
+        },
+        reload(done) {
+            if (this.sortable) {
+                done();
+                return;
+            }
+
+            const self = this;
+            const force = !!done;
+
+            self.transactionTemplatesStore.loadAllTemplates({
+                templateType: self.templateType,
+                force: force
+            }).then(() => {
+                if (done) {
+                    done();
+                }
+
+                if (force) {
+                    self.$toast('Template list has been updated');
+                }
+            }).catch(error => {
+                if (done) {
+                    done();
+                }
+
+                if (!error.processed) {
+                    self.$toast(error.message || error);
+                }
+            });
+        },
+        setSortable() {
+            if (this.sortable) {
+                return;
+            }
+
+            this.showHidden = true;
+            this.sortable = true;
+            this.displayOrderModified = false;
+        },
+        onSort(event) {
+            const self = this;
+
+            if (!event || !event.el || !event.el.id) {
+                self.$toast('Unable to move template');
+                return;
+            }
+
+            const id = self.parseTemplateIdFromDomId(event.el.id);
+
+            if (!id) {
+                self.$toast('Unable to move template');
+                return;
+            }
+
+            self.transactionTemplatesStore.changeTemplateDisplayOrder({
+                templateType: self.templateType,
+                templateId: id,
+                from: event.from,
+                to: event.to
+            }).then(() => {
+                self.displayOrderModified = true;
+            }).catch(error => {
+                self.$toast(error.message || error);
+            });
+        },
+        saveSortResult() {
+            const self = this;
+
+            if (!self.displayOrderModified) {
+                self.showHidden = false;
+                self.sortable = false;
+                return;
+            }
+
+            self.displayOrderSaving = true;
+            self.$showLoading();
+
+            self.transactionTemplatesStore.updateTemplateDisplayOrders({
+                templateType: self.templateType
+            }).then(() => {
+                self.displayOrderSaving = false;
+                self.$hideLoading();
+
+                self.showHidden = false;
+                self.sortable = false;
+                self.displayOrderModified = false;
+            }).catch(error => {
+                self.displayOrderSaving = false;
+                self.$hideLoading();
+
+                if (!error.processed) {
+                    self.$toast(error.message || error);
+                }
+            });
+        },
+        edit(template) {
+            this.f7router.navigate('/template/edit?id=' + template.id);
+        },
+        hide(template, hidden) {
+            const self = this;
+
+            self.$showLoading();
+
+            self.transactionTemplatesStore.hideTemplate({
+                template: template,
+                hidden: hidden
+            }).then(() => {
+                self.$hideLoading();
+            }).catch(error => {
+                self.$hideLoading();
+
+                if (!error.processed) {
+                    self.$toast(error.message || error);
+                }
+            });
+        },
+        remove(template, confirm) {
+            const self = this;
+
+            if (!template) {
+                self.$alert('An error occurred');
+                return;
+            }
+
+            if (!confirm) {
+                self.templateToDelete = template;
+                self.showDeleteActionSheet = true;
+                return;
+            }
+
+            self.showDeleteActionSheet = false;
+            self.templateToDelete = null;
+            self.$showLoading();
+
+            self.transactionTemplatesStore.deleteTemplate({
+                template: template,
+                beforeResolve: (done) => {
+                    onSwipeoutDeleted(self.getTemplateDomId(template), done);
+                }
+            }).then(() => {
+                self.$hideLoading();
+            }).catch(error => {
+                self.$hideLoading();
+
+                if (!error.processed) {
+                    self.$toast(error.message || error);
+                }
+            });
+        },
+        getTemplateDomId(template) {
+            return 'template_' + template.id;
+        },
+        parseTemplateIdFromDomId(domId) {
+            if (!domId || domId.indexOf('template_') !== 0) {
+                return null;
+            }
+
+            return domId.substring(9); // template_
+        }
+    }
+};
 </script>
 
 <style>
+.template-list {
+    --f7-list-item-footer-font-size: var(--ebk-large-footer-font-size);
+}
 
+.template-list .item-footer {
+    padding-top: 4px;
+}
 </style>
diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index b5aa256a..80a21291 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -9,35 +9,36 @@
             </f7-nav-right>
 
             <f7-subnavbar>
-                <f7-segmented strong :class="{ 'readonly': mode !== 'add' }">
+                <f7-segmented strong :class="{ 'readonly': type === 'transaction' && mode !== 'add' }">
                     <f7-button :text="$t('Expense')" :active="transaction.type === allTransactionTypes.Expense"
-                               :disabled="mode !== 'add' && transaction.type !== allTransactionTypes.Expense"
+                               :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Expense"
                                v-if="transaction.type !== allTransactionTypes.ModifyBalance"
                                @click="transaction.type = allTransactionTypes.Expense"></f7-button>
                     <f7-button :text="$t('Income')" :active="transaction.type === allTransactionTypes.Income"
-                               :disabled="mode !== 'add' && transaction.type !== allTransactionTypes.Income"
+                               :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Income"
                                v-if="transaction.type !== allTransactionTypes.ModifyBalance"
                                @click="transaction.type = allTransactionTypes.Income"></f7-button>
                     <f7-button :text="$t('Transfer')" :active="transaction.type === allTransactionTypes.Transfer"
-                               :disabled="mode !== 'add' && transaction.type !== allTransactionTypes.Transfer"
+                               :disabled="type === 'transaction' && mode !== 'add' && transaction.type !== allTransactionTypes.Transfer"
                                v-if="transaction.type !== allTransactionTypes.ModifyBalance"
                                @click="transaction.type = allTransactionTypes.Transfer"></f7-button>
                     <f7-button :text="$t('Modify Balance')" :active="transaction.type === allTransactionTypes.ModifyBalance"
-                               v-if="transaction.type === allTransactionTypes.ModifyBalance"></f7-button>
+                               v-if="type === 'transaction' && transaction.type === allTransactionTypes.ModifyBalance"></f7-button>
                 </f7-segmented>
             </f7-subnavbar>
         </f7-navbar>
 
         <f7-list strong inset dividers class="margin-vertical skeleton-text" v-if="loading">
+            <f7-list-input label="Template Name" placeholder="Template Name" v-if="type === 'template'"></f7-list-input>
             <f7-list-item
                 class="transaction-edit-amount ebk-large-amount"
                 header="Expense Amount" title="0.00">
             </f7-list-item>
             <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Category" title="Category Names"></f7-list-item>
             <f7-list-item class="list-item-with-header-and-title" header="Account" title="Account Name"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title" header="Transaction Time" title="YYYY/MM/DD HH:mm:ss"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after" header="Transaction Timezone" title="(UTC XX:XX) System Default" link="#" :no-chevron="mode === 'view'"></f7-list-item>
-            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Geographic Location" title="No Location"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title" header="Transaction Time" title="YYYY/MM/DD HH:mm:ss" v-if="type === 'transaction'"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after" header="Transaction Timezone" title="(UTC XX:XX) System Default" link="#" :no-chevron="mode === 'view'" v-if="type === 'transaction'"></f7-list-item>
+            <f7-list-item class="list-item-with-header-and-title list-item-title-hide-overflow" header="Geographic Location" title="No Location" v-if="type === 'transaction'"></f7-list-item>
             <f7-list-item header="Tags">
                 <template #footer>
                     <f7-block class="margin-top-half no-padding no-margin">
@@ -48,8 +49,16 @@
             <f7-list-input type="textarea" label="Description" placeholder="Your transaction description (optional)"></f7-list-input>
         </f7-list>
 
-        <f7-list form strong inset dividers class="margin-vertical"
-                 v-else-if="!loading">
+        <f7-list form strong inset dividers class="margin-vertical" v-else-if="!loading">
+            <f7-list-input
+                type="text"
+                clear-button
+                :label="$t('Template Name')"
+                :placeholder="$t('Template Name')"
+                v-model:value="transaction.name"
+                v-if="type === 'template'"
+            ></f7-list-input>
+
             <f7-list-item
                 class="transaction-edit-amount"
                 link="#" no-chevron
@@ -226,6 +235,7 @@
                 :header="$t('Transaction Time')"
                 :title="transactionDisplayTime"
                 @click="mode !== 'view' ? showTransactionDateTimeSheet = true : showTimeInDefaultTimezone = !showTimeInDefaultTimezone"
+                v-if="type === 'transaction'"
             >
                 <date-time-selection-sheet v-model:show="showTransactionDateTimeSheet"
                                            v-model="transaction.time">
@@ -237,7 +247,9 @@
                 class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
                 :class="{ 'readonly': mode === 'view' }"
                 :header="$t('Transaction Timezone')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Transaction Timezone'), popupCloseLinkText: $t('Done') }">
+                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), appendSearchbarNotFound: $t('No results'), pageTitle: $t('Transaction Timezone'), popupCloseLinkText: $t('Done') }"
+                v-if="type === 'transaction'"
+            >
                 <select v-model="transaction.timeZone">
                     <option :value="timezone.name" :key="timezone.name"
                             v-for="timezone in allTimezones">{{ timezone.displayNameWithUtcOffset }}</option>
@@ -257,6 +269,7 @@
                 :class="{ 'readonly': mode === 'view' && !transaction.geoLocation }"
                 :header="$t('Geographic Location')"
                 @click="showGeoLocationActionSheet = true"
+                v-if="type === 'transaction'"
             >
                 <template #title>
                     <f7-block class="list-item-custom-title no-padding no-margin">
@@ -392,8 +405,9 @@ export default {
         const newTransaction = transactionsStore.generateNewTransactionModel(query.type);
 
         return {
+            type: 'transaction',
             mode: 'add',
-            editTransactionId: null,
+            editId: null,
             transaction: newTransaction,
             clientSessionId: '',
             loading: true,
@@ -417,13 +431,23 @@ export default {
     computed: {
         ...mapStores(useSettingsStore, useUserStore, useAccountsStore, useTransactionCategoriesStore, useTransactionTagsStore, useTransactionsStore, useTransactionTemplatesStore, useExchangeRatesStore),
         title() {
-            if (this.mode === 'add') {
-                return 'Add Transaction';
-            } else if (this.mode === 'edit') {
-                return 'Edit Transaction';
-            } else {
-                return 'Transaction Detail';
+            if (this.type === 'transaction') {
+                if (this.mode === 'add') {
+                    return 'Add Transaction';
+                } else if (this.mode === 'edit') {
+                    return 'Edit Transaction';
+                } else {
+                    return 'Transaction Detail';
+                }
+            } else if (this.type === 'template') {
+                if (this.mode === 'add') {
+                    return 'Add Transaction Template';
+                } else if (this.mode === 'edit') {
+                    return 'Edit Transaction Template';
+                }
             }
+
+            return '';
         },
         saveButtonTitle() {
             if (this.mode === 'add') {
@@ -612,19 +636,25 @@ export default {
             return !!this.inputEmptyProblemMessage;
         },
         inputEmptyProblemMessage() {
+            if (this.type === 'template') {
+                if (!this.transaction.name) {
+                    return 'Template name cannot be blank';
+                }
+            }
+
             return null;
         }
     },
     watch: {
         'transaction.sourceAmount': function (newValue, oldValue) {
-            if (this.mode === 'view') {
+            if (this.mode === 'view' || this.loading) {
                 return;
             }
 
             this.transactionsStore.setTransactionSuitableDestinationAmount(this.transaction, oldValue, newValue);
         },
         'transaction.destinationAmount': function (newValue) {
-            if (this.mode === 'view') {
+            if (this.mode === 'view' || this.loading) {
                 return;
             }
 
@@ -645,10 +675,25 @@ export default {
         const self = this;
         const query = self.f7route.query;
 
-        if (self.f7route.path === '/transaction/edit') {
+        if (self.f7route.path === '/transaction/add') {
+            self.type = 'transaction';
+            self.mode = 'add';
+        } else if (self.f7route.path === '/transaction/edit') {
+            self.type = 'transaction';
             self.mode = 'edit';
         } else if (self.f7route.path === '/transaction/detail') {
+            self.type = 'transaction';
             self.mode = 'view';
+        } else if (self.f7route.path === '/template/add') {
+            self.type = 'template';
+            self.mode = 'add';
+        } else if (self.f7route.path === '/template/edit') {
+            self.type = 'template';
+            self.mode = 'edit';
+        } else {
+            self.$toast('Parameter Invalid');
+            self.loadingError = 'Parameter Invalid';
+            return;
         }
 
         self.loading = true;
@@ -660,12 +705,28 @@ export default {
             self.transactionTemplatesStore.loadAllTemplates({ force: false, templateType: templateConstants.allTemplateTypes.Normal })
         ];
 
-        if (query.id) {
-            if (self.mode === 'edit') {
-                self.editTransactionId = query.id;
+        if (self.type === 'transaction') {
+            if (query.id) {
+                if (self.mode === 'edit') {
+                    self.editId = query.id;
+                }
+
+                promises.push(self.transactionsStore.getTransaction({ transactionId: query.id }));
+            }
+        } else if (self.type === 'template') {
+            self.transaction.name = '';
+
+            if (query.templateType) {
+                self.transaction.templateType = parseInt(query.templateType);
             }
 
-            promises.push(self.transactionsStore.getTransaction({ transactionId: query.id }));
+            if (query.id) {
+                if (self.mode === 'edit') {
+                    self.editId = query.id;
+                }
+
+                promises.push(self.transactionTemplatesStore.getTemplate({ templateId: query.id }));
+            }
         }
 
         if (query.type && query.type !== '0' &&
@@ -680,17 +741,25 @@ export default {
 
         Promise.all(promises).then(function (responses) {
             if (query.id && !responses[4]) {
-                self.$toast('Unable to retrieve transaction');
-                self.loadingError = 'Unable to retrieve transaction';
+                if (self.type === 'transaction') {
+                    self.$toast('Unable to retrieve transaction');
+                    self.loadingError = 'Unable to retrieve transaction';
+                } else if (self.type === 'template') {
+                    self.$toast('Unable to retrieve template');
+                    self.loadingError = 'Unable to retrieve template';
+                }
+
                 return;
             }
 
             let fromTransaction = null;
 
-            if (query.id) {
+            if (self.type === 'transaction' && query.id) {
                 fromTransaction = responses[4];
-            } else if (query.templateId && self.transactionTemplatesStore.allTransactionTemplatesMap && self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal]) {
+            } else if (self.type === 'transaction' && self.transactionTemplatesStore.allTransactionTemplatesMap && self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal]) {
                 fromTransaction = self.transactionTemplatesStore.allTransactionTemplatesMap[templateConstants.allTemplateTypes.Normal][query.templateId];
+            } else if (self.type === 'template' && query.id) {
+                fromTransaction = responses[4];
             }
 
             setTransactionModelByTransaction(
@@ -706,12 +775,23 @@ export default {
                     type: query.type,
                     categoryId: query.categoryId,
                     accountId: query.accountId,
-                    tagIds: query.tagIds
+                    destinationAccountId: query.destinationAccountId,
+                    amount: query.amount,
+                    destinationAmount: query.destinationAmount,
+                    tagIds: query.tagIds,
+                    comment: query.comment
                 },
-                (self.mode === 'edit' || self.mode === 'view'),
-                (self.mode === 'edit' || self.mode === 'view')
+                self.type === 'transaction' && (self.mode === 'edit' || self.mode === 'view'),
+                self.type === 'transaction' && (self.mode === 'edit' || self.mode === 'view')
             );
 
+            if (self.type === 'template' && query.id) {
+                const template = responses[4];
+                self.transaction.id = template.id;
+                self.transaction.templateType = template.templateType;
+                self.transaction.name = template.name;
+            }
+
             self.loading = false;
         }).catch(error => {
             logger.error('failed to load essential data for editing transaction', error);
@@ -741,13 +821,57 @@ export default {
                 return;
             }
 
-            const doSubmit = function () {
+            const problemMessage = self.inputEmptyProblemMessage;
+
+            if (problemMessage) {
+                self.$alert(problemMessage);
+                return;
+            }
+
+            if (self.type === 'transaction' && (self.mode === 'add' || self.mode === 'edit')) {
+                const doSubmit = function () {
+                    self.submitting = true;
+                    self.$showLoading(() => self.submitting);
+
+                    self.transactionsStore.saveTransaction({
+                        transaction: self.transaction,
+                        defaultCurrency: self.defaultCurrency,
+                        isEdit: self.mode === 'edit',
+                        clientSessionId: self.clientSessionId
+                    }).then(() => {
+                        self.submitting = false;
+                        self.$hideLoading();
+
+                        if (self.mode === 'add') {
+                            self.$toast('You have added a new transaction');
+                        } else if (self.mode === 'edit') {
+                            self.$toast('You have saved this transaction');
+                        }
+
+                        router.back();
+                    }).catch(error => {
+                        self.submitting = false;
+                        self.$hideLoading();
+
+                        if (!error.processed) {
+                            self.$toast(error.message || error);
+                        }
+                    });
+                };
+
+                if (self.transaction.sourceAmount === 0) {
+                    self.$confirm('Are you sure you want to save this transaction with a zero amount?', () => {
+                        doSubmit();
+                    });
+                } else {
+                    doSubmit();
+                }
+            } else if (self.type === 'template' && (self.mode === 'add' || self.mode === 'edit')) {
                 self.submitting = true;
                 self.$showLoading(() => self.submitting);
 
-                self.transactionsStore.saveTransaction({
-                    transaction: self.transaction,
-                    defaultCurrency: self.defaultCurrency,
+                self.transactionTemplatesStore.saveTemplateContent({
+                    template: self.transaction,
                     isEdit: self.mode === 'edit',
                     clientSessionId: self.clientSessionId
                 }).then(() => {
@@ -755,9 +879,9 @@ export default {
                     self.$hideLoading();
 
                     if (self.mode === 'add') {
-                        self.$toast('You have added a new transaction');
+                        self.$toast('You have added a new template');
                     } else if (self.mode === 'edit') {
-                        self.$toast('You have saved this transaction');
+                        self.$toast('You have saved this template');
                     }
 
                     router.back();
@@ -769,14 +893,6 @@ export default {
                         self.$toast(error.message || error);
                     }
                 });
-            };
-
-            if (self.transaction.sourceAmount === 0) {
-                self.$confirm('Are you sure you want to save this transaction with a zero amount?', () => {
-                    doSubmit();
-                });
-            } else {
-                doSubmit();
             }
         },
         updateGeoLocation(forceUpdate) {