From b7309298aa591f06059a389f8e8f0320a760fb95 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Thu, 20 Mar 2025 10:04:27 +0100
Subject: [PATCH] refactor: refs #8118 simplify VnDropdown usage and replace
 onMounted data fetching with FetchData component

---
 src/components/common/VnDropdown.vue    |  9 ---------
 src/pages/Claim/Card/ClaimSummary.vue   | 18 ++++++++++++------
 src/pages/Ticket/Card/TicketSummary.vue |  2 ++
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/common/VnDropdown.vue b/src/components/common/VnDropdown.vue
index 75b6878a0..1b3f2237b 100644
--- a/src/components/common/VnDropdown.vue
+++ b/src/components/common/VnDropdown.vue
@@ -48,15 +48,6 @@ async function changeState(value) {
             focus-on-mount
             @update:model-value="changeState"
         >
-            <template #option="scope">
-                <QItem v-bind="scope.itemProps">
-                    <QItemSection>
-                        <QItemLabel>
-                            {{ scope.opt?.name || scope.opt?.description }}
-                        </QItemLabel>
-                    </QItemSection>
-                </QItem>
-            </template>
         </VnSelect>
     </QBtnDropdown>
 </template>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index f43ba4dad..37e73a99d 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -183,14 +183,15 @@ async function changeState(value) {
 function claimUrl(section) {
     return '#/claim/' + entityId.value + '/' + section;
 }
-
-onMounted(async () => {
-    const { data } = await axios.get('ClaimStates');
-    claimStates.value = data;
-});
 </script>
 
 <template>
+    <FetchData
+        url="ClaimStates"
+        :filter="{ fields: ['id', 'description'] }"
+        @on-fetch="(data) => (claimStates = data)"
+        auto-load
+    />
     <FetchData
         url="ClaimDms"
         :filter="claimDmsFilter"
@@ -208,7 +209,12 @@ onMounted(async () => {
             {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
         </template>
         <template #header-right>
-            <VnDropdown :options="claimStates" @change-state="changeState($event)" />
+            <VnDropdown
+                :options="claimStates"
+                option-value="id"
+                option-label="description"
+                @change-state="changeState($event)"
+            />
         </template>
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity.claim" />
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index f1c5a1072..9cd8a75d2 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -117,6 +117,8 @@ onMounted(async () => {
                 :moduleId="entityId"
                 :options="editableStates"
                 :disable="!isEditable()"
+                :option-label="'name'"
+                :option-value="'code'"
                 @change-state="changeState($event)"
             />
         </template>