budget-go/frontend/js/views/category/EditView.vue

<template>
  <div
    v-if="data === null"
    class="text-center p-5"
  >
    <p>Chargement...</p>
    <BSpinner />
  </div>
  <BContainer
    v-else
    fluid
    class="p-0"
  >
    <CrudHeader :title="data.label">
      <template #menu>
        <div>
          <BButton
            variant="secondary"
            @click="doBack"
            >Retour</BButton
          >
          <BButton
            variant="secondary"
            @click="doApply"
          >
            <VueSpinner
              v-if="applyInProgress"
              size="20"
              color="white"
            />
            <span v-else>Appliquer&nbsp;les&nbsp;règles</span>
          </BButton>
          <BButton
            variant="secondary"
            @click="form.data['rules'] = doAddRule(form.data['rules'])"
            >Ajouter règle</BButton
          >
          <BButton
            variant="primary"
            @click="doSave"
            >Enregistrer</BButton
          >
          <BButton
            variant="danger"
            @click="doDelete"
            >Supprimer</BButton
          >
        </div>
      </template>
      <template #bottom> </template>
    </CrudHeader>

    <BForm
      v-if="form !== null"
      @submit="doSave"
      class="p-3"
    >
      <BAlert
        v-if="form?.error"
        dismissible
        variant="warning"
        :model-value="true"
      >
        <div v-html="form.error"></div>
      </BAlert>
      <BRow>
        <BCol
          cols="12"
          :md="form.data.rules && form.data.rules.length > 0 ? 4 : 12"
        >
          <FormView
            :form="form"
            :fields="['label', 'month_threshold', 'ignore_transactions', 'color']"
          />
        </BCol>
        <BCol
          cols="12"
          :md="form.data.rules && form.data.rules.length > 0 ? 8 : 12"
        >
          <div
            class="rounded"
            :class="{ border: form.data.rules && form.data.rules.length > 0 }"
          >
            <FormView
              :form="form"
              :fields="['rules']"
            />
          </div>
        </BCol>
      </BRow>
    </BForm>
  </BContainer>
</template>

<script setup>
import { VueSpinner } from 'vue3-spinners'
import { BContainer, BButton, BForm, BRow, BCol, BAlert } from 'bootstrap-vue-next'
import CrudHeader from './../../components/crud/CrudHeader.vue'
import FormView from './../../components/crud/FormView.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { update, remove, getOne, createForm } from '../../models/category'
import { updateCategories, getOne as getTransactionOne } from '../../models/transaction'
import { requestErrorBuilder } from '../../lib/request'

const route = useRoute()
const router = useRouter()

const data = ref(null)
const form = ref(null)
const formShow = ref(false)
const applyInProgress = ref(false)
const id = route.params.id
const transactionId = route.params.transaction
let addTransaction = transactionId !== ''

const loadData = () => {
  getOne(
    {
      id__eq: id,
    },
    (value) => {
      data.value = value
      form.value = createForm(value)
      checkTransaction()
    },
  )
}

const checkTransaction = () => {
  if (!addTransaction) {
    return
  }

  getTransactionOne(
    {
      id__eq: transactionId,
    },
    (transaction) => {
      doAddRule(form.value.data['rules'], {
        contain: transaction.reference,
        amount: null,
        match: null,
        bank_category: null,
        date_from: null,
        date_to: null,
      })
    },
  )
}

const doApply = () => {
  applyInProgress.value = true

  const callback = () => {
    applyInProgress.value = false
  }

  updateCategories(callback, callback)
}

const doAddRule = (item, rule) => {
  if (!rule) {
    rule = {
      contain: null,
      match: null,
      bank_category: null,
      amount: null,
      date_from: null,
      date_to: null,
    }
  }

  if (item == null) {
    item = []
  }

  item.push(rule)

  window.setTimeout(() => {
    const container = document.querySelector('#rules > div')
    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })
  }, 300)

  return item
}

const doDelete = () => {
  if (!confirm('Je confirme la suppression')) {
    return
  }

  remove(id, doBack, doBack)
}

const doSave = () => {
  update(
    form.value.data,
    (data) => {
      if (data.code === 400) {
        form.value.error = requestErrorBuilder(data)
      } else {
        form.value = null
        addTransaction = false
        formShow.value = false
        loadData()
      }
    },
    (err) => {
      form.value.error = `Une erreur s'est produite : ${err}`
    },
  )
}

const doBack = () => {
  if (transactionId) {
    router.replace({ name: 'transactions' })
  } else {
    router.replace({ name: 'categories' })
  }
}

onMounted(loadData)
</script>

<style>
#rules > div {
  max-height: calc(100vh - 140px);
  overflow: auto;
}
</style>