mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-14 23:17:33 +08:00
add partial transaction edit page ui
This commit is contained in:
MaysWind
@@ -15,7 +15,7 @@ export default function ({i18n}, value, currencyCode) {
|
||||
|
||||
const currencyDisplayMode = settings.getCurrencyDisplayMode();
|
||||
|
||||
if (currencyDisplayMode === 'symbol') {
|
||||
if (currencyCode && currencyDisplayMode === 'symbol') {
|
||||
const currencyInfo = currency.all[currencyCode];
|
||||
let currencySymbol = currency.defaultCurrencySymbol;
|
||||
|
||||
@@ -29,9 +29,9 @@ export default function ({i18n}, value, currencyCode) {
|
||||
amount: value,
|
||||
symbol: currencySymbol
|
||||
});
|
||||
} else if (currencyDisplayMode === 'code') {
|
||||
} else if (currencyCode && currencyDisplayMode === 'code') {
|
||||
return `${value} ${currencyCode}`;
|
||||
} else if (currencyDisplayMode === 'name') {
|
||||
} else if (currencyCode && currencyDisplayMode === 'name') {
|
||||
const currencyName = i18n.t(`currency.${currencyCode}`);
|
||||
return `${value} ${currencyName}`;
|
||||
} else {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import CryptoJS from "crypto-js";
|
||||
import moment from 'moment';
|
||||
import uaParser from 'ua-parser-js';
|
||||
|
||||
import accountConstants from '../consts/account.js';
|
||||
import settings from "./settings.js";
|
||||
|
||||
@@ -31,6 +33,10 @@ function isBoolean(val) {
|
||||
return typeof(val) === 'boolean';
|
||||
}
|
||||
|
||||
function formatDate(date, format) {
|
||||
return moment(date).format(format);
|
||||
}
|
||||
|
||||
function copyObjectTo(fromObject, toObject) {
|
||||
if (!isObject(fromObject)) {
|
||||
return toObject;
|
||||
@@ -340,6 +346,7 @@ export default {
|
||||
isString,
|
||||
isNumber,
|
||||
isBoolean,
|
||||
formatDate,
|
||||
copyObjectTo,
|
||||
copyArrayTo,
|
||||
appendThousandsSeparator,
|
||||
|
||||
+13
-1
@@ -443,7 +443,6 @@ export default {
|
||||
'Sign Up': 'Sign Up',
|
||||
'Transaction Details': 'Transaction Details',
|
||||
'Account List': 'Account List',
|
||||
'New Transaction': 'New Transaction',
|
||||
'Net assets': 'Net assets',
|
||||
'Total assets': 'Total assets',
|
||||
'Total liabilities': 'Total liabilities',
|
||||
@@ -495,6 +494,19 @@ export default {
|
||||
'Unable to move account': 'Unable to move account',
|
||||
'Are you sure you want to delete this account?': 'Are you sure you want to delete this account?',
|
||||
'Unable to delete this account': 'Unable to delete this account',
|
||||
'Add Transaction': 'Add Transaction',
|
||||
'Edit Transaction': 'Edit Transaction',
|
||||
'Expense Amount': 'Expense Amount',
|
||||
'Income Amount': 'Income Amount',
|
||||
'Transfer Out Amount': 'Transfer Out Amount',
|
||||
'Transfer In Amount': 'Transfer In Amount',
|
||||
'Category': 'Category',
|
||||
'Account': 'Account',
|
||||
'Source Account': 'Source Account',
|
||||
'Destination Account': 'Destination Account',
|
||||
'Transaction Time': 'Transaction Time',
|
||||
'Tags': 'Tags',
|
||||
'Your transaction description (optional)': 'Your transaction description (optional)',
|
||||
'User Profile': 'User Profile',
|
||||
'Language': 'Language',
|
||||
'Auto Update Exchange Rates Data': 'Auto Update Exchange Rates Data',
|
||||
|
||||
+13
-1
@@ -443,7 +443,6 @@ export default {
|
||||
'Sign Up': '注册',
|
||||
'Transaction Details': '交易详情',
|
||||
'Account List': '账户列表',
|
||||
'New Transaction': '新交易',
|
||||
'Net assets': '净资产',
|
||||
'Total assets': '总资产',
|
||||
'Total liabilities': '总负债',
|
||||
@@ -495,6 +494,19 @@ export default {
|
||||
'Unable to move account': '无法移动账户',
|
||||
'Are you sure you want to delete this account?': '您确定要删除该账户？',
|
||||
'Unable to delete this account': '无法删除该账户',
|
||||
'Add Transaction': '添加交易',
|
||||
'Edit Transaction': '编辑交易',
|
||||
'Expense Amount': '支出金额',
|
||||
'Income Amount': '收入金额',
|
||||
'Transfer Out Amount': '转出金额',
|
||||
'Transfer In Amount': '转入金额',
|
||||
'Category': '分类',
|
||||
'Account': '账户',
|
||||
'Source Account': '来源账户',
|
||||
'Destination Account': '目标账户',
|
||||
'Transaction Time': '交易时间',
|
||||
'Tags': '标签',
|
||||
'Your transaction description (optional)': '你的交易描述 (可选)',
|
||||
'User Profile': '用户信息',
|
||||
'Language': '语言',
|
||||
'Auto Update Exchange Rates Data': '自动更新汇率数据',
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
<template>
|
||||
<f7-page>
|
||||
<f7-navbar :title="$t('New Transaction')" :back-link="$t('Back')">
|
||||
<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 raised>
|
||||
<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>
|
||||
@@ -11,21 +17,301 @@
|
||||
</f7-navbar>
|
||||
|
||||
<f7-tabs>
|
||||
<f7-tab id="expense" tab-active class="page-content">
|
||||
<f7-list media-list class="skeleton-text">
|
||||
<f7-list-item title="Placeholder"></f7-list-item>
|
||||
</f7-list>
|
||||
<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">
|
||||
<f7-list media-list class="skeleton-text">
|
||||
<f7-list-item title="Placeholder"></f7-list-item>
|
||||
</f7-list>
|
||||
<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">
|
||||
<f7-list media-list class="skeleton-text">
|
||||
<f7-list-item title="Placeholder"></f7-list-item>
|
||||
</f7-list>
|
||||
<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