refs #5673 fix: front, e2e, fix: VnSelectFilter

src/components/CrudModel.vue

@@ -261,10 +261,6 @@ function isEmpty(obj) {
 }
 </script>
 <template>
-    <QBanner v-if="hasChanges" class="text-white bg-warning">
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <VnPaginate
         @submit="onSubmit"
         @reset="reset"
@@ -286,12 +282,13 @@ function isEmpty(obj) {
     </VnPaginate>
     <SkeletonTable v-if="!formData" />
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push flat class="q-gutter-x-sm">
+        <QBtnGroup push class="q-gutter-x-sm">
             <slot name="moreActions" />
             <QBtn
                 :label="tMobile('globals.remove')"
                 color="primary"
                 icon="delete"
+                flat
                 @click="remove(selected)"
                 :disable="!selected?.length"
                 :title="t('globals.remove')"

src/components/common/VnSelectFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -16,10 +16,9 @@ const $props = defineProps({
         default: '',
     },
 });
-
+const myOptions = computed(() => $props.options);
 const updateValue = (newValue) => emit('update:modelValue', newValue);
 const { modelValue, optionLabel, options } = toRefs($props);
-const myOptions = ref(JSON.parse(JSON.stringify(options.value)));
 const myOptionsOriginal = ref(JSON.parse(JSON.stringify(options.value)));
 
 const filter = (val, options) => {

src/components/ui/VnPaginate.vue

@@ -171,7 +171,7 @@ async function onLoad(...params) {
             </QCard>
         </div>
     </div>
-    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset">
+    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
             <QSpinner color="orange" size="md" />

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -121,7 +121,6 @@ const columns = computed(() => [
         auto-load
     />
     <div class="column items-center">
-        <div class="list">
         <CrudModel
             data-key="ClaimDevelopments"
             url="ClaimDevelopments"
@@ -182,7 +181,6 @@ const columns = computed(() => [
             </template>
         </CrudModel>
     </div>
-    </div>
     <QPageSticky position="bottom-right" :offset="[25, 25]">
         <QBtn fab color="primary" icon="add" @click="claimDevelopmentForm.insert()" />
     </QPageSticky>
@@ -192,6 +190,9 @@ const columns = computed(() => [
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;
 }
+.maxwidth {
+    width: 100%;
+}
 </style>
 
 <i18n>

test/cypress/integration/claimDevelopment.spec.js

@@ -1,6 +1,8 @@
 /// <reference types="cypress" />
 describe('ClaimDevelopment', () => {
     const claimId = 1;
+    const firstLineReason = 'tbody > :nth-child(1) > :nth-child(2)';
+    const thirdRow = 'tbody > :nth-child(3)';
 
     beforeEach(() => {
         cy.viewport(1920, 1080);
@@ -9,58 +11,46 @@ describe('ClaimDevelopment', () => {
     });
 
     it('should reset line', () => {
-        cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
+        cy.selectOption(firstLineReason, 'Novato');
-        cy.selectOption('Novato');
+        cy.resetCard();
-        cy.get('[title="Reset"]').click();
+        cy.getValue(firstLineReason).should('have.text', 'Prisas');
-        cy.get(
-            ':nth-child(1) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
-        ).should('have.text', 'Prisas');
     });
 
     it('should edit line', () => {
-        cy.get('tbody > :nth-child(1) > :nth-child(2)').click();
+        cy.selectOption(firstLineReason, 'Novato');
-        cy.selectOption('Novato');
+        cy.saveCard();
-        cy.get('[title="Save"]').click();
 
-        cy.visit(`/#/claim/${claimId}/development`);
+        cy.reload();
-        cy.get(
+        cy.getValue(firstLineReason).should('have.text', 'Novato');
-            ':nth-child(1) > :nth-child(2) > .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
-        ).should('have.text', 'Novato');
 
         //Restart data
-        cy.get('tbody > :nth-child(1) > :nth-child(2)');
+        cy.selectOption(firstLineReason, 'Prisas');
-        cy.selectOption('Prisas');
+        cy.saveCard();
-        cy.get('[title="Save"]').click();
     });
 
-    it('should add new line', () => {
+    it('should add and remove new line', () => {
-        //check third if row exist
+        //add row
-        cy.get('.q-page-sticky > div > .q-btn').click();
+        cy.addCard();
-        cy.get('tbody > :nth-child(3)').should('exist');
+        cy.get(thirdRow).should('exist');
 
-        //fill in data
+        const rowData = [false, 'Novato', 'Roces', 'Compradores', 'employeeNick', 'Tour'];
-        const rowData = ['', '', ''];
+        cy.fillRow(thirdRow, rowData);
-        cy.fillTableRow(3, rowData);
+        cy.saveCard();
+        cy.validateRow(thirdRow, rowData);
+
+        cy.reload();
+        cy.validateRow(thirdRow, rowData);
+
+        //remove row
+        cy.fillRow(thirdRow, [true]);
+        cy.removeCard();
+        cy.clickConfirm();
+        cy.get(thirdRow).should('not.exist');
+
+        cy.reload();
+        cy.get(thirdRow).should('not.exist');
     });
 
-    // it('should remove last line', () => {
-    //     cy.get(
-    //         ':nth-child(1) > .q-card > .q-img > .q-img__container > .q-img__image'
-    //     ).click();
-    //     cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
-    //         'be.visible'
-    //     );
-
-    //     cy.get('.q-carousel__control > .q-btn > .q-btn__content > .q-icon').click();
-
-    //     cy.get(
-    //         '.q-dialog__inner > .q-toolbar > .q-btn > .q-btn__content > .q-icon'
-    //     ).click();
-    //     cy.get('.q-carousel__slide > .q-img > .q-img__container > .q-img__image').should(
-    //         'not.be.visible'
-    //     );
-    // });
-
     // it('should remove third and fourth file', () => {
     //     cy.get(
     //         '.multimediaParent > :nth-child(3) > .q-btn > .q-btn__content > .q-icon'

test/cypress/support/commands.js

@@ -41,70 +41,90 @@ Cypress.Commands.add('login', (user) => {
     });
 });
 
-Cypress.Commands.add('selectOption', (option) => {
+Cypress.Commands.add('waitForElement', (element) => {
-    //cy.visit('/#/login');
+    cy.get(element, { timeout: 2000 }).should('be.visible');
-    cy.get('.q-item__label').then(() => {
-        cy.contains('.q-item__label', option).click();
-    });
 });
 
-// Cypress.Commands.add('fillRow', (row, options) => {
+Cypress.Commands.add('getValue', (selector) => {
-//     //cy.visit('/#/login');
+    cy.get(selector).then(($el) => {
-//     for (let [i, option] of options.entries()) {
+        if ($el.find('.q-checkbox__inner').length > 0) {
-//         i++;
+            return cy.get(selector + '.q-checkbox__inner');
-//         console.log(i);
+        }
-//         const selector = `tbody > :nth-child(${row}) > :nth-child(${i})`;
+        // Si es un QSelect
-//         if (cy.get(selector).should('have.class', 'q-select'))
+        else if ($el.find('.q-select__dropdown-icon').length) {
-//             cy.selectOption(selector, option);
+            return cy.get(
-//     }
+                selector +
-// });
+                    '> .q-field > .q-field__inner > .q-field__control > .q-field__control-container > .q-field__native > span'
-Cypress.Commands.add('fillTableRow', (rowNumber, data) => {
+            );
-    // Obtener todas las filas de la tabla
-    cy.get('table tbody tr').eq(rowNumber).as('currentRow');
-
-    // Iterar sobre cada dato en el array 'data'
-    data.forEach((value, index) => {
-        // Basándonos en el índice, encontramos la celda correspondiente y verificamos el tipo de input
-        cy.get('@currentRow')
-            .find('td')
-            .eq(index)
-            .find('input')
-            .invoke('attr', 'type')
-            .then((type) => {
-                switch (type) {
-                    case 'text':
-                        cy.get('@currentRow')
-                            .find('td')
-                            .eq(index)
-                            .find('input[type="text"]')
-                            .clear()
-                            .type(value);
-                        break;
-
-                    case 'checkbox':
-                        if (value) {
-                            // Puede adaptar esto según cómo represente los valores booleanos en su array 'data'
-                            cy.get('@currentRow')
-                                .find('td')
-                                .eq(index)
-                                .find('input[type="checkbox"]')
-                                .check();
         } else {
+            // Puedes añadir un log o lanzar un error si el elemento no es reconocido
+            cy.log('Elemento no soportado');
+        }
+    });
+});
+
+// Fill Inputs
+Cypress.Commands.add('selectOption', (selector, option) => {
+    cy.get(selector).find('.q-select__dropdown-icon').click();
+    cy.get('.q-menu .q-item').contains(option).click();
+});
+
+Cypress.Commands.add('checkOption', (selector) => {
+    cy.wrap(selector).find('.q-checkbox__inner').click();
+});
+
+// Global buttons
+Cypress.Commands.add('saveCard', () => {
+    cy.get('[title="Save"]').click();
+    cy.get('[title="Save"]').should('have.class', 'disabled');
+});
+Cypress.Commands.add('resetCard', () => {
+    cy.get('[title="Reset"]').click();
+});
+Cypress.Commands.add('removeCard', () => {
+    cy.get('[title="Remove"]').click();
+});
+Cypress.Commands.add('addCard', () => {
+    cy.waitForElement('tbody');
+    cy.get('.q-page-sticky > div > .q-btn').click();
+});
+Cypress.Commands.add('clickConfirm', () => {
+    cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
+});
+
+Cypress.Commands.add('fillRow', (rowSelector, data) => {
+    // Usar el selector proporcionado para obtener la fila deseada
+    cy.waitForElement('tbody');
+    cy.get(rowSelector).as('currentRow');
+
+    data.forEach((value, index) => {
+        if (value === null) return;
         cy.get('@currentRow')
             .find('td')
             .eq(index)
-                                .find('input[type="checkbox"]')
+            .then((td) => {
-                                .uncheck();
+                if (td.find('.q-select__dropdown-icon').length) {
+                    cy.selectOption(td, value);
                 }
-                        break;
+                if (td.find('.q-checkbox__inner').length && value) {
-
+                    cy.checkOption(td);
-                    // ... Puede agregar más casos para otros tipos de inputs según sea necesario
-
-                    default:
-                        // Manejar cualquier otro tipo de input o agregar lógica de error aquí si es necesario
-                        break;
                 }
             });
     });
 });
+
+Cypress.Commands.add('validateRow', (rowSelector, expectedValues) => {
+    cy.waitForElement('tbody');
+    cy.get(rowSelector).within(() => {
+        for (const [index, value] of expectedValues.entries()) {
+            cy.log('CHECKING ', index, value);
+            if (typeof value == 'boolean') {
+                const prefix = value ? '' : 'not.';
+                cy.getValue(`:nth-child(${index + 1})`).should(`${prefix}be.checked`);
+                continue;
+            }
+            cy.getValue(`:nth-child(${index + 1})`).should('have.text', value);
+        }
+    });
+});
 // registerCommands();