support editing templates for mobile version
This commit is contained in:
@@ -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: '/'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user