From 11266b602ce3c0fe704f42cb01cf3e638236b4e3 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 3 Jul 2024 09:33:48 +0200
Subject: [PATCH] refactor: refs #7404 route list add table

---
 src/components/ui/VnSubToolbar.vue            |  8 +--
 src/pages/Route/RouteList.vue                 | 62 ++++++++++---------
 src/pages/Route/RouteMain.vue                 |  3 +-
 src/stores/useStateStore.js                   |  2 +-
 .../integration/route/routeList.spec.js       | 39 ++++++++++++
 .../vnComponent/vnBreadcrumbs.spec.js         | 21 +++++++
 .../vnComponent/vnLocation.spec.js            | 56 +++++++++++++++++
 .../integration/vnComponent/vnLog.spec.js     | 25 ++++++++
 .../vnComponent/vnSearchBar.spec.js           | 36 +++++++++++
 9 files changed, 213 insertions(+), 39 deletions(-)
 create mode 100644 test/cypress/integration/route/routeList.spec.js
 create mode 100644 test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js
 create mode 100644 test/cypress/integration/vnComponent/vnLocation.spec.js
 create mode 100644 test/cypress/integration/vnComponent/vnLog.spec.js
 create mode 100644 test/cypress/integration/vnComponent/vnSearchBar.spec.js

diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 427673345..df6fcbcb7 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onBeforeUnmount, ref, nextTick } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-import { onBeforeRouteLeave } from 'vue-router';
 
 const stateStore = useStateStore();
 const actions = ref(null);
@@ -26,10 +25,7 @@ onMounted(() => {
     if (data.value) observer.observe(data.value, opts);
 });
 
-onUnmounted(() => {
-    stateStore.toggleSubToolbar();
-});
-onBeforeRouteLeave((to, from) => {});
+onBeforeUnmount(() => stateStore.toggleSubToolbar());
 </script>
 
 <template>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 80eb3bf62..a2e938d7d 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -240,35 +240,7 @@ onMounted(() => {
     />
     <FetchData url="AgencyModes" @on-fetch="(data) => (agencyList = data)" auto-load />
     <FetchData url="Vehicles" @on-fetch="(data) => (vehicleList = data)" auto-load />
-    <VnSubToolbar>
-        <QBtn
-            icon="vn:clone"
-            color="primary"
-            class="q-mr-sm"
-            :disable="!selectedRows?.length"
-            @click="confirmationDialog = true"
-        >
-            <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
-        </QBtn>
-        <QBtn
-            icon="cloud_download"
-            color="primary"
-            class="q-mr-sm"
-            :disable="!selectedRows?.length"
-            @click="showRouteReport"
-        >
-            <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
-        </QBtn>
-        <QBtn
-            icon="check"
-            color="primary"
-            class="q-mr-sm"
-            :disable="!selectedRows?.length"
-            @click="markAsServed()"
-        >
-            <QTooltip>{{ t('Mark as served') }}</QTooltip>
-        </QBtn>
-    </VnSubToolbar>
+    <VnSubToolbar />
     <VnTable
         ref="tableRef"
         data-key="RouteList"
@@ -284,7 +256,37 @@ onMounted(() => {
         }"
         save-url="WorkerIncomes/crud"
         :disable-option="{ card: true }"
-    />
+    >
+        <template #moreBeforeActions>
+            <QBtn
+                icon="vn:clone"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="confirmationDialog = true"
+            >
+                <QTooltip>{{ t('Clone Selected Routes') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                icon="cloud_download"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="showRouteReport"
+            >
+                <QTooltip>{{ t('Download selected routes as PDF') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                icon="check"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedRows?.length"
+                @click="markAsServed()"
+            >
+                <QTooltip>{{ t('Mark as served') }}</QTooltip>
+            </QBtn>
+        </template>
+    </VnTable>
 
     <!--  >
             <VnPaginate
diff --git a/src/pages/Route/RouteMain.vue b/src/pages/Route/RouteMain.vue
index 19ae5ec23..aace646fb 100644
--- a/src/pages/Route/RouteMain.vue
+++ b/src/pages/Route/RouteMain.vue
@@ -14,7 +14,6 @@ onMounted(() => (stateStore.leftDrawer = false));
         </QScrollArea>
     </QDrawer>
     <QPageContainer>
-        <VnSubToolbar />
-        <RouterView v-if="stateStore.isSubToolbarShown()"></RouterView>
+        <RouterView></RouterView>
     </QPageContainer>
 </template>
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index 76840c96a..9f232e1dc 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -17,7 +17,7 @@ export const useStateStore = defineStore('stateStore', () => {
 
     function toggleSubToolbar() {
         subToolbar.value = !subToolbar.value;
-        /*  console.log('subToolbar.value: ', subToolbar.value); */
+        console.log('subToolbar.value: ', subToolbar.value);
     }
 
     function setMounted() {
diff --git a/test/cypress/integration/route/routeList.spec.js b/test/cypress/integration/route/routeList.spec.js
new file mode 100644
index 000000000..6d33dbc39
--- /dev/null
+++ b/test/cypress/integration/route/routeList.spec.js
@@ -0,0 +1,39 @@
+describe('AgencyWorkCenter', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/agency/11/workCenter`);
+    });
+
+    it('assign workCenter', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(
+            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('workCenterOne{enter}');
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+    });
+
+    it('delete workCenter', () => {
+        cy.get('.q-item__section--side > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'WorkCenter removed successfully'
+        );
+    });
+
+    it('error on duplicate workCenter', () => {
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(
+            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('workCenterOne{enter}');
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(
+            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('workCenterOne{enter}');
+
+        cy.get(
+            ':nth-child(2) > .q-notification__wrapper > .q-notification__content > .q-notification__message'
+        ).should('have.text', 'This workCenter is already assigned to this agency');
+    });
+});
diff --git a/test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js b/test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js
new file mode 100644
index 000000000..3c839c1c7
--- /dev/null
+++ b/test/cypress/integration/vnComponent/vnBreadcrumbs.spec.js
@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+describe('VnBreadcrumbs', () => {
+    const firstCard = '.q-infinite-scroll > :nth-child(1)';
+    const lastBreadcrumb = '.q-breadcrumbs--last > .q-breadcrumbs__el';
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/');
+    });
+
+    it('should not be breadcrumbs', () => {
+        cy.get('.q-breadcrumbs').should('not.exist');
+    });
+
+    it('should get the correct breadcrumbs', () => {
+        cy.visit('#/customer/list');
+        cy.get('.q-breadcrumbs__el').should('have.length', 2);
+
+        cy.get(firstCard).click();
+        cy.get(`${lastBreadcrumb} > .q-icon`).should('have.text', 'launch');
+    });
+});
diff --git a/test/cypress/integration/vnComponent/vnLocation.spec.js b/test/cypress/integration/vnComponent/vnLocation.spec.js
new file mode 100644
index 000000000..6719d8391
--- /dev/null
+++ b/test/cypress/integration/vnComponent/vnLocation.spec.js
@@ -0,0 +1,56 @@
+const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
+describe('VnLocation', () => {
+    const dialogInputs = '.q-dialog label input';
+    describe('Worker Create', () => {
+        const inputLocation = '.q-form input[aria-label="Location"]';
+        beforeEach(() => {
+            cy.viewport(1280, 720);
+            cy.login('developer');
+            cy.visit('/#/worker/create', { timeout: 5000 });
+            cy.waitForElement('.q-card');
+        });
+        it('Show all options', function () {
+            cy.get(inputLocation).click();
+            cy.get(locationOptions).should('have.length.at.least', 5);
+        });
+        it('input filter location as "al"', function () {
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type('al');
+            cy.get(locationOptions).should('have.length.at.least', 3);
+        });
+        it('input filter location as "ecuador"', function () {
+            cy.get(inputLocation).click();
+            cy.get(inputLocation).clear();
+            cy.get(inputLocation).type('ecuador');
+            cy.get(locationOptions).should('have.length.at.least', 1);
+        });
+    });
+    describe('Fiscal-data', () => {
+        beforeEach(() => {
+            cy.viewport(1280, 720);
+            cy.login('developer');
+            cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
+            cy.waitForElement('.q-form');
+        });
+        it('Create postCode', function () {
+            cy.get('.q-form > .q-card > .vn-row:nth-child(6) .--add-icon').click();
+            cy.get('.q-card > h1').should('have.text', 'New postcode');
+            cy.get(dialogInputs).eq(0).clear('12');
+            cy.get(dialogInputs).eq(0).type('1234453');
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4)   > .q-select > .q-field__inner > .q-field__control ',
+                'Valencia'
+            );
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5)   > .q-select > .q-field__inner > .q-field__control ',
+                'Province one'
+            );
+            cy.selectOption(
+                '.q-dialog__inner > .column > #formModel > .q-card > :nth-child(6)  > .q-select > .q-field__inner > .q-field__control ',
+                'España'
+            );
+            cy.get('.q-mt-lg > .q-btn--standard').click();
+        });
+    });
+});
diff --git a/test/cypress/integration/vnComponent/vnLog.spec.js b/test/cypress/integration/vnComponent/vnLog.spec.js
new file mode 100644
index 000000000..4db724e99
--- /dev/null
+++ b/test/cypress/integration/vnComponent/vnLog.spec.js
@@ -0,0 +1,25 @@
+/// <reference types="cypress" />
+describe('VnLog', () => {
+    const chips = [
+        ':nth-child(1) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+        ':nth-child(2) > :nth-child(1) > .q-item__label > .q-chip > .q-chip__content',
+    ];
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit(`/#/claim/${1}/log`);
+        cy.openRightMenu();
+    });
+    // Se tiene que cambiar el Accept-Language a 'en', ya hay una tarea para eso #7189.
+    xit('should filter by insert actions', () => {
+        cy.checkOption(':nth-child(7) > .q-checkbox');
+        cy.get('.q-page').click();
+        cy.validateContent(chips[0], 'Document');
+        cy.validateContent(chips[1], 'Beginning');
+    });
+
+    xit('should filter by entity', () => {
+        cy.selectOption('.q-drawer--right .q-item > .q-select', 'Claim');
+        cy.get('.q-page').click();
+        cy.validateContent(chips[0], 'Claim');
+    });
+});
diff --git a/test/cypress/integration/vnComponent/vnSearchBar.spec.js b/test/cypress/integration/vnComponent/vnSearchBar.spec.js
new file mode 100644
index 000000000..580199bc3
--- /dev/null
+++ b/test/cypress/integration/vnComponent/vnSearchBar.spec.js
@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+describe('VnSearchBar', () => {
+    const employeeId = ' #1';
+    const salesPersonId = ' #18';
+    const idGap = '.q-item > .q-item__label';
+    const vnTableRow = '.q-virtual-scroll__content';
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('#/customer/list');
+    });
+
+    it('should redirect to customer summary page', () => {
+        searchAndCheck('1', employeeId);
+        searchAndCheck('salesPerson', salesPersonId);
+    });
+
+    it('should stay on the list page if there are several results or none', () => {
+        cy.writeSearchbar('salesA{enter}');
+        checkTableLength(2);
+
+        cy.clearSearchbar();
+
+        cy.writeSearchbar('0{enter}');
+        checkTableLength(0);
+    });
+
+    const searchAndCheck = (searchTerm, expectedText) => {
+        cy.clearSearchbar();
+        cy.writeSearchbar(`${searchTerm}{enter}`);
+        cy.get(idGap).should('have.text', expectedText);
+    };
+
+    const checkTableLength = (expectedLength) => {
+        cy.get(vnTableRow).find('tr').should('have.length', expectedLength);
+    };
+});