src/pages/Monitor/MonitorClientsActions.vue

@@ -8,14 +8,14 @@ import VnRow from 'src/components/ui/VnRow.vue';
         class="q-pa-md"
         :style="{ 'flex-direction': $q.screen.lt.lg ? 'column' : 'row', gap: '0px' }"
     >
-        <div style="flex: 0.3">
+        <div style="flex: 0.3" data-cy="clientsOnWebsite">
             <span
                 class="q-ml-md text-body1"
                 v-text="$t('salesMonitor.clientsOnWebsite')"
             />
             <SalesClientTable />
         </div>
-        <div style="flex: 0.7">
+        <div style="flex: 0.7" data-cy="recentOrderActions">
             <span
                 class="q-ml-md text-body1"
                 v-text="$t('salesMonitor.recentOrderActions')"

src/pages/Monitor/MonitorOrders.vue

@@ -9,6 +9,7 @@ import { toDateFormat, toDateTimeFormat } from 'src/filters/date.js';
 import { toCurrency } from 'src/filters';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
+import VnDateBadge from 'src/components/common/VnDateBadge.vue';
 
 const { t } = useI18n();
 const { openConfirmationModal } = useVnConfirm();
@@ -164,29 +165,20 @@ const openTab = (id) =>
             </div>
         </template>
         <template #column-dateSend="{ row }">
-            <QTd>
-                <QBadge
-                    :color="getBadgeColor(row.date_send)"
-                    text-color="black"
-                    class="q-pa-sm"
-                    style="font-size: 14px"
-                >
-                    {{ toDateFormat(row.date_send) }}
-                </QBadge>
-            </QTd>
+            <VnDateBadge :date="row.date_send" />
         </template>
 
         <template #column-clientFk="{ row }">
-            <QTd @click.stop>
-                <span class="link" v-text="row.clientName" :title="row.clientName" />
+            <div @click.stop.prevent :title="row.clientName">
+                <span class="link" v-text="row.clientName" />
                 <CustomerDescriptorProxy :id="row.clientFk" />
-            </QTd>
+            </div>
         </template>
         <template #column-departmentFk="{ row }">
-            <QTd @click.stop>
+            <div @click.stop.prevent :title="row.departmentName">
                 <span class="link" v-text="row.departmentName" />
                 <DepartmentDescriptorProxy :id="row.departmentFk" dense />
-            </QTd>
+            </div>
         </template>
     </VnTable>
 </template>

test/cypress/integration/monitor/clientActions.spec.js

@@ -0,0 +1,61 @@
+describe('Monitor Clients actions', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/#/monitor/clients-actions');
+        cy.waitForElement('.q-page');
+        cy.intercept('GET', '**/SalesMonitors/ordersFilter*').as('ordersFilter');
+        cy.intercept('GET', '**/SalesMonitors/clientsFilter*').as('clientsFilter');
+    });
+    it.only('Should load layout', () => {
+        cy.get('.q-page').should('be.visible');
+
+        cy.firstRow('clientFk').find('span').should('have.class', 'link').click();
+        cy.dataCy('CustomerDescriptor').should('exist');
+        cy.firstRow('departmentFk', 2).find('span').should('have.class', 'link').click();
+        cy.dataCy('DepartmentDescriptor').should('exist');
+
+        cy.dataCy('clientsOnWebsite')
+            .find(' .q-ml-md')
+            .should('have.text', 'Clients on website');
+        cy.dataCy('recentOrderActions')
+            .find('.q-ml-md')
+            .should('have.text', 'Recent order actions');
+        cy.get('[data-cy="From_inputDate"]').should('have.value', '01/01/2001');
+        cy.get('[data-cy="To_inputDate"]').should('have.value', '01/01/2001');
+        cy.get('[data-cy="recentOrderActions"]')
+            .find('[data-cy="column-filter-clientFk"]')
+            .find('  [data-cy="_select"]')
+            .click();
+        cy.get('.q-menu :nth-child(1) >.q-item__section').click();
+        cy.countTableRows('eq', 0);
+
+        cy.get('[data-cy="recentOrderActions"]')
+            .find(
+                '[data-cy="column-filter-clientFk"]   .q-field .q-field__control > :nth-child(2)',
+            )
+            .click();
+        cy.get('[data-cy="recentOrderActions"]')
+            .find('[data-cy="column-filter-departmentFk"]')
+            .find('  [data-cy="_select"]')
+            .click();
+        cy.get('[data-cy="recentOrderActions"]')
+            .find('[data-cy="column-filter-departmentFk"]')
+            .find('  [data-cy="_select"]')
+            .type('VIP');
+        cy.wait(1000);
+        cy.get('.q-menu :nth-child(1) >.q-item__section').click();
+        cy.countTableRows('eq', 13);
+
+        cy.get('[data-cy="recentOrderActions"]')
+            .find('[data-cy="column-filter-clientFk"]')
+            .find('  [data-cy="_select"]')
+            .click();
+        cy.get('[data-cy="recentOrderActions"]')
+            .find('[data-cy="column-filter-clientFk"]')
+            .find('  [data-cy="_select"]')
+            .type('bru');
+        cy.wait(1000);
+        cy.get('.q-menu :nth-child(1) >.q-item__section').click();
+        cy.countTableRows('eq', 3);
+    });
+});

test/cypress/integration/monitor/monitorTicket.spec.js

@@ -12,15 +12,11 @@ describe('Monitor Tickets Table', () => {
     it('should open new tab when ctrl+click on client link', () => {
         cy.intercept('GET', '**/SalesMonitors/salesFilter*').as('filterRequest');
 
-        // Mock window.open behavior since Cypress doesn't support multiple tabs
         cy.window().then((win) => {
             cy.stub(win, 'open').as('windowOpen');
         });
 
-        // Find and ctrl+click the client link in first row
         cy.get(firstRow('provinceFk')).click({ ctrlKey: true });
-
-        // Verify window.open was called with correct URL
         cy.get('@windowOpen').should('be.calledWithMatch', /\/ticket\/\d+\/sale/);
     });
     it('should filter by column headers and update URL params', () => {
@@ -42,101 +38,88 @@ describe('Monitor Tickets Table', () => {
         // Client id - clientFk
         cy.get('[data-cy="Client id_input"]').type('1101');
         cy.searchInFilterPanel();
-        requestParams('clientFk', '1101');
-        countRows('eq', 7);
+        cy.url().should('include', 'clientFk');
+        cy.countTableRows('eq', 7);
         //
         cy.cleanFilterPanel();
-        // TODO: order id
         cy.get('[data-cy="Order id_input"]').type(7);
         cy.searchInFilterPanel();
-        // requestParams('orderFk', '7');
         cy.url().should('include', 'orderFk');
-        countRows('eq', 1);
+        cy.countTableRows('eq', 1);
         //
         cy.cleanFilterPanel();
-        // TODO: Scope days
-        // cy.get('[data-cy="Days onward_input"]').type(2);
-        // cy.searchInFilterPanel();
-        // requestParams('scopeDays', '2');
-        // countRows('eq', 27);
+        cy.get('[data-cy="Days onward_input"]').type(2);
+        cy.searchInFilterPanel();
+        cy.url().should('include', 'scopeDays');
+        cy.countTableRows('eq', 27);
         //
         cy.cleanFilterPanel();
         // Nickname
         cy.get('[data-cy="Nickname_input"]').type('test');
         cy.searchInFilterPanel();
-        // requestParams('nickname', 'test', { inWhere: true, like: false });
         cy.url().should('include', 'nickname');
-        countRows('eq', 2);
+        cy.countTableRows('eq', 2);
         //
         cy.cleanFilterPanel();
         // Invoice
         cy.get('[data-cy="Invoice_input"]').type('test');
         cy.searchInFilterPanel();
-        // requestParams('refFk', 'test');
         cy.url().should('include', 'refFk');
-        countRows('eq', 0);
+        cy.countTableRows('eq', 0);
         //
         cy.cleanFilterPanel();
         // Agency
         cy.get('[data-cy="Agency_select"]').click();
         cy.get('.q-item__label').contains('inhouse pickup').click();
         cy.searchInFilterPanel();
-        // requestParams('agencyModeFk', '1');
         cy.url().should('include', 'agencyModeFk');
-        countRows('eq', 6);
+        cy.countTableRows('eq', 6);
         //
         cy.cleanFilterPanel();
         // State
         cy.get('[data-cy="State_select"]').click();
         cy.get('.q-item__label').contains('Libre').click();
         cy.searchInFilterPanel();
-        // requestParams('ts.stateFk', 2, { inWhere: true });
         cy.url().should('include', 'stateFk');
-        countRows('eq', 11);
+        cy.countTableRows('eq', 13);
         //
         cy.cleanFilterPanel();
         // AlertLevel
         cy.get('[data-cy="Grouped State_select"]').click();
         cy.get('.q-item__label').contains('Free').click();
         cy.searchInFilterPanel();
-        // requestParams('alertLevel', '0');
         cy.url().should('include', 'alertLevel');
-        countRows('eq', 16);
+        cy.countTableRows('eq', 18);
         //
         cy.cleanFilterPanel();
         // Country
         cy.get('[data-cy="Country_select"]').click();
         cy.get('.q-item__label').contains('España').click();
         cy.searchInFilterPanel();
-        // requestParams('countryFk', '1');
         cy.url().should('include', 'countryFk');
-        countRows('eq', 26);
+        cy.countTableRows('eq', 28);
         //
         cy.cleanFilterPanel();
         // Province
         cy.get('[data-cy="Warehouse_select"]').click();
         cy.get('.q-item__label').contains('Warehouse Two').click();
         cy.searchInFilterPanel();
-        // requestParams('warehouseFk', '2');
         cy.url().should('include', 'warehouseFk');
-        countRows('eq', 1);
+        cy.countTableRows('eq', 1);
         //
         cy.cleanFilterPanel();
         // Department
         cy.selectOption('[data-cy="Department_select"]', 'EQUIPO ESPAÑA LEVANTE');
         cy.searchInFilterPanel();
-        // requestParams('departmentFk', '150');
         cy.url().should('include', 'departmentFk');
-        // countRows('eq', 27);
         //
         cy.cleanFilterPanel();
         // ITP
         cy.get('[data-cy="ITP_select"]').click();
         cy.get('.q-item__label').contains('H').click();
         cy.searchInFilterPanel();
-        // requestParams('packing', 'H');
         cy.url().should('include', 'packing');
-        countRows('eq', 5);
+        cy.countTableRows('eq', 5);
     });
 
     it('Cols', () => {
@@ -194,36 +177,3 @@ function checkScopeDays(scopeDays) {
         );
     });
 }
-function requestParams(key, value, options = { inWhere: false, like: false }) {
-    cy.wait('@filterRequest').then((interception) => {
-        if (!key) return;
-        const { query } = interception.request;
-        if (!options.inWhere) expect(query).to.have.property(key, value);
-        else {
-            const filter = JSON.parse(query.filter);
-            if (options.like)
-                expect(filter.where).to.have.deep.property(key, {
-                    like: `%${value}%`,
-                });
-            else {
-                expect(filter).to.have.property('where');
-                expect(filter.where).to.have.property(key, value);
-            }
-        }
-    });
-}
-function countRows(operator = 'gt', value = 0) {
-    const element = 'data-row-index';
-    cy.get('body').then(($body) => {
-        const hasRows = $body.find(`td[${element}]`).length > 0;
-        if (!hasRows) expect(0).to.be[operator](value);
-        else
-            cy.get(`td[${element}]`)
-                .last()
-                .invoke('attr', element)
-                .then((lastIndex) => {
-                    const totalRows = parseInt(lastIndex) + 1;
-                    expect(totalRows).to.be[operator](value);
-                });
-    });
-}