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] 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();
+    });
+});