Merge pull request 'feat: refs #9026 enhance FormModelPopup with reset button and update VnTable grid layout' (!1831) from 9026_first_proposal into master

Reviewed-on: #1831
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/FormModelPopup.vue

@@ -2,6 +2,7 @@
 import { ref, computed, useAttrs, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
+import { tMobile } from 'src/composables/tMobile';
 
 import FormModel from 'components/FormModel.vue';
 
@@ -93,12 +94,25 @@ defineExpose({
                     z-max
                     @click="emit('onDataCanceled')"
                 />
+                <QBtn
+                    :label="tMobile('globals.reset')"
+                    :title="t('globals.reset')"
+                    color="primary"
+                    icon="restart_alt"
+                    flat
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    data-cy="FormModelPopup_reset"
+                    @click="reset"
+                    z-max
+                />
                 <QBtn
                     :flat="showSaveAndContinueBtn"
-                    :label="t('globals.save')"
+                    :label="tMobile('globals.save')"
                     :title="t('globals.save')"
                     :type="!showSaveAndContinueBtn ? 'submit' : 'button'"
                     color="primary"
+                    icon="save"
                     class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"

src/components/VnTable/VnTable.vue

@@ -1091,6 +1091,8 @@ const handleHeaderSelection = (evt, data) => {
         </QTooltip>
     </QPageSticky>
     <QDialog
+        :no-esc-dismiss="false"
+        :no-backdrop-dismiss="true"
         v-model="showForm"
         transition-show="scale"
         transition-hide="scale"
@@ -1223,7 +1225,11 @@ es:
 
 .grid-create {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    grid-template-columns: repeat(auto-fit, minmax(220px, max-content));
+
+    @media (max-width: 600px) {
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    }
     max-width: 100%;
     grid-gap: 20px;
     margin: 0 auto;

test/cypress/integration/ticket/negative/TicketLackDetail.spec.js

@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 const firstRow = 'tr.cursor-pointer > :nth-child(1)';
 const ticketId = 1000000;
+const itemId = '88';
 const clickNotificationAction = () => {
     const notification = '.q-notification';
     cy.waitForElement(notification);
@@ -18,7 +19,7 @@ describe.skip('Ticket Lack detail', { testIsolation: true }, () => {
         cy.viewport(1980, 1020);
         cy.login('developer');
         cy.intercept('GET', /\/api\/Tickets\/itemLack\/88.*$/).as('getItemLack');
-        cy.visit('/#/ticket/negative/88');
+        cy.visit(`/#/ticket/negative/${itemId}`);
         cy.window().then((win) => {
             cy.stub(win, 'open').as('open');
         });
@@ -105,7 +106,7 @@ describe.skip('Ticket Lack detail', { testIsolation: true }, () => {
             cy.dataCy('New item_select').should('be.visible');
             cy.selectOption('[data-cy="New item_select"]', 'Palito rojo');
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
-            cy.checkNotification('Ticket 1000000: price retrieval failed');
+            cy.checkNotification(`Ticket ${ticketId}: price retrieval failed`);
             cy.dataCy('changeItem').click();
             cy.selectOption('[data-cy="New item_select"]', 'Ranged weapon longbow 200cm');
             cy.get('.q-btn--unelevated > .q-btn__content > .block').click();
@@ -113,10 +114,11 @@ describe.skip('Ticket Lack detail', { testIsolation: true }, () => {
             clickNotificationAction();
         });
         after(() => {
+            cy.intercept('GET', /\/api\/Tickets\/\d+/).as('sale');
             cy.visit(`/#/ticket/${ticketId}/sale`);
+            cy.wait('@sale');
             const quantity = Math.floor(Math.random() * 100) + 1;
-            const rowIndex = 1;
-
+            cy.findRowIndexByColValue('itemFk', itemId, (rowIndex) => {
                 cy.dataCy('ticketSaleQuantityInput')
                     .find('input')
                     .eq(rowIndex)
@@ -129,6 +131,7 @@ describe.skip('Ticket Lack detail', { testIsolation: true }, () => {
                     .should('have.value', `${quantity}`);
             });
         });
+    });
 
     describe('Item proposal', () => {
         beforeEach(() => {

test/cypress/integration/vnComponent/vnTable.commands.js

@@ -48,6 +48,31 @@ Cypress.Commands.add('validateVnTableRows', (opts = {}) => {
         });
     });
 });
+Cypress.Commands.add('findRowIndexByColValue', (colField, value, cb) => {
+    return cy
+        .get('[data-cy="vnTable"] .q-virtual-scroll__content')
+        .children()
+        .then(($rows) => {
+            let foundIndex = -1;
+
+            Cypress._.some($rows, (row, index) => {
+                const cell = row.querySelector(`[data-col-field="${colField}"]`);
+                const text = cell?.textContent?.trim();
+                if (text === value) {
+                    foundIndex = index;
+                    return true;
+                }
+            });
+
+            if (foundIndex === -1) {
+                throw new Error(
+                    `No se encontró ninguna fila con ${colField} = "${value}"`,
+                );
+            }
+
+            cb(foundIndex);
+        });
+});
 
 Cypress.Commands.add('colField', (name, index = null, key = 'data-col-field') => {
     if (index) {