mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 15:07:33 +08:00
add more function in transaction edit page
This commit is contained in:
MaysWind
@@ -0,0 +1,10 @@
|
||||
const allTransactionTypes = {
|
||||
ModifyBalance: 1,
|
||||
Income: 2,
|
||||
Expense: 3,
|
||||
Transfer: 4
|
||||
};
|
||||
|
||||
export default {
|
||||
allTransactionTypes: allTransactionTypes,
|
||||
};
|
||||
@@ -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'));
|
||||
},
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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': '自动更新汇率数据',
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
|
||||
@@ -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
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user