From d2ccc232ef1db23c646346b87220bde2d9379030 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 3 Mar 2025 15:11:47 +0100
Subject: [PATCH] refactor: refs #8581 improve note components and update
 filter handling

---
 src/components/ui/VnNotes.vue             | 29 ++++++++++++--------
 src/pages/Claim/Card/ClaimNotes.vue       | 33 +++++++++++------------
 src/pages/Customer/Card/CustomerNotes.vue | 19 +++----------
 src/pages/Worker/Card/WorkerNotes.vue     | 16 ++++++-----
 4 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index ec6289a67..6740934d4 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -26,12 +26,13 @@ const $attrs = computed(() => {
 });
 
 const isRequired = computed(() => {
-    return Object.keys($attrs).includes('required')
+    return Object.keys($attrs).includes('required');
 });
 
 const $props = defineProps({
     url: { type: String, default: null },
-    saveUrl: {type: String, default: null},
+    saveUrl: { type: String, default: null },
+    userFilter: { type: Object, default: () => {} },
     filter: { type: Object, default: () => {} },
     body: { type: Object, default: () => {} },
     addNote: { type: Boolean, default: false },
@@ -65,7 +66,7 @@ async function insert() {
 }
 
 function confirmAndUpdate() {
-    if(!newNote.text && originalText)
+    if (!newNote.text && originalText)
         quasar
             .dialog({
                 component: VnConfirm,
@@ -88,11 +89,17 @@ async function update() {
         ...body,
         ...{ notes: newNote.text },
     };
-    await axios.patch(`${$props.saveUrl ?? `${$props.url}/${$props.body.workerFk}`}`, newBody);
+    await axios.patch(
+        `${$props.saveUrl ?? `${$props.url}/${$props.body.workerFk}`}`,
+        newBody,
+    );
 }
 
 onBeforeRouteLeave((to, from, next) => {
-    if ((newNote.text && !$props.justInput) || (newNote.text !== originalText) && $props.justInput)
+    if (
+        (newNote.text && !$props.justInput) ||
+        (newNote.text !== originalText && $props.justInput)
+    )
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
@@ -104,12 +111,11 @@ onBeforeRouteLeave((to, from, next) => {
     else next();
 });
 
-function fetchData([ data ]) {
+function fetchData([data]) {
     newNote.text = data?.notes;
     originalText = data?.notes;
     emit('onFetch', data);
 }
-
 </script>
 <template>
     <FetchData
@@ -126,8 +132,8 @@ function fetchData([ data ]) {
         @on-fetch="fetchData"
         auto-load
     />
-    <QCard 
-        class="q-pa-xs q-mb-lg full-width" 
+    <QCard
+        class="q-pa-xs q-mb-lg full-width"
         :class="{ 'just-input': $props.justInput }"
         v-if="$props.addNote || $props.justInput"
     >
@@ -179,7 +185,8 @@ function fetchData([ data ]) {
         :url="$props.url"
         order="created DESC"
         :limit="0"
-        :user-filter="$props.filter"
+        :user-filter="userFilter"
+        :filter="filter"
         auto-load
         ref="vnPaginateRef"
         class="show"
@@ -218,7 +225,7 @@ function fetchData([ data ]) {
                                 >
                                     {{
                                         observationTypes.find(
-                                            (ot) => ot.id === note.observationTypeFk
+                                            (ot) => ot.id === note.observationTypeFk,
                                         )?.description
                                     }}
                                 </QBadge>
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index cc6e33779..68cb220ee 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useAttrs } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
@@ -7,7 +7,6 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
 const route = useRoute();
 const state = useState();
 const user = state.getUser();
-const $attrs = useAttrs();
 
 const $props = defineProps({
     id: { type: [Number, String], default: null },
@@ -15,24 +14,21 @@ const $props = defineProps({
 });
 const claimId = computed(() => $props.id || route.params.id);
 
-const claimFilter = computed(() => {
-    return {
-        where: { claimFk: claimId.value },
-        fields: ['id', 'created', 'workerFk', 'text'],
-        include: {
-            relation: 'worker',
-            scope: {
-                fields: ['id', 'firstName', 'lastName'],
-                include: {
-                    relation: 'user',
-                    scope: {
-                        fields: ['id', 'nickname', 'name'],
-                    },
+const claimFilter = {
+    fields: ['id', 'created', 'workerFk', 'text'],
+    include: {
+        relation: 'worker',
+        scope: {
+            fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname', 'name'],
                 },
             },
         },
-    };
-});
+    },
+};
 
 const body = {
     claimFk: claimId.value,
@@ -43,7 +39,8 @@ const body = {
     <VnNotes
         url="claimObservations"
         :add-note="$props.addNote"
-        :filter="claimFilter"
+        :user-filter="claimFilter"
+        :filter="{ where: { claimFk: claimId } }"
         :body="body"
         v-bind="$attrs"
         style="overflow-y: auto"
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 189b59904..5a078b0cb 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -1,28 +1,15 @@
 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 import VnNotes from 'src/components/ui/VnNotes.vue';
-
-const route = useRoute();
-
-const noteFilter = computed(() => {
-    return {
-        order: 'created DESC',
-        where: {
-            clientFk: `${route.params.id}`,
-        },
-    };
-});
 </script>
-
 <template>
     <VnNotes
         url="clientObservations"
         :add-note="true"
-        :filter="noteFilter"
-        :body="{ clientFk: route.params.id }"
+        :filter="{ where: { clientFk: $route.params.id } }"
+        :body="{ clientFk: $route.params.id }"
         style="overflow-y: auto"
         :select-type="true"
         required
+        order="created DESC"
     />
 </template>
diff --git a/src/pages/Worker/Card/WorkerNotes.vue b/src/pages/Worker/Card/WorkerNotes.vue
index 4f123206b..da274f3fa 100644
--- a/src/pages/Worker/Card/WorkerNotes.vue
+++ b/src/pages/Worker/Card/WorkerNotes.vue
@@ -5,9 +5,9 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
 
 const route = useRoute();
 
-const filter = {
+const userFilter = {
     order: 'created DESC',
-    where: { workerFk: route.params.id },
+
     include: {
         relation: 'worker',
         scope: {
@@ -22,11 +22,15 @@ const filter = {
     },
 };
 
-const body = {
-    workerFk: route.params.id,
-};
+const body = { workerFk: route.params.id };
 </script>
 
 <template>
-    <VnNotes :add-note="true" url="WorkerObservations" :filter="filter" :body="body" />
+    <VnNotes
+        :add-note="true"
+        url="WorkerObservations"
+        :user-filter="userFilter"
+        :filter="{ where: { workerFk: $route.params.id } }"
+        :body="body"
+    />
 </template>