support editing templates for mobile version

This commit is contained in:
MaysWind
2024-08-04 23:21:11 +08:00
parent 99ae18d06d
commit 77a5ccd796
4 changed files with 499 additions and 48 deletions
+10
View File
@@ -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: '/'
+1
View File
@@ -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>
+326 -2
View File
@@ -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>
+162 -46
View File
@@ -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) {