feat: refs #8118 add VnDropdown component and integrate it into Claim and Ticket summaries

src/components/common/VnDropdown.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue';
+import VnSelect from './VnSelect.vue';
+
+const stateBtnDropdownRef = ref();
+
+const emit = defineEmits(['changeState']);
+
+const $props = defineProps({
+    disable: {
+        type: Boolean,
+        default: null,
+    },
+    moduleName: {
+        type: String,
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: null,
+    },
+});
+
+async function changeState(value) {
+    stateBtnDropdownRef.value?.hide();
+    emit('changeState', value);
+}
+</script>
+
+<template>
+    <QBtnDropdown
+        ref="stateBtnDropdownRef"
+        color="black"
+        text-color="white"
+        :label="$t('globals.changeState')"
+        :disable="$props.disable"
+    >
+        <VnSelect
+            :options="$props.options"
+            hide-selected
+            option-value="code"
+            hide-dropdown-icon
+            focus-on-mount
+            @update:model-value="changeState"
+        >
+            <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>
+                    </QItemSection>
+                </QItem>
+            </template>
+        </VnSelect>
+    </QBtnDropdown>
+</template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
@@ -20,6 +20,7 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ClaimDescriptorMenu from './ClaimDescriptorMenu.vue';
+import VnDropdown from 'src/components/common/VnDropdown.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -35,7 +36,7 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-const ClaimStates = ref([]);
+const claimStates = ref([]);
 const claimDmsRef = ref();
 const claimDms = ref([]);
 const multimediaDialog = ref();
@@ -172,13 +173,21 @@ function openDialog(dmsId) {
 }
 
 async function changeState(value) {
-    await axios.patch(`Claims/updateClaim/${entityId.value}`, { claimStateFk: value });
+    const newState = claimStates.value.find((state) => state.code == value);
+    await axios.patch(`Claims/updateClaim/${entityId.value}`, {
+        claimStateFk: newState.id,
+    });
     router.go(route.fullPath);
 }
 
 function claimUrl(section) {
     return '#/claim/' + entityId.value + '/' + section;
 }
+
+onMounted(async () => {
+    const { data } = await axios.get('ClaimStates');
+    claimStates.value = data;
+});
 </script>
 
 <template>
@@ -188,7 +197,6 @@ function claimUrl(section) {
         @on-fetch="(data) => setClaimDms(data)"
         ref="claimDmsRef"
     />
-    <FetchData url="ClaimStates" @on-fetch="(data) => (ClaimStates = data)" auto-load />
     <CardSummary
         ref="summary"
         :url="`Claims/${entityId}/getSummary`"
@@ -200,34 +208,11 @@ function claimUrl(section) {
             {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
         </template>
         <template #header-right>
-            <QBtnDropdown
-                side
-                top
-                color="black"
-                text-color="white"
-                :label="t('globals.changeState')"
-            >
-                <QList>
-                    <QVirtualScroll
-                        class="max-container-height"
-                        :items="ClaimStates"
-                        separator
-                        v-slot="{ item, index }"
-                    >
-                        <QItem
-                            :key="index"
-                            dense
-                            clickable
-                            v-close-popup
-                            @click="changeState(item.id)"
-                        >
-                            <QItemSection>
-                                <QItemLabel>{{ item.description }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QVirtualScroll>
-                </QList>
-            </QBtnDropdown>
+            <VnDropdown
+                :moduleName="route.meta.moduleName"
+                :options="claimStates"
+                @change-state="changeState($event)"
+            />
         </template>
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity.claim" />

src/pages/Ticket/Card/TicketSummary.vue

@@ -21,6 +21,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnToSummary from 'src/components/ui/VnToSummary.vue';
 import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
 import TicketProblems from 'src/components/TicketProblems.vue';
+import VnDropdown from 'src/components/common/VnDropdown.vue';
 
 const route = useRoute();
 const { notify } = useNotify();
@@ -40,7 +41,7 @@ const ticket = computed(() => summary.value?.entity);
 const editableStates = ref([]);
 const ticketUrl = ref();
 const grafanaUrl = 'https://grafana.verdnatura.es';
-const stateBtnDropdownRef = ref();
+
 const descriptorData = useArrayData('Ticket');
 
 onMounted(async () => {
@@ -67,7 +68,6 @@ function isEditable() {
 }
 
 async function changeState(value) {
-    stateBtnDropdownRef.value?.hide();
     const formData = {
         ticketFk: entityId.value,
         code: value,
@@ -113,25 +113,13 @@ onMounted(async () => {
             </div>
         </template>
         <template #header-right>
-            <div>
-                <QBtnDropdown
-                    ref="stateBtnDropdownRef"
-                    color="black"
-                    text-color="white"
-                    :label="t('globals.changeState')"
-                    :disable="!isEditable()"
-                >
-                    <VnSelect
-                        :options="editableStates"
-                        hide-selected
-                        option-label="name"
-                        option-value="code"
-                        hide-dropdown-icon
-                        focus-on-mount
-                        @update:model-value="changeState"
-                    />
-                </QBtnDropdown>
-            </div>
+            <VnDropdown
+                :moduleName="route.meta.moduleName"
+                :moduleId="entityId"
+                :options="editableStates"
+                :disable="!isEditable()"
+                @change-state="changeState($event)"
+            />
         </template>
         <template #menu="{ entity }">
             <TicketDescriptorMenu :ticket="entity" />