accounting/frontend/components/txEditor.vue
Knut Ahlers 2c38247221
Allow to edit transactions
improve keyboard usability of transaction editor

Signed-off-by: Knut Ahlers <knut@ahlers.me>
2024-01-20 22:31:11 +01:00

165 lines
3.3 KiB
Vue

<template>
<tr>
<td />
<td>
<input
ref="date"
v-model="form.date"
class="form-control form-control-sm"
type="date"
@keyup.esc="sendCancel"
@keyup.enter="$refs.payee.focus()"
>
</td>
<td>
<input
ref="payee"
v-model="form.payee"
class="form-control form-control-sm"
type="text"
@keyup.esc="sendCancel"
@keyup.enter="$refs.category.focus()"
>
</td>
<td v-if="account.type !== 'tracking'">
<select
ref="category"
v-model="form.category"
class="form-select form-select-sm"
@keyup.esc="sendCancel"
@keyup.enter="$refs.description.focus()"
>
<option
v-for="cat in categories"
:key="cat.id"
:value="cat.id"
>
{{ cat.name }}
</option>
</select>
</td>
<td>
<input
ref="description"
v-model="form.description"
class="form-control form-control-sm"
type="text"
@keyup.esc="sendCancel"
@keyup.enter="$refs.amount.focus()"
>
</td>
<td>
<input
ref="amount"
v-model="form.amount"
class="form-control form-control-sm"
type="number"
step="0.01"
@keypress.enter="saveTransaction"
@keyup.esc="sendCancel"
>
</td>
<td class="align-middle">
<input
v-model="form.cleared"
type="checkbox"
@keypress.enter="saveTransaction"
@keyup.esc="sendCancel"
>
</td>
</tr>
</template>
<script>
import { responseToJSON } from '../helpers'
export default {
computed: {
categories() {
const cats = this.accounts.filter(acc => acc.type === 'category')
cats.sort((a, b) => a.name.localeCompare(b.name))
return cats
},
},
data() {
return {
form: {
amount: 0,
category: '',
cleared: false,
date: new Date().toISOString()
.split('T')[0],
description: '',
payee: '',
},
}
},
emits: ['editCancelled', 'editSaved'],
methods: {
saveTransaction() {
const body = JSON.stringify({
...this.form,
account: this.accountId,
category: this.form.category || null,
time: new Date(this.form.date),
})
const headers = {
'Content-Type': 'application/json',
}
let prom = null
if (this.edit?.id) {
prom = fetch(`/api/transactions/${this.edit.id}`, { body, headers, method: 'PUT' })
} else {
prom = fetch('/api/transactions', { body, headers, method: 'POST' })
}
return prom
.then(responseToJSON)
.then(() => {
this.$emit('editSaved')
})
},
sendCancel() {
this.$emit('editCancelled')
},
},
mounted() {
if (this.edit) {
this.form = {
...this.edit,
date: new Date(this.edit.time).toISOString()
.split('T')[0],
}
}
this.$refs.date.focus()
},
name: 'AccountingAppTXEditor',
props: {
account: {
required: true,
type: Object,
},
accounts: {
required: true,
type: Array,
},
edit: {
default: null,
type: Object,
},
},
}
</script>