From 45dc9c355f4ab6342a82bb8e597a81cea2b96318 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 24 Jan 2024 08:30:09 +0100
Subject: [PATCH] refs #6280 perf: improve component

---
 src/components/common/VnLocation.vue        | 15 ++++++----
 src/pages/Customer/CustomerCreate.vue       |  7 +++--
 src/pages/Worker/WorkerCreate.vue           |  7 +++--
 test/cypress/integration/VnLocation.spec.js | 32 +++++++++++++++++++++
 4 files changed, 49 insertions(+), 12 deletions(-)
 create mode 100644 test/cypress/integration/VnLocation.spec.js

diff --git a/src/components/common/VnLocation.vue b/src/components/common/VnLocation.vue
index 674784849..a7a58e2b8 100644
--- a/src/components/common/VnLocation.vue
+++ b/src/components/common/VnLocation.vue
@@ -54,11 +54,16 @@ const value = computed({
     },
 });
 
+onMounted(() => {
+    locationFilter()
+});
+
 function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
 setOptions(options.value);
+
 watch(options, (newValue) => {
     setOptions(newValue);
 });
@@ -67,17 +72,15 @@ function showLabel(data) {
        return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
 }
 
-
-onMounted(() => {
-    locationFilter()
-})
 function locationFilter(search) {
-    let args = { filter:{limit: 30}, search};
-    postcodesRef.value.fetch({args});
+    let where = { search };
+    postcodesRef.value.fetch({filter:{ where}, limit: 30});
 }
+
 function handleFetch( data) {
     postcodesOptions.value = data;
 }
+
 async function onPostcodeCreated(){
     locationFilter()
 };
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index 4ce4b4520..800279326 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -33,9 +33,10 @@ const businessTypesOptions = ref([]);
 const postcodesOptions = ref([]);
 
 
-function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
-    data.postcode = postcode;
-    data.city = city;
+function handleLocation(data, location ) {
+    const { town, code, provinceFk, countryFk } = location ?? {}
+    data.postcode = code;
+    data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index 490fd2086..3ded85584 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -57,9 +57,10 @@ const onBankEntityCreated = (data) => {
 };
 
 
-function handleLocation(data, { city, postcode, provinceFk, countryFk }) {
-    data.postcode = postcode;
-    data.city = city;
+function handleLocation(data, location ) {
+    const { town, postcode: code, provinceFk, countryFk } = location ?? {}
+    data.postcode = code;
+    data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
diff --git a/test/cypress/integration/VnLocation.spec.js b/test/cypress/integration/VnLocation.spec.js
new file mode 100644
index 000000000..20b18700f
--- /dev/null
+++ b/test/cypress/integration/VnLocation.spec.js
@@ -0,0 +1,32 @@
+const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
+const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
+describe('VnLocation', () => {
+    beforeEach(() => {
+        cy.viewport(1280, 720);
+        cy.login('developer');
+        cy.visit('/#/worker/create');
+        cy.waitForElement('.q-card');
+    });
+
+    // it('Show all options', function() {
+    //   cy.get(inputLocation).click();
+    //   cy.get(locationOptions).should('have.length',5)
+    //   // cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click()
+    // });
+
+    // 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',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',1);
+        cy.get(`${locationOptions}:nth-child(1)`).click();
+        cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
+
+    });
+})