From bce7e2ad565f31d4f3f374d4fe082186f25c43f8 Mon Sep 17 00:00:00 2001
From: benjaminedc <benjaminedc@verdnatura.es>
Date: Thu, 13 Mar 2025 08:06:39 +0100
Subject: [PATCH] feat: refs #8118 enhance VnDropdown component; simplify usage
 in Claim and Ticket summaries

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

diff --git a/src/components/common/VnDropdown.vue b/src/components/common/VnDropdown.vue
index 63d6b96f6..75b6878a0 100644
--- a/src/components/common/VnDropdown.vue
+++ b/src/components/common/VnDropdown.vue
@@ -11,14 +11,18 @@ const $props = defineProps({
         type: Boolean,
         default: null,
     },
-    moduleName: {
-        type: String,
-        default: null,
-    },
     options: {
         type: Array,
         default: null,
     },
+    optionLabel: {
+        type: String,
+        default: 'name',
+    },
+    optionValue: {
+        type: String,
+        default: 'id',
+    },
 });
 
 async function changeState(value) {
@@ -37,8 +41,9 @@ async function changeState(value) {
     >
         <VnSelect
             :options="$props.options"
+            :option-label="$props.optionLabel"
+            :option-value="$props.optionValue"
             hide-selected
-            option-value="code"
             hide-dropdown-icon
             focus-on-mount
             @update:model-value="changeState"
@@ -46,11 +51,8 @@ async function changeState(value) {
             <template #option="scope">
                 <QItem v-bind="scope.itemProps">
                     <QItemSection>
-                        <QItemLabel v-if="$props.moduleName === 'Ticket'">
-                            {{ scope.opt?.name }}
-                        </QItemLabel>
-                        <QItemLabel v-if="$props.moduleName === 'Claim'">
-                            {{ scope.opt?.description }}
+                        <QItemLabel>
+                            {{ scope.opt?.name || scope.opt?.description }}
                         </QItemLabel>
                     </QItemSection>
                 </QItem>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 23a9f1073..25910cfc0 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -173,9 +173,8 @@ function openDialog(dmsId) {
 }
 
 async function changeState(value) {
-    const newState = claimStates.value.find((state) => state.code == value);
     await axios.patch(`Claims/updateClaim/${entityId.value}`, {
-        claimStateFk: newState.id,
+        claimStateFk: value,
     });
     router.go(route.fullPath);
 }
@@ -208,11 +207,7 @@ onMounted(async () => {
             {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
         </template>
         <template #header-right>
-            <VnDropdown
-                :moduleName="route.meta.moduleName"
-                :options="claimStates"
-                @change-state="changeState($event)"
-            />
+            <VnDropdown :options="claimStates" @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 a575d66e7..907276849 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -114,7 +114,6 @@ onMounted(async () => {
         </template>
         <template #header-right>
             <VnDropdown
-                :moduleName="route.meta.moduleName"
                 :moduleId="entityId"
                 :options="editableStates"
                 :disable="!isEditable()"