From f230fcbca2a1ca7cc3e0ea145f5533468afa438f Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 17 Oct 2023 17:32:47 +0200
Subject: [PATCH 01/18] refs #6157 claimAction

---
 src/components/common/VnSelectFilter.vue |   2 +-
 src/components/ui/CardDescriptor.vue     |  13 +-
 src/i18n/en/index.js                     |   1 +
 src/i18n/es/index.js                     |   1 +
 src/pages/Claim/Card/ClaimAction.vue     | 454 +++++++++++++++++++++++
 src/pages/Claim/Card/ClaimCard.vue       |  59 ++-
 src/pages/Ticket/TicketList.vue          |   2 +-
 src/router/modules/claim.js              |  10 +
 8 files changed, 526 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/Claim/Card/ClaimAction.vue

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 55395f260..d3c073c6e 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -4,7 +4,7 @@ const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
     modelValue: {
-        type: [String, Number],
+        type: [String, Number, Object],
         default: null,
     },
     options: {
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f63b75de6..2dd531f20 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -2,6 +2,7 @@
 import { onMounted, useSlots, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
+import { useArrayData } from 'src/composables/useArrayData';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
@@ -26,18 +27,21 @@ const $props = defineProps({
         default: 0,
     },
 });
-
+const arrayData = useArrayData('claimData');
+const store = arrayData.store;
+console.log('eee', store.data);
 const slots = useSlots();
 const { t } = useI18n();
-const entity = ref();
+const entity = ref(null);
+let lastUrl = ref(null);
 
 onMounted(async () => {
-    await fetch();
+    entity.value = await store.data;
 });
 
 const emit = defineEmits(['onFetch']);
-
 async function fetch() {
+    lastUrl.value = $props.url;
     const params = {};
 
     if ($props.filter) params.filter = JSON.stringify($props.filter);
@@ -49,6 +53,7 @@ async function fetch() {
 }
 
 watch($props, async () => {
+    if (lastUrl.value == $props.url) return;
     entity.value = null;
     await fetch();
 });
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index cfd20716b..e6d071c73 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -269,6 +269,7 @@ export default {
             development: 'Development',
             log: 'Audit logs',
             notes: 'Notes',
+            action: 'Action',
         },
         list: {
             customer: 'Customer',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 532c1bb3b..c171d6456 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -268,6 +268,7 @@ export default {
             photos: 'Fotos',
             log: 'Registros de auditoría',
             notes: 'Notas',
+            action: 'Action',
         },
         list: {
             customer: 'Cliente',
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
new file mode 100644
index 000000000..77f1dab40
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -0,0 +1,454 @@
+<script setup>
+import { ref, computed, watchEffect, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import axios from 'axios';
+import { useStateStore } from 'src/stores/useStateStore';
+import { toDate, toPercentage, toCurrency } from 'filters/index';
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = computed(() => useStateStore());
+const claimId = route.params.id;
+const dialog = ref(false);
+const dialogOption = ref(null);
+const resolvedStateId = ref(null);
+const claimActionsForm = ref();
+const rows = ref([]);
+const selectedRows = ref([]);
+const destinationTypes = ref([]);
+const destinations = ref([]);
+const totalClaimed = ref(null);
+const responsibility = ref(5); // pending to get from ClaimDescriptor
+const manaCharger = ref(false); // pending to get from ClaimDescriptor
+const claimData = useArrayData('claimData');
+// ClaimEnds/filter?filter={ claimFk: route.param.id}
+// for update responsability and mana /Claims/id/updateClaimAction
+
+// onMounted(() => (stateStore.value.rightDrawer = true));
+// onUnmounted(() => (stateStore.value.rightDrawer = false));
+
+const columns = computed(() => [
+    {
+        name: 'Id',
+        label: t('Id'),
+        field: (row) => row.itemFk,
+    },
+    {
+        name: 'ticket',
+        label: t('Ticket'),
+        field: (row) => row.ticketFk,
+        align: 'center',
+    },
+    {
+        name: 'destination',
+        label: t('Destination'),
+        field: (row) => getDestination(row.claimDestinationFk),
+        align: 'left',
+    },
+    {
+        name: 'Landed',
+        label: t('Landed'),
+        field: (row) => toDate(row.landed),
+    },
+    {
+        name: 'quantity',
+        label: t('Quantity'),
+        field: (row) => row.quantity,
+    },
+    {
+        name: 'concept',
+        label: t('Description'),
+        field: (row) => row.concept,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('Price'),
+        field: (row) => row.price,
+        format: (value) => value,
+        align: 'center',
+    },
+    {
+        name: 'discount',
+        label: t('Discount'),
+        field: (row) => row.discount,
+        format: (value) => toPercentage(value / 100),
+        align: 'left',
+    },
+    {
+        name: 'total',
+        label: t('Total'),
+        field: (row) => row.total,
+        format: (value) => value,
+        align: 'center',
+    },
+    {
+        name: 'delete',
+    },
+]);
+console.log(claimData.store.data);
+watchEffect(() => {
+    if (rows.value.length) {
+        destinations.value = rows.value.map((row) =>
+            getDestination(row.claimDestinationFk)
+        );
+        totalClaimed.value = rows.value.reduce((total, row) => total + row.total, 0);
+    }
+});
+
+function getDestination(destinationId) {
+    return destinationTypes.value.find((type) => type.id == destinationId);
+}
+
+async function updateDestination(claimDestinationFk, row) {
+    if (claimDestinationFk) {
+        await axios.post('Claims/updateClaimDestination', {
+            claimDestinationFk,
+            rows: [row],
+        });
+    }
+}
+async function deleteSale(sale) {
+    await axios.post(`ClaimEnds/deleteClamedSales`, { sales: [sale] });
+    claimActionsForm.value.reload();
+}
+
+async function updateDestinations(claimDestinationFk) {
+    if (claimDestinationFk) {
+        await axios.post('Claims/updateClaimDestination', {
+            claimDestinationFk,
+            rows: [...selectedRows.value],
+        });
+        claimActionsForm.value.reload();
+    }
+}
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
+        <QScrollArea class="fit text-grey-8 q-mt-lg">
+            <div class="totalClaim q-mb-md">
+                {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
+            </div>
+            <QCard class="q-mb-md q-pa-sm">
+                <QItem class="justify-between">
+                    <QItemLabel class="slider-container">
+                        <p class="text-primary">
+                            {{ t('claim.summary.actions') }}
+                        </p>
+                        <QSlider
+                            class="responsability"
+                            v-model="responsibility"
+                            label
+                            :label-value="t('claim.summary.responsibility')"
+                            label-always
+                            color="primary"
+                            markers
+                            :marker-labels="[
+                                { value: 1, label: t('claim.summary.company') },
+                                { value: 5, label: t('claim.summary.person') },
+                            ]"
+                            :min="1"
+                            :max="5"
+                        />
+                    </QItemLabel>
+                </QItem>
+            </QCard>
+            <QItemLabel class="mana q-mb-md">
+                <QCheckbox v-model="manaCharger" />
+                <span>{{ t('mana') }}</span>
+            </QItemLabel>
+        </QScrollArea>
+    </QDrawer>
+    <FetchData
+        url="ClaimDestinations"
+        auto-load
+        @on-fetch="(data) => (destinationTypes = data)"
+    />
+    <FetchData
+        :url="`ClaimStates/findOne`"
+        :where="{ code: 'resolved' }"
+        auto-load
+        @on-fetch="(data) => (resolvedStateId = data)"
+    />
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <QToolbar>
+            <QBtn
+                color="primary"
+                text-color="white"
+                class="q-mx-sm"
+                :unelevated="true"
+                :disable="!selectedRows.length"
+                :label="t('Change destination')"
+                @click="dialog = !dialog"
+            />
+        </QToolbar>
+    </Teleport>
+
+    <div class="claim-action">
+        <CrudModel
+            data-key="ClaimEnds"
+            url="ClaimEnds/filter"
+            save-url="ClaimEnds/crud"
+            ref="claimActionsForm"
+            v-model:selected="selectedRows"
+            :filter="{ where: { claimFk: claimId } }"
+            :default-remove="true"
+            :default-save="false"
+            :default-reset="false"
+            @on-fetch="(data) => (rows = data)"
+            auto-load
+        >
+            <template #body>
+                <QTable
+                    :columns="columns"
+                    :rows="rows"
+                    :dense="$q.screen.lt.md"
+                    :pagination="{ rowsPerPage: 0 }"
+                    row-key="id"
+                    selection="multiple"
+                    v-model:selected="selectedRows"
+                    hide-pagination
+                    :grid="$q.screen.lt.md"
+                >
+                    <template #body-cell-ticket="{ value }">
+                        <QTd align="center">
+                            <span class="link">
+                                {{ value }}
+                                <TicketDescriptorProxy :id="value" />
+                            </span>
+                        </QTd>
+                    </template>
+                    <template #body-cell-destination="{ rowIndex }">
+                        <QTd>
+                            <VnSelectFilter
+                                v-model="destinations[rowIndex]"
+                                :options="destinationTypes"
+                                option-value="id"
+                                option-label="description"
+                                @update:model-value="
+                                    (value) => updateDestination(value, rows[rowIndex])
+                                "
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-price="{ value }">
+                        <QTd align="center">
+                            {{ toCurrency(value) }}
+                        </QTd>
+                    </template>
+                    <template #body-cell-total="{ value }">
+                        <QTd align="center">
+                            {{ toCurrency(value) }}
+                        </QTd>
+                    </template>
+                    <template #body-cell-delete="{ rowIndex }">
+                        <QTd>
+                            <QBtn
+                                icon="delete"
+                                color="primary"
+                                padding="xs"
+                                round
+                                flat
+                                @click="deleteSale(rows[rowIndex])"
+                            >
+                                <QTooltip>
+                                    {{ t('Remove line') }}
+                                </QTooltip>
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <!-- View for grid mode -->
+                    <template #item="props">
+                        <div class="q-mb-md col-12 grid-style-transition">
+                            <QCard>
+                                <QCardSection class="row justify-between">
+                                    <QCheckbox v-model="props.selected" />
+                                    <QBtn color="primary" icon="delete" flat round />
+                                </QCardSection>
+
+                                <QSeparator inset />
+                                <QList dense>
+                                    <QItem
+                                        v-for="column of props.cols"
+                                        :key="column.name"
+                                    >
+                                        <QItemSection>
+                                            <QItemLabel caption>
+                                                {{ column.label }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                        <QItemSection side>
+                                            <QItemLabel
+                                                v-if="column.name === 'destination'"
+                                            >
+                                                {{ column.value.description }}
+                                            </QItemLabel>
+                                            <QItemLabel v-else>
+                                                {{ column.value }}
+                                            </QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QCard>
+                        </div>
+                    </template>
+                </QTable>
+            </template>
+            <template #moreActions>
+                <QBtn
+                    color="primary"
+                    text-color="white"
+                    class="q-mx-sm"
+                    :unelevated="true"
+                    :label="t('Regularize')"
+                />
+                <!--disabled="(ClaimDescriptor)claimStateFk == resolvedStateId"-->
+                <QBtn
+                    color="primary"
+                    text-color="white"
+                    class="q-mx-sm"
+                    :unelevated="true"
+                    :disable="!selectedRows.length"
+                    :label="t('Change destination')"
+                    @click="dialog = !dialog"
+                />
+                <QBtn
+                    color="primary"
+                    text-color="white"
+                    class="q-mx-sm"
+                    :unelevated="true"
+                    :label="t('Import claim')"
+                />
+                <!--disabled="(ClaimDescriptor)claimStateFk == resolvedStateId"-->
+            </template>
+        </CrudModel>
+        <QDialog v-model="dialog">
+            <QCard>
+                <QCardSection>
+                    <QItem class="q-pa-none">
+                        <span class="q-dialog__title text-white">
+                            {{ t('dialog title') }}
+                        </span>
+                        <QBtn icon="close" flat round dense v-close-popup />
+                    </QItem>
+                </QCardSection>
+                <QCardSection>
+                    <VnSelectFilter
+                        v-model="dialogOption"
+                        :options="destinationTypes"
+                        option-label="description"
+                        option-value="id"
+                    />
+                </QCardSection>
+                <QCardActions class="justify-end q-mr-sm">
+                    <QBtn
+                        flat
+                        :label="t('globals.close')"
+                        color="primary"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :disable="!dialogOption"
+                        :label="t('globals.save')"
+                        color="primary"
+                        v-close-popup
+                        @click="updateDestinations(dialogOption)"
+                    />
+                </QCardActions>
+            </QCard>
+        </QDialog>
+    </div>
+</template>
+<style lang="scss">
+.claim-action {
+    .q-table {
+        .q-select .q-field__input {
+            display: none !important;
+        }
+    }
+}
+</style>
+<style lang="scss" scoped>
+.slider-container {
+    width: 50%;
+}
+@media (max-width: $breakpoint-xs) {
+    .slider-container {
+        width: 90%;
+    }
+}
+.q-table {
+    .q-item {
+        min-height: min-content;
+        height: 0;
+    }
+}
+.q-dialog {
+    .q-btn {
+        height: min-content;
+    }
+}
+.totalClaim {
+    border: 3px solid black;
+    color: white;
+    padding: 10px;
+    margin: 5px;
+}
+.responsability {
+    max-width: 100%;
+    margin-left: 40px;
+}
+
+.mana {
+    color: white;
+    float: inline-start;
+}
+
+.qdrawer {
+}
+</style>
+<i18n>
+en:
+    mana: Is paid with mana
+    dialog title: Change destination to all selected rows
+es:
+    mana: Cargado al maná
+    Delivered: Descripción
+    Quantity: Cantidad
+    Claimed: Rec
+    Description: Description
+    Price: Precio
+    Discount: Dto.
+    Destination: Destino
+    Landed: F.entrega
+    Remove line: Eliminar línea
+    Total claimed: Total reclamado
+    Regularize: Regularizar
+    Change destination: Cambiar destino
+    Import claim: Importar reclamación
+    dialog title: Cambiar destino en todas las filas seleccionadas
+    Remove: Eliminar
+</i18n>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 03b9889f0..40a3bcd7a 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,17 +1,58 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
+import { onMounted, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'src/composables/useArrayData';
 import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import LeftMenu from 'components/LeftMenu.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 
-import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
+const filter = {
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                include: { relation: 'salesPersonUser' },
+            },
+        },
+        {
+            relation: 'claimState',
+        },
+        {
+            relation: 'ticket',
+            scope: {
+                include: [
+                    { relation: 'zone' },
+                    {
+                        relation: 'address',
+                        scope: {
+                            include: { relation: 'province' },
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'worker',
+            scope: {
+                include: { relation: 'user' },
+            },
+        },
+    ],
+};
+const arrayData = useArrayData('claimData', {
+    url: `Claims/${route.params.id}`,
+    filter,
+});
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -19,13 +60,11 @@ const $props = defineProps({
         default: null,
     },
 });
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-
 let salixUrl;
+
 onMounted(async () => {
     salixUrl = await getUrl(`claim/${entityId.value}`);
+    await arrayData.fetch({ append: false });
 });
 </script>
 <template>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index b9f0f57e7..5826423d1 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -68,7 +68,7 @@ function viewSummary(id) {
             </div>
         </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256">
         <QScrollArea class="fit text-grey-8">
             <TicketFilter data-key="TicketList" />
         </QScrollArea>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 9df1dd64e..1dfd75cff 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -19,6 +19,7 @@ export default {
             'ClaimLog',
             'ClaimNotes',
             'ClaimDevelopment',
+            'ClaimAction',
         ],
     },
     children: [
@@ -130,6 +131,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
                 },
+                {
+                    name: 'ClaimAction',
+                    path: 'action',
+                    meta: {
+                        title: 'action',
+                        icon: 'vn:actions',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
+                },
             ],
         },
     ],

From 841ed5d81a39747a5b3e702faea8f06b56abbaf0 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 19 Oct 2023 14:29:38 +0200
Subject: [PATCH 02/18] refs #6157 change hide, descriptor, development

---
 src/components/common/VnSelectFilter.vue  |  1 -
 src/components/ui/CardDescriptor.vue      |  8 +++-----
 src/pages/Claim/Card/ClaimAction.vue      | 22 ++++++++++++++--------
 src/pages/Claim/Card/ClaimDevelopment.vue |  2 ++
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index d3c073c6e..0ceabc87d 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -81,7 +81,6 @@ const value = computed({
         map-options
         use-input
         @filter="filterHandler"
-        hide-selected
         fill-input
         ref="vnSelectRef"
     >
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 2dd531f20..8976795fb 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -2,7 +2,6 @@
 import { onMounted, useSlots, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
-import { useArrayData } from 'src/composables/useArrayData';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
@@ -27,19 +26,18 @@ const $props = defineProps({
         default: 0,
     },
 });
-const arrayData = useArrayData('claimData');
-const store = arrayData.store;
-console.log('eee', store.data);
+
 const slots = useSlots();
 const { t } = useI18n();
 const entity = ref(null);
 let lastUrl = ref(null);
 
 onMounted(async () => {
-    entity.value = await store.data;
+    await fetch();
 });
 
 const emit = defineEmits(['onFetch']);
+
 async function fetch() {
     lastUrl.value = $props.url;
     const params = {};
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 77f1dab40..f2031cf2e 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -92,7 +92,7 @@ const columns = computed(() => [
         name: 'delete',
     },
 ]);
-console.log(claimData.store.data);
+
 watchEffect(() => {
     if (rows.value.length) {
         destinations.value = rows.value.map((row) =>
@@ -103,6 +103,7 @@ watchEffect(() => {
 });
 
 function getDestination(destinationId) {
+    console.log(destinationTypes.value.find((type) => type.id == destinationId));
     return destinationTypes.value.find((type) => type.id == destinationId);
 }
 
@@ -205,6 +206,17 @@ async function updateDestinations(claimDestinationFk) {
                 @click="dialog = !dialog"
             />
         </QToolbar>
+        <!-- <QPageSticky position="top-right" :offset="[25, 25]">
+            <QBtn
+                color="primary"
+                text-color="white"
+                class="q-mx-sm"
+                :unelevated="true"
+                :disable="!selectedRows.length"
+                :label="t('Change destination')"
+                @click="dialog = !dialog"
+            />
+        </QPageSticky> -->
     </Teleport>
 
     <div class="claim-action">
@@ -248,9 +260,6 @@ async function updateDestinations(claimDestinationFk) {
                                 :options="destinationTypes"
                                 option-value="id"
                                 option-label="description"
-                                @update:model-value="
-                                    (value) => updateDestination(value, rows[rowIndex])
-                                "
                             />
                         </QTd>
                     </template>
@@ -317,11 +326,10 @@ async function updateDestinations(claimDestinationFk) {
                     </template>
                 </QTable>
             </template>
-            <template #moreActions>
+            <template #moreBeforeActions>
                 <QBtn
                     color="primary"
                     text-color="white"
-                    class="q-mx-sm"
                     :unelevated="true"
                     :label="t('Regularize')"
                 />
@@ -329,7 +337,6 @@ async function updateDestinations(claimDestinationFk) {
                 <QBtn
                     color="primary"
                     text-color="white"
-                    class="q-mx-sm"
                     :unelevated="true"
                     :disable="!selectedRows.length"
                     :label="t('Change destination')"
@@ -338,7 +345,6 @@ async function updateDestinations(claimDestinationFk) {
                 <QBtn
                     color="primary"
                     text-color="white"
-                    class="q-mx-sm"
                     :unelevated="true"
                     :label="t('Import claim')"
                 />
diff --git a/src/pages/Claim/Card/ClaimDevelopment.vue b/src/pages/Claim/Card/ClaimDevelopment.vue
index 0c83bdadd..36f124142 100644
--- a/src/pages/Claim/Card/ClaimDevelopment.vue
+++ b/src/pages/Claim/Card/ClaimDevelopment.vue
@@ -175,6 +175,7 @@ function goToAction() {
                             :option-label="col.optionLabel"
                             :autofocus="col.tabIndex == 1"
                             input-debounce="0"
+                            hide-selected
                         >
                             <template #option="scope" v-if="col.name == 'worker'">
                                 <QItem v-bind="scope.itemProps">
@@ -213,6 +214,7 @@ function goToAction() {
                                             dense
                                             input-debounce="0"
                                             :autofocus="col.tabIndex == 1"
+                                            hide-selected
                                         />
                                     </QItemSection>
                                 </QItem>

From cea811903edcfd5d1bb2be04295e015059d69d99 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 19 Oct 2023 17:07:06 +0200
Subject: [PATCH 03/18] refs #6157 icon mobile

---
 src/pages/Claim/Card/ClaimAction.vue | 43 ++++++++++------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index f2031cf2e..32bcb2f2c 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -10,6 +10,7 @@ import FetchData from 'src/components/FetchData.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import { tMobile } from 'src/composables/tMobile';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -160,7 +161,7 @@ async function updateDestinations(claimDestinationFk) {
                             {{ t('claim.summary.actions') }}
                         </p>
                         <QSlider
-                            class="responsability"
+                            class="responsability { 'background-color:primary': quasar.platform.is.mobile }"
                             v-model="responsibility"
                             label
                             :label-value="t('claim.summary.responsibility')"
@@ -194,30 +195,7 @@ async function updateDestinations(claimDestinationFk) {
         auto-load
         @on-fetch="(data) => (resolvedStateId = data)"
     />
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar>
-            <QBtn
-                color="primary"
-                text-color="white"
-                class="q-mx-sm"
-                :unelevated="true"
-                :disable="!selectedRows.length"
-                :label="t('Change destination')"
-                @click="dialog = !dialog"
-            />
-        </QToolbar>
-        <!-- <QPageSticky position="top-right" :offset="[25, 25]">
-            <QBtn
-                color="primary"
-                text-color="white"
-                class="q-mx-sm"
-                :unelevated="true"
-                :disable="!selectedRows.length"
-                :label="t('Change destination')"
-                @click="dialog = !dialog"
-            />
-        </QPageSticky> -->
-    </Teleport>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
 
     <div class="claim-action">
         <CrudModel
@@ -260,6 +238,9 @@ async function updateDestinations(claimDestinationFk) {
                                 :options="destinationTypes"
                                 option-value="id"
                                 option-label="description"
+                                @update:model-value="
+                                    (value) => updateDestination(value, rows[rowIndex])
+                                "
                             />
                         </QTd>
                     </template>
@@ -331,7 +312,9 @@ async function updateDestinations(claimDestinationFk) {
                     color="primary"
                     text-color="white"
                     :unelevated="true"
-                    :label="t('Regularize')"
+                    :label="tMobile('Regularize')"
+                    :title="t('Regularize')"
+                    icon="check"
                 />
                 <!--disabled="(ClaimDescriptor)claimStateFk == resolvedStateId"-->
                 <QBtn
@@ -339,14 +322,18 @@ async function updateDestinations(claimDestinationFk) {
                     text-color="white"
                     :unelevated="true"
                     :disable="!selectedRows.length"
-                    :label="t('Change destination')"
+                    :label="tMobile('Change destination')"
+                    :title="t('Change destination')"
+                    icon="swap_horiz"
                     @click="dialog = !dialog"
                 />
                 <QBtn
                     color="primary"
                     text-color="white"
                     :unelevated="true"
-                    :label="t('Import claim')"
+                    :label="tMobile('Import claim')"
+                    :title="t('Import claim')"
+                    icon="Upload"
                 />
                 <!--disabled="(ClaimDescriptor)claimStateFk == resolvedStateId"-->
             </template>

From dfa29875d588045a53080c9db31112e75d79fa82 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Sun, 22 Oct 2023 07:19:33 +0200
Subject: [PATCH 04/18] refs #6157 store

---
 src/components/ui/CardDescriptor.vue | 17 +++++++++++++----
 src/pages/Claim/Card/ClaimCard.vue   |  1 +
 src/stores/useArrayDataStore.js      |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 8976795fb..82e0193d2 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,10 +1,12 @@
 <script setup>
-import { onMounted, useSlots, ref, watch } from 'vue';
+import { onMounted, useSlots, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
+import { useArrayData } from 'src/composables/useArrayData';
 
 const $props = defineProps({
+    dataKey: { type: String, default: null },
     url: {
         type: String,
         default: '',
@@ -26,14 +28,17 @@ const $props = defineProps({
         default: 0,
     },
 });
-
+const arrayData = useArrayData('claimData');
+console.log('arraydata en descriptor', arrayData.store.data);
 const slots = useSlots();
 const { t } = useI18n();
 const entity = ref(null);
 let lastUrl = ref(null);
+entity.value = arrayData.store.data;
 
+///
 onMounted(async () => {
-    await fetch();
+    //await fetch();
 });
 
 const emit = defineEmits(['onFetch']);
@@ -53,7 +58,11 @@ async function fetch() {
 watch($props, async () => {
     if (lastUrl.value == $props.url) return;
     entity.value = null;
-    await fetch();
+    /* await fetch(); */
+});
+
+watchEffect(() => {
+    entity.value = arrayData.store.data;
 });
 </script>
 
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 40a3bcd7a..e205e9801 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -65,6 +65,7 @@ let salixUrl;
 onMounted(async () => {
     salixUrl = await getUrl(`claim/${entityId.value}`);
     await arrayData.fetch({ append: false });
+    console.log('store', arrayData.store.data);
 });
 </script>
 <template>
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index f9a32a6fa..a17515592 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -18,7 +18,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             skip: 0,
             order: '',
             data: ref(),
-            isLoading: false
+            isLoading: false,
         };
     }
 

From 8a6a3083a3a969acfac8d3a673502ce145f05e06 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 25 Oct 2023 14:06:15 +0200
Subject: [PATCH 05/18] refs #6157 cardDescriptor

---
 src/components/ui/CardDescriptor.vue       | 24 ++++++++++++++--------
 src/pages/Claim/Card/ClaimCard.vue         | 12 +++++++----
 src/pages/Worker/Card/WorkerDescriptor.vue | 12 ++++++-----
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 82e0193d2..5356c964b 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, useSlots, ref, watch, watchEffect } from 'vue';
+import { computed, useSlots, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
@@ -25,7 +25,7 @@ const $props = defineProps({
     },
     subtitle: {
         type: Number,
-        default: 0,
+        default: null,
     },
 });
 const arrayData = useArrayData('claimData');
@@ -34,16 +34,15 @@ const slots = useSlots();
 const { t } = useI18n();
 const entity = ref(null);
 let lastUrl = ref(null);
-entity.value = arrayData.store.data;
-
-///
-onMounted(async () => {
-    //await fetch();
+entity.value = computed(() => {
+    console.log('COMPUTED ', arrayData.store.data.id);
+    return arrayData.store.data;
 });
 
 const emit = defineEmits(['onFetch']);
 
 async function fetch() {
+    console.log('MY FETCH');
     lastUrl.value = $props.url;
     const params = {};
 
@@ -56,17 +55,26 @@ async function fetch() {
 }
 
 watch($props, async () => {
+    console.log(useArrayData('claimData'));
     if (lastUrl.value == $props.url) return;
     entity.value = null;
-    /* await fetch(); */
+    // await fetch();
 });
 
 watchEffect(() => {
+    console.log(arrayData.store.data);
     entity.value = arrayData.store.data;
 });
+
+async function myFn() {
+    const arrayData = useArrayData('claimData');
+    const store = arrayData.store;
+    console.log('myFn', store);
+}
 </script>
 
 <template>
+    <QBtn @click="myFn()">a</QBtn>
     <div class="descriptor">
         <template v-if="entity">
             <div class="header bg-primary q-pa-sm">
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index e205e9801..d29c28970 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,10 +1,9 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { onMounted, computed, watch, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'src/composables/useArrayData';
-import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
@@ -63,9 +62,14 @@ const $props = defineProps({
 let salixUrl;
 
 onMounted(async () => {
-    salixUrl = await getUrl(`claim/${entityId.value}`);
     await arrayData.fetch({ append: false });
-    console.log('store', arrayData.store.data);
+    watch(
+        () => route.params.id,
+        async (id) => {
+            arrayData.store.url = `Claims/${id}`;
+            await arrayData.fetch({ append: false });
+        }
+    );
 });
 </script>
 <template>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index ba64a5abb..2faa714ef 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -47,15 +47,17 @@ const filter = {
     ],
 };
 
-const sip = computed(() => worker.value.sip && worker.value.sip.extension);
+const sip = computed(() => worker.value?.sip && worker.value.sip.extension);
 
 function getWorkerAvatar() {
     const token = getToken();
     return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
 }
 const data = ref(useCardDescription());
-const setData = (entity) =>
-    (data.value = useCardDescription(entity.user.nickname, entity.id));
+const setData = (entity) => {
+    console.log('entity ASDASD', entity);
+    data.value = useCardDescription(entity.user.nickname, entity.id);
+};
 </script>
 <template>
     <CardDescriptor
@@ -90,8 +92,8 @@ const setData = (entity) =>
             </QImg>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('worker.card.name')" :value="entity.user.nickname" />
-            <VnLv :label="t('worker.card.email')" :value="entity.user.email"> </VnLv>
+            <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
+            <VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
             <VnLv
                 :label="t('worker.list.department')"
                 :value="entity.department ? entity.department.department.name : null"

From abb1b3f7c137d952ca566811dd9eefb76a35d3c1 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 30 Oct 2023 11:28:48 +0100
Subject: [PATCH 06/18] refs #6157 card

---
 src/components/ui/CardDescriptor.vue       | 173 +++++++++++++++------
 src/composables/useArrayData.js            |   7 +-
 src/pages/Claim/Card/ClaimAction.vue       |   1 -
 src/pages/Claim/Card/ClaimDescriptor.vue   |  11 +-
 src/pages/Worker/Card/WorkerDescriptor.vue |   3 +-
 5 files changed, 137 insertions(+), 58 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 5356c964b..5cab39082 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,9 +1,11 @@
 <script setup>
-import { computed, useSlots, ref, watch, watchEffect } from 'vue';
+import { computed, useSlots, ref, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import { table } from 'quasar/dist/icon-set/material-icons.umd.prod';
+import { useArrayDataStore } from 'stores/useArrayDataStore';
 
 const $props = defineProps({
     dataKey: { type: String, default: null },
@@ -28,55 +30,119 @@ const $props = defineProps({
         default: null,
     },
 });
-const arrayData = useArrayData('claimData');
-console.log('arraydata en descriptor', arrayData.store.data);
+
+// watch(
+//     () => $props,
+//     (props) => {
+//         fetch(props.url);
+//     },
+//     { deep: true }
+// );
+
+// const emit = defineEmits(['onFetch']);
+// const arrayData = computed(() => {
+//     const currentArrayData = useArrayData($props.dataKey);
+//     const newArrayData = useArrayData($props.dataKey, {
+//         url: $props.url,
+//         filter: $props.filter,
+//     });
+//     console.log(currentArrayData.store.url, currentArrayData?.store?.url != $props.url);
+//     if (currentArrayData?.store?.url != $props.url) newArrayData.fetch({ append: false });
+//     return newArrayData;
+// });
+
+// watch(
+//     () => arrayData,
+//     (arrayData) => {
+//         console.log('watch CHANGE??', arrayData.value.store.data);
+//         entity.value = arrayData.value.store.data;
+//         emit('onFetch', arrayData.value.store.data);
+//     },
+//     { deep: true }
+// );
+
+// const slots = useSlots();
+// const { t } = useI18n();
+// let lastUrl = ref(null);
+// const entity = ref();
+
+// async function fetch(url) {
+//     console.log('FETCH??', arrayData.value.store.url, url);
+//     if (arrayData.value.store.url == url) return;
+//     useArrayData($props.dataKey, {
+//         url: url ?? $props.url,
+//         filter: $props.filter,
+//     });
+//     await arrayData.value.fetch({ append: false });
+//     console.log('FETCH?? 2', url, $props.url);
+//     // if (arrayData.value.store.data) emit('onFetch', arrayData.value.store.data);
+// }
+
+// watch($props, async () => {
+//     if (lastUrl.value == $props.url) return;
+//     entity.value = arrayData.value.store.data;
+//     // await fetch();
+// });
+
+// onMounted(async () => {
+//     console.log('onMounted');
+//     fetch($props.url);
+// });
+
+/*
+
+ArrayData es null. la url tb
+
+Watch → arrayData
+url diferent a la nostra fetch
+
+
+
+
+
+
+*/
+
+// onMounted(async () => {
+//     console.log('onMounted');
+//     fetch($props.url);
+// });
 const slots = useSlots();
 const { t } = useI18n();
-const entity = ref(null);
-let lastUrl = ref(null);
-entity.value = computed(() => {
-    console.log('COMPUTED ', arrayData.store.data.id);
-    return arrayData.store.data;
-});
-
 const emit = defineEmits(['onFetch']);
+const arrayDataStore = useArrayDataStore();
 
-async function fetch() {
-    console.log('MY FETCH');
-    lastUrl.value = $props.url;
-    const params = {};
+const arrayData = computed(() => {
+    const current = arrayDataStore.get($props.dataKey);
+    const currentArrayData = useArrayData($props.dataKey);
+    const newArrayData = useArrayData($props.dataKey, {
+        url: $props.url,
+        filter: $props.filter,
+    });
+    console.log(
+        'URLS ',
+        currentArrayData.store.url,
+        $props.dataKey,
+        $props.url,
+        current?.url
+    );
+    if (current?.url != $props.url) newArrayData.fetch({ append: false });
+    if (newArrayData.store.data) emit('onFetch', newArrayData.store.data);
 
-    if ($props.filter) params.filter = JSON.stringify($props.filter);
-
-    const { data } = await axios.get($props.url, { params });
-    entity.value = data;
-
-    emit('onFetch', data);
-}
-
-watch($props, async () => {
-    console.log(useArrayData('claimData'));
-    if (lastUrl.value == $props.url) return;
-    entity.value = null;
-    // await fetch();
+    return newArrayData;
 });
 
-watchEffect(() => {
-    console.log(arrayData.store.data);
-    entity.value = arrayData.store.data;
-});
-
-async function myFn() {
-    const arrayData = useArrayData('claimData');
-    const store = arrayData.store;
-    console.log('myFn', store);
-}
+watch(
+    () => arrayData,
+    (arrayData) => {
+        console.log('watch CHANGE??', arrayDataStore.get($props.dataKey));
+    },
+    { deep: true }
+);
 </script>
-
 <template>
-    <QBtn @click="myFn()">a</QBtn>
     <div class="descriptor">
-        <template v-if="entity">
+        <template v-if="arrayData.store.data">
             <div class="header bg-primary q-pa-sm">
                 <RouterLink :to="{ name: `${module}List` }">
                     <QBtn
@@ -93,7 +159,12 @@ async function myFn() {
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
+                <RouterLink
+                    :to="{
+                        name: `${module}Summary`,
+                        params: { id: arrayData.store.data.id },
+                    }"
+                >
                     <QBtn
                         round
                         flat
@@ -136,33 +207,37 @@ async function myFn() {
                             <span v-if="$props.title" :title="$props.title">
                                 {{ $props.title }}
                             </span>
-                            <slot v-else name="description" :entity="entity">
-                                <span :title="entity.name">
-                                    {{ entity.name }}
+                            <slot
+                                v-else
+                                name="description"
+                                :entity="arrayData.store.data"
+                            >
+                                <span :title="arrayData.store.data.name">
+                                    {{ arrayData.store.data.name }}
                                 </span>
                             </slot>
                         </div>
                     </QItemLabel>
                     <QItem dense>
                         <QItemLabel class="subtitle" caption>
-                            #{{ $props.subtitle ?? entity.id }}
+                            #{{ $props.subtitle ?? arrayData.store.data.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>
                 <div class="list-box q-mt-xs">
-                    <slot name="body" :entity="entity" />
+                    <slot name="body" :entity="arrayData.store.data" />
                 </div>
             </div>
             <div class="icons">
-                <slot name="icons" :entity="entity" />
+                <slot name="icons" :entity="arrayData.store.data" />
             </div>
             <div class="actions">
-                <slot name="actions" :entity="entity" />
+                <slot name="actions" :entity="arrayData.store.data" />
             </div>
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!arrayData.store.data" />
     </div>
 </template>
 
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 9aff0eaa8..0eb3c6cdc 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -7,7 +7,7 @@ const arrayDataStore = useArrayDataStore();
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
-
+    console.log('CALLED WITH KEY → ', key, userOptions);
     if (!arrayDataStore.get(key)) {
         arrayDataStore.set(key);
     }
@@ -40,7 +40,7 @@ export function useArrayData(key, userOptions) {
             'userParams',
             'userFilter',
         ];
-        if (typeof userOptions === 'object') {
+        if (userOptions && typeof userOptions === 'object') {
             for (const option in userOptions) {
                 const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
@@ -74,6 +74,7 @@ export function useArrayData(key, userOptions) {
         Object.assign(params, store.userParams);
 
         store.isLoading = true;
+        console.log('ARRAY FETCH', store.url);
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
@@ -147,7 +148,7 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        router.replace({
+        router?.replace({
             path: route.path,
             query: query,
         });
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 32bcb2f2c..d639c6367 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -104,7 +104,6 @@ watchEffect(() => {
 });
 
 function getDestination(destinationId) {
-    console.log(destinationTypes.value.find((type) => type.id == destinationId));
     return destinationTypes.value.find((type) => type.id == destinationId);
 }
 
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index af7e84d38..0fd7184ec 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -69,6 +69,8 @@ function stateColor(code) {
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
+    console.log('SET ENTITY SETDATA', entity);
+    if (!entity) return;
     data.value = useCardDescription(entity.client.name, entity.id);
     state.set('ClaimDescriptor', entity);
 };
@@ -83,6 +85,7 @@ const setData = (entity) => {
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        data-key="claimData"
     >
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity" />
@@ -120,16 +123,16 @@ const setData = (entity) => {
             <VnLv :label="t('claim.card.commercial')">
                 <template #value>
                     <span class="link">
-                        {{ entity.client.salesPersonUser.name }}
-                        <WorkerDescriptorProxy :id="entity.client.salesPersonFk" />
+                        {{ entity.client?.salesPersonUser?.name }}
+                        <WorkerDescriptorProxy :id="entity.client?.salesPersonFk" />
                     </span>
                 </template>
             </VnLv>
             <VnLv
                 :label="t('claim.card.province')"
-                :value="entity.ticket.address.province.name"
+                :value="entity.ticket?.address?.province?.name"
             />
-            <VnLv :label="t('claim.card.zone')" :value="entity.ticket.zone.name" />
+            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
         </template>
         <template #actions="{ entity }">
             <QCardActions>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 2faa714ef..0dc42f820 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -55,13 +55,14 @@ function getWorkerAvatar() {
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
-    console.log('entity ASDASD', entity);
+    if (!entity) return;
     data.value = useCardDescription(entity.user.nickname, entity.id);
 };
 </script>
 <template>
     <CardDescriptor
         module="Worker"
+        data-key="workerData"
         :url="`Workers/${entityId}`"
         :filter="filter"
         :title="data.title"

From ef177c01e561b8eb1443505eddedb9a9939e7781 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 2 Nov 2023 14:08:10 +0100
Subject: [PATCH 07/18] refs #6157 reguralize import migrate

---
 src/components/ui/CardDescriptor.vue      |  91 ----------
 src/composables/useArrayData.js           |   2 -
 src/pages/Claim/Card/ClaimAction.vue      | 212 +++++++++++++++++-----
 src/pages/Claim/Card/ClaimDescriptor.vue  |   1 -
 src/pages/Claim/Card/ClaimDevelopment.vue |   7 +-
 5 files changed, 164 insertions(+), 149 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 5cab39082..b544f1640 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -31,82 +31,6 @@ const $props = defineProps({
     },
 });
 
-// watch(
-//     () => $props,
-//     (props) => {
-//         fetch(props.url);
-//     },
-//     { deep: true }
-// );
-
-// const emit = defineEmits(['onFetch']);
-// const arrayData = computed(() => {
-//     const currentArrayData = useArrayData($props.dataKey);
-//     const newArrayData = useArrayData($props.dataKey, {
-//         url: $props.url,
-//         filter: $props.filter,
-//     });
-//     console.log(currentArrayData.store.url, currentArrayData?.store?.url != $props.url);
-//     if (currentArrayData?.store?.url != $props.url) newArrayData.fetch({ append: false });
-//     return newArrayData;
-// });
-
-// watch(
-//     () => arrayData,
-//     (arrayData) => {
-//         console.log('watch CHANGE??', arrayData.value.store.data);
-//         entity.value = arrayData.value.store.data;
-//         emit('onFetch', arrayData.value.store.data);
-//     },
-//     { deep: true }
-// );
-
-// const slots = useSlots();
-// const { t } = useI18n();
-// let lastUrl = ref(null);
-// const entity = ref();
-
-// async function fetch(url) {
-//     console.log('FETCH??', arrayData.value.store.url, url);
-//     if (arrayData.value.store.url == url) return;
-//     useArrayData($props.dataKey, {
-//         url: url ?? $props.url,
-//         filter: $props.filter,
-//     });
-//     await arrayData.value.fetch({ append: false });
-//     console.log('FETCH?? 2', url, $props.url);
-//     // if (arrayData.value.store.data) emit('onFetch', arrayData.value.store.data);
-// }
-
-// watch($props, async () => {
-//     if (lastUrl.value == $props.url) return;
-//     entity.value = arrayData.value.store.data;
-//     // await fetch();
-// });
-
-// onMounted(async () => {
-//     console.log('onMounted');
-//     fetch($props.url);
-// });
-
-/*
-
-ArrayData es null. la url tb
-
-Watch → arrayData
-url diferent a la nostra fetch
-
-
-
-
-
-
-*/
-
-// onMounted(async () => {
-//     console.log('onMounted');
-//     fetch($props.url);
-// });
 const slots = useSlots();
 const { t } = useI18n();
 const emit = defineEmits(['onFetch']);
@@ -119,26 +43,11 @@ const arrayData = computed(() => {
         url: $props.url,
         filter: $props.filter,
     });
-    console.log(
-        'URLS ',
-        currentArrayData.store.url,
-        $props.dataKey,
-        $props.url,
-        current?.url
-    );
     if (current?.url != $props.url) newArrayData.fetch({ append: false });
     if (newArrayData.store.data) emit('onFetch', newArrayData.store.data);
 
     return newArrayData;
 });
-
-watch(
-    () => arrayData,
-    (arrayData) => {
-        console.log('watch CHANGE??', arrayDataStore.get($props.dataKey));
-    },
-    { deep: true }
-);
 </script>
 <template>
     <div class="descriptor">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 0eb3c6cdc..982dda978 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -7,7 +7,6 @@ const arrayDataStore = useArrayDataStore();
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
-    console.log('CALLED WITH KEY → ', key, userOptions);
     if (!arrayDataStore.get(key)) {
         arrayDataStore.set(key);
     }
@@ -74,7 +73,6 @@ export function useArrayData(key, userOptions) {
         Object.assign(params, store.userParams);
 
         store.isLoading = true;
-        console.log('ARRAY FETCH', store.url);
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index d639c6367..1c501eece 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -1,23 +1,25 @@
 <script setup>
-import { ref, computed, watchEffect, onMounted, onUnmounted } from 'vue';
+import { ref, computed, watchEffect } from 'vue';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
+import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
-import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { tMobile } from 'src/composables/tMobile';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 
 const { t } = useI18n();
+const quasar = useQuasar();
 const route = useRoute();
 const stateStore = computed(() => useStateStore());
+const claim = ref(null);
 const claimId = route.params.id;
-const dialog = ref(false);
-const dialogOption = ref(null);
+const dialogDestination = ref(false);
+const claimDestinationFk = ref(null);
 const resolvedStateId = ref(null);
 const claimActionsForm = ref();
 const rows = ref([]);
@@ -25,14 +27,8 @@ const selectedRows = ref([]);
 const destinationTypes = ref([]);
 const destinations = ref([]);
 const totalClaimed = ref(null);
-const responsibility = ref(5); // pending to get from ClaimDescriptor
-const manaCharger = ref(false); // pending to get from ClaimDescriptor
-const claimData = useArrayData('claimData');
-// ClaimEnds/filter?filter={ claimFk: route.param.id}
-// for update responsability and mana /Claims/id/updateClaimAction
-
-// onMounted(() => (stateStore.value.rightDrawer = true));
-// onUnmounted(() => (stateStore.value.rightDrawer = false));
+const maxResponsibility = computed(() => 5);
+const dialogGreuge = ref(false);
 
 const columns = computed(() => [
     {
@@ -107,14 +103,6 @@ function getDestination(destinationId) {
     return destinationTypes.value.find((type) => type.id == destinationId);
 }
 
-async function updateDestination(claimDestinationFk, row) {
-    if (claimDestinationFk) {
-        await axios.post('Claims/updateClaimDestination', {
-            claimDestinationFk,
-            rows: [row],
-        });
-    }
-}
 async function deleteSale(sale) {
     await axios.post(`ClaimEnds/deleteClamedSales`, { sales: [sale] });
     claimActionsForm.value.reload();
@@ -129,8 +117,103 @@ async function updateDestinations(claimDestinationFk) {
         claimActionsForm.value.reload();
     }
 }
+
+async function updateDestination(claimDestinationFk, row) {
+    if (claimDestinationFk) {
+        await axios.post('Claims/updateClaimDestination', {
+            claimDestinationFk,
+            rows: [row],
+        });
+    }
+}
+
+async function regularizeClaim() {
+    const query = `Claims/${claimId}/regularizeClaim`;
+
+    await axios.post(query);
+    if (claim.value.responsibility >= Math.ceil(maxResponsibility.value) / 2) {
+        dialogGreuge.value = true;
+    } else {
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+
+        claimActionsForm.value.reload();
+    }
+}
+
+async function updateGreuge(greuges) {
+    const { data } = await axios.post(`Greuges`, greuges);
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
+    return data;
+}
+
+async function onUpdateGreugeAccept() {
+    const greugeTypeFreightId = await getGreugeTypeId();
+    const freightPickUpPrice = await getGreugeConfig();
+
+    await updateGreuge({
+        clientFk: claim.value.clientFk,
+        description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
+        amount: freightPickUpPrice,
+        greugeTypeFk: greugeTypeFreightId,
+        ticketFk: claim.value.ticketFk,
+    });
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
+}
+
+async function getGreugeTypeId() {
+    const params = { filter: { where: { code: 'freightPickUp' } } };
+    const query = `GreugeTypes/findOne`;
+    const { data } = await axios.get(query, { params });
+    return data.id;
+}
+
+async function getGreugeConfig() {
+    const query = `GreugeConfigs/findOne`;
+    const { data } = await axios.get(query);
+    return data.freightPickUpPrice;
+}
+
+async function save(data) {
+    const query = `Claims/${claimId}/updateClaimAction`;
+    await axios.patch(query, data);
+}
+
+async function importToNewRefundTicket() {
+    const query = `ClaimBeginnings/${claimId}/importToNewRefundTicket`;
+    await axios.post(query);
+    claimActionsForm.value.reload();
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
+}
 </script>
 <template>
+    <FetchData
+        :url="`Claims/${claimId}`"
+        @on-fetch="(data) => (claim = data)"
+        auto-load
+    />
+    <FetchData
+        url="ClaimStates/findOne"
+        @on-fetch="(data) => (resolvedStateId = data.id)"
+        auto-load
+        :where="{ code: 'resolved' }"
+    />
+    <FetchData
+        url="ClaimDestinations"
+        auto-load
+        @on-fetch="(data) => (destinationTypes = data)"
+    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
@@ -148,7 +231,13 @@ async function updateDestinations(claimDestinationFk) {
             </div>
         </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="300" show-if-above>
+    <QDrawer
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="300"
+        show-if-above
+        v-if="claim"
+    >
         <QScrollArea class="fit text-grey-8 q-mt-lg">
             <div class="totalClaim q-mb-md">
                 {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
@@ -160,10 +249,12 @@ async function updateDestinations(claimDestinationFk) {
                             {{ t('claim.summary.actions') }}
                         </p>
                         <QSlider
-                            class="responsability { 'background-color:primary': quasar.platform.is.mobile }"
-                            v-model="responsibility"
-                            label
+                            class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
+                            v-model="claim.responsibility"
                             :label-value="t('claim.summary.responsibility')"
+                            @update:model-value="
+                                (value) => save({ responsibility: value })
+                            "
                             label-always
                             color="primary"
                             markers
@@ -178,26 +269,18 @@ async function updateDestinations(claimDestinationFk) {
                 </QItem>
             </QCard>
             <QItemLabel class="mana q-mb-md">
-                <QCheckbox v-model="manaCharger" />
+                <QCheckbox
+                    v-model="claim.isChargedToMana"
+                    @update:model-value="(value) => save({ isChargedToMana: value })"
+                />
                 <span>{{ t('mana') }}</span>
             </QItemLabel>
         </QScrollArea>
     </QDrawer>
-    <FetchData
-        url="ClaimDestinations"
-        auto-load
-        @on-fetch="(data) => (destinationTypes = data)"
-    />
-    <FetchData
-        :url="`ClaimStates/findOne`"
-        :where="{ code: 'resolved' }"
-        auto-load
-        @on-fetch="(data) => (resolvedStateId = data)"
-    />
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
-
     <div class="claim-action">
         <CrudModel
+            v-if="claim"
             data-key="ClaimEnds"
             url="ClaimEnds/filter"
             save-url="ClaimEnds/crud"
@@ -314,8 +397,10 @@ async function updateDestinations(claimDestinationFk) {
                     :label="tMobile('Regularize')"
                     :title="t('Regularize')"
                     icon="check"
+                    @click="regularizeClaim"
+                    :disable="claim.claimStateFk == resolvedStateId"
                 />
-                <!--disabled="(ClaimDescriptor)claimStateFk == resolvedStateId"-->
+
                 <QBtn
                     color="primary"
                     text-color="white"
@@ -324,7 +409,7 @@ async function updateDestinations(claimDestinationFk) {
                     :label="tMobile('Change destination')"
                     :title="t('Change destination')"
                     icon="swap_horiz"
-                    @click="dialog = !dialog"
+                    @click="dialogDestination = !dialogDestination"
                 />
                 <QBtn
                     color="primary"
@@ -333,11 +418,12 @@ async function updateDestinations(claimDestinationFk) {
                     :label="tMobile('Import claim')"
                     :title="t('Import claim')"
                     icon="Upload"
+                    @click="importToNewRefundTicket"
+                    :disable="claim.claimStateFk == resolvedStateId"
                 />
-                <!--disabled="(ClaimDescriptor)claimStateFk == resolvedStateId"-->
             </template>
         </CrudModel>
-        <QDialog v-model="dialog">
+        <QDialog v-model="dialogDestination">
             <QCard>
                 <QCardSection>
                     <QItem class="q-pa-none">
@@ -349,7 +435,7 @@ async function updateDestinations(claimDestinationFk) {
                 </QCardSection>
                 <QCardSection>
                     <VnSelectFilter
-                        v-model="dialogOption"
+                        v-model="claimDestinationFk"
                         :options="destinationTypes"
                         option-label="description"
                         option-value="id"
@@ -363,15 +449,39 @@ async function updateDestinations(claimDestinationFk) {
                         v-close-popup
                     />
                     <QBtn
-                        :disable="!dialogOption"
+                        :disable="!claimDestinationFk"
                         :label="t('globals.save')"
                         color="primary"
                         v-close-popup
-                        @click="updateDestinations(dialogOption)"
+                        @click="updateDestinations(claimDestinationFk)"
                     />
                 </QCardActions>
             </QCard>
         </QDialog>
+        <QDialog v-model="dialogGreuge">
+            <QCardSection>
+                <QItem class="q-pa-none">
+                    <span class="q-dialog__title text-white">
+                        {{ t('dialogGreuge title') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+                <QCardActions class="justify-end q-mr-sm">
+                    <QBtn
+                        flat
+                        :label="t('globals.close')"
+                        color="primary"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :label="t('globals.save')"
+                        color="primary"
+                        v-close-popup
+                        @click="onUpdateGreugeAccept"
+                    />
+                </QCardActions>
+            </QCardSection>
+        </QDialog>
     </div>
 </template>
 <style lang="scss">
@@ -409,7 +519,7 @@ async function updateDestinations(claimDestinationFk) {
     padding: 10px;
     margin: 5px;
 }
-.responsability {
+.responsibility {
     max-width: 100%;
     margin-left: 40px;
 }
@@ -418,14 +528,14 @@ async function updateDestinations(claimDestinationFk) {
     color: white;
     float: inline-start;
 }
-
-.qdrawer {
-}
 </style>
 <i18n>
 en:
     mana: Is paid with mana
     dialog title: Change destination to all selected rows
+    dialogGreuge title: Insert greuges on client card
+    ClaimGreugeDescription: Claim Id
+
 es:
     mana: Cargado al maná
     Delivered: Descripción
@@ -443,4 +553,6 @@ es:
     Import claim: Importar reclamación
     dialog title: Cambiar destino en todas las filas seleccionadas
     Remove: Eliminar
+    dialogGreuge title: Insertar greuges en la ficha del cliente
+    ClaimGreugeDescription: Id reclamación
 </i18n>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 0fd7184ec..00f48f36f 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -69,7 +69,6 @@ function stateColor(code) {
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
-    console.log('SET ENTITY SETDATA', entity);
     if (!entity) return;
     data.value = useCardDescription(entity.client.name, entity.id);
     state.set('ClaimDescriptor', entity);
diff --git a/src/pages/Claim/Card/ClaimDevelopment.vue b/src/pages/Claim/Card/ClaimDevelopment.vue
index 36f124142..4a31747bf 100644
--- a/src/pages/Claim/Card/ClaimDevelopment.vue
+++ b/src/pages/Claim/Card/ClaimDevelopment.vue
@@ -7,6 +7,7 @@ import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import { getUrl } from 'composables/getUrl';
 import { tMobile } from 'composables/tMobile';
+import router from 'src/router';
 
 const route = useRoute();
 
@@ -102,10 +103,6 @@ const columns = computed(() => [
         tabIndex: 5,
     },
 ]);
-
-function goToAction() {
-    location.href = `${salixUrl}/action`;
-}
 </script>
 <template>
     <FetchData
@@ -148,7 +145,7 @@ function goToAction() {
         :data-required="{ claimFk: route.params.id }"
         v-model:selected="selected"
         auto-load
-        @save-changes="goToAction"
+        @save-changes="$router.push(`/claim/${route.params.id}/action`)"
         :default-save="false"
     >
         <template #body="{ rows }">

From 08060d276a4dfa5dccff516c1224f26153ae6c48 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 3 Nov 2023 13:41:10 +0100
Subject: [PATCH 08/18] refs #6157 fix arraydata, and internal error

---
 src/components/ui/CardDescriptor.vue | 68 +++++++++++++---------------
 src/composables/useArrayData.js      |  5 +-
 src/i18n/es/index.js                 |  2 +-
 src/pages/Claim/Card/ClaimAction.vue |  2 +-
 src/pages/Claim/Card/ClaimCard.vue   | 68 +++++-----------------------
 5 files changed, 49 insertions(+), 96 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index b544f1640..f63b75de6 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,14 +1,10 @@
 <script setup>
-import { computed, useSlots, ref, watch, onMounted } from 'vue';
+import { onMounted, useSlots, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { table } from 'quasar/dist/icon-set/material-icons.umd.prod';
-import { useArrayDataStore } from 'stores/useArrayDataStore';
 
 const $props = defineProps({
-    dataKey: { type: String, default: null },
     url: {
         type: String,
         default: '',
@@ -27,31 +23,40 @@ const $props = defineProps({
     },
     subtitle: {
         type: Number,
-        default: null,
+        default: 0,
     },
 });
 
 const slots = useSlots();
 const { t } = useI18n();
+const entity = ref();
+
+onMounted(async () => {
+    await fetch();
+});
+
 const emit = defineEmits(['onFetch']);
-const arrayDataStore = useArrayDataStore();
 
-const arrayData = computed(() => {
-    const current = arrayDataStore.get($props.dataKey);
-    const currentArrayData = useArrayData($props.dataKey);
-    const newArrayData = useArrayData($props.dataKey, {
-        url: $props.url,
-        filter: $props.filter,
-    });
-    if (current?.url != $props.url) newArrayData.fetch({ append: false });
-    if (newArrayData.store.data) emit('onFetch', newArrayData.store.data);
+async function fetch() {
+    const params = {};
 
-    return newArrayData;
+    if ($props.filter) params.filter = JSON.stringify($props.filter);
+
+    const { data } = await axios.get($props.url, { params });
+    entity.value = data;
+
+    emit('onFetch', data);
+}
+
+watch($props, async () => {
+    entity.value = null;
+    await fetch();
 });
 </script>
+
 <template>
     <div class="descriptor">
-        <template v-if="arrayData.store.data">
+        <template v-if="entity">
             <div class="header bg-primary q-pa-sm">
                 <RouterLink :to="{ name: `${module}List` }">
                     <QBtn
@@ -68,12 +73,7 @@ const arrayData = computed(() => {
                         </QTooltip>
                     </QBtn>
                 </RouterLink>
-                <RouterLink
-                    :to="{
-                        name: `${module}Summary`,
-                        params: { id: arrayData.store.data.id },
-                    }"
-                >
+                <RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
                     <QBtn
                         round
                         flat
@@ -116,37 +116,33 @@ const arrayData = computed(() => {
                             <span v-if="$props.title" :title="$props.title">
                                 {{ $props.title }}
                             </span>
-                            <slot
-                                v-else
-                                name="description"
-                                :entity="arrayData.store.data"
-                            >
-                                <span :title="arrayData.store.data.name">
-                                    {{ arrayData.store.data.name }}
+                            <slot v-else name="description" :entity="entity">
+                                <span :title="entity.name">
+                                    {{ entity.name }}
                                 </span>
                             </slot>
                         </div>
                     </QItemLabel>
                     <QItem dense>
                         <QItemLabel class="subtitle" caption>
-                            #{{ $props.subtitle ?? arrayData.store.data.id }}
+                            #{{ $props.subtitle ?? entity.id }}
                         </QItemLabel>
                     </QItem>
                 </QList>
                 <div class="list-box q-mt-xs">
-                    <slot name="body" :entity="arrayData.store.data" />
+                    <slot name="body" :entity="entity" />
                 </div>
             </div>
             <div class="icons">
-                <slot name="icons" :entity="arrayData.store.data" />
+                <slot name="icons" :entity="entity" />
             </div>
             <div class="actions">
-                <slot name="actions" :entity="arrayData.store.data" />
+                <slot name="actions" :entity="entity" />
             </div>
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!arrayData.store.data" />
+        <SkeletonDescriptor v-if="!entity" />
     </div>
 </template>
 
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 982dda978..9aff0eaa8 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -7,6 +7,7 @@ const arrayDataStore = useArrayDataStore();
 
 export function useArrayData(key, userOptions) {
     if (!key) throw new Error('ArrayData: A key is required to use this composable');
+
     if (!arrayDataStore.get(key)) {
         arrayDataStore.set(key);
     }
@@ -39,7 +40,7 @@ export function useArrayData(key, userOptions) {
             'userParams',
             'userFilter',
         ];
-        if (userOptions && typeof userOptions === 'object') {
+        if (typeof userOptions === 'object') {
             for (const option in userOptions) {
                 const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
@@ -146,7 +147,7 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        router?.replace({
+        router.replace({
             path: route.path,
             query: query,
         });
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 0c38a13ab..daaf93e33 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -273,7 +273,7 @@ export default {
             photos: 'Fotos',
             log: 'Registros de auditoría',
             notes: 'Notas',
-            action: 'Action',
+            action: 'Acción',
         },
         list: {
             customer: 'Cliente',
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 1c501eece..c31938a18 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -541,7 +541,7 @@ es:
     Delivered: Descripción
     Quantity: Cantidad
     Claimed: Rec
-    Description: Description
+    Description: Descripción
     Price: Precio
     Discount: Dto.
     Destination: Destino
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index d29c28970..03b9889f0 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,57 +1,17 @@
 <script setup>
-import { onMounted, computed, watch, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'src/composables/useArrayData';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import { getUrl } from 'composables/getUrl';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 
+import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
-const filter = {
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                include: { relation: 'salesPersonUser' },
-            },
-        },
-        {
-            relation: 'claimState',
-        },
-        {
-            relation: 'ticket',
-            scope: {
-                include: [
-                    { relation: 'zone' },
-                    {
-                        relation: 'address',
-                        scope: {
-                            include: { relation: 'province' },
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'worker',
-            scope: {
-                include: { relation: 'user' },
-            },
-        },
-    ],
-};
-const arrayData = useArrayData('claimData', {
-    url: `Claims/${route.params.id}`,
-    filter,
-});
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-
 const $props = defineProps({
     id: {
         type: Number,
@@ -59,17 +19,13 @@ const $props = defineProps({
         default: null,
     },
 });
-let salixUrl;
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
 
+let salixUrl;
 onMounted(async () => {
-    await arrayData.fetch({ append: false });
-    watch(
-        () => route.params.id,
-        async (id) => {
-            arrayData.store.url = `Claims/${id}`;
-            await arrayData.fetch({ append: false });
-        }
-    );
+    salixUrl = await getUrl(`claim/${entityId.value}`);
 });
 </script>
 <template>

From 6db52e00ea4c8be7949664d63da855c5ab682cdc Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 7 Nov 2023 12:42:39 +0100
Subject: [PATCH 09/18] refs #6157 test ui

---
 src/components/CrudModel.vue                 |   2 +-
 src/pages/Claim/Card/ClaimAction.vue         | 446 +++++++++----------
 src/pages/Claim/Card/ClaimCard.vue           |  11 -
 test/cypress/integration/claimAction.spec.js |  25 ++
 4 files changed, 235 insertions(+), 249 deletions(-)
 create mode 100644 test/cypress/integration/claimAction.spec.js

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 2a4982fce..570538baf 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -268,7 +268,7 @@ watch(formUrl, async () => {
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push class="q-gutter-x-sm">
+        <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
             <QBtn
                 :label="tMobile('globals.remove')"
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index c31938a18..8f228f8a6 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -33,7 +33,7 @@ const dialogGreuge = ref(false);
 const columns = computed(() => [
     {
         name: 'Id',
-        label: t('Id'),
+        label: t('Id item'),
         field: (row) => row.itemFk,
     },
     {
@@ -119,6 +119,7 @@ async function updateDestinations(claimDestinationFk) {
 }
 
 async function updateDestination(claimDestinationFk, row) {
+    console.log(claimDestinationFk, row);
     if (claimDestinationFk) {
         await axios.post('Claims/updateClaimDestination', {
             claimDestinationFk,
@@ -238,251 +239,220 @@ async function importToNewRefundTicket() {
         show-if-above
         v-if="claim"
     >
-        <QScrollArea class="fit text-grey-8 q-mt-lg">
-            <div class="totalClaim q-mb-md">
-                {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
-            </div>
-            <QCard class="q-mb-md q-pa-sm">
-                <QItem class="justify-between">
-                    <QItemLabel class="slider-container">
-                        <p class="text-primary">
-                            {{ t('claim.summary.actions') }}
-                        </p>
-                        <QSlider
-                            class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
-                            v-model="claim.responsibility"
-                            :label-value="t('claim.summary.responsibility')"
-                            @update:model-value="
-                                (value) => save({ responsibility: value })
-                            "
-                            label-always
-                            color="primary"
-                            markers
-                            :marker-labels="[
-                                { value: 1, label: t('claim.summary.company') },
-                                { value: 5, label: t('claim.summary.person') },
-                            ]"
-                            :min="1"
-                            :max="5"
-                        />
-                    </QItemLabel>
-                </QItem>
-            </QCard>
-            <QItemLabel class="mana q-mb-md">
-                <QCheckbox
-                    v-model="claim.isChargedToMana"
-                    @update:model-value="(value) => save({ isChargedToMana: value })"
-                />
-                <span>{{ t('mana') }}</span>
-            </QItemLabel>
-        </QScrollArea>
+        <div class="totalClaim q-mb-md">
+            {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
+        </div>
+        <QCard class="q-mb-md q-pa-sm">
+            <QItem class="justify-between">
+                <QItemLabel class="slider-container">
+                    <p class="text-primary">
+                        {{ t('claim.summary.actions') }}
+                    </p>
+                    <QSlider
+                        class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
+                        v-model="claim.responsibility"
+                        :label-value="t('claim.summary.responsibility')"
+                        @update:model-value="(value) => save({ responsibility: value })"
+                        label-always
+                        color="primary"
+                        markers
+                        :marker-labels="[
+                            { value: 1, label: t('claim.summary.company') },
+                            { value: 5, label: t('claim.summary.person') },
+                        ]"
+                        :min="1"
+                        :max="5"
+                    />
+                </QItemLabel>
+            </QItem>
+        </QCard>
+        <QItemLabel class="mana q-mb-md">
+            <QCheckbox
+                v-model="claim.isChargedToMana"
+                @update:model-value="(value) => save({ isChargedToMana: value })"
+            />
+            <span>{{ t('mana') }}</span>
+        </QItemLabel>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
-    <div class="claim-action">
-        <CrudModel
-            v-if="claim"
-            data-key="ClaimEnds"
-            url="ClaimEnds/filter"
-            save-url="ClaimEnds/crud"
-            ref="claimActionsForm"
-            v-model:selected="selectedRows"
-            :filter="{ where: { claimFk: claimId } }"
-            :default-remove="true"
-            :default-save="false"
-            :default-reset="false"
-            @on-fetch="(data) => (rows = data)"
-            auto-load
-        >
-            <template #body>
-                <QTable
-                    :columns="columns"
-                    :rows="rows"
-                    :dense="$q.screen.lt.md"
-                    :pagination="{ rowsPerPage: 0 }"
-                    row-key="id"
-                    selection="multiple"
-                    v-model:selected="selectedRows"
-                    hide-pagination
-                    :grid="$q.screen.lt.md"
-                >
-                    <template #body-cell-ticket="{ value }">
-                        <QTd align="center">
-                            <span class="link">
-                                {{ value }}
-                                <TicketDescriptorProxy :id="value" />
-                            </span>
-                        </QTd>
-                    </template>
-                    <template #body-cell-destination="{ rowIndex }">
-                        <QTd>
-                            <VnSelectFilter
-                                v-model="destinations[rowIndex]"
-                                :options="destinationTypes"
-                                option-value="id"
-                                option-label="description"
-                                @update:model-value="
-                                    (value) => updateDestination(value, rows[rowIndex])
-                                "
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-price="{ value }">
-                        <QTd align="center">
-                            {{ toCurrency(value) }}
-                        </QTd>
-                    </template>
-                    <template #body-cell-total="{ value }">
-                        <QTd align="center">
-                            {{ toCurrency(value) }}
-                        </QTd>
-                    </template>
-                    <template #body-cell-delete="{ rowIndex }">
-                        <QTd>
-                            <QBtn
-                                icon="delete"
-                                color="primary"
-                                padding="xs"
-                                round
-                                flat
-                                @click="deleteSale(rows[rowIndex])"
-                            >
-                                <QTooltip>
-                                    {{ t('Remove line') }}
-                                </QTooltip>
-                            </QBtn>
-                        </QTd>
-                    </template>
-                    <!-- View for grid mode -->
-                    <template #item="props">
-                        <div class="q-mb-md col-12 grid-style-transition">
-                            <QCard>
-                                <QCardSection class="row justify-between">
-                                    <QCheckbox v-model="props.selected" />
-                                    <QBtn color="primary" icon="delete" flat round />
-                                </QCardSection>
-
-                                <QSeparator inset />
-                                <QList dense>
-                                    <QItem
-                                        v-for="column of props.cols"
-                                        :key="column.name"
-                                    >
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ column.label }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection side>
-                                            <QItemLabel
-                                                v-if="column.name === 'destination'"
-                                            >
-                                                {{ column.value.description }}
-                                            </QItemLabel>
-                                            <QItemLabel v-else>
-                                                {{ column.value }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QCard>
-                        </div>
-                    </template>
-                </QTable>
-            </template>
-            <template #moreBeforeActions>
-                <QBtn
-                    color="primary"
-                    text-color="white"
-                    :unelevated="true"
-                    :label="tMobile('Regularize')"
-                    :title="t('Regularize')"
-                    icon="check"
-                    @click="regularizeClaim"
-                    :disable="claim.claimStateFk == resolvedStateId"
-                />
-
-                <QBtn
-                    color="primary"
-                    text-color="white"
-                    :unelevated="true"
-                    :disable="!selectedRows.length"
-                    :label="tMobile('Change destination')"
-                    :title="t('Change destination')"
-                    icon="swap_horiz"
-                    @click="dialogDestination = !dialogDestination"
-                />
-                <QBtn
-                    color="primary"
-                    text-color="white"
-                    :unelevated="true"
-                    :label="tMobile('Import claim')"
-                    :title="t('Import claim')"
-                    icon="Upload"
-                    @click="importToNewRefundTicket"
-                    :disable="claim.claimStateFk == resolvedStateId"
-                />
-            </template>
-        </CrudModel>
-        <QDialog v-model="dialogDestination">
-            <QCard>
-                <QCardSection>
-                    <QItem class="q-pa-none">
-                        <span class="q-dialog__title text-white">
-                            {{ t('dialog title') }}
+    <CrudModel
+        v-if="claim"
+        data-key="ClaimEnds"
+        url="ClaimEnds/filter"
+        save-url="ClaimEnds/crud"
+        ref="claimActionsForm"
+        v-model:selected="selectedRows"
+        :filter="{ where: { claimFk: claimId } }"
+        :default-remove="true"
+        :default-save="false"
+        :default-reset="false"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+    >
+        <template #body>
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                :dense="$q.screen.lt.md"
+                :pagination="{ rowsPerPage: 0 }"
+                row-key="id"
+                selection="multiple"
+                v-model:selected="selectedRows"
+                hide-pagination
+                :grid="$q.screen.lt.md"
+            >
+                <template #body-cell-ticket="{ value }">
+                    <QTd align="center">
+                        <span class="link">
+                            {{ value }}
+                            <TicketDescriptorProxy :id="value" />
                         </span>
-                        <QBtn icon="close" flat round dense v-close-popup />
-                    </QItem>
-                </QCardSection>
-                <QCardSection>
-                    <VnSelectFilter
-                        v-model="claimDestinationFk"
-                        :options="destinationTypes"
-                        option-label="description"
-                        option-value="id"
-                    />
-                </QCardSection>
-                <QCardActions class="justify-end q-mr-sm">
-                    <QBtn
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn
-                        :disable="!claimDestinationFk"
-                        :label="t('globals.save')"
-                        color="primary"
-                        v-close-popup
-                        @click="updateDestinations(claimDestinationFk)"
-                    />
-                </QCardActions>
-            </QCard>
-        </QDialog>
-        <QDialog v-model="dialogGreuge">
+                    </QTd>
+                </template>
+                <template #body-cell-destination="{ row }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row.claimDestinationFk"
+                            :options="destinationTypes"
+                            option-label="description"
+                            option-value="id"
+                            :autofocus="true"
+                            dense
+                            input-debounce="0"
+                            hide-selected
+                            @update:model-value="(value) => updateDestination(value, row)"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ value }">
+                    <QTd align="center">
+                        {{ toCurrency(value) }}
+                    </QTd>
+                </template>
+                <template #body-cell-total="{ value }">
+                    <QTd align="center">
+                        {{ toCurrency(value) }}
+                    </QTd>
+                </template>
+                <!-- View for grid mode -->
+                <template #item="props">
+                    <div class="q-mb-md col-12 grid-style-transition">
+                        <QCard>
+                            <QCardSection class="row justify-between">
+                                <QCheckbox v-model="props.selected" />
+                                <QBtn color="primary" icon="delete" flat round />
+                            </QCardSection>
+
+                            <QSeparator inset />
+                            <QList dense>
+                                <QItem v-for="column of props.cols" :key="column.name">
+                                    <QItemSection>
+                                        <QItemLabel caption>
+                                            {{ column.label }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                    <QItemSection side>
+                                        <QItemLabel v-if="column.name === 'destination'">
+                                            {{ column.value.description }}
+                                        </QItemLabel>
+                                        <QItemLabel v-else>
+                                            {{ column.value }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+        <template #moreBeforeActions>
+            <QBtn
+                color="primary"
+                text-color="white"
+                :unelevated="true"
+                :label="tMobile('Regularize')"
+                :title="t('Regularize')"
+                icon="check"
+                @click="regularizeClaim"
+                :disable="claim.claimStateFk == resolvedStateId"
+            />
+
+            <QBtn
+                color="primary"
+                text-color="white"
+                :unelevated="true"
+                :disable="!selectedRows.length"
+                :label="tMobile('Change destination')"
+                :title="t('Change destination')"
+                icon="swap_horiz"
+                @click="dialogDestination = !dialogDestination"
+            />
+            <QBtn
+                color="primary"
+                text-color="white"
+                :unelevated="true"
+                :label="tMobile('Import claim')"
+                :title="t('Import claim')"
+                icon="Upload"
+                @click="importToNewRefundTicket"
+                :disable="claim.claimStateFk == resolvedStateId"
+            />
+        </template>
+    </CrudModel>
+    <QDialog v-model="dialogDestination">
+        <QCard>
             <QCardSection>
                 <QItem class="q-pa-none">
                     <span class="q-dialog__title text-white">
-                        {{ t('dialogGreuge title') }}
+                        {{ t('dialog title') }}
                     </span>
                     <QBtn icon="close" flat round dense v-close-popup />
                 </QItem>
-                <QCardActions class="justify-end q-mr-sm">
-                    <QBtn
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
-                    <QBtn
-                        :label="t('globals.save')"
-                        color="primary"
-                        v-close-popup
-                        @click="onUpdateGreugeAccept"
-                    />
-                </QCardActions>
             </QCardSection>
-        </QDialog>
-    </div>
+            <QItemSection>
+                <VnSelectFilter
+                    v-model="claimDestinationFk"
+                    :options="destinationTypes"
+                    option-label="description"
+                    option-value="id"
+                    :autofocus="true"
+                    dense
+                    input-debounce="0"
+                    hide-selected
+                />
+            </QItemSection>
+            <QCardActions class="justify-end q-mr-sm">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn
+                    :disable="!claimDestinationFk"
+                    :label="t('globals.save')"
+                    color="primary"
+                    v-close-popup
+                    @click="updateDestinations(claimDestinationFk)"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+    <QDialog v-model="dialogGreuge">
+        <QCardSection>
+            <QItem class="q-pa-none">
+                <span class="q-dialog__title text-white">
+                    {{ t('dialogGreuge title') }}
+                </span>
+                <QBtn icon="close" flat round dense v-close-popup />
+            </QItem>
+            <QCardActions class="justify-end q-mr-sm">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn
+                    :label="t('globals.save')"
+                    color="primary"
+                    v-close-popup
+                    @click="onUpdateGreugeAccept"
+                />
+            </QCardActions>
+        </QCardSection>
+    </QDialog>
 </template>
 <style lang="scss">
 .claim-action {
@@ -514,10 +484,11 @@ async function importToNewRefundTicket() {
     }
 }
 .totalClaim {
-    border: 3px solid black;
+    background-color: #313131;
     color: white;
     padding: 10px;
     margin: 5px;
+    border-radius: 8px;
 }
 .responsibility {
     max-width: 100%;
@@ -555,4 +526,5 @@ es:
     Remove: Eliminar
     dialogGreuge title: Insertar greuges en la ficha del cliente
     ClaimGreugeDescription: Id reclamación
+    Id item: Id artículo
 </i18n>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 03b9889f0..bffb3ff91 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -43,17 +43,6 @@ onMounted(async () => {
             <QSeparator />
             <LeftMenu source="card" />
             <QSeparator />
-            <QList>
-                <QItem
-                    active-class="text-primary"
-                    clickable
-                    v-ripple
-                    :href="`${salixUrl}/action`"
-                >
-                    <QItemSection avatar><QIcon name="vn:actions"></QIcon></QItemSection>
-                    <QItemSection>{{ t('Action') }}</QItemSection>
-                </QItem>
-            </QList>
         </QScrollArea>
     </QDrawer>
     <QPageContainer>
diff --git a/test/cypress/integration/claimAction.spec.js b/test/cypress/integration/claimAction.spec.js
new file mode 100644
index 000000000..522cedced
--- /dev/null
+++ b/test/cypress/integration/claimAction.spec.js
@@ -0,0 +1,25 @@
+/// <reference types="cypress" />
+describe('ClaimAction', () => {
+    const claimId = 2;
+    const firstLineReason = 'tbody > :nth-child(1) > :nth-child(2)';
+    const firstRow = 'tbody > :nth-child(1)';
+
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/claim/${claimId}/action`);
+    });
+
+    it('should import claim', () => {
+        cy.get('[title="Import claim"]').click();
+    });
+
+    it('should change destination', () => {
+        const rowData = [true, null, null, 'Bueno', null, null, null, null, null, null];
+        cy.fillRow(firstRow, rowData);
+    });
+
+    it('should regularize', () => {
+        cy.get('[title="Regularize"]').click();
+    });
+});

From 35eae2f9a5a4b9c2c244a56f1fa6269fca46f685 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 7 Nov 2023 12:43:10 +0100
Subject: [PATCH 10/18] remove consolelog

---
 src/pages/Claim/Card/ClaimAction.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 8f228f8a6..962edac73 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -119,7 +119,6 @@ async function updateDestinations(claimDestinationFk) {
 }
 
 async function updateDestination(claimDestinationFk, row) {
-    console.log(claimDestinationFk, row);
     if (claimDestinationFk) {
         await axios.post('Claims/updateClaimDestination', {
             claimDestinationFk,

From b98f9824959fe247878c0415cb86ff8b03a5bb84 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 7 Nov 2023 12:50:54 +0100
Subject: [PATCH 11/18] refs #6157 remove salixUrl

---
 src/pages/Claim/Card/ClaimCard.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index bffb3ff91..a8c832967 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -22,11 +22,6 @@ const $props = defineProps({
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-let salixUrl;
-onMounted(async () => {
-    salixUrl = await getUrl(`claim/${entityId.value}`);
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
@@ -42,7 +37,6 @@ onMounted(async () => {
             <ClaimDescriptor />
             <QSeparator />
             <LeftMenu source="card" />
-            <QSeparator />
         </QScrollArea>
     </QDrawer>
     <QPageContainer>

From ae655dabe210664f4616e142bd4b1bf68ef3b7b8 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 9 Nov 2023 13:52:45 +0100
Subject: [PATCH 12/18] refs #6157 refactor stateColor, updateDestinations,
 change responsability

---
 src/pages/Claim/Card/ClaimAction.vue         | 20 +++++---------------
 src/pages/Claim/Card/ClaimDescriptor.vue     | 11 ++++++++---
 src/pages/Claim/Card/ClaimSummary.vue        | 11 ++++++++---
 src/pages/Claim/ClaimList.vue                | 14 +++++++++-----
 test/cypress/integration/claimAction.spec.js |  4 ++--
 5 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 962edac73..c52741160 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -103,27 +103,17 @@ function getDestination(destinationId) {
     return destinationTypes.value.find((type) => type.id == destinationId);
 }
 
-async function deleteSale(sale) {
-    await axios.post(`ClaimEnds/deleteClamedSales`, { sales: [sale] });
-    claimActionsForm.value.reload();
-}
-
 async function updateDestinations(claimDestinationFk) {
-    if (claimDestinationFk) {
-        await axios.post('Claims/updateClaimDestination', {
-            claimDestinationFk,
-            rows: [...selectedRows.value],
-        });
-        claimActionsForm.value.reload();
-    }
+    await updateDestination(claimDestinationFk, selectedRows.value, { reload: true });
 }
 
-async function updateDestination(claimDestinationFk, row) {
+async function updateDestination(claimDestinationFk, row, options = {}) {
     if (claimDestinationFk) {
         await axios.post('Claims/updateClaimDestination', {
             claimDestinationFk,
-            rows: [row],
+            rows: Array.isArray(row) ? row : [row],
         });
+        options.reload && claimActionsForm.value.reload();
     }
 }
 
@@ -251,7 +241,7 @@ async function importToNewRefundTicket() {
                         class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
                         v-model="claim.responsibility"
                         :label-value="t('claim.summary.responsibility')"
-                        @update:model-value="(value) => save({ responsibility: value })"
+                        @change="(value) => save({ responsibility: value })"
                         label-always
                         color="primary"
                         markers
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 00f48f36f..147974c36 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -62,10 +62,15 @@ const filter = {
     ],
 };
 
+const STATE_COLOR = {
+    pending: 'positive',
+
+    managed: 'warning',
+
+    resolved: 'negative',
+};
 function stateColor(code) {
-    if (code === 'pending') return 'positive';
-    if (code === 'managed') return 'warning';
-    if (code === 'resolved') return 'negative';
+    return STATE_COLOR[code];
 }
 const data = ref(useCardDescription());
 const setData = (entity) => {
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index dc5ec9544..64d7b721b 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -85,10 +85,15 @@ const detailsColumns = ref([
     },
 ]);
 
+const STATE_COLOR = {
+    pending: 'positive',
+
+    managed: 'warning',
+
+    resolved: 'negative',
+};
 function stateColor(code) {
-    if (code === 'pending') return 'green';
-    if (code === 'managed') return 'orange';
-    if (code === 'resolved') return 'red';
+    return STATE_COLOR[code];
 }
 
 const developmentColumns = ref([
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 79afc7e91..54b842f0d 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -17,12 +17,16 @@ const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-function stateColor(code) {
-    if (code === 'pending') return 'green';
-    if (code === 'managed') return 'orange';
-    if (code === 'resolved') return 'red';
-}
+const STATE_COLOR = {
+    pending: 'positive',
 
+    managed: 'warning',
+
+    resolved: 'negative',
+};
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
 }
diff --git a/test/cypress/integration/claimAction.spec.js b/test/cypress/integration/claimAction.spec.js
index 522cedced..09023e137 100644
--- a/test/cypress/integration/claimAction.spec.js
+++ b/test/cypress/integration/claimAction.spec.js
@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 describe('ClaimAction', () => {
     const claimId = 2;
-    const firstLineReason = 'tbody > :nth-child(1) > :nth-child(2)';
+
     const firstRow = 'tbody > :nth-child(1)';
 
     beforeEach(() => {
@@ -15,7 +15,7 @@ describe('ClaimAction', () => {
     });
 
     it('should change destination', () => {
-        const rowData = [true, null, null, 'Bueno', null, null, null, null, null, null];
+        const rowData = [true, null, null, 'Bueno'];
         cy.fillRow(firstRow, rowData);
     });
 

From ce4fe44b03a3278382b58dfeedacf05d4fac9b75 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 17 Nov 2023 14:06:43 +0100
Subject: [PATCH 13/18] refs #6157 refactor

---
 src/components/ui/VnPaginate.vue             |  1 +
 src/composables/useArrayData.js              |  2 +-
 src/css/app.scss                             |  6 ++
 src/pages/Claim/Card/ClaimAction.vue         | 89 +++++++++-----------
 test/cypress/integration/claimAction.spec.js | 16 ++++
 test/cypress/support/commands.js             |  3 +-
 6 files changed, 68 insertions(+), 49 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index d21d073f2..a4d9af51b 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -68,6 +68,7 @@ const arrayData = useArrayData(props.dataKey, {
     limit: props.limit,
     order: props.order,
     userParams: props.userParams,
+    skip: 0,
 });
 const store = arrayData.store;
 
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 9aff0eaa8..35997c9d5 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -42,7 +42,7 @@ export function useArrayData(key, userOptions) {
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
-                const isEmpty = userOptions[option] == null || userOptions[option] == '';
+                const isEmpty = userOptions[option] == null || userOptions[option] === '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.prototype.hasOwnProperty.call(store, option)) {
diff --git a/src/css/app.scss b/src/css/app.scss
index 0f04c9ad8..99170202d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -45,3 +45,9 @@ body.body--dark {
 .bg-vn-dark {
     background-color: var(--vn-dark);
 }
+
+.vn-card {
+    background-color: var(--vn-gray);
+    color: var(--vn-text);
+    border-radius: 8px;
+}
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index c52741160..58ee38dd0 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watchEffect } from 'vue';
+import { ref, computed, watchEffect, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -10,6 +10,7 @@ import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 
 const { t } = useI18n();
@@ -17,8 +18,10 @@ const quasar = useQuasar();
 const route = useRoute();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
+const claimRef = ref();
 const claimId = route.params.id;
 const dialogDestination = ref(false);
+const dialogRegularize = ref(false);
 const claimDestinationFk = ref(null);
 const resolvedStateId = ref(null);
 const claimActionsForm = ref();
@@ -27,7 +30,7 @@ const selectedRows = ref([]);
 const destinationTypes = ref([]);
 const destinations = ref([]);
 const totalClaimed = ref(null);
-const maxResponsibility = computed(() => 5);
+const DEFAULT_MAX_RESPONSABILITY = 5;
 const dialogGreuge = ref(false);
 
 const columns = computed(() => [
@@ -45,7 +48,7 @@ const columns = computed(() => [
     {
         name: 'destination',
         label: t('Destination'),
-        field: (row) => getDestination(row.claimDestinationFk),
+        field: (row) => row.claimDestinationFk,
         align: 'left',
     },
     {
@@ -90,17 +93,18 @@ const columns = computed(() => [
     },
 ]);
 
-watchEffect(() => {
-    if (rows.value.length) {
-        destinations.value = rows.value.map((row) =>
-            getDestination(row.claimDestinationFk)
-        );
-        totalClaimed.value = rows.value.reduce((total, row) => total + row.total, 0);
-    }
+onMounted(() => {
+    getTotal();
 });
 
-function getDestination(destinationId) {
-    return destinationTypes.value.find((type) => type.id == destinationId);
+function setData(data) {
+    rows.value = data;
+    getTotal();
+}
+function getTotal() {
+    if (rows.value.length) {
+        totalClaimed.value = rows.value.reduce((total, row) => total + row.total, 0);
+    }
 }
 
 async function updateDestinations(claimDestinationFk) {
@@ -121,16 +125,22 @@ async function regularizeClaim() {
     const query = `Claims/${claimId}/regularizeClaim`;
 
     await axios.post(query);
-    if (claim.value.responsibility >= Math.ceil(maxResponsibility.value) / 2) {
-        dialogGreuge.value = true;
+    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
+        await claimRef.value.fetch();
+        quasar
+            .dialog({
+                component: VnConfirm,
+                title: t('confirmGreuges'),
+                message: t('confirmGreugesMessage'),
+            })
+            .onOk(async () => await onUpdateGreugeAccept());
     } else {
         quasar.notify({
             message: t('globals.dataSaved'),
             type: 'positive',
         });
-
-        claimActionsForm.value.reload();
     }
+    claimActionsForm.value.reload();
 }
 
 async function updateGreuge(greuges) {
@@ -189,6 +199,7 @@ async function importToNewRefundTicket() {
 </script>
 <template>
     <FetchData
+        ref="claimRef"
         :url="`Claims/${claimId}`"
         @on-fetch="(data) => (claim = data)"
         auto-load
@@ -228,10 +239,10 @@ async function importToNewRefundTicket() {
         show-if-above
         v-if="claim"
     >
-        <div class="totalClaim q-mb-md">
+        <QCard class="totalClaim vn-card q-my-md q-pa-sm">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
-        </div>
-        <QCard class="q-mb-md q-pa-sm">
+        </QCard>
+        <QCard class="vn-card q-mb-md q-pa-sm">
             <QItem class="justify-between">
                 <QItemLabel class="slider-container">
                     <p class="text-primary">
@@ -275,7 +286,7 @@ async function importToNewRefundTicket() {
         :default-remove="true"
         :default-save="false"
         :default-reset="false"
-        @on-fetch="(data) => (rows = data)"
+        @on-fetch="setData"
         auto-load
     >
         <template #body>
@@ -283,11 +294,9 @@ async function importToNewRefundTicket() {
                 :columns="columns"
                 :rows="rows"
                 :dense="$q.screen.lt.md"
-                :pagination="{ rowsPerPage: 0 }"
                 row-key="id"
                 selection="multiple"
                 v-model:selected="selectedRows"
-                hide-pagination
                 :grid="$q.screen.lt.md"
             >
                 <template #body-cell-ticket="{ value }">
@@ -392,7 +401,7 @@ async function importToNewRefundTicket() {
     <QDialog v-model="dialogDestination">
         <QCard>
             <QCardSection>
-                <QItem class="q-pa-none">
+                <QItem class="q-pa-sm">
                     <span class="q-dialog__title text-white">
                         {{ t('dialog title') }}
                     </span>
@@ -401,6 +410,7 @@ async function importToNewRefundTicket() {
             </QCardSection>
             <QItemSection>
                 <VnSelectFilter
+                    class="q-pa-sm"
                     v-model="claimDestinationFk"
                     :options="destinationTypes"
                     option-label="description"
@@ -423,13 +433,13 @@ async function importToNewRefundTicket() {
             </QCardActions>
         </QCard>
     </QDialog>
-    <QDialog v-model="dialogGreuge">
+    <!-- <QDialog v-model="dialogGreuge">
         <QCardSection>
-            <QItem class="q-pa-none">
-                <span class="q-dialog__title text-white">
+            <QItem class="q-pa-sm">
+                <span class="q-pa-sm q-dialog__title text-white">
                     {{ t('dialogGreuge title') }}
                 </span>
-                <QBtn icon="close" flat round dense v-close-popup />
+                <QBtn class="q-pa-sm" icon="close" flat round dense v-close-popup />
             </QItem>
             <QCardActions class="justify-end q-mr-sm">
                 <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
@@ -441,17 +451,8 @@ async function importToNewRefundTicket() {
                 />
             </QCardActions>
         </QCardSection>
-    </QDialog>
+    </QDialog> -->
 </template>
-<style lang="scss">
-.claim-action {
-    .q-table {
-        .q-select .q-field__input {
-            display: none !important;
-        }
-    }
-}
-</style>
 <style lang="scss" scoped>
 .slider-container {
     width: 50%;
@@ -472,20 +473,12 @@ async function importToNewRefundTicket() {
         height: min-content;
     }
 }
-.totalClaim {
-    background-color: #313131;
-    color: white;
-    padding: 10px;
-    margin: 5px;
-    border-radius: 8px;
-}
 .responsibility {
     max-width: 100%;
     margin-left: 40px;
 }
 
 .mana {
-    color: white;
     float: inline-start;
 }
 </style>
@@ -493,8 +486,8 @@ async function importToNewRefundTicket() {
 en:
     mana: Is paid with mana
     dialog title: Change destination to all selected rows
-    dialogGreuge title: Insert greuges on client card
-    ClaimGreugeDescription: Claim Id
+    confirmGreuges: Do you want to insert complaints?
+    confirmGreugesMessage: Insert complaints into the client's record
 
 es:
     mana: Cargado al maná
@@ -516,4 +509,6 @@ es:
     dialogGreuge title: Insertar greuges en la ficha del cliente
     ClaimGreugeDescription: Id reclamación
     Id item: Id artículo
+    confirmGreuges: ¿Desea insertar greuges?
+    confirmGreugesMessage: Insertar greuges en la ficha del cliente
 </i18n>
diff --git a/test/cypress/integration/claimAction.spec.js b/test/cypress/integration/claimAction.spec.js
index 09023e137..e93579e2c 100644
--- a/test/cypress/integration/claimAction.spec.js
+++ b/test/cypress/integration/claimAction.spec.js
@@ -19,7 +19,23 @@ describe('ClaimAction', () => {
         cy.fillRow(firstRow, rowData);
     });
 
+    // it('should change destination with 2 rows', () => {
+    //     cy.get('[title="Change destination"]').click();
+
+    //     const rowData = ['Basura'];
+    //     cy.fillRow()
+    // });
+
     it('should regularize', () => {
         cy.get('[title="Regularize"]').click();
     });
+
+    it('should remove the line', () => {
+        cy.fillRow(firstRow, [true]);
+        cy.removeCard();
+        cy.clickConfirm();
+
+        cy.reload();
+        cy.get(firstRow).should('not.exist');
+    });
 });
diff --git a/test/cypress/support/commands.js b/test/cypress/support/commands.js
index a67df121e..d361eee1a 100755
--- a/test/cypress/support/commands.js
+++ b/test/cypress/support/commands.js
@@ -88,7 +88,8 @@ Cypress.Commands.add('addCard', () => {
     cy.get('.q-page-sticky > div > .q-btn').click();
 });
 Cypress.Commands.add('clickConfirm', () => {
-    cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+    cy.waitForElement('.q-dialog__inner > .q-card');
+    cy.get('.q-card__actions > .q-btn--unelevated > .q-btn__content > .block').click();
 });
 
 Cypress.Commands.add('notificationHas', (selector, text) => {

From 1320db7bf09f4f7ec7c5e1942e0cf8cc0080ab63 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 20 Nov 2023 18:13:26 +0100
Subject: [PATCH 14/18] refs #6157 e2e + front

---
 src/pages/Claim/Card/ClaimAction.vue         | 14 ++++++++------
 test/cypress/integration/claimAction.spec.js | 14 +++++++++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 58ee38dd0..22e32a883 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watchEffect, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -12,6 +12,7 @@ import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -21,17 +22,14 @@ const claim = ref(null);
 const claimRef = ref();
 const claimId = route.params.id;
 const dialogDestination = ref(false);
-const dialogRegularize = ref(false);
 const claimDestinationFk = ref(null);
 const resolvedStateId = ref(null);
 const claimActionsForm = ref();
 const rows = ref([]);
 const selectedRows = ref([]);
 const destinationTypes = ref([]);
-const destinations = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
-const dialogGreuge = ref(false);
 
 const columns = computed(() => [
     {
@@ -130,8 +128,10 @@ async function regularizeClaim() {
         quasar
             .dialog({
                 component: VnConfirm,
-                title: t('confirmGreuges'),
-                message: t('confirmGreugesMessage'),
+                componentProps: {
+                    title: t('confirmGreuges'),
+                    message: t('confirmGreugesMessage'),
+                },
             })
             .onOk(async () => await onUpdateGreugeAccept());
     } else {
@@ -141,6 +141,8 @@ async function regularizeClaim() {
         });
     }
     claimActionsForm.value.reload();
+    const arrayData = useArrayData('Claim');
+    await arrayData.refresh();
 }
 
 async function updateGreuge(greuges) {
diff --git a/test/cypress/integration/claimAction.spec.js b/test/cypress/integration/claimAction.spec.js
index e93579e2c..f181722fa 100644
--- a/test/cypress/integration/claimAction.spec.js
+++ b/test/cypress/integration/claimAction.spec.js
@@ -3,6 +3,7 @@ describe('ClaimAction', () => {
     const claimId = 2;
 
     const firstRow = 'tbody > :nth-child(1)';
+    const destinationRow = '.q-item__section > .q-field';
 
     beforeEach(() => {
         cy.viewport(1920, 1080);
@@ -19,15 +20,18 @@ describe('ClaimAction', () => {
         cy.fillRow(firstRow, rowData);
     });
 
-    // it('should change destination with 2 rows', () => {
-    //     cy.get('[title="Change destination"]').click();
+    it('should change destination from other button', () => {
+        const rowData = [true];
 
-    //     const rowData = ['Basura'];
-    //     cy.fillRow()
-    // });
+        cy.fillRow(firstRow, rowData);
+        cy.get('[title="Change destination"]').click();
+        cy.selectOption(destinationRow, 'Confeccion');
+        cy.get('.q-card > .q-card__actions > .q-btn--standard').click();
+    });
 
     it('should regularize', () => {
         cy.get('[title="Regularize"]').click();
+        cy.clickConfirm();
     });
 
     it('should remove the line', () => {

From d03092f41d2de6fadf09ccadc300fa49aa7fcd77 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 23 Nov 2023 15:50:42 +0100
Subject: [PATCH 15/18] refs #6157 arrayData

---
 src/components/ui/CardDescriptor.vue     | 44 ++++++++++++++----------
 src/composables/useArrayData.js          | 14 +++++---
 src/pages/Claim/Card/ClaimAction.vue     |  8 ++---
 src/pages/Claim/Card/ClaimDescriptor.vue |  3 +-
 4 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f63b75de6..3fa681638 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { onMounted, useSlots, ref, watch } from 'vue';
+import { onMounted, useSlots, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
+import { useArrayData } from 'composables/useArrayData';
 
 const $props = defineProps({
     url: {
@@ -25,33 +26,40 @@ const $props = defineProps({
         type: Number,
         default: 0,
     },
+    dataKey: {
+        type: String,
+        default: '',
+    },
 });
 
 const slots = useSlots();
 const { t } = useI18n();
-const entity = ref();
-
+defineExpose({ fetch });
+const entity = computed(() => useArrayData($props.dataKey).store.data);
 onMounted(async () => {
-    await fetch();
+    await getData();
+    watch(
+        () => $props.url,
+        async (newUrl, lastUrl) => {
+            if (newUrl == lastUrl) return;
+            entity.value = null;
+            await getData();
+        }
+    );
 });
 
-const emit = defineEmits(['onFetch']);
-
-async function fetch() {
-    const params = {};
-
-    if ($props.filter) params.filter = JSON.stringify($props.filter);
-
-    const { data } = await axios.get($props.url, { params });
-    entity.value = data;
-
+async function getData() {
+    const arrayData = useArrayData($props.dataKey, {
+        url: $props.url,
+        filter: $props.filter,
+        skip: 0,
+    });
+    const { data } = await arrayData.fetch({ append: false });
     emit('onFetch', data);
 }
+const emit = defineEmits(['onFetch']);
 
-watch($props, async () => {
-    entity.value = null;
-    await fetch();
-});
+async function fetch() {}
 </script>
 
 <template>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 35997c9d5..348c8e23f 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -29,6 +29,10 @@ export function useArrayData(key, userOptions) {
         }
     });
 
+    if (key && userOptions) {
+        setOptions();
+    }
+
     function setOptions() {
         const allowedOptions = [
             'url',
@@ -97,6 +101,7 @@ export function useArrayData(key, userOptions) {
         store.isLoading = false;
 
         canceller = null;
+        return response;
     }
 
     function destroy() {
@@ -147,10 +152,11 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        router.replace({
-            path: route.path,
-            query: query,
-        });
+        if (router)
+            router.replace({
+                path: route.path,
+                query: query,
+            });
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 22e32a883..2d8498367 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
@@ -17,6 +17,7 @@ import { useArrayData } from 'composables/useArrayData';
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
+const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -30,6 +31,7 @@ const selectedRows = ref([]);
 const destinationTypes = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
+const arrayData = useArrayData('claimData');
 
 const columns = computed(() => [
     {
@@ -140,9 +142,7 @@ async function regularizeClaim() {
             type: 'positive',
         });
     }
-    claimActionsForm.value.reload();
-    const arrayData = useArrayData('Claim');
-    await arrayData.refresh();
+    await arrayData.fetch({ append: false });
 }
 
 async function updateGreuge(greuges) {
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 147974c36..9dd8aa1f6 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -64,11 +64,10 @@ const filter = {
 
 const STATE_COLOR = {
     pending: 'positive',
-
     managed: 'warning',
-
     resolved: 'negative',
 };
+
 function stateColor(code) {
     return STATE_COLOR[code];
 }

From c3d9085a5703a96b9f2eb27653ab3fddffa22024 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 24 Nov 2023 08:10:44 +0100
Subject: [PATCH 16/18] refs #6157 minorFix

---
 src/components/ui/CardDescriptor.vue | 3 ---
 src/components/ui/VnPaginate.vue     | 1 -
 src/pages/Claim/ClaimList.vue        | 2 --
 3 files changed, 6 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 3fa681638..eef2e020b 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -34,7 +34,6 @@ const $props = defineProps({
 
 const slots = useSlots();
 const { t } = useI18n();
-defineExpose({ fetch });
 const entity = computed(() => useArrayData($props.dataKey).store.data);
 onMounted(async () => {
     await getData();
@@ -58,8 +57,6 @@ async function getData() {
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
-
-async function fetch() {}
 </script>
 
 <template>
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index a4d9af51b..d21d073f2 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -68,7 +68,6 @@ const arrayData = useArrayData(props.dataKey, {
     limit: props.limit,
     order: props.order,
     userParams: props.userParams,
-    skip: 0,
 });
 const store = arrayData.store;
 
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 54b842f0d..b5c5616f5 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -19,9 +19,7 @@ const { t } = useI18n();
 
 const STATE_COLOR = {
     pending: 'positive',
-
     managed: 'warning',
-
     resolved: 'negative',
 };
 function stateColor(code) {

From 98fa68bb80828bf8f91684541a57385b3c36db85 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 24 Nov 2023 08:41:21 +0100
Subject: [PATCH 17/18] refs 6157 markerlabel

---
 src/pages/Claim/Card/ClaimAction.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index 2d8498367..44575f1d6 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -31,7 +31,12 @@ const selectedRows = ref([]);
 const destinationTypes = ref([]);
 const totalClaimed = ref(null);
 const DEFAULT_MAX_RESPONSABILITY = 5;
+const DEFAULT_MIN_RESPONSABILITY = 1;
 const arrayData = useArrayData('claimData');
+const marker_labels = [
+    { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
+    { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
+];
 
 const columns = computed(() => [
     {
@@ -258,12 +263,9 @@ async function importToNewRefundTicket() {
                         label-always
                         color="primary"
                         markers
-                        :marker-labels="[
-                            { value: 1, label: t('claim.summary.company') },
-                            { value: 5, label: t('claim.summary.person') },
-                        ]"
-                        :min="1"
-                        :max="5"
+                        :marker-labels="marker_labels"
+                        :min="DEFAULT_MIN_RESPONSABILITY"
+                        :max="DEFAULT_MAX_RESPONSABILITY"
                     />
                 </QItemLabel>
             </QItem>

From dacfe1a96d99f3dd6e11a6b29a73e6746728f721 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 24 Nov 2023 10:36:31 +0100
Subject: [PATCH 18/18] refs #5654 fix(descriptors): add data-key

---
 src/pages/Customer/Card/CustomerDescriptor.vue     | 1 +
 src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue | 1 +
 src/pages/Ticket/Card/TicketDescriptor.vue         | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 23e6228ee..de398be74 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -34,6 +34,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        data-key="customerData"
     >
         <template #body="{ entity }">
             <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index f6abd77e0..4271f7f38 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -57,6 +57,7 @@ const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
+        data-key="invoiceOutData"
     >
         <template #body="{ entity }">
             <VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 641ffee0c..d2a407874 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -81,6 +81,7 @@ const setData = (entity) =>
         :filter="filter"
         :title="data.title"
         :subtitle="data.subtitle"
+        data-key="ticketData"
         @on-fetch="setData"
     >
         <template #menu="{ entity }">