accounting/frontend/components/txEditor.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.account.id,
        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>