fix: fixed change state function

src/pages/Ticket/Card/TicketSummary.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
@@ -11,13 +11,15 @@ import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescripto
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
+import useNotify from 'src/composables/useNotify.js';
+import { useArrayData } from 'composables/useArrayData';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
-const router = useRouter();
-
+const { notify } = useNotify();
 const { t } = useI18n();
 
 const $props = defineProps({
@@ -36,6 +38,8 @@ const salesLines = ref(null);
 const editableStates = ref([]);
 const ticketUrl = ref();
 const grafanaUrl = 'https://grafana.verdnatura.es';
+const stateBtnDropdownRef = ref();
+const descriptorData = useArrayData('ticketData');
 
 onMounted(async () => {
     ticketUrl.value = (await getUrl('ticket/')) + entityId.value + '/';
@@ -68,15 +72,19 @@ function isEditable() {
 }
 
 async function changeState(value) {
-    if (!ticket.value.id) return;
-
-    const formData = {
-        ticketFk: ticket.value.id,
-        code: value,
-    };
-
-    await axios.post(`Tickets/state`, formData);
-    router.go(route.fullPath);
+    try {
+        stateBtnDropdownRef.value.hide();
+        const formData = {
+            ticketFk: entityId.value,
+            code: value,
+        };
+        await axios.post(`Tickets/state`, formData);
+        notify('globals.dataSaved', 'positive');
+        summaryRef.value?.fetch();
+        descriptorData.fetch({});
+    } catch (err) {
+        console.error('Error changing ticket state', err);
+    }
 }
 </script>
 
@@ -102,33 +110,21 @@ async function changeState(value) {
         </template>
         <template #header-right>
             <QBtnDropdown
-                side
-                top
+                ref="stateBtnDropdownRef"
                 color="black"
                 text-color="white"
                 :label="t('ticket.summary.changeState')"
                 :disable="!isEditable()"
             >
-                <QList>
-                    <QVirtualScroll
-                        style="max-height: 300px"
-                        :items="editableStates"
-                        separator
-                        v-slot="{ item, index }"
-                    >
-                        <QItem
-                            :key="index"
-                            dense
-                            clickable
-                            v-close-popup
-                            @click="changeState(item.code)"
-                        >
-                            <QItemSection>
-                                <QItemLabel>{{ item.name }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QVirtualScroll>
-                </QList>
+                <VnSelect
+                    :options="editableStates"
+                    hide-selected
+                    option-label="name"
+                    option-value="code"
+                    hide-dropdown-icon
+                    focus-on-mount
+                    @update:model-value="changeState"
+                />
             </QBtnDropdown>
         </template>
         <template #body>