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')"

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,7 +239,6 @@ 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>
@@ -252,9 +252,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="
+                        @update:model-value="(value) => save({ responsibility: value })"
-                                (value) => save({ responsibility: value })
-                            "
                         label-always
                         color="primary"
                         markers
@@ -275,10 +273,8 @@ async function importToNewRefundTicket() {
             />
             <span>{{ t('mana') }}</span>
         </QItemLabel>
-        </QScrollArea>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
-    <div class="claim-action">
     <CrudModel
         v-if="claim"
         data-key="ClaimEnds"
@@ -313,16 +309,18 @@ async function importToNewRefundTicket() {
                         </span>
                     </QTd>
                 </template>
-                    <template #body-cell-destination="{ rowIndex }">
+                <template #body-cell-destination="{ row }">
                     <QTd>
                         <VnSelectFilter
-                                v-model="destinations[rowIndex]"
+                            v-model="row.claimDestinationFk"
                             :options="destinationTypes"
-                                option-value="id"
                             option-label="description"
-                                @update:model-value="
+                            option-value="id"
-                                    (value) => updateDestination(value, rows[rowIndex])
+                            :autofocus="true"
-                                "
+                            dense
+                            input-debounce="0"
+                            hide-selected
+                            @update:model-value="(value) => updateDestination(value, row)"
                         />
                     </QTd>
                 </template>
@@ -336,22 +334,6 @@ async function importToNewRefundTicket() {
                         {{ 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">
@@ -363,19 +345,14 @@ async function importToNewRefundTicket() {
 
                             <QSeparator inset />
                             <QList dense>
-                                    <QItem
+                                <QItem v-for="column of props.cols" :key="column.name">
-                                        v-for="column of props.cols"
-                                        :key="column.name"
-                                    >
                                     <QItemSection>
                                         <QItemLabel caption>
                                             {{ column.label }}
                                         </QItemLabel>
                                     </QItemSection>
                                     <QItemSection side>
-                                            <QItemLabel
+                                        <QItemLabel v-if="column.name === 'destination'">
-                                                v-if="column.name === 'destination'"
-                                            >
                                             {{ column.value.description }}
                                         </QItemLabel>
                                         <QItemLabel v-else>
@@ -433,21 +410,20 @@ async function importToNewRefundTicket() {
                     <QBtn icon="close" flat round dense v-close-popup />
                 </QItem>
             </QCardSection>
-                <QCardSection>
+            <QItemSection>
                 <VnSelectFilter
                     v-model="claimDestinationFk"
                     :options="destinationTypes"
                     option-label="description"
                     option-value="id"
+                    :autofocus="true"
+                    dense
+                    input-debounce="0"
+                    hide-selected
                 />
-                </QCardSection>
+            </QItemSection>
             <QCardActions class="justify-end q-mr-sm">
-                    <QBtn
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
                 <QBtn
                     :disable="!claimDestinationFk"
                     :label="t('globals.save')"
@@ -467,12 +443,7 @@ async function importToNewRefundTicket() {
                 <QBtn icon="close" flat round dense v-close-popup />
             </QItem>
             <QCardActions class="justify-end q-mr-sm">
-                    <QBtn
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                        flat
-                        :label="t('globals.close')"
-                        color="primary"
-                        v-close-popup
-                    />
                 <QBtn
                     :label="t('globals.save')"
                     color="primary"
@@ -482,7 +453,6 @@ async function importToNewRefundTicket() {
             </QCardActions>
         </QCardSection>
     </QDialog>
-    </div>
 </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>

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>

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