feat: refs #8118 enhance VnDropdown component; simplify usage in Claim and Ticket summaries

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'">
+                        <QItemLabel>
-                            {{ scope.opt?.name }}
+                            {{ scope.opt?.name || scope.opt?.description }}
-                        </QItemLabel>
-                        <QItemLabel v-if="$props.moduleName === 'Claim'">
-                            {{ scope.opt?.description }}
                         </QItemLabel>
                     </QItemSection>
                 </QItem>

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
+            <VnDropdown :options="claimStates" @change-state="changeState($event)" />
-                :moduleName="route.meta.moduleName"
-                :options="claimStates"
-                @change-state="changeState($event)"
-            />
         </template>
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity.claim" />

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()"