From b78ab598b73da20e2f06f93a17d551c6bfb24a06 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Thu, 13 Feb 2025 12:06:53 +0100
Subject: [PATCH 01/14] fix: icons

---
 src/components/VnTable/VnTable.vue            |   2 +-
 src/pages/Item/components/ItemProposal.vue    |  33 +++--
 src/pages/Ticket/Negative/TicketLackList.vue  |   2 +-
 src/pages/Ticket/Negative/TicketLackTable.vue | 127 +++++++-----------
 4 files changed, 73 insertions(+), 91 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 7e0757f6c..693fc6873 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -689,7 +689,7 @@ const checkbox = ref(null);
                         :data-col-field="col?.name"
                     >
                         <div
-                            class="no-padding no-margin peter"
+                            class="no-padding no-margin"
                             style="
                                 overflow: hidden;
                                 text-overflow: ellipsis;
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index d2dbea7b3..f49e5e04c 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -32,7 +32,10 @@ const $props = defineProps({
 const proposalSelected = ref([]);
 const ticketConfig = ref({});
 const proposalTableRef = ref(null);
-
+const isLoading = ref(true);
+const filterTicketConfig = {
+    fields: ['lackAlertPrice'],
+};
 const sale = computed(() => $props.sales[0]);
 const saleFk = computed(() => sale.value.saleFk);
 const filter = computed(() => ({
@@ -77,7 +80,7 @@ const columns = computed(() => [
     },
 
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('proposal.longName'),
         name: 'longName',
@@ -85,7 +88,7 @@ const columns = computed(() => [
         columnClass: 'expand',
     },
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('item.list.color'),
         name: 'tag5',
@@ -93,7 +96,7 @@ const columns = computed(() => [
         columnClass: 'expand',
     },
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('item.list.stems'),
         name: 'tag6',
@@ -101,7 +104,7 @@ const columns = computed(() => [
         columnClass: 'expand',
     },
     {
-        align: 'left',
+        align: 'center',
         sortable: true,
         label: t('item.list.producer'),
         name: 'tag7',
@@ -221,18 +224,20 @@ async function change({ itemFk: substitutionFk }) {
 
 async function handleTicketConfig(data) {
     ticketConfig.value = data[0];
+    isLoading.value = false;
 }
 </script>
 <template>
     <FetchData
         url="TicketConfigs"
-        :filter="{ fields: ['lackAlertPrice'] }"
-        @on-fetch="handleTicketConfig"
+        :filter="filterTicketConfig"
         auto-load
-    />
+        @on-fetch="handleTicketConfig"
+    ></FetchData>
+    <QSpinner v-if="isLoading" color="primary" size="md"></QSpinner>
 
     <VnTable
-        v-if="ticketConfig"
+        v-else
         auto-load
         data-cy="proposalTable"
         ref="proposalTableRef"
@@ -242,7 +247,7 @@ async function handleTicketConfig(data) {
         :columns="columns"
         class="full-width q-mt-md"
         row-key="id"
-        :row-click="change"
+        redirect="false"
         :is-editable="false"
         :right-search="false"
         :without-header="true"
@@ -260,10 +265,10 @@ async function handleTicketConfig(data) {
                     <QTooltip> {{ statusConditionalValue(row) }}% </QTooltip>
                 </div>
                 <div style="flex: 2 0 100%; align-content: center">
-                    <div>
-                        <span class="link">{{ row.longName }}</span>
-                        <ItemDescriptorProxy :id="row.id" />
-                    </div>
+                    <span class="link" @click.stop>
+                        {{ row.longName }}
+                        <ItemDescriptorProxy :id="row.itemFk" />
+                    </span>
                 </div>
             </QTd>
         </template>
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index d1e8b823a..bb75f957d 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -65,7 +65,7 @@ const columns = computed(() => [
         columnFilter: {
             component: 'input',
             type: 'number',
-            columnClass: 'shrink',
+            inWhere: false,
         },
     },
     {
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 176e8f7ad..1fca65b88 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -22,14 +22,6 @@ const $props = defineProps({
     },
 });
 
-watch(
-    () => $props.filter,
-    (v) => {
-        filterLack.value.where = v;
-        tableRef.value.reload(filterLack);
-    },
-);
-
 const filterLack = ref({
     include: [
         {
@@ -238,65 +230,59 @@ function onBuysFetched(data) {
         </template>
 
         <template #column-status="{ row }">
-            <QTd style="min-width: 150px">
-                <div class="icon-container">
-                    <QIcon
-                        v-if="row.isBasket"
-                        name="vn:basket"
-                        color="primary"
-                        class="cursor-pointer"
-                        size="xs"
-                    >
-                        <QTooltip>{{ t('negative.detail.isBasket') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.hasToIgnore"
-                        name="star"
-                        color="primary"
-                        class="cursor-pointer fill-icon"
-                        size="xs"
-                    >
-                        <QTooltip>{{ t('negative.detail.hasToIgnore') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.hasObservation"
-                        name="change_circle"
-                        color="primary"
-                        class="cursor-pointer"
-                        size="xs"
-                    >
-                        <QTooltip>{{
-                            t('negative.detail.hasObservation')
-                        }}</QTooltip> </QIcon
-                    ><QIcon
-                        v-if="row.isRookie"
-                        name="vn:Person"
-                        size="xs"
-                        color="primary"
-                        class="cursor-pointer"
-                    >
-                        <QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.peticionCompra"
-                        name="vn:buyrequest"
-                        size="xs"
-                        color="primary"
-                        class="cursor-pointer"
-                    >
-                        <QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
-                    </QIcon>
-                    <QIcon
-                        v-if="row.turno"
-                        name="vn:calendar"
-                        size="xs"
-                        color="primary"
-                        class="cursor-pointer"
-                    >
-                        <QTooltip>{{ t('negative.detail.turno') }}</QTooltip>
-                    </QIcon>
-                </div></QTd
+            <QIcon
+                v-if="row.isBasket"
+                name="vn:basket"
+                color="primary"
+                class="cursor-pointer"
+                size="xs"
             >
+                <QTooltip>{{ t('negative.detail.isBasket') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.hasToIgnore"
+                name="star"
+                color="primary"
+                class="cursor-pointer fill-icon"
+                size="xs"
+            >
+                <QTooltip>{{ t('negative.detail.hasToIgnore') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.hasObservation"
+                name="change_circle"
+                color="primary"
+                class="cursor-pointer"
+                size="xs"
+            >
+                <QTooltip>{{ t('negative.detail.hasObservation') }}</QTooltip> </QIcon
+            ><QIcon
+                v-if="row.isRookie"
+                name="vn:Person"
+                size="xs"
+                color="primary"
+                class="cursor-pointer"
+            >
+                <QTooltip>{{ t('negative.detail.isRookie') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.peticionCompra"
+                name="vn:buyrequest"
+                size="xs"
+                color="primary"
+                class="cursor-pointer"
+            >
+                <QTooltip>{{ t('negative.detail.peticionCompra') }}</QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.turno"
+                name="vn:calendar"
+                size="xs"
+                color="primary"
+                class="cursor-pointer"
+            >
+                <QTooltip>{{ t('negative.detail.turno') }}</QTooltip>
+            </QIcon>
         </template>
         <template #column-nickname="{ row }">
             <span class="link" @click.stop>
@@ -335,15 +321,6 @@ function onBuysFetched(data) {
     </VnTable>
 </template>
 <style lang="scss" scoped>
-.icon-container {
-    display: grid;
-    grid-template-columns: repeat(3, 0.2fr);
-    row-gap: 5px; /* Ajusta el espacio entre los iconos según sea necesario */
-}
-.icon-container > * {
-    width: 100%;
-    height: auto;
-}
 .list-enter-active,
 .list-leave-active {
     transition: all 1s ease;
-- 
2.40.1


From 6877a629c7d22149cec50a880f34d4f5c0232810 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 16 Feb 2025 03:02:34 +0100
Subject: [PATCH 02/14] fix: bugs

---
 src/components/ui/CardDescriptor.vue          |   7 +-
 .../Customer/Card/CustomerDescriptorProxy.vue |   2 +-
 src/pages/Item/Card/ItemDescriptorProxy.vue   |   2 +-
 src/pages/Item/components/ItemProposal.vue    |   1 -
 .../Item/components/ItemProposalProxy.vue     |   9 +-
 src/pages/Ticket/Card/TicketDescriptor.vue    |   1 +
 .../Ticket/Card/TicketDescriptorProxy.vue     |   2 +-
 src/pages/Ticket/Negative/TicketLackList.vue  |   1 -
 src/pages/Ticket/Negative/TicketLackTable.vue |   7 +-
 src/pages/Zone/Card/ZoneDescriptorProxy.vue   |   9 +-
 .../ticket/negative/TicketLackDetail.spec.js  | 255 ++++++++++--------
 .../ticket/negative/TicketLackList.spec.js    |  26 +-
 12 files changed, 165 insertions(+), 157 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index e6e7e6fa0..2f4632b7d 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -10,6 +10,10 @@ import { useClipboard } from 'src/composables/useClipboard';
 import VnMoreOptions from './VnMoreOptions.vue';
 
 const $props = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    },
     url: {
         type: String,
         default: '',
@@ -67,7 +71,8 @@ onBeforeMount(async () => {
     });
 
     // It enables to load data only once if the module is the same as the dataKey
-    if (!isSameDataKey.value || !route.params.id) await getData();
+    if (!isSameDataKey.value || !route.params.id || $props.id !== route.params.id)
+        await getData();
     watch(
         () => [$props.url, $props.filter],
         async () => {
diff --git a/src/pages/Customer/Card/CustomerDescriptorProxy.vue b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
index 9f67d02ec..d9448a322 100644
--- a/src/pages/Customer/Card/CustomerDescriptorProxy.vue
+++ b/src/pages/Customer/Card/CustomerDescriptorProxy.vue
@@ -11,7 +11,7 @@ const $props = defineProps({
 </script>
 
 <template>
-    <QPopupProxy>
+    <QPopupProxy data-cy="customerDescriptorProxy">
         <CustomerDescriptor v-if="$props.id" :id="$props.id" :summary="CustomerSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Item/Card/ItemDescriptorProxy.vue b/src/pages/Item/Card/ItemDescriptorProxy.vue
index f686e8221..19ac15919 100644
--- a/src/pages/Item/Card/ItemDescriptorProxy.vue
+++ b/src/pages/Item/Card/ItemDescriptorProxy.vue
@@ -22,7 +22,7 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <QPopupProxy style="max-width: 10px">
+    <QPopupProxy style="max-width: 10px" data-cy="itemDescriptorProxy">
         <ItemDescriptor
             v-if="$props.id"
             :id="$props.id"
diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index f49e5e04c..57d4a1d21 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -213,7 +213,6 @@ async function change({ itemFk: substitutionFk }) {
         notifyResults(results, 'saleFk');
         emit('itemReplaced', {
             type: 'refresh',
-            quantity: quantity.value,
             itemProposal: proposalSelected.value[0],
         });
         proposalSelected.value = [];
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 7da0ce398..2027ad449 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -20,11 +20,7 @@ const $props = defineProps({
     },
 });
 const { dialogRef } = useDialogPluginComponent();
-const emit = defineEmits([
-    'onDialogClosed',
-    'itemReplaced',
-    ...useDialogPluginComponent.emits,
-]);
+const emit = defineEmits(['onDialogClosed', ...useDialogPluginComponent.emits]);
 defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 </script>
 <template>
@@ -39,8 +35,7 @@ defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.h
                 <ItemProposal
                     v-bind="$props"
                     @item-replaced="
-                        (data) => {
-                            emit('itemReplaced', data);
+                        () => {
                             dialogRef.hide();
                         }
                     "
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index c5f3233b1..b8be964da 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -44,6 +44,7 @@ function ticketFilter(ticket) {
         @on-fetch="(data) => ([problems] = data)"
     />
     <CardDescriptor
+        :id="entityId"
         :url="`Tickets/${entityId}`"
         :filter="filter"
         data-key="Ticket"
diff --git a/src/pages/Ticket/Card/TicketDescriptorProxy.vue b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
index 583ba35e7..3ec0732da 100644
--- a/src/pages/Ticket/Card/TicketDescriptorProxy.vue
+++ b/src/pages/Ticket/Card/TicketDescriptorProxy.vue
@@ -10,7 +10,7 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <QPopupProxy>
+    <QPopupProxy data-cy="ticketDescriptorProxy">
         <TicketDescriptor v-if="$props.id" :id="$props.id" :summary="TicketSummary" />
     </QPopupProxy>
 </template>
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index bb75f957d..cd7c666c3 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -155,7 +155,6 @@ const setUserParams = (params) => {
             <TicketLackFilter data-key="NegativeList" @set-user-params="setUserParams" />
         </template>
     </RightMenu>
-    {{ filterRef }}
     <VnTable
         ref="tableRef"
         data-key="NegativeList"
diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 1fca65b88..0049dd98a 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -82,6 +82,7 @@ const columns = computed(() => [
     },
     {
         name: 'alertLevelCode',
+        field: 'alertLevelCode',
         label: t('negative.detail.state'),
         columnFilter: {
             name: 'alertLevelCode',
@@ -291,9 +292,9 @@ function onBuysFetched(data) {
             </span>
         </template>
         <template #column-ticketFk="{ row }">
-            <span class="q-pa-sm link">
-                {{ row.id }}
-                <TicketDescriptorProxy :id="row.id" />
+            <span class="link" @click.stop>
+                {{ row.ticketFk }}
+                <TicketDescriptorProxy :id="row.ticketFk" />
             </span>
         </template>
         <template #column-alertLevelCode="props">
diff --git a/src/pages/Zone/Card/ZoneDescriptorProxy.vue b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
index 27102ac07..31ecce385 100644
--- a/src/pages/Zone/Card/ZoneDescriptorProxy.vue
+++ b/src/pages/Zone/Card/ZoneDescriptorProxy.vue
@@ -11,7 +11,12 @@ const $props = defineProps({
 </script>
 
 <template>
-    <QPopupProxy>
-        <ZoneDescriptor v-if="$props.id" :id="$props.id" :summary="ZoneSummary" />
+    <QPopupProxy data-cy="zoneDescriptorProxy">
+        <ZoneDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="ZoneSummary"
+            data-cy="zoneDescriptorProxy"
+        />
     </QPopupProxy>
 </template>
diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index 9ea1cff63..2a20e202a 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -1,49 +1,38 @@
 /// <reference types="cypress" />
 describe('Ticket Lack detail', () => {
     beforeEach(() => {
+        cy.viewport(1280, 720);
+
         cy.login('developer');
-        cy.intercept('GET', /\/api\/Tickets\/itemLack\/5.*$/, {
-            statusCode: 200,
-            body: [
-                {
-                    saleFk: 33,
-                    code: 'OK',
-                    ticketFk: 142,
-                    nickname: 'Malibu Point',
-                    shipped: '2000-12-31T23:00:00.000Z',
-                    hour: 0,
-                    quantity: 50,
-                    agName: 'Super-Man delivery',
-                    alertLevel: 0,
-                    stateName: 'OK',
-                    stateId: 3,
-                    itemFk: 5,
-                    price: 1.79,
-                    alertLevelCode: 'FREE',
-                    zoneFk: 9,
-                    zoneName: 'Zone superMan',
-                    theoreticalhour: '2011-11-01T22:59:00.000Z',
-                    isRookie: 1,
-                    turno: 1,
-                    peticionCompra: 1,
-                    hasObservation: 1,
-                    hasToIgnore: 1,
-                    isBasket: 1,
-                    minTimed: 0,
-                    customerId: 1104,
-                    customerName: 'Tony Stark',
-                    observationTypeCode: 'administrative',
-                },
-            ],
-        }).as('getItemLack');
+        cy.intercept('GET', /\/api\/Tickets\/itemLack\/88.*$/).as('getItemLack');
+        cy.visit('/#/ticket/negative/88');
 
-        cy.visit('/#/ticket/negative/5');
-        cy.wait('@getItemLack');
+        cy.wait('@getItemLack').then((interception) => {
+            const { query } = interception.request;
+            const filter = JSON.parse(query.filter);
+            expect(filter).to.have.property('where');
+            expect(filter.where).to.have.property('alertLevelCode', 'FREE');
+        });
+        cy.domContentLoad();
+        cy.waitForElement('.q-table');
     });
-    describe('Table actions', () => {
-        it.skip('should display only one row in the lack list', () => {
-            cy.location('href').should('contain', '#/ticket/negative/5');
-
+    describe.skip('Table detail', () => {
+        it('should open descriptors', () => {
+            cy.get('.q-table').should('be.visible');
+            cy.get('[data-col-field="nickname"]').click();
+            cy.dataCy('customerDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1 content_copy');
+            cy.get('[data-col-field="zoneName"]').click();
+            cy.dataCy('zoneDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1 content_copy');
+            cy.get('[data-col-field="ticketFk"]').click();
+            cy.dataCy('ticketDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should(
+                'have.text',
+                ' #1000000 content_copy',
+            );
+        });
+        it.only('should display only one row in the lack list', () => {
             cy.get('[data-cy="changeItem"]').should('be.disabled');
             cy.get('[data-cy="changeState"]').should('be.disabled');
             cy.get('[data-cy="changeQuantity"]').should('be.disabled');
@@ -57,91 +46,123 @@ describe('Ticket Lack detail', () => {
             cy.get('[data-cy="transferLines"]').should('be.enabled');
         });
     });
-    describe('Item proposal', () => {
+
+    describe.only('Item proposal', () => {
         beforeEach(() => {
             cy.get('tr.cursor-pointer > :nth-child(1)').click();
 
-            cy.intercept('GET', /\/api\/Items\/getSimilar\?.*$/, {
-                statusCode: 200,
-                body: [
-                    {
-                        id: 1,
-                        longName: 'Ranged weapon longbow 50cm',
-                        subName: 'Stark Industries',
-                        tag5: 'Color',
-                        value5: 'Brown',
-                        match5: 0,
-                        match6: 0,
-                        match7: 0,
-                        match8: 1,
-                        tag6: 'Categoria',
-                        value6: '+1 precission',
-                        tag7: 'Tallos',
-                        value7: '1',
-                        tag8: null,
-                        value8: null,
-                        available: 20,
-                        calc_id: 6,
-                        counter: 0,
-                        minQuantity: 1,
-                        visible: null,
-                        price2: 1,
-                    },
-                    {
-                        id: 2,
-                        longName: 'Ranged weapon longbow 100cm',
-                        subName: 'Stark Industries',
-                        tag5: 'Color',
-                        value5: 'Brown',
-                        match5: 0,
-                        match6: 1,
-                        match7: 0,
-                        match8: 1,
-                        tag6: 'Categoria',
-                        value6: '+1 precission',
-                        tag7: 'Tallos',
-                        value7: '1',
-                        tag8: null,
-                        value8: null,
-                        available: 50,
-                        calc_id: 6,
-                        counter: 1,
-                        minQuantity: 5,
-                        visible: null,
-                        price2: 10,
-                    },
-                    {
-                        id: 3,
-                        longName: 'Ranged weapon longbow 200cm',
-                        subName: 'Stark Industries',
-                        tag5: 'Color',
-                        value5: 'Brown',
-                        match5: 1,
-                        match6: 1,
-                        match7: 1,
-                        match8: 1,
-                        tag6: 'Categoria',
-                        value6: '+1 precission',
-                        tag7: 'Tallos',
-                        value7: '1',
-                        tag8: null,
-                        value8: null,
-                        available: 185,
-                        calc_id: 6,
-                        counter: 10,
-                        minQuantity: 10,
-                        visible: null,
-                        price2: 100,
-                    },
-                ],
-            }).as('getItemGetSimilar');
+            // cy.intercept('GET', /\/api\/Items\/getSimilar\?.*$/, {
+            //     statusCode: 200,
+            //     body: [
+            //         {
+            //             id: 1,
+            //             longName: 'Ranged weapon longbow 50cm',
+            //             subName: 'Stark Industries',
+            //             tag5: 'Color',
+            //             value5: 'Brown',
+            //             match5: 0,
+            //             match6: 0,
+            //             match7: 0,
+            //             match8: 1,
+            //             tag6: 'Categoria',
+            //             value6: '+1 precission',
+            //             tag7: 'Tallos',
+            //             value7: '1',
+            //             tag8: null,
+            //             value8: null,
+            //             available: 20,
+            //             calc_id: 6,
+            //             counter: 0,
+            //             minQuantity: 1,
+            //             visible: null,
+            //             price2: 1,
+            //         },
+            //         {
+            //             id: 2,
+            //             longName: 'Ranged weapon longbow 100cm',
+            //             subName: 'Stark Industries',
+            //             tag5: 'Color',
+            //             value5: 'Brown',
+            //             match5: 0,
+            //             match6: 1,
+            //             match7: 0,
+            //             match8: 1,
+            //             tag6: 'Categoria',
+            //             value6: '+1 precission',
+            //             tag7: 'Tallos',
+            //             value7: '1',
+            //             tag8: null,
+            //             value8: null,
+            //             available: 50,
+            //             calc_id: 6,
+            //             counter: 1,
+            //             minQuantity: 5,
+            //             visible: null,
+            //             price2: 10,
+            //         },
+            //         {
+            //             id: 3,
+            //             longName: 'Ranged weapon longbow 200cm',
+            //             subName: 'Stark Industries',
+            //             tag5: 'Color',
+            //             value5: 'Brown',
+            //             match5: 1,
+            //             match6: 1,
+            //             match7: 1,
+            //             match8: 1,
+            //             tag6: 'Categoria',
+            //             value6: '+1 precission',
+            //             tag7: 'Tallos',
+            //             value7: '1',
+            //             tag8: null,
+            //             value8: null,
+            //             available: 185,
+            //             calc_id: 6,
+            //             counter: 10,
+            //             minQuantity: 10,
+            //             visible: null,
+            //             price2: 100,
+            //         },
+            //     ],
+            // }).as('getItemGetSimilar');
             cy.get('[data-cy="itemProposal"]').click();
-            cy.wait('@getItemGetSimilar');
+            // cy.wait('@getItemGetSimilar');
         });
         describe('Replace item if', () => {
-            it.only('Quantity is less than available', () => {
+            it('Quantity is less than available', () => {
                 cy.get(':nth-child(1) > .text-right  > .q-btn').click();
             });
+
+            /* ==== Test Created with Cypress Studio ==== */
+            it.only('item proposal cells', function () {
+                cy.get(
+                    ':nth-child(1) > .q-table--col-auto-width > .q-btn > .q-btn__content > .q-icon',
+                ).should('not.be.visible');
+
+                cy.get('[data-col-field="longName"] .link').first().click();
+                cy.dataCy('itemDescriptorProxy').should('be.visible');
+
+                cy.get(
+                    ':nth-child(2) > [data-col-field="longName"] > .no-padding > .q-td > .middle',
+                ).should('have.class', 'proposal-primary');
+                cy.get(
+                    ':nth-child(2) > [data-col-field="tag5"] > .no-padding > .match',
+                ).should('have.class', 'match');
+                cy.get(
+                    ':nth-child(2) > [data-col-field="tag6"] > .no-padding > .match',
+                ).should('have.class', 'match');
+                cy.get(':nth-child(2) > [data-col-field="tag7"]').click();
+                cy.get(
+                    ':nth-child(2) > .q-table--col-auto-width > .q-btn > .q-btn__content > .q-icon',
+                ).should('be.visible');
+                cy.get(':nth-child(2) > .q-table--col-auto-width > .q-btn')
+                    .should('be.enabled')
+                    .click();
+                // cy.get('.q-notification__message').should(
+                //     'have.text',
+                //     'Operación (1) 43 completada con éxito.',
+                // );
+            });
         });
     });
 });
diff --git a/test/cypress/integration/ticket/negative/TicketLackList.spec.js b/test/cypress/integration/ticket/negative/TicketLackList.spec.js
index 01ab4f621..a53668c12 100644
--- a/test/cypress/integration/ticket/negative/TicketLackList.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackList.spec.js
@@ -1,34 +1,16 @@
 /// <reference types="cypress" />
 describe('Ticket Lack list', () => {
     beforeEach(() => {
-        cy.login('developer');
-        cy.intercept('GET', /Tickets\/itemLack\?.*$/, {
-            statusCode: 200,
-            body: [
-                {
-                    itemFk: 5,
-                    longName: 'Ranged weapon pistol 9mm',
-                    warehouseFk: 1,
-                    producer: null,
-                    size: 15,
-                    category: null,
-                    warehouse: 'Warehouse One',
-                    lack: -50,
-                    inkFk: 'SLV',
-                    timed: '2025-01-25T22:59:00.000Z',
-                    minTimed: '23:59',
-                    originFk: 'Holand',
-                },
-            ],
-        }).as('getLack');
+        cy.viewport(1280, 720);
 
+        cy.login('developer');
         cy.visit('/#/ticket/negative');
     });
 
     describe('Table actions', () => {
         it('should display only one row in the lack list', () => {
-            cy.wait('@getLack', { timeout: 10000 });
-
+            cy.get('[data-col-field="longName"]').first().click();
+            cy.dataCy('itemDescriptorProxy').should('be.visible');
             cy.get('.q-virtual-scroll__content > :nth-child(1) > .sticky').click();
             cy.location('href').should('contain', '#/ticket/negative/5');
         });
-- 
2.40.1


From 7d5522de95317aad434fe2fec97ea19c3bcf3c2b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 16 Feb 2025 03:03:09 +0100
Subject: [PATCH 03/14] test: remove watch property

---
 cypress.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress.config.js b/cypress.config.js
index a9e27fcfd..f43bd0dec 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -15,7 +15,6 @@ export default defineConfig({
         video: false,
         specPattern: 'test/cypress/integration/**/*.spec.js',
         experimentalRunAllSpecs: false,
-        watchForFileChanges: false,
         reporter: 'cypress-mochawesome-reporter',
         reporterOptions: {
             charts: true,
-- 
2.40.1


From cec625b26983d16174d77dd78dd6078dccfb5c86 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 17 Feb 2025 11:32:34 +0100
Subject: [PATCH 04/14] fix: filters

---
 .../Ticket/Negative/TicketLackFilter.vue      | 21 +------------------
 src/pages/Ticket/Negative/TicketLackList.vue  | 15 ++++++++++---
 2 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackFilter.vue b/src/pages/Ticket/Negative/TicketLackFilter.vue
index 3762f453d..b8c5bcaa0 100644
--- a/src/pages/Ticket/Negative/TicketLackFilter.vue
+++ b/src/pages/Ticket/Negative/TicketLackFilter.vue
@@ -94,7 +94,7 @@ const setUserParams = (params) => {
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            v-model="params.id"
+                            v-model="params.itemFk"
                             :label="t('negative.id')"
                             dense
                             is-outlined
@@ -102,25 +102,6 @@ const setUserParams = (params) => {
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.producer"
-                            :label="t('negative.producer')"
-                            dense
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.origen"
-                            :label="t('negative.origen')"
-                            dense
-                            is-outlined
-                        />
-                    </QItemSection> </QItem
-                ><QItem>
                     <QItemSection v-if="categoriesOptions">
                         <VnSelect
                             :label="t('negative.categoryFk')"
diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index cd7c666c3..6bc73047c 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -70,10 +70,14 @@ const columns = computed(() => [
     },
     {
         name: 'longName',
-        align: 'center',
+        align: 'left',
         label: t('negative.longName'),
         field: ({ longName }) => longName,
-
+        columnFilter: {
+            component: 'input',
+            inWhere: false,
+            useLike: true,
+        },
         sortable: true,
         headerStyle: 'width: 350px',
         cardVisible: true,
@@ -88,12 +92,17 @@ const columns = computed(() => [
         columnClass: 'shrink',
     },
     {
-        name: 'inkFk',
+        name: 'colour',
         align: 'center',
         label: t('negative.colour'),
         field: ({ inkFk }) => inkFk,
         sortable: true,
         cardVisible: true,
+        columnFilter: {
+            component: 'input',
+            columnClass: 'shrink',
+            inWhere: false,
+        },
     },
     {
         name: 'size',
-- 
2.40.1


From 0e68b750833434ac3991bc978d9f324cc104d729 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 17 Feb 2025 11:36:43 +0100
Subject: [PATCH 05/14] style: change align some columns

---
 src/pages/Ticket/Negative/TicketLackTable.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 0049dd98a..80c8b47cb 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -101,14 +101,14 @@ const columns = computed(() => [
         name: 'zoneName',
         label: t('negative.detail.zoneName'),
         field: 'zoneName',
-        align: 'center',
+        align: 'left',
         sortable: true,
     },
     {
         name: 'nickname',
         label: t('negative.detail.nickname'),
         field: 'nickname',
-        align: 'center',
+        align: 'left',
         sortable: true,
     },
     {
-- 
2.40.1


From 5519fcd0661919981813d63e5b68a5cdd2bbf56d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 17 Feb 2025 13:36:26 +0100
Subject: [PATCH 06/14] fix: replace colour by inkFk

---
 src/pages/Ticket/Negative/TicketLackList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Negative/TicketLackList.vue b/src/pages/Ticket/Negative/TicketLackList.vue
index 6bc73047c..e7a037f6e 100644
--- a/src/pages/Ticket/Negative/TicketLackList.vue
+++ b/src/pages/Ticket/Negative/TicketLackList.vue
@@ -92,7 +92,7 @@ const columns = computed(() => [
         columnClass: 'shrink',
     },
     {
-        name: 'colour',
+        name: 'inkFk',
         align: 'center',
         label: t('negative.colour'),
         field: ({ inkFk }) => inkFk,
-- 
2.40.1


From 209814e477825b6580b3ab205e1912c01a3439d6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Feb 2025 12:12:37 +0100
Subject: [PATCH 07/14] fix: trycatch

---
 src/pages/Ticket/Negative/TicketLackTable.vue | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/pages/Ticket/Negative/TicketLackTable.vue b/src/pages/Ticket/Negative/TicketLackTable.vue
index 80c8b47cb..bf20a8c86 100644
--- a/src/pages/Ticket/Negative/TicketLackTable.vue
+++ b/src/pages/Ticket/Negative/TicketLackTable.vue
@@ -132,27 +132,22 @@ const getInputEvents = ({ col, ...rows }) => ({
     'keyup.enter': () => saveChange(col.name, rows),
 });
 const saveChange = async (field, { row }) => {
-    try {
-        switch (field) {
-            case 'alertLevelCode':
-                await axios.post(`Tickets/state`, {
-                    ticketFk: row.ticketFk,
-                    code: row[field],
-                });
-                break;
+    switch (field) {
+        case 'alertLevelCode':
+            await axios.post(`Tickets/state`, {
+                ticketFk: row.ticketFk,
+                code: row[field],
+            });
+            break;
 
-            case 'quantity':
-                await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
-                    quantity: +row.quantity,
-                });
-                break;
-        }
-        notify('globals.dataSaved', 'positive');
-        fetchItemLack.value.fetch();
-    } catch (err) {
-        console.error('Error saving changes', err);
-        f;
+        case 'quantity':
+            await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
+                quantity: +row.quantity,
+            });
+            break;
     }
+    notify('globals.dataSaved', 'positive');
+    fetchItemLack.value.fetch();
 };
 
 function onBuysFetched(data) {
-- 
2.40.1


From cf9b08ba9b4109ce025b0b4f3d2348a8333a3ac9 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Feb 2025 11:34:03 +0100
Subject: [PATCH 08/14] fix: style

---
 src/components/VnTable/VnTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 0701e0149..643385cc0 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -822,11 +822,11 @@ function cardClick(_, row) {
                                             col, index
                                         ) of splittedColumns.cardVisible"
                                         :key="col.name"
+                                        class="fields"
                                     >
                                         <VnLv :label="col.label + ':'">
                                             <template #value>
                                                 <span
-                                                    class="q-pl-xs"
                                                     @click="stopEventPropagation($event)"
                                                 >
                                                     <slot
-- 
2.40.1


From 1c3718a3dd128351b39301275799e65c35ea7415 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Feb 2025 12:39:10 +0100
Subject: [PATCH 09/14] fix: vnLocation error

---
 src/pages/Customer/components/CustomerAddressEdit.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Customer/components/CustomerAddressEdit.vue b/src/pages/Customer/components/CustomerAddressEdit.vue
index af1b9c160..f852c160a 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -233,7 +233,7 @@ function handleLocation(data, location) {
                             postcode: data.postalCode,
                             city: data.city,
                             province: data.province,
-                            country: data.province.country,
+                            country: data.province?.country,
                         }"
                         @update:model-value="(location) => handleLocation(data, location)"
                     ></VnLocation>
-- 
2.40.1


From f1a57ceba1fe150b3ac730a5e21b1a8e0657ad0a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 19 Feb 2025 14:09:00 +0100
Subject: [PATCH 10/14] feat: refs #6321 init

---
 src/composables/showResultsTable.js           |  30 ++
 .../Negative/components/ChangeItemDialog.vue  |  29 +-
 .../Negative/components/HandleSplitDialog.vue | 281 ++++++++++++++++++
 .../Negative/components/HandleSplited.vue     | 281 ++++++++++++++++++
 4 files changed, 612 insertions(+), 9 deletions(-)
 create mode 100644 src/composables/showResultsTable.js
 create mode 100644 src/pages/Ticket/Negative/components/HandleSplitDialog.vue
 create mode 100644 src/pages/Ticket/Negative/components/HandleSplited.vue

diff --git a/src/composables/showResultsTable.js b/src/composables/showResultsTable.js
new file mode 100644
index 000000000..c7e43ef7c
--- /dev/null
+++ b/src/composables/showResultsTable.js
@@ -0,0 +1,30 @@
+import { useI18n } from 'vue-i18n';
+
+import { useQuasar } from 'quasar';
+
+export function showResultsAsTable(dialog, results, key) {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    function openTable() {
+        quasar.notify({
+            message: t('negative.detail.modal.changeItem.success'),
+            color: 'positive',
+            actions: [
+                {
+                    label: t('globals.ok'),
+                    color: 'white',
+                    handler: () => {
+                        quasar.dialog({
+                            component: dialog,
+                            componentProps: {
+                                results,
+                                key,
+                            },
+                        });
+                    },
+                },
+            ],
+        });
+    }
+    return { openTable };
+}
diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index e419b85c0..b0a670080 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -1,9 +1,18 @@
 <script setup>
 import { ref } from 'vue';
 import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
 import VnSelect from 'src/components/common/VnSelect.vue';
 import notifyResults from 'src/utils/notifyResults';
+import { showResultsAsTable } from 'src/composables/showResultsTable';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import HandleSplitDialog from './HandleSplitDialog.vue';
+const { openTable } = showResultsAsTable();
 const emit = defineEmits(['update-item']);
+const quasar = useQuasar();
+const { t } = useI18n();
 
 const showChangeItemDialog = ref(false);
 const newItem = ref(null);
@@ -17,15 +26,17 @@ const $props = defineProps({
 const updateItem = async () => {
     try {
         showChangeItemDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
-            axios.post(`Sales/replaceItem`, {
-                saleFk,
-                substitutionFk: newItem.value,
-                quantity,
-            }),
-        );
-        const result = await Promise.allSettled(rowsToUpdate);
-        notifyResults(result, 'saleFk');
+        // const rowsToUpdate = $props.selectedRows.map(({ saleFk, quantity }) =>
+        //     axios.post(`Sales/replaceItem`, {
+        //         saleFk,
+        //         substitutionFk: newItem.value,
+        //         quantity,
+        //     }),
+        // );
+        // const result = await Promise.allSettled(rowsToUpdate);
+
+        openTable(HandleSplitDialog, [], 'saleFk');
+        // notifyResults(result, 'saleFk');
         emit('update-item', newItem.value);
     } catch (err) {
         console.error('Error updating item:', err);
diff --git a/src/pages/Ticket/Negative/components/HandleSplitDialog.vue b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
new file mode 100644
index 000000000..b2bf94f26
--- /dev/null
+++ b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const { t } = useI18n();
+const showSplitDialog = ref(false);
+const newState = ref(null);
+const resultSplit = ref([]);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+const $props = defineProps({
+    tickets: {
+        type: Array,
+        default: () => [],
+    },
+});
+const tickets = ref($props.tickets ?? []);
+const rowBtnDisable = () =>
+    !(
+        formData.value?.agencyModeFk &&
+        formData.value?.date &&
+        rowsSelected.value.length > 0
+    );
+const rowsSelected = ref([]);
+
+const columns = computed(() => [
+    {
+        name: 'status',
+        label: t('negative.split.status'),
+        field: ({ status }) => status,
+        sortable: true,
+    },
+    {
+        name: 'ticket',
+        label: t('negative.split.ticket'),
+        field: ({ ticket }) => ticket,
+        sortable: true,
+    },
+    {
+        name: 'newTicket',
+        label: t('negative.split.newTicket'),
+        field: ({ newTicket }) => newTicket,
+        sortable: true,
+    },
+    {
+        name: 'message',
+        label: t('negative.split.message'),
+        field: ({ message }) => message,
+        sortable: true,
+    },
+    // {
+    //     name: 'actions',
+    //     align: 'center',
+    //     label: t('negative.split.actions'),
+    //     // style: 'padding-left: 100px',
+    //     // headerStyle: 'padding-left: 100px',
+    // },
+]);
+
+const formData = ref({ agencies: [] });
+const handleDateChanged = async () => {
+    const { data: agencyData } = await axios.get('Agencies/getLanded', {
+        params: {
+            addressFk: 123,
+            agencyModeFk: 8,
+            warehouseFk: 1,
+            shipped: '2001-02-08T23:00:00.000Z',
+        },
+    });
+    if (!agencyData) formData.value.agencies = [];
+    const { zoneFk } = agencyData;
+    const { data: zoneData } = await axios.get('Zones/Includingexpired', {
+        params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
+    });
+    formData.value.agencies = zoneData;
+    if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
+    // formData.value.dateChanged = false;
+};
+const ticketsSelected = ref([]);
+onMounted(() => {
+    ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
+});
+
+const updateState = async () => {
+    try {
+        showSplitDialog.value = true;
+        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+
+function getIcon(value) {
+    const icons = {
+        split: {
+            name: 'check_circle',
+            color: 'secondary',
+        },
+        noSplit: {
+            name: 'warning',
+            color: 'primary',
+        },
+        error: {
+            name: 'close',
+            color: 'negative',
+        },
+    };
+    return icons[value];
+}
+
+const updateNewTickets = async () => {
+    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
+    console.log('updateNewTickets');
+    rowsSelected.value = [];
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    v-if="icon"
+                />
+                <span class="text-h6 text-grey">{{
+                    t('negative.detail.modal.handleSplited.title')
+                }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center justify-center column items-stretch">
+                <Qform>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnInputDate
+                            :label="t('Max date')"
+                            v-model="formData.date"
+                            @update:model-value="(evt) => handleDateChanged()" />
+
+                        <VnSelect
+                            :disable="formData.agencies.length < 1"
+                            :label="t('Agency')"
+                            v-model="formData.agencyModeFk"
+                            :options="formData.agencies"
+                            option-label="name"
+                            option-value="id" />
+
+                        <QBtn
+                            icon="save"
+                            :disable="rowBtnDisable()"
+                            color="primary"
+                            flat
+                            rounded
+                            @click="updateNewTickets"
+                    /></VnRow>
+                </Qform>
+                <VnPaginate data-key="splitLack" :data="tickets">
+                    <template #body="{ rows }">
+                        <QTable
+                            :rows="rows"
+                            :columns="columns"
+                            selection="multiple"
+                            row-key="newTicket"
+                            v-model:selected="rowsSelected"
+                            :no-data-label="t('globals.noResults')"
+                            flat
+                            dense
+                            hide-bottom
+                            auto-load
+                            :rows-per-page-options="[0]"
+                            hide-pagination
+                            :pagination="{ rowsPerPage: null }"
+                        >
+                            <template #header="props">
+                                <QTr :props="props">
+                                    <QTh></QTh>
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props">
+                                    <Qtd>
+                                        <QCheckbox v-model="props.selected" />
+                                    </Qtd>
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        <span
+                                            v-if="
+                                                ![
+                                                    'status',
+                                                    'message',
+                                                    'actions',
+                                                ].includes(col.name)
+                                            "
+                                        >
+                                            {{ col.value }}
+                                        </span>
+                                        <span v-if="'status' === col.name">
+                                            <QIcon
+                                                :name="`${getIcon(col.value).name}`"
+                                                size="xs"
+                                                class="cursor-pointer"
+                                                :color="getIcon(col.value).color"
+                                            >
+                                            </QIcon>
+                                        </span>
+                                        <span v-if="'message' === col.name">message</span>
+                                    </QTd></QTr
+                                ></template
+                            >
+                        </QTable></template
+                    >
+                </VnPaginate>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :disable="!newState"
+                    @click="updateState"
+                    unelevated
+                    autofocus
+                /> </QCardActions
+        ></QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.splitRow {
+    border: 1px solid #ec8916;
+    border-width: 1px 0 1px 0;
+}
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>
diff --git a/src/pages/Ticket/Negative/components/HandleSplited.vue b/src/pages/Ticket/Negative/components/HandleSplited.vue
new file mode 100644
index 000000000..b2bf94f26
--- /dev/null
+++ b/src/pages/Ticket/Negative/components/HandleSplited.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { computed, onMounted, ref, toRefs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import { useDialogPluginComponent } from 'quasar';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const { t } = useI18n();
+const showSplitDialog = ref(false);
+const newState = ref(null);
+const resultSplit = ref([]);
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+const $props = defineProps({
+    tickets: {
+        type: Array,
+        default: () => [],
+    },
+});
+const tickets = ref($props.tickets ?? []);
+const rowBtnDisable = () =>
+    !(
+        formData.value?.agencyModeFk &&
+        formData.value?.date &&
+        rowsSelected.value.length > 0
+    );
+const rowsSelected = ref([]);
+
+const columns = computed(() => [
+    {
+        name: 'status',
+        label: t('negative.split.status'),
+        field: ({ status }) => status,
+        sortable: true,
+    },
+    {
+        name: 'ticket',
+        label: t('negative.split.ticket'),
+        field: ({ ticket }) => ticket,
+        sortable: true,
+    },
+    {
+        name: 'newTicket',
+        label: t('negative.split.newTicket'),
+        field: ({ newTicket }) => newTicket,
+        sortable: true,
+    },
+    {
+        name: 'message',
+        label: t('negative.split.message'),
+        field: ({ message }) => message,
+        sortable: true,
+    },
+    // {
+    //     name: 'actions',
+    //     align: 'center',
+    //     label: t('negative.split.actions'),
+    //     // style: 'padding-left: 100px',
+    //     // headerStyle: 'padding-left: 100px',
+    // },
+]);
+
+const formData = ref({ agencies: [] });
+const handleDateChanged = async () => {
+    const { data: agencyData } = await axios.get('Agencies/getLanded', {
+        params: {
+            addressFk: 123,
+            agencyModeFk: 8,
+            warehouseFk: 1,
+            shipped: '2001-02-08T23:00:00.000Z',
+        },
+    });
+    if (!agencyData) formData.value.agencies = [];
+    const { zoneFk } = agencyData;
+    const { data: zoneData } = await axios.get('Zones/Includingexpired', {
+        params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
+    });
+    formData.value.agencies = zoneData;
+    if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
+    // formData.value.dateChanged = false;
+};
+const ticketsSelected = ref([]);
+onMounted(() => {
+    ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
+});
+
+const updateState = async () => {
+    try {
+        showSplitDialog.value = true;
+        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
+            axios.post(`Tickets/state`, {
+                ticketFk,
+                code: newState.value,
+            })
+        );
+        await Promise.all(rowsToUpdate);
+    } catch (err) {
+        return err;
+    } finally {
+        dialogRef.value.hide({ type: 'refresh', refresh: true });
+    }
+};
+
+function getIcon(value) {
+    const icons = {
+        split: {
+            name: 'check_circle',
+            color: 'secondary',
+        },
+        noSplit: {
+            name: 'warning',
+            color: 'primary',
+        },
+        error: {
+            name: 'close',
+            color: 'negative',
+        },
+    };
+    return icons[value];
+}
+
+const updateNewTickets = async () => {
+    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
+    console.log('updateNewTickets');
+    rowsSelected.value = [];
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <QAvatar
+                    :icon="icon"
+                    color="primary"
+                    text-color="white"
+                    size="xl"
+                    v-if="icon"
+                />
+                <span class="text-h6 text-grey">{{
+                    t('negative.detail.modal.handleSplited.title')
+                }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection class="row items-center justify-center column items-stretch">
+                <Qform>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnInputDate
+                            :label="t('Max date')"
+                            v-model="formData.date"
+                            @update:model-value="(evt) => handleDateChanged()" />
+
+                        <VnSelect
+                            :disable="formData.agencies.length < 1"
+                            :label="t('Agency')"
+                            v-model="formData.agencyModeFk"
+                            :options="formData.agencies"
+                            option-label="name"
+                            option-value="id" />
+
+                        <QBtn
+                            icon="save"
+                            :disable="rowBtnDisable()"
+                            color="primary"
+                            flat
+                            rounded
+                            @click="updateNewTickets"
+                    /></VnRow>
+                </Qform>
+                <VnPaginate data-key="splitLack" :data="tickets">
+                    <template #body="{ rows }">
+                        <QTable
+                            :rows="rows"
+                            :columns="columns"
+                            selection="multiple"
+                            row-key="newTicket"
+                            v-model:selected="rowsSelected"
+                            :no-data-label="t('globals.noResults')"
+                            flat
+                            dense
+                            hide-bottom
+                            auto-load
+                            :rows-per-page-options="[0]"
+                            hide-pagination
+                            :pagination="{ rowsPerPage: null }"
+                        >
+                            <template #header="props">
+                                <QTr :props="props">
+                                    <QTh></QTh>
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ t(col.label) }}
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props">
+                                    <Qtd>
+                                        <QCheckbox v-model="props.selected" />
+                                    </Qtd>
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        <span
+                                            v-if="
+                                                ![
+                                                    'status',
+                                                    'message',
+                                                    'actions',
+                                                ].includes(col.name)
+                                            "
+                                        >
+                                            {{ col.value }}
+                                        </span>
+                                        <span v-if="'status' === col.name">
+                                            <QIcon
+                                                :name="`${getIcon(col.value).name}`"
+                                                size="xs"
+                                                class="cursor-pointer"
+                                                :color="getIcon(col.value).color"
+                                            >
+                                            </QIcon>
+                                        </span>
+                                        <span v-if="'message' === col.name">message</span>
+                                    </QTd></QTr
+                                ></template
+                            >
+                        </QTable></template
+                    >
+                </VnPaginate>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <QBtn
+                    :label="t('globals.confirm')"
+                    color="primary"
+                    :disable="!newState"
+                    @click="updateState"
+                    unelevated
+                    autofocus
+                /> </QCardActions
+        ></QCard>
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.splitRow {
+    border: 1px solid #ec8916;
+    border-width: 1px 0 1px 0;
+}
+.list {
+    max-height: 100%;
+    padding: 15px;
+    width: 100%;
+}
+
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+
+#true {
+    background-color: $positive;
+}
+
+#false {
+    background-color: $negative;
+}
+
+div.q-dialog__inner > div {
+    max-width: fit-content !important;
+}
+</style>
-- 
2.40.1


From bd7f30e77944b79b9b70ee830c6843e9dcb6c2ac Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sun, 23 Feb 2025 22:45:38 +0100
Subject: [PATCH 11/14] perf: minor changes

---
 src/pages/Ticket/Negative/components/ChangeItemDialog.vue  | 2 +-
 src/pages/Ticket/Negative/components/ChangeStateDialog.vue | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index e419b85c0..cc8f391c2 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -37,9 +37,9 @@ const updateItem = async () => {
 <template>
     <QCard class="q-pa-sm">
         <QCardSection class="row items-center justify-center column items-stretch">
-            {{ showChangeItemDialog }}
             <span>{{ $t('negative.detail.modal.changeItem.title') }}</span>
             <VnSelect
+                :label="$t('negative.detail.modal.changeItem.placeholder')"
                 url="Items/WithName"
                 :fields="['id', 'name']"
                 :sort-by="['id DESC']"
diff --git a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
index 1acc7e0ef..2885fb3f0 100644
--- a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
@@ -18,9 +18,9 @@ const $props = defineProps({
 const updateState = async () => {
     try {
         showChangeStateDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ id }) =>
+        const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
             axios.post(`Tickets/state`, {
-                ticketFk: id,
+                ticketFk,
                 code: newState.value,
             }),
         );
@@ -47,8 +47,6 @@ const updateState = async () => {
                 :label="$t('negative.detail.modal.changeState.placeholder')"
                 v-model="newState"
                 :options="editableStates"
-                option-label="name"
-                option-value="code"
             />
         </QCardSection>
         <QCardActions align="right">
-- 
2.40.1


From 66d327a5520a9274d1c5a642be7f47c91833195c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 24 Feb 2025 02:10:19 +0100
Subject: [PATCH 12/14] test: improve test

---
 src/pages/Ticket/Card/TicketSplit.vue         |   4 +-
 src/pages/Ticket/Card/components/split.js     |  33 ++-
 .../Negative/components/ChangeItemDialog.vue  |   7 -
 .../components/ChangeQuantityDialog.vue       |  28 +--
 .../Negative/components/ChangeStateDialog.vue |  10 +-
 .../Negative/components/HandleSplitDialog.vue | 117 +++------
 .../ticket/negative/TicketLackDetail.spec.js  | 225 ++++++++++--------
 7 files changed, 185 insertions(+), 239 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketSplit.vue b/src/pages/Ticket/Card/TicketSplit.vue
index e79057266..66ba3e9a6 100644
--- a/src/pages/Ticket/Card/TicketSplit.vue
+++ b/src/pages/Ticket/Card/TicketSplit.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import split from './components/split';
+import { splitTicket } from './components/split';
 const emit = defineEmits(['ticketTransfered']);
 
 const $props = defineProps({
@@ -12,6 +12,8 @@ const $props = defineProps({
     },
 });
 
+const { split } = splitTicket();
+
 const splitDate = ref(Date.vnNew());
 
 const splitSelectedRows = async () => {
diff --git a/src/pages/Ticket/Card/components/split.js b/src/pages/Ticket/Card/components/split.js
index feef6dbb1..7d3cd9ed8 100644
--- a/src/pages/Ticket/Card/components/split.js
+++ b/src/pages/Ticket/Card/components/split.js
@@ -1,25 +1,24 @@
 import axios from 'axios';
-import notifyResults from 'src/utils/notifyResults';
 import { showResultsAsTable } from 'src/composables/showResultsTable';
 import HandleSplitDialog from 'src/pages/Ticket/Negative/components/HandleSplitDialog.vue';
-export default async function (data, date) {
-    const reducedData = data.reduce((acc, item) => {
-        const existing = acc.find(({ ticketFk }) => ticketFk === item.id);
-        if (existing) {
-            existing.sales.push(item.saleFk);
-        } else {
-            acc.push({ ticketFk: item.id, sales: [item.saleFk], date });
-        }
-        return acc;
-    }, []);
-
-    const promises = reducedData.map((params) => axios.post(`Tickets/split`, params));
+export function splitTicket() {
     const { openTable } = showResultsAsTable();
 
-    const results = await Promise.allSettled(promises);
-    openTable(HandleSplitDialog, result, 'ticketFk', 'changeState');
+    async function split(data, date) {
+        const reducedData = data.reduce((acc, item) => {
+            const existing = acc.find(({ ticketFk }) => ticketFk === item.ticketFk);
+            if (existing) {
+                existing.sales.push(item.saleFk);
+            } else {
+                acc.push({ ticketFk: item.ticketFk, sales: [item.saleFk], landed: date });
+            }
+            return acc;
+        }, []);
 
-    notifyResults(results, 'ticketFk');
+        const promises = reducedData.map((params) => axios.post(`Tickets/split`, params));
 
-    return results;
+        const result = await Promise.allSettled(promises);
+        openTable(HandleSplitDialog, result, 'ticket', 'split');
+    }
+    return { split };
 }
diff --git a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
index bcba4caf0..1d8967ac0 100644
--- a/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeItemDialog.vue
@@ -1,18 +1,12 @@
 <script setup>
 import { ref } from 'vue';
 import axios from 'axios';
-import { useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import notifyResults from 'src/utils/notifyResults';
 import { showResultsAsTable } from 'src/composables/showResultsTable';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import HandleSplitDialog from './HandleSplitDialog.vue';
 const { openTable } = showResultsAsTable();
 const emit = defineEmits(['update-item']);
-const quasar = useQuasar();
-const { t } = useI18n();
 
 const showChangeItemDialog = ref(false);
 const newItem = ref(null);
@@ -37,7 +31,6 @@ const updateItem = async () => {
         const result = await Promise.allSettled(rowsToUpdate);
 
         openTable(HandleSplitDialog, result, 'ticketFk', 'changeItem');
-        // notifyResults(result, 'saleFk');
         emit('update-item', newItem.value);
     } catch (err) {
         console.error('Error updating item:', err);
diff --git a/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue b/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
index 62a4b775a..520f9b63c 100644
--- a/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeQuantityDialog.vue
@@ -2,7 +2,6 @@
 import { ref } from 'vue';
 import axios from 'axios';
 import VnInput from 'src/components/common/VnInput.vue';
-// import notifyResults from 'src/utils/notifyResults';
 import { showResultsAsTable } from 'src/composables/showResultsTable';
 import HandleSplitDialog from './HandleSplitDialog.vue';
 const { openTable } = showResultsAsTable();
@@ -16,24 +15,17 @@ const $props = defineProps({
 });
 const emit = defineEmits(['update-quantity']);
 const updateQuantity = async () => {
-    try {
-        showChangeQuantityDialog.value = true;
-        const rowsToUpdate = $props.selectedRows.map(({ saleFk }) =>
-            axios.post(`Sales/${saleFk}/updateQuantity`, {
-                saleFk,
-                quantity: +newQuantity.value,
-            }),
-        );
+    showChangeQuantityDialog.value = true;
+    const rowsToUpdate = $props.selectedRows.map(({ saleFk }) =>
+        axios.post(`Sales/${saleFk}/updateQuantity`, {
+            saleFk,
+            quantity: +newQuantity.value,
+        }),
+    );
 
-        const result = await Promise.allSettled(rowsToUpdate);
-        openTable(HandleSplitDialog, result, 'ticketFk', 'changeQuantity');
-
-        // notifyResults(result, 'saleFk');
-
-        emit('update-quantity', newQuantity.value);
-    } catch (err) {
-        return err;
-    }
+    const result = await Promise.allSettled(rowsToUpdate);
+    openTable(HandleSplitDialog, result, 'ticketFk', 'changeQuantity');
+    emit('update-quantity', newQuantity.value);
 };
 </script>
 
diff --git a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
index 8bf9bc730..ec9b9fcd1 100644
--- a/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
+++ b/src/pages/Ticket/Negative/components/ChangeStateDialog.vue
@@ -5,7 +5,6 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import { showResultsAsTable } from 'src/composables/showResultsTable';
 import HandleSplitDialog from './HandleSplitDialog.vue';
-// import notifyResults from 'src/utils/notifyResults';
 const { openTable } = showResultsAsTable();
 
 const emit = defineEmits(['update-state']);
@@ -19,7 +18,6 @@ const $props = defineProps({
     },
 });
 const updateState = async () => {
-    try {
         showChangeStateDialog.value = true;
         const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
             axios.post(`Tickets/state`, {
@@ -27,15 +25,11 @@ const updateState = async () => {
                 code: newState.value,
             }),
         );
+
         const result = await Promise.allSettled(rowsToUpdate);
+
         openTable(HandleSplitDialog, result, 'ticketFk', 'changeState');
-
-        // notifyResults(result, 'ticketFk');
-
         emit('update-state', newState.value);
-    } catch (err) {
-        return err;
-    }
 };
 </script>
 
diff --git a/src/pages/Ticket/Negative/components/HandleSplitDialog.vue b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
index 9aabc21e4..574ad8d76 100644
--- a/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
+++ b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
@@ -6,7 +6,6 @@ import FetchData from 'components/FetchData.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const { t } = useI18n();
-const newState = ref(null);
 const $props = defineProps({
     results: {
         type: Array,
@@ -25,10 +24,8 @@ const $props = defineProps({
         default: '',
     },
 });
-console.error($props.tag, 'results', $props.results);
 const results = ref($props.results);
-
-// const rowsSelected = ref([]);
+const states = ref([]);
 
 const columns = computed(() => [
     {
@@ -44,30 +41,18 @@ const columns = computed(() => [
         sortable: true,
         align: 'center',
     },
-    // {
-    //     name: 'newTicket',
-    //     label: t('negative.split.newTicket'),
-    //     field: ({ newTicket }) => newTicket,
-    //     sortable: true,
-    // },
     {
         name: 'statusText',
         label: t('negative.split.message'),
         sortable: true,
         align: 'center',
     },
-    // {
-    //     name: 'actions',
-    //     align: 'center',
-    //     label: t('negative.split.actions'),
-    //     // style: 'padding-left: 100px',
-    //     // headerStyle: 'padding-left: 100px',
-    // },
 ]);
-function handleMessage(value) {
-    const actions = {
-        changeState: {},
-    };
+function getState(value) {
+    return states.value.find((state) => state.id === value)?.name;
+}
+function getTicketRejected(row) {
+    return JSON.parse(row.reason.config.data)?.ticketFk;
 }
 function getIcon(value) {
     const icons = {
@@ -86,19 +71,17 @@ function getIcon(value) {
     };
     return icons[value];
 }
-
-const states = ref([]);
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
+    <QDialog ref="dialogRef" @hide="onDialogHide" data-cy="handleSplitDialog">
         <FetchData
             v-if="$props.action === 'changeState'"
             url="States"
             @on-fetch="(data) => (states = data)"
             auto-load
         />
-        <QCard class="q-pa-sm">
+        <QCard class="q-pa-sm" style="width: 60vw; max-width: 80vw">
             <QCardSection class="row items-center q-pb-none">
                 <QAvatar
                     :icon="icon"
@@ -107,12 +90,13 @@ const states = ref([]);
                     size="xl"
                     v-if="icon"
                 />
-                <span class="text-h6 text-grey">{{ t($props.title) }}</span>
+                <span class="text-h6 text-grey"
+                    >{{ t($props.title) }} ({{ $props.action }})
+                </span>
                 <QSpace />
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center justify-center column items-stretch">
-                {{ results }}
                 <QTable
                     :rows="results"
                     :columns="columns"
@@ -124,9 +108,7 @@ const states = ref([]);
                     auto-load
                 >
                     <template #header="props">
-                        <!-- {{ props }} -->
                         <QTr :props="props">
-                            <!-- <QTh></QTh> -->
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
                             </QTh>
@@ -146,18 +128,21 @@ const states = ref([]);
                     <template #body-cell-value="{ row }">
                         <QTd align="center">
                             <div class="link" @click.stop>
-                                <span v-if="row.status === 'fulfilled'">
-                                    *{{ row.value.data[$props.tag] }}
-                                    <TicketDescriptorProxy
-                                        :id="row.value.data[$props.tag]"
-                                    >
-                                    </TicketDescriptorProxy>
-                                </span>
+                                <div v-if="row.status === 'fulfilled'">
+                                    <span v-if="$props.action !== 'changeItem'">
+                                        {{ row.value.data[$props.tag] }}
+                                        <TicketDescriptorProxy
+                                            :id="row.value.data[$props.tag]"
+                                        >
+                                        </TicketDescriptorProxy>
+                                    </span>
+                                    <span v-else>
+                                        {{ JSON.parse(row.value.config.data).ticketFk }}
+                                    </span>
+                                </div>
                                 <span v-else>
-                                    {{ JSON.parse(row.reason.config.data)?.ticketFk
-                                    }}<TicketDescriptorProxy
-                                        :id="JSON.parse(row.reason.config.data)?.ticketFk"
-                                    >
+                                    {{ getTicketRejected(row)
+                                    }}<TicketDescriptorProxy :id="getTicketRejected(row)">
                                     </TicketDescriptorProxy
                                 ></span>
                             </div>
@@ -167,18 +152,11 @@ const states = ref([]);
                         <QTd align="center">
                             <div v-if="row.status === 'fulfilled'">
                                 <div v-if="$props.action === 'changeState'">
-                                    {{
-                                        states.find(
-                                            (state) =>
-                                                state.id === row.value.data.stateFk,
-                                        )?.name
-                                    }}
+                                    {{ getState(row.value.data.stateFk) }}
                                 </div>
                                 <div v-if="$props.action === 'split'">
-                                    <span class="link" @click.stop>
-                                        {{ value }}
-                                        <TicketDescriptorProxy :id="value">
-                                        </TicketDescriptorProxy>
+                                    <span>
+                                        {{ row.value.data.status }}
                                     </span>
                                 </div>
                                 <div v-if="$props.action === 'changeItem'">
@@ -197,43 +175,6 @@ const states = ref([]);
                     </template>
                 </QTable>
             </QCardSection>
-            <QCardActions align="right">
-                <QBtn
-                    :label="t('globals.cancel')"
-                    color="primary"
-                    flat
-                    v-close-popup
-                /> </QCardActions
-        ></QCard>
+        </QCard>
     </QDialog>
 </template>
-
-<style lang="scss" scoped>
-.splitRow {
-    border: 1px solid #ec8916;
-    border-width: 1px 0 1px 0;
-}
-.list {
-    max-height: 100%;
-    padding: 15px;
-    width: 100%;
-}
-
-.grid-style-transition {
-    transition:
-        transform 0.28s,
-        background-color 0.28s;
-}
-
-#true {
-    background-color: $positive;
-}
-
-#false {
-    background-color: $negative;
-}
-
-div.q-dialog__inner > div {
-    max-width: fit-content !important;
-}
-</style>
diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index 2a20e202a..71cee0d68 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -1,8 +1,8 @@
 /// <reference types="cypress" />
+const firstRow = 'tr.cursor-pointer > :nth-child(1)';
 describe('Ticket Lack detail', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
-
         cy.login('developer');
         cy.intercept('GET', /\/api\/Tickets\/itemLack\/88.*$/).as('getItemLack');
         cy.visit('/#/ticket/negative/88');
@@ -16,23 +16,22 @@ describe('Ticket Lack detail', () => {
         cy.domContentLoad();
         cy.waitForElement('.q-table');
     });
-    describe.skip('Table detail', () => {
+    describe('Table detail', () => {
         it('should open descriptors', () => {
             cy.get('.q-table').should('be.visible');
-            cy.get('[data-col-field="nickname"]').click();
-            cy.dataCy('customerDescriptorProxy').should('be.visible');
-            cy.get('.q-item > .q-item__label').should('have.text', ' #1 content_copy');
+
             cy.get('[data-col-field="zoneName"]').click();
             cy.dataCy('zoneDescriptorProxy').should('be.visible');
-            cy.get('.q-item > .q-item__label').should('have.text', ' #1 content_copy');
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1');
             cy.get('[data-col-field="ticketFk"]').click();
             cy.dataCy('ticketDescriptorProxy').should('be.visible');
-            cy.get('.q-item > .q-item__label').should(
-                'have.text',
-                ' #1000000 content_copy',
-            );
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1000000');
+            cy.get('[data-col-field="nickname"] > .no-padding > .link').click();
+            cy.waitForElement('[data-cy="customerDescriptorProxy"]');
+            cy.dataCy('customerDescriptorProxy').should('be.visible');
+            cy.get('.q-item > .q-item__label').should('have.text', ' #1');
         });
-        it.only('should display only one row in the lack list', () => {
+        it('should display only one row in the lack list', () => {
             cy.get('[data-cy="changeItem"]').should('be.disabled');
             cy.get('[data-cy="changeState"]').should('be.disabled');
             cy.get('[data-cy="changeQuantity"]').should('be.disabled');
@@ -47,94 +46,130 @@ describe('Ticket Lack detail', () => {
         });
     });
 
-    describe.only('Item proposal', () => {
+    describe('Split', () => {
         beforeEach(() => {
-            cy.get('tr.cursor-pointer > :nth-child(1)').click();
+            cy.get(firstRow).click();
+            cy.get('[data-cy="transferLines"]').click();
+        });
+        it('Split', () => {
+            cy.get('[data-cy="ticketTransferPopup"] > .flex > .q-btn').click();
+            cy.get('.q-notification').should('be.visible');
+            cy.get('.q-notification').find('.q-btn').click();
+            cy.get('.q-notification').should('not.be.visible');
+
+            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
+            cy.get('[data-cy="handleSplitDialog"]').find(
+                'tbody > tr > :nth-child(1) > .q-icon',
+            );
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div')
+                .should('have.class', 'link');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div.link > div > span')
+                .should('have.text', '1000000 ');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(3) > div')
+                .should('have.text', 'noSplit');
+        });
+    });
+    describe('Change Item', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.get('[data-cy="changeItem"]').click();
+        });
+        it('Change failed', () => {
+            cy.get('[data-cy="New item_select"]').click();
+            cy.get('.q-item').contains('Palito rojo').click();
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+            cy.waitForElement('.q-notification');
+            cy.get('.q-notification').should('be.visible');
+            cy.get('.q-notification').find('.q-btn').click();
+
+            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
+            cy.get('[data-cy="handleSplitDialog"]').find(
+                'tbody > tr > :nth-child(1) > .q-icon',
+            );
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div')
+                .should('have.class', 'link');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div.link > span')
+                .should('have.text', '1000000');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(3) > div')
+                .should('have.text', 'price retrieval failed');
+        });
+    });
+    describe('Change state', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+            cy.get('[data-cy="changeState"]').click();
+        });
+        it('Change success', () => {
+            cy.get('[data-cy="New state_select"]').click();
+            cy.get('.q-item').contains('OK').click();
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+
+            cy.waitForElement('.q-notification');
+            cy.get('.q-notification').should('be.visible');
+            cy.get('.q-notification').find('.q-btn').click();
+
+            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
+            cy.get('[data-cy="handleSplitDialog"]').find(
+                'tbody > tr > :nth-child(1) > .q-icon',
+            );
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div')
+                .should('have.class', 'link');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div.link > div > span')
+                .should('have.text', '1000000 ');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(3) > div')
+                .should('have.text', 'OK');
+        });
+    });
+    describe('change quantity', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
+
+            cy.get('[data-cy="changeQuantity"]').click();
+        });
+
+        it('Change success', () => {
+            cy.get('[data-cy="New quantity_input"]').type(10);
+            cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+            cy.waitForElement('.q-notification');
+            cy.get('.q-notification').should('be.visible');
+            cy.get('.q-notification').find('.q-btn').click();
+
+            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
+            cy.get('[data-cy="handleSplitDialog"]').find(
+                'tbody > tr > :nth-child(1) > .q-icon',
+            );
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div')
+                .should('have.class', 'link');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(2) > div.link > div > span')
+                .should('have.text', '1000000 ');
+            cy.get('[data-cy="handleSplitDialog"]')
+                .find('tbody > tr > :nth-child(3) > div')
+                .should('have.text', '10');
+        });
+    });
+    describe('Item proposal', () => {
+        beforeEach(() => {
+            cy.get(firstRow).click();
 
-            // cy.intercept('GET', /\/api\/Items\/getSimilar\?.*$/, {
-            //     statusCode: 200,
-            //     body: [
-            //         {
-            //             id: 1,
-            //             longName: 'Ranged weapon longbow 50cm',
-            //             subName: 'Stark Industries',
-            //             tag5: 'Color',
-            //             value5: 'Brown',
-            //             match5: 0,
-            //             match6: 0,
-            //             match7: 0,
-            //             match8: 1,
-            //             tag6: 'Categoria',
-            //             value6: '+1 precission',
-            //             tag7: 'Tallos',
-            //             value7: '1',
-            //             tag8: null,
-            //             value8: null,
-            //             available: 20,
-            //             calc_id: 6,
-            //             counter: 0,
-            //             minQuantity: 1,
-            //             visible: null,
-            //             price2: 1,
-            //         },
-            //         {
-            //             id: 2,
-            //             longName: 'Ranged weapon longbow 100cm',
-            //             subName: 'Stark Industries',
-            //             tag5: 'Color',
-            //             value5: 'Brown',
-            //             match5: 0,
-            //             match6: 1,
-            //             match7: 0,
-            //             match8: 1,
-            //             tag6: 'Categoria',
-            //             value6: '+1 precission',
-            //             tag7: 'Tallos',
-            //             value7: '1',
-            //             tag8: null,
-            //             value8: null,
-            //             available: 50,
-            //             calc_id: 6,
-            //             counter: 1,
-            //             minQuantity: 5,
-            //             visible: null,
-            //             price2: 10,
-            //         },
-            //         {
-            //             id: 3,
-            //             longName: 'Ranged weapon longbow 200cm',
-            //             subName: 'Stark Industries',
-            //             tag5: 'Color',
-            //             value5: 'Brown',
-            //             match5: 1,
-            //             match6: 1,
-            //             match7: 1,
-            //             match8: 1,
-            //             tag6: 'Categoria',
-            //             value6: '+1 precission',
-            //             tag7: 'Tallos',
-            //             value7: '1',
-            //             tag8: null,
-            //             value8: null,
-            //             available: 185,
-            //             calc_id: 6,
-            //             counter: 10,
-            //             minQuantity: 10,
-            //             visible: null,
-            //             price2: 100,
-            //         },
-            //     ],
-            // }).as('getItemGetSimilar');
             cy.get('[data-cy="itemProposal"]').click();
-            // cy.wait('@getItemGetSimilar');
         });
         describe('Replace item if', () => {
             it('Quantity is less than available', () => {
                 cy.get(':nth-child(1) > .text-right  > .q-btn').click();
             });
 
-            /* ==== Test Created with Cypress Studio ==== */
-            it.only('item proposal cells', function () {
+            it('item proposal cells', () => {
                 cy.get(
                     ':nth-child(1) > .q-table--col-auto-width > .q-btn > .q-btn__content > .q-icon',
                 ).should('not.be.visible');
@@ -152,16 +187,6 @@ describe('Ticket Lack detail', () => {
                     ':nth-child(2) > [data-col-field="tag6"] > .no-padding > .match',
                 ).should('have.class', 'match');
                 cy.get(':nth-child(2) > [data-col-field="tag7"]').click();
-                cy.get(
-                    ':nth-child(2) > .q-table--col-auto-width > .q-btn > .q-btn__content > .q-icon',
-                ).should('be.visible');
-                cy.get(':nth-child(2) > .q-table--col-auto-width > .q-btn')
-                    .should('be.enabled')
-                    .click();
-                // cy.get('.q-notification__message').should(
-                //     'have.text',
-                //     'Operación (1) 43 completada con éxito.',
-                // );
             });
         });
     });
-- 
2.40.1


From 6ea9ffa7393d9c5fe760afcb6a6a0aa51462446b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Mon, 24 Feb 2025 15:14:59 +0100
Subject: [PATCH 13/14] feat: updates

---
 src/pages/Item/components/ItemProposal.vue    |  10 +-
 .../Item/components/ItemProposalProxy.vue     |  11 +-
 src/pages/Ticket/Card/TicketSummary.vue       |  94 +-----
 .../Card/components/TicketSaleTable.vue       | 112 +++++++
 .../Card/components/TicketSaleTableDialog.vue |  42 +++
 .../Ticket/Negative/TicketLackDetail.vue      |   3 +-
 .../Negative/components/HandleSplitDialog.vue |  52 +++-
 .../Negative/components/HandleSplited.vue     | 281 ------------------
 8 files changed, 222 insertions(+), 383 deletions(-)
 create mode 100644 src/pages/Ticket/Card/components/TicketSaleTable.vue
 create mode 100644 src/pages/Ticket/Card/components/TicketSaleTableDialog.vue
 delete mode 100644 src/pages/Ticket/Negative/components/HandleSplited.vue

diff --git a/src/pages/Item/components/ItemProposal.vue b/src/pages/Item/components/ItemProposal.vue
index 57d4a1d21..7b6128859 100644
--- a/src/pages/Item/components/ItemProposal.vue
+++ b/src/pages/Item/components/ItemProposal.vue
@@ -6,9 +6,10 @@ import { toCurrency } from 'filters/index';
 import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import axios from 'axios';
-import notifyResults from 'src/utils/notifyResults';
+import { showResultsAsTable } from 'src/composables/showResultsTable';
 import FetchData from 'components/FetchData.vue';
-
+const { openTable } = showResultsAsTable();
+import HandleSplitDialog from 'src/pages/Ticket/Negative/components/HandleSplitDialog.vue';
 const MATCH = 'match';
 
 const { t } = useI18n();
@@ -200,9 +201,10 @@ const isSelectionAvailable = (itemProposal) => {
 
 async function change({ itemFk: substitutionFk }) {
     try {
-        const promises = $props.sales.map(({ saleFk, quantity }) => {
+        const promises = $props.sales.map(({ saleFk, quantity, ticketFk }) => {
             const params = {
                 saleFk,
+                ticketFk,
                 substitutionFk,
                 quantity,
             };
@@ -210,7 +212,7 @@ async function change({ itemFk: substitutionFk }) {
         });
         const results = await Promise.allSettled(promises);
 
-        notifyResults(results, 'saleFk');
+        openTable(HandleSplitDialog, results, 'ticketFk', 'changeItem');
         emit('itemReplaced', {
             type: 'refresh',
             itemProposal: proposalSelected.value[0],
diff --git a/src/pages/Item/components/ItemProposalProxy.vue b/src/pages/Item/components/ItemProposalProxy.vue
index 2027ad449..fafd50cef 100644
--- a/src/pages/Item/components/ItemProposalProxy.vue
+++ b/src/pages/Item/components/ItemProposalProxy.vue
@@ -19,12 +19,18 @@ const $props = defineProps({
         default: () => [],
     },
 });
-const { dialogRef } = useDialogPluginComponent();
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+    useDialogPluginComponent();
 const emit = defineEmits(['onDialogClosed', ...useDialogPluginComponent.emits]);
 defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 </script>
 <template>
-    <QDialog ref="dialogRef" transition-show="scale" transition-hide="scale">
+    <QDialog
+        ref="dialogRef"
+        transition-show="scale"
+        transition-hide="scale"
+        @hide="onDialogHide"
+    >
         <QCard class="dialog-width">
             <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
@@ -36,6 +42,7 @@ defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.h
                     v-bind="$props"
                     @item-replaced="
                         () => {
+                            emit('onDialogClosed', true);
                             dialogRef.hide();
                         }
                     "
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 5df08b881..d7aeca77f 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -6,7 +6,6 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
 import InvoiceOutDescriptorProxy from 'pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
@@ -20,8 +19,7 @@ import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 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 TicketSaleTable from './components/TicketSaleTable.vue';
 const route = useRoute();
 const { notify } = useNotify();
 const { t } = useI18n();
@@ -291,95 +289,7 @@ onMounted(async () => {
                     :url="toTicketUrl('sale')"
                     :text="t('ticket.summary.saleLines')"
                 />
-                <QTable :rows="entity.sales" style="text-align: center">
-                    <template #body-cell="{ value }">
-                        <QTd>{{ value }}</QTd>
-                    </template>
-                    <template #header="props">
-                        <QTr class="tr-header" :props="props">
-                            <QTh auto-width></QTh>
-                            <QTh auto-width>{{ t('globals.item') }}</QTh>
-                            <QTh auto-width>{{ t('globals.visible') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.available') }}</QTh>
-                            <QTh auto-width>{{ t('globals.quantity') }}</QTh>
-                            <QTh auto-width>{{ t('globals.description') }}</QTh>
-                            <QTh auto-width>{{ t('globals.price') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
-                            <QTh auto-width>{{ t('globals.amount') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.packing') }}</QTh>
-                        </QTr>
-                    </template>
-                    <template #body="props">
-                        <QTr :props="props">
-                            <QTd class="q-gutter-x-xs">
-                                <TicketProblems :row="props.row" />
-                            </QTd>
-                            <QTd>
-                                <QBtn class="link" flat>
-                                    {{ props.row.itemFk }}
-                                    <ItemDescriptorProxy
-                                        :id="props.row.itemFk"
-                                        :sale-fk="props.row.id"
-                                        :warehouse-fk="ticket.warehouseFk"
-                                    />
-                                </QBtn>
-                            </QTd>
-                            <QTd>
-                                <QChip
-                                    v-if="props.row.visible < 0"
-                                    dense
-                                    rounded
-                                    :color="'negative'"
-                                    text-color="white"
-                                >
-                                    {{ props.row.visible }}
-                                </QChip>
-                                <span v-else>
-                                    {{ props.row.visible }}
-                                </span>
-                            </QTd>
-                            <QTd>
-                                <QChip
-                                    v-if="props.row.available < 0"
-                                    dense
-                                    rounded
-                                    :color="'negative'"
-                                    text-color="white"
-                                >
-                                    {{ props.row.available }}
-                                </QChip>
-                                <span v-else>
-                                    {{ props.row.available }}
-                                </span>
-                            </QTd>
-                            <QTd>{{ props.row.quantity }}</QTd>
-                            <QTd class="description-cell">
-                                <div class="row full-width justify-between">
-                                    {{ props.row.concept }}
-                                    <div v-if="props.row.item.subName" class="subName">
-                                        {{ props.row.item.subName.toUpperCase() }}
-                                    </div>
-                                </div>
-                                <FetchedTags
-                                    class="fetched-tags"
-                                    :item="props.row.item"
-                                ></FetchedTags>
-                            </QTd>
-                            <QTd>{{ props.row.price }} €</QTd>
-                            <QTd>{{ props.row.discount }} %</QTd>
-                            <QTd
-                                >{{
-                                    toCurrency(
-                                        props.row.quantity *
-                                            props.row.price *
-                                            ((100 - props.row.discount) / 100),
-                                    )
-                                }}
-                            </QTd>
-                            <QTd>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</QTd>
-                        </QTr>
-                    </template>
-                </QTable>
+                <TicketSaleTable :ticket="ticket" :sales="entity.sales" />
             </QCard>
             <QCard class="vn-max" v-if="ticket.packagings.length != 0">
                 <VnTitle :url="toTicketUrl('package')" :text="t('globals.packages')" />
diff --git a/src/pages/Ticket/Card/components/TicketSaleTable.vue b/src/pages/Ticket/Card/components/TicketSaleTable.vue
new file mode 100644
index 000000000..136ac4e46
--- /dev/null
+++ b/src/pages/Ticket/Card/components/TicketSaleTable.vue
@@ -0,0 +1,112 @@
+<script setup>
+import TicketProblems from 'src/components/TicketProblems.vue';
+import FetchedTags from 'src/components/ui/FetchedTags.vue';
+import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import { ref } from 'vue';
+
+const props = defineProps({
+    sales: {
+        type: Array,
+        required: true,
+    },
+    ticket: {
+        type: Object,
+        required: true,
+    },
+});
+
+const sales = ref(props?.sales);
+</script>
+
+<template>
+    <QTable v-if="sales" :rows="sales" style="text-align: center">
+        <template #body-cell="{ value }">
+            <QTd>{{ value }}</QTd>
+        </template>
+        <template #header="props">
+            <QTr class="tr-header" :props="props">
+                <QTh auto-width></QTh>
+                <QTh auto-width>{{ $t('globals.item') }}</QTh>
+                <QTh auto-width>{{ $t('globals.visible') }}</QTh>
+                <QTh auto-width>{{ $t('ticket.summary.available') }}</QTh>
+                <QTh auto-width>{{ $t('globals.quantity') }}</QTh>
+                <QTh auto-width>{{ $t('globals.description') }}</QTh>
+                <QTh auto-width>{{ $t('globals.price') }}</QTh>
+                <QTh auto-width>{{ $t('ticket.summary.discount') }}</QTh>
+                <QTh auto-width>{{ $t('globals.amount') }}</QTh>
+                <QTh auto-width>{{ $t('ticket.summary.packing') }}</QTh>
+            </QTr>
+        </template>
+        <template #body="props">
+            <QTr :props="props">
+                <QTd class="q-gutter-x-xs">
+                    <TicketProblems :row="props.row" />
+                </QTd>
+                <QTd>
+                    <QBtn class="link" flat>
+                        {{ props.row.itemFk }}
+                        <ItemDescriptorProxy
+                            :id="props.row.itemFk"
+                            :sale-fk="props.row.id"
+                            :warehouse-fk="$props.ticket.warehouseFk"
+                        />
+                    </QBtn>
+                </QTd>
+                <QTd>
+                    <QChip
+                        v-if="props.row.visible < 0"
+                        dense
+                        rounded
+                        :color="'negative'"
+                        text-color="white"
+                    >
+                        {{ props.row.visible }}
+                    </QChip>
+                    <span v-else>
+                        {{ props.row.visible }}
+                    </span>
+                </QTd>
+                <QTd>
+                    <QChip
+                        v-if="props.row.available < 0"
+                        dense
+                        rounded
+                        :color="'negative'"
+                        text-color="white"
+                    >
+                        {{ props.row.available }}
+                    </QChip>
+                    <span v-else>
+                        {{ props.row.available }}
+                    </span>
+                </QTd>
+                <QTd>{{ props.row.quantity }}</QTd>
+                <QTd class="description-cell">
+                    <div class="row full-width justify-between">
+                        {{ props.row.concept }}
+                        <div v-if="props.row.item.subName" class="subName">
+                            {{ props.row.item.subName.toUpperCase() }}
+                        </div>
+                    </div>
+                    <FetchedTags
+                        class="fetched-tags"
+                        :item="props.row.item"
+                    ></FetchedTags>
+                </QTd>
+                <QTd>{{ props.row.price }} €</QTd>
+                <QTd>{{ props.row.discount }} %</QTd>
+                <QTd
+                    >{{
+                        toCurrency(
+                            props.row.quantity *
+                                props.row.price *
+                                ((100 - props.row.discount) / 100),
+                        )
+                    }}
+                </QTd>
+                <QTd>{{ dashIfEmpty(props.row.item.itemPackingTypeFk) }}</QTd>
+            </QTr>
+        </template>
+    </QTable>
+</template>
diff --git a/src/pages/Ticket/Card/components/TicketSaleTableDialog.vue b/src/pages/Ticket/Card/components/TicketSaleTableDialog.vue
new file mode 100644
index 000000000..e7b7aeccd
--- /dev/null
+++ b/src/pages/Ticket/Card/components/TicketSaleTableDialog.vue
@@ -0,0 +1,42 @@
+<script setup>
+import FetchData from 'src/components/FetchData.vue';
+import { dashIfEmpty, toDate, toCurrency } from 'src/filters';
+import { ref } from 'vue';
+import TicketSaleTable from './TicketSaleTable.vue';
+
+const props = defineProps({
+    sales: {
+        type: Array,
+        required: true,
+    },
+    ticket: {
+        type: Number,
+        required: true,
+    },
+});
+
+const sales = ref(props?.sales);
+</script>
+
+<template>
+    <QDialog ref="dialogRef" full-width data-cy="ticketSaleTableDialog">
+        <FetchData
+            v-if="!sales"
+            :url="`Tickets/${$props.ticket}/getSales`"
+            @on-fetch="(data) => (sales = data)"
+            auto-load
+        ></FetchData>
+        <QCard class="q-pa-sm">
+            <QCardSection class="row items-center q-pb-none">
+                <span class="text-h6 text-grey">{{
+                    $t('ticket.summary.saleLines')
+                }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QCardSection>
+            <QCardSection>
+                <TicketSaleTable v-if="sales" :ticket="$props.ticket" :sales="sales" />
+            </QCardSection>
+        </QCard>
+    </QDialog>
+</template>
diff --git a/src/pages/Ticket/Negative/TicketLackDetail.vue b/src/pages/Ticket/Negative/TicketLackDetail.vue
index 97e19366d..9a1bf3921 100644
--- a/src/pages/Ticket/Negative/TicketLackDetail.vue
+++ b/src/pages/Ticket/Negative/TicketLackDetail.vue
@@ -68,7 +68,8 @@ const showItemProposal = () => {
                 sales: selectedRows.value,
             },
         })
-        .onOk(itemProposalEvt);
+        .onOk(reload)
+        .onCancel(reload);
 };
 </script>
 
diff --git a/src/pages/Ticket/Negative/components/HandleSplitDialog.vue b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
index 574ad8d76..de32227cc 100644
--- a/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
+++ b/src/pages/Ticket/Negative/components/HandleSplitDialog.vue
@@ -4,7 +4,11 @@ import { useI18n } from 'vue-i18n';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import FetchData from 'components/FetchData.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import TicketSaleTable from 'src/pages/Ticket/Card/components/TicketSaleTable.vue';
+import { useQuasar } from 'quasar';
+import TicketSaleTableDialog from '../../Card/components/TicketSaleTableDialog.vue';
 
+const quasar = useQuasar();
 const { t } = useI18n();
 const $props = defineProps({
     results: {
@@ -47,6 +51,12 @@ const columns = computed(() => [
         sortable: true,
         align: 'center',
     },
+    {
+        name: 'actions',
+        label: '',
+        sortable: false,
+        align: 'right',
+    },
 ]);
 function getState(value) {
     return states.value.find((state) => state.id === value)?.name;
@@ -54,6 +64,9 @@ function getState(value) {
 function getTicketRejected(row) {
     return JSON.parse(row.reason.config.data)?.ticketFk;
 }
+function getTicketFulFilled(row) {
+    return JSON.parse(row.value.config.data).ticketFk;
+}
 function getIcon(value) {
     const icons = {
         fulfilled: {
@@ -71,10 +84,24 @@ function getIcon(value) {
     };
     return icons[value];
 }
+
+function openLinesDialog(row) {
+    const ticket =
+        row.status === 'fulfilled'
+            ? (row.value.data[$props.tag] ?? getTicketFulFilled(row))
+            : getTicketRejected(row);
+    quasar.dialog({
+        component: TicketSaleTableDialog,
+        componentProps: {
+            ticket: ticket,
+            sales: null,
+        },
+    });
+}
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" data-cy="handleSplitDialog">
+    <QDialog ref="dialogRef" @hide="onDialogHide" data-cy="handleSplitDialog" persistent>
         <FetchData
             v-if="$props.action === 'changeState'"
             url="States"
@@ -136,8 +163,12 @@ function getIcon(value) {
                                         >
                                         </TicketDescriptorProxy>
                                     </span>
-                                    <span v-else>
-                                        {{ JSON.parse(row.value.config.data).ticketFk }}
+                                    <span v-else
+                                        >{{ getTicketFulFilled(row)
+                                        }}<TicketDescriptorProxy
+                                            :id="getTicketFulFilled(row)"
+                                        >
+                                        </TicketDescriptorProxy>
                                     </span>
                                 </div>
                                 <span v-else>
@@ -173,6 +204,21 @@ function getIcon(value) {
                             <div v-else>{{ row.reason.response.data.error.message }}</div>
                         </QTd>
                     </template>
+                    <template #body-cell-actions="props">
+                        <QTd align="center">
+                            <div v-if="['changeItem'].includes($props.action)">
+                                <QIcon
+                                    name="list"
+                                    size="xs"
+                                    color="primary"
+                                    class="cursor-pointer"
+                                    @click="openLinesDialog(props.row)"
+                                >
+                                    <QTooltip>{{ t('ticketList.toLines') }} </QTooltip>
+                                </QIcon>
+                            </div>
+                        </QTd>
+                    </template>
                 </QTable>
             </QCardSection>
         </QCard>
diff --git a/src/pages/Ticket/Negative/components/HandleSplited.vue b/src/pages/Ticket/Negative/components/HandleSplited.vue
deleted file mode 100644
index b2bf94f26..000000000
--- a/src/pages/Ticket/Negative/components/HandleSplited.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<script setup>
-import { computed, onMounted, ref, toRefs } from 'vue';
-import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-import { useDialogPluginComponent } from 'quasar';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-const { t } = useI18n();
-const showSplitDialog = ref(false);
-const newState = ref(null);
-const resultSplit = ref([]);
-const { dialogRef, onDialogHide } = useDialogPluginComponent();
-const $props = defineProps({
-    tickets: {
-        type: Array,
-        default: () => [],
-    },
-});
-const tickets = ref($props.tickets ?? []);
-const rowBtnDisable = () =>
-    !(
-        formData.value?.agencyModeFk &&
-        formData.value?.date &&
-        rowsSelected.value.length > 0
-    );
-const rowsSelected = ref([]);
-
-const columns = computed(() => [
-    {
-        name: 'status',
-        label: t('negative.split.status'),
-        field: ({ status }) => status,
-        sortable: true,
-    },
-    {
-        name: 'ticket',
-        label: t('negative.split.ticket'),
-        field: ({ ticket }) => ticket,
-        sortable: true,
-    },
-    {
-        name: 'newTicket',
-        label: t('negative.split.newTicket'),
-        field: ({ newTicket }) => newTicket,
-        sortable: true,
-    },
-    {
-        name: 'message',
-        label: t('negative.split.message'),
-        field: ({ message }) => message,
-        sortable: true,
-    },
-    // {
-    //     name: 'actions',
-    //     align: 'center',
-    //     label: t('negative.split.actions'),
-    //     // style: 'padding-left: 100px',
-    //     // headerStyle: 'padding-left: 100px',
-    // },
-]);
-
-const formData = ref({ agencies: [] });
-const handleDateChanged = async () => {
-    const { data: agencyData } = await axios.get('Agencies/getLanded', {
-        params: {
-            addressFk: 123,
-            agencyModeFk: 8,
-            warehouseFk: 1,
-            shipped: '2001-02-08T23:00:00.000Z',
-        },
-    });
-    if (!agencyData) formData.value.agencies = [];
-    const { zoneFk } = agencyData;
-    const { data: zoneData } = await axios.get('Zones/Includingexpired', {
-        params: { filter: { fields: ['id', 'name'], where: { id: zoneFk } } },
-    });
-    formData.value.agencies = zoneData;
-    if (zoneData.length === 1) formData.value.agencyModeFk = zoneData[0];
-    // formData.value.dateChanged = false;
-};
-const ticketsSelected = ref([]);
-onMounted(() => {
-    ticketsSelected.value = [...new Set($props.tickets.map(({ ticketFk }) => ticketFk))];
-});
-
-const updateState = async () => {
-    try {
-        showSplitDialog.value = true;
-        const rowsToUpdate = $props.tickets.map(({ ticketFk }) =>
-            axios.post(`Tickets/state`, {
-                ticketFk,
-                code: newState.value,
-            })
-        );
-        await Promise.all(rowsToUpdate);
-    } catch (err) {
-        return err;
-    } finally {
-        dialogRef.value.hide({ type: 'refresh', refresh: true });
-    }
-};
-
-function getIcon(value) {
-    const icons = {
-        split: {
-            name: 'check_circle',
-            color: 'secondary',
-        },
-        noSplit: {
-            name: 'warning',
-            color: 'primary',
-        },
-        error: {
-            name: 'close',
-            color: 'negative',
-        },
-    };
-    return icons[value];
-}
-
-const updateNewTickets = async () => {
-    tickets.value = $props.tickets.filter((ticket) => ticket.newTicket !== 1000005);
-    console.log('updateNewTickets');
-    rowsSelected.value = [];
-};
-</script>
-
-<template>
-    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showSplitDialog">
-        <QCard class="q-pa-sm">
-            <QCardSection class="row items-center q-pb-none">
-                <QAvatar
-                    :icon="icon"
-                    color="primary"
-                    text-color="white"
-                    size="xl"
-                    v-if="icon"
-                />
-                <span class="text-h6 text-grey">{{
-                    t('negative.detail.modal.handleSplited.title')
-                }}</span>
-                <QSpace />
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardSection class="row items-center justify-center column items-stretch">
-                <Qform>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnInputDate
-                            :label="t('Max date')"
-                            v-model="formData.date"
-                            @update:model-value="(evt) => handleDateChanged()" />
-
-                        <VnSelect
-                            :disable="formData.agencies.length < 1"
-                            :label="t('Agency')"
-                            v-model="formData.agencyModeFk"
-                            :options="formData.agencies"
-                            option-label="name"
-                            option-value="id" />
-
-                        <QBtn
-                            icon="save"
-                            :disable="rowBtnDisable()"
-                            color="primary"
-                            flat
-                            rounded
-                            @click="updateNewTickets"
-                    /></VnRow>
-                </Qform>
-                <VnPaginate data-key="splitLack" :data="tickets">
-                    <template #body="{ rows }">
-                        <QTable
-                            :rows="rows"
-                            :columns="columns"
-                            selection="multiple"
-                            row-key="newTicket"
-                            v-model:selected="rowsSelected"
-                            :no-data-label="t('globals.noResults')"
-                            flat
-                            dense
-                            hide-bottom
-                            auto-load
-                            :rows-per-page-options="[0]"
-                            hide-pagination
-                            :pagination="{ rowsPerPage: null }"
-                        >
-                            <template #header="props">
-                                <QTr :props="props">
-                                    <QTh></QTh>
-                                    <QTh
-                                        v-for="col in props.cols"
-                                        :key="col.name"
-                                        :props="props"
-                                    >
-                                        {{ t(col.label) }}
-                                    </QTh>
-                                </QTr>
-                            </template>
-                            <template #body="props">
-                                <QTr :props="props">
-                                    <Qtd>
-                                        <QCheckbox v-model="props.selected" />
-                                    </Qtd>
-                                    <QTd
-                                        v-for="col in props.cols"
-                                        :key="col.name"
-                                        :props="props"
-                                    >
-                                        <span
-                                            v-if="
-                                                ![
-                                                    'status',
-                                                    'message',
-                                                    'actions',
-                                                ].includes(col.name)
-                                            "
-                                        >
-                                            {{ col.value }}
-                                        </span>
-                                        <span v-if="'status' === col.name">
-                                            <QIcon
-                                                :name="`${getIcon(col.value).name}`"
-                                                size="xs"
-                                                class="cursor-pointer"
-                                                :color="getIcon(col.value).color"
-                                            >
-                                            </QIcon>
-                                        </span>
-                                        <span v-if="'message' === col.name">message</span>
-                                    </QTd></QTr
-                                ></template
-                            >
-                        </QTable></template
-                    >
-                </VnPaginate>
-            </QCardSection>
-            <QCardActions align="right">
-                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
-                <QBtn
-                    :label="t('globals.confirm')"
-                    color="primary"
-                    :disable="!newState"
-                    @click="updateState"
-                    unelevated
-                    autofocus
-                /> </QCardActions
-        ></QCard>
-    </QDialog>
-</template>
-
-<style lang="scss" scoped>
-.splitRow {
-    border: 1px solid #ec8916;
-    border-width: 1px 0 1px 0;
-}
-.list {
-    max-height: 100%;
-    padding: 15px;
-    width: 100%;
-}
-
-.grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
-}
-
-#true {
-    background-color: $positive;
-}
-
-#false {
-    background-color: $negative;
-}
-
-div.q-dialog__inner > div {
-    max-width: fit-content !important;
-}
-</style>
-- 
2.40.1


From 9907fdf2fe6d3a7a7fdd997e712e9b33de761425 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Sat, 1 Mar 2025 02:09:09 +0100
Subject: [PATCH 14/14] test: clean test

---
 .../ticket/negative/TicketLackDetail.spec.js  | 182 ++++++++----------
 test/cypress/support/commands.js              |   8 +
 2 files changed, 91 insertions(+), 99 deletions(-)

diff --git a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
index 71cee0d68..bbbe80c56 100644
--- a/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
+++ b/test/cypress/integration/ticket/negative/TicketLackDetail.spec.js
@@ -1,5 +1,15 @@
 /// <reference types="cypress" />
+
 const firstRow = 'tr.cursor-pointer > :nth-child(1)';
+const ticketId = 1000000;
+const findTr = (index) => `tbody > tr > :nth-child(${index}) > div`;
+const clickNotificationAction = () => {
+    const notification = '.q-notification';
+    cy.waitForElement(notification);
+    cy.get(notification).should('be.visible');
+    cy.get(notification).find('.q-btn').click();
+    cy.get(notification).should('not.be.visible');
+};
 describe('Ticket Lack detail', () => {
     beforeEach(() => {
         cy.viewport(1280, 720);
@@ -19,153 +29,126 @@ describe('Ticket Lack detail', () => {
     describe('Table detail', () => {
         it('should open descriptors', () => {
             cy.get('.q-table').should('be.visible');
-
-            cy.get('[data-col-field="zoneName"]').click();
+            cy.colField('zoneName').click();
             cy.dataCy('zoneDescriptorProxy').should('be.visible');
             cy.get('.q-item > .q-item__label').should('have.text', ' #1');
-            cy.get('[data-col-field="ticketFk"]').click();
+            cy.colField('ticketFk').click();
             cy.dataCy('ticketDescriptorProxy').should('be.visible');
-            cy.get('.q-item > .q-item__label').should('have.text', ' #1000000');
-            cy.get('[data-col-field="nickname"] > .no-padding > .link').click();
+            cy.get('.q-item > .q-item__label').should('have.text', ` #${ticketId}`);
+            cy.colField('nickname').find('.link').click();
             cy.waitForElement('[data-cy="customerDescriptorProxy"]');
             cy.dataCy('customerDescriptorProxy').should('be.visible');
             cy.get('.q-item > .q-item__label').should('have.text', ' #1');
         });
         it('should display only one row in the lack list', () => {
-            cy.get('[data-cy="changeItem"]').should('be.disabled');
-            cy.get('[data-cy="changeState"]').should('be.disabled');
-            cy.get('[data-cy="changeQuantity"]').should('be.disabled');
-            cy.get('[data-cy="itemProposal"]').should('be.disabled');
-            cy.get('[data-cy="transferLines"]').should('be.disabled');
+            cy.dataCy('changeItem').should('be.disabled');
+            cy.dataCy('changeState').should('be.disabled');
+            cy.dataCy('changeQuantity').should('be.disabled');
+            cy.dataCy('itemProposal').should('be.disabled');
+            cy.dataCy('transferLines').should('be.disabled');
             cy.get('tr.cursor-pointer > :nth-child(1)').click();
-            cy.get('[data-cy="changeItem"]').should('be.enabled');
-            cy.get('[data-cy="changeState"]').should('be.enabled');
-            cy.get('[data-cy="changeQuantity"]').should('be.enabled');
-            cy.get('[data-cy="itemProposal"]').should('be.enabled');
-            cy.get('[data-cy="transferLines"]').should('be.enabled');
+            cy.dataCy('changeItem').should('be.enabled');
+            cy.dataCy('changeState').should('be.enabled');
+            cy.dataCy('changeQuantity').should('be.enabled');
+            cy.dataCy('itemProposal').should('be.enabled');
+            cy.dataCy('transferLines').should('be.enabled');
         });
     });
 
     describe('Split', () => {
         beforeEach(() => {
             cy.get(firstRow).click();
-            cy.get('[data-cy="transferLines"]').click();
+            cy.dataCy('transferLines').click();
         });
         it('Split', () => {
-            cy.get('[data-cy="ticketTransferPopup"] > .flex > .q-btn').click();
-            cy.get('.q-notification').should('be.visible');
-            cy.get('.q-notification').find('.q-btn').click();
-            cy.get('.q-notification').should('not.be.visible');
+            cy.dataCy('ticketTransferPopup').find('.flex > .q-btn').click();
 
-            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
-            cy.get('[data-cy="handleSplitDialog"]').find(
-                'tbody > tr > :nth-child(1) > .q-icon',
-            );
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div')
-                .should('have.class', 'link');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div.link > div > span')
-                .should('have.text', '1000000 ');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(3) > div')
-                .should('have.text', 'noSplit');
+            clickNotificationAction();
+
+            cy.dataCy('handleSplitDialog').should('be.visible');
+            cy.dataCy('handleSplitDialog').find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('handleSplitDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('handleSplitDialog')
+                .find(`${findTr(2)}.link > div > span`)
+                .should('have.text', `${ticketId} `);
+            cy.dataCy('handleSplitDialog').find(findTr(3)).should('have.text', 'noSplit');
         });
     });
     describe('Change Item', () => {
         beforeEach(() => {
             cy.get(firstRow).click();
-            cy.get('[data-cy="changeItem"]').click();
+            cy.dataCy('changeItem').click();
         });
         it('Change failed', () => {
-            cy.get('[data-cy="New item_select"]').click();
+            cy.dataCy('New item_select').should('be.visible').click();
             cy.get('.q-item').contains('Palito rojo').click();
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-            cy.waitForElement('.q-notification');
-            cy.get('.q-notification').should('be.visible');
-            cy.get('.q-notification').find('.q-btn').click();
 
-            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
-            cy.get('[data-cy="handleSplitDialog"]').find(
-                'tbody > tr > :nth-child(1) > .q-icon',
-            );
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div')
-                .should('have.class', 'link');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div.link > span')
-                .should('have.text', '1000000');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(3) > div')
+            clickNotificationAction();
+
+            cy.dataCy('handleSplitDialog').should('be.visible');
+            cy.dataCy('handleSplitDialog').find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('handleSplitDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('handleSplitDialog')
+                .find(`${findTr(2)}.link > span`)
+                .should('have.text', `${ticketId}`);
+            cy.dataCy('handleSplitDialog')
+                .find(findTr(3))
                 .should('have.text', 'price retrieval failed');
         });
     });
     describe('Change state', () => {
         beforeEach(() => {
             cy.get(firstRow).click();
-            cy.get('[data-cy="changeState"]').click();
+            cy.dataCy('changeState').click();
         });
         it('Change success', () => {
-            cy.get('[data-cy="New state_select"]').click();
+            cy.dataCy('New state_select').should('be.visible').click();
             cy.get('.q-item').contains('OK').click();
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
 
-            cy.waitForElement('.q-notification');
-            cy.get('.q-notification').should('be.visible');
-            cy.get('.q-notification').find('.q-btn').click();
+            clickNotificationAction();
 
-            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
-            cy.get('[data-cy="handleSplitDialog"]').find(
-                'tbody > tr > :nth-child(1) > .q-icon',
-            );
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div')
-                .should('have.class', 'link');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div.link > div > span')
-                .should('have.text', '1000000 ');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(3) > div')
-                .should('have.text', 'OK');
+            cy.dataCy('handleSplitDialog')
+                .should('be.visible')
+                .find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('handleSplitDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('handleSplitDialog')
+                .find(`${findTr(2)}.link > div > span`)
+                .should('have.text', `${ticketId} `);
+            cy.dataCy('handleSplitDialog').find(findTr(3)).should('have.text', 'OK');
         });
     });
     describe('change quantity', () => {
         beforeEach(() => {
             cy.get(firstRow).click();
 
-            cy.get('[data-cy="changeQuantity"]').click();
+            cy.dataCy('changeQuantity').click();
         });
 
         it('Change success', () => {
-            cy.get('[data-cy="New quantity_input"]').type(10);
+            cy.dataCy('New quantity_input').type(10);
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-            cy.waitForElement('.q-notification');
-            cy.get('.q-notification').should('be.visible');
-            cy.get('.q-notification').find('.q-btn').click();
 
-            cy.get('[data-cy="handleSplitDialog"]').should('be.visible');
-            cy.get('[data-cy="handleSplitDialog"]').find(
-                'tbody > tr > :nth-child(1) > .q-icon',
-            );
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div')
-                .should('have.class', 'link');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(2) > div.link > div > span')
-                .should('have.text', '1000000 ');
-            cy.get('[data-cy="handleSplitDialog"]')
-                .find('tbody > tr > :nth-child(3) > div')
-                .should('have.text', '10');
+            clickNotificationAction();
+
+            cy.dataCy('handleSplitDialog')
+                .should('be.visible')
+                .find('tbody > tr > :nth-child(1) > .q-icon');
+            cy.dataCy('handleSplitDialog').find(findTr(2)).should('have.class', 'link');
+            cy.dataCy('handleSplitDialog')
+                .find(`${findTr(2)}.link > div > span`)
+                .should('have.text', `${ticketId} `);
+            cy.dataCy('handleSplitDialog').find(findTr(3)).should('have.text', '10');
         });
     });
     describe('Item proposal', () => {
         beforeEach(() => {
             cy.get(firstRow).click();
-
-            cy.get('[data-cy="itemProposal"]').click();
+            cy.dataCy('itemProposal').click();
         });
         describe('Replace item if', () => {
-            it('Quantity is less than available', () => {
+            it.skip('Quantity is less than available', () => {
                 cy.get(':nth-child(1) > .text-right  > .q-btn').click();
             });
 
@@ -175,18 +158,19 @@ describe('Ticket Lack detail', () => {
                 ).should('not.be.visible');
 
                 cy.get('[data-col-field="longName"] .link').first().click();
+
                 cy.dataCy('itemDescriptorProxy').should('be.visible');
 
-                cy.get(
-                    ':nth-child(2) > [data-col-field="longName"] > .no-padding > .q-td > .middle',
-                ).should('have.class', 'proposal-primary');
-                cy.get(
-                    ':nth-child(2) > [data-col-field="tag5"] > .no-padding > .match',
-                ).should('have.class', 'match');
-                cy.get(
-                    ':nth-child(2) > [data-col-field="tag6"] > .no-padding > .match',
-                ).should('have.class', 'match');
-                cy.get(':nth-child(2) > [data-col-field="tag7"]').click();
+                cy.colField('longName', 2)
+                    .find('.no-padding > .q-td > .middle')
+                    .should('have.class', 'proposal-primary');
+                cy.colField('tag5', 2)
+                    .find('.no-padding > .match')
+                    .should('have.class', 'match');
+                cy.colField('tag6', 2)
+                    .find('.no-padding > .match')
+                    .should('have.class', 'match');
+                cy.colField('tag7', 2).click();
             });
         });
     });
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index aa4a1219e..a860dbf00 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -384,3 +384,11 @@ Cypress.Commands.add('clickButtonWithIcon', (iconClass) => {
 Cypress.Commands.add('clickButtonWithText', (buttonText) => {
     cy.get('.q-btn').contains(buttonText).click();
 });
+
+Cypress.Commands.add('colField', (name, index = null) => {
+    if (index) {
+        cy.get(`:nth-child(${index}) > [data-col-field="${name}"]`);
+    } else {
+        cy.get(`[data-col-field="${name}"]`);
+    }
+});
-- 
2.40.1