From 9eba55f530127695d9756dd9ba02dc8c1ccfbd1d Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 28 Mar 2025 11:36:27 +0100
Subject: [PATCH] feat(transaction): add rule from transaction

---
 frontend/js/router/index.js                |  2 +-
 frontend/js/views/category/EditView.vue    | 77 +++++++++++++++++++---
 frontend/js/views/transaction/ShowView.vue | 59 ++++++++++++-----
 3 files changed, 112 insertions(+), 26 deletions(-)

diff --git a/frontend/js/router/index.js b/frontend/js/router/index.js
index e1c7fd2..3322c62 100644
--- a/frontend/js/router/index.js
+++ b/frontend/js/router/index.js
@@ -61,7 +61,7 @@ const router = createRouter({
           component: () => import('../views/category/ListView.vue'),
         },
         {
-          path: '/category/edit/:id',
+          path: '/category/edit/:id/:transaction?',
           name: 'category_edit',
           meta: { label: 'Catégorie' },
           component: () => import('../views/category/EditView.vue'),
diff --git a/frontend/js/views/category/EditView.vue b/frontend/js/views/category/EditView.vue
index f9fbd7b..23decc9 100644
--- a/frontend/js/views/category/EditView.vue
+++ b/frontend/js/views/category/EditView.vue
@@ -19,6 +19,17 @@
             @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'])"
@@ -81,6 +92,7 @@
 </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'
@@ -96,7 +108,10 @@ const endpoint = `/api/category`
 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 !== null
 
 const toISODateString = (v, h, m, s) => {
   const d = new Date(v)
@@ -124,17 +139,56 @@ const loadData = () => {
     .then(function (value) {
       data.value = value.rows[0]
       form.value = createForm(value.rows[0])
+      checkTransaction()
     })
 }
 
-const doAddRule = (item) => {
-  const rule = {
-    contain: null,
-    match: null,
-    bank_category: null,
-    amount: null,
-    date_from: null,
-    date_to: null,
+const checkTransaction = () => {
+  if (!addTransaction) {
+    return
+  }
+
+  fetch(
+    `/api/transaction?${new URLSearchParams({
+      id__eq: transactionId,
+    })}`,
+    createRequestOptions(),
+  )
+    .then((response) => {
+      return response.json()
+    })
+    .then(function (value) {
+      const transaction = value.rows[0]
+
+      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
+
+  fetch('/api/transactions/update_categories', createRequestOptions({ method: 'POST' })).then(() => {
+    applyInProgress.value = false
+  })
+}
+
+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) {
@@ -286,6 +340,7 @@ const doSave = (e) => {
         form.value.error = data.message
       } else {
         form.value = null
+        addTransaction = false
         formShow.value = false
         loadData()
       }
@@ -296,7 +351,11 @@ const doSave = (e) => {
 }
 
 const doBack = () => {
-  router.replace({ name: parentRouteName })
+  if (transactionId) {
+    router.replace({ name: 'transactions' })
+  } else {
+    router.replace({ name: parentRouteName })
+  }
 }
 
 onMounted(loadData)
diff --git a/frontend/js/views/transaction/ShowView.vue b/frontend/js/views/transaction/ShowView.vue
index 3aeba11..497aba1 100644
--- a/frontend/js/views/transaction/ShowView.vue
+++ b/frontend/js/views/transaction/ShowView.vue
@@ -1,15 +1,13 @@
 <template>
-  <div
-    v-if="data"
-  >
+  <div v-if="data">
     <BModal
+      id="transaction"
       v-model="modal"
       scrollable
       ok-only
-      id="transaction"
       size="lg"
-      @hide="onClose"
       :title="data.label"
+      @hide="onClose"
     >
       <BTableSimple
         v-if="data"
@@ -65,9 +63,29 @@
           <BTd class="border-0">
             <!-- eslint-disable vue/no-v-html -->
             <span
+              v-if="data.category"
               class="p-0"
               v-html="renderCategory(data.category)"
             ></span>
+            <BRow
+              v-else
+              class="m-0 p-0"
+            >
+              <BCol class="ps-0">
+                <BFormSelect
+                  v-model="category"
+                  :options="categories"
+                />
+              </BCol>
+              <BCol>
+                <BButton
+                  v-if="category"
+                  variant="primary"
+                  @click="createRule"
+                  >Créer règle</BButton
+                >
+              </BCol>
+            </BRow>
           </BTd>
         </BTr>
       </BTableSimple>
@@ -76,16 +94,17 @@
 </template>
 
 <script setup>
-import { BTableSimple, BTr, BTh, BTd, BModal } from 'bootstrap-vue-next'
+import { BTableSimple, BTr, BTh, BTd, BModal, BFormSelect, BFormGroup, BButton, BRow, BCol } from 'bootstrap-vue-next'
 import { renderDate, renderCategory } from '../../lib/renderers'
 import { createRequestOptions } from '../../lib/request'
 import { onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 const data = ref(null)
 const modal = ref(true)
-const route = useRoute()
 const router = useRouter()
+const categories = ref([])
+const category = ref(null)
 
 const props = defineProps({
   id: {
@@ -100,18 +119,10 @@ watch(
   () => props.id,
   (newValue) => {
     id.value = newValue
-    modal.value = true
     loadData()
   },
 )
 
-watch(
-  () => route.params.id,
-  (newValue) => {
-    modal.value = true
-  },
-)
-
 const loadData = () => {
   fetch(
     `/api/transaction?${new URLSearchParams({
@@ -126,11 +137,27 @@ const loadData = () => {
       data.value = value.rows[0]
       modal.value = true
     })
+
+  fetch('/api/category', createRequestOptions())
+    .then((response) => response.json())
+    .then((data) => {
+      categories.value = []
+      data.rows.forEach((row) => {
+        categories.value.push({
+          value: row.id,
+          text: row.label,
+        })
+      })
+    })
 }
 
 const onClose = () => {
   router.replace({ name: 'transactions' })
 }
 
+const createRule = () => {
+  router.replace({ name: 'category_edit', params: { id: category.value, transaction: data.value.id } })
+}
+
 onMounted(loadData)
 </script>