From 108375bb69e70836bf119c7e4cc98424c7ba0b68 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 18 Jul 2024 12:05:10 +0200
Subject: [PATCH] perf: refs #7356 TicketList state column

---
 src/pages/Ticket/TicketList.vue | 41 ++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 0c32c5b87..c9f38790a 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -20,6 +20,19 @@ const agenciesOptions = ref([]);
 const selectedClient = ref();
 
 const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'stateFk',
+        label: t('ticketList.state'),
+        columnFilter: {
+            name: 'stateFk',
+            component: 'select',
+            attrs: {
+                url: 'States',
+                fields: ['id', 'name'],
+            },
+        },
+    },
     {
         align: 'left',
         name: 'id',
@@ -35,25 +48,7 @@ const columns = computed(() => [
         label: t('ticketList.nickname'),
         isTitle: true,
     },
-    {
-        align: 'left',
-        name: 'state',
-        label: t('ticketList.state'),
-        chip: {
-            condition: () => true,
-            color: (row) => {
-                return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
-            },
-        },
-        columnFilter: {
-            name: 'stateFk',
-            component: 'select',
-            attrs: {
-                url: 'States',
-                fields: ['id', 'name'],
-            },
-        },
-    },
+
     {
         align: 'left',
         name: 'shipped',
@@ -189,6 +184,9 @@ const fetchAddresses = async (formData) => {
         return err.response;
     }
 };
+const getColor = (row) => {
+    return row?.classColor ? `bg-${row.classColor}` : 'bg-orange';
+};
 </script>
 
 <template>
@@ -302,6 +300,11 @@ const fetchAddresses = async (formData) => {
                 </div>
             </VnRow>
         </template>
+        <template #column-stateFk="{ row }">
+            <QChip :class="getColor(row)" dense square>
+                {{ row.state }}
+            </QChip>
+        </template>
     </VnTable>
 </template>