Merge pull request 'Mixin performance' (!875) from performance_mixins into dev

Reviewed-on: verdnatura/salix-front#875
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/boot/mainShortcutMixin.js

@@ -0,0 +1,36 @@
+import routes from 'src/router/modules';
+import { useRouter } from 'vue-router';
+
+let isNotified = false;
+
+export default {
+    created: function () {
+        const router = useRouter();
+        const keyBindingMap = routes
+            .filter((route) => route.meta.keyBinding)
+            .reduce((map, route) => {
+                map['Key' + route.meta.keyBinding.toUpperCase()] = route.path;
+                return map;
+            }, {});
+
+        const handleKeyDown = (event) => {
+            const { ctrlKey, altKey, code } = event;
+
+            if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) {
+                event.preventDefault();
+                router.push(keyBindingMap[code]);
+                isNotified = true;
+            }
+        };
+
+        const handleKeyUp = (event) => {
+            const { ctrlKey, altKey } = event;
+            if (!ctrlKey || !altKey) {
+                isNotified = false;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+    },
+};

src/boot/qformMixin.js

@@ -1,13 +1,37 @@
-import { getCurrentInstance } from 'vue';
-
+function focusFirstInput(input) {
+    input.focus();
+    return;
+}
 export default {
     mounted: function () {
-        const vm = getCurrentInstance();
-        if (vm.type.name === 'QForm') {
-            if (!['searchbarForm', 'filterPanelForm'].includes(this.$el?.id)) {
-                // TODO: AUTOFOCUS IS NOT FOCUSING
         const that = this;
-                this.$el.addEventListener('keyup', function (evt) {
+
+        const form = document.querySelector('.q-form#formModel');
+        if (!form) return;
+        try {
+            const inputsFormCard = form.querySelectorAll(
+                `input:not([disabled]):not([type="checkbox"])`
+            );
+            if (inputsFormCard.length) {
+                focusFirstInput(inputsFormCard[0]);
+            }
+            const textareas = document.querySelectorAll(
+                'textarea:not([disabled]), [contenteditable]:not([disabled])'
+            );
+            if (textareas.length) {
+                focusFirstInput(textareas[textareas.length - 1]);
+            }
+            const inputs = document.querySelectorAll(
+                'form#formModel input:not([disabled]):not([type="checkbox"])'
+            );
+            const input = inputs[0];
+            if (!input) return;
+
+            focusFirstInput(input);
+        } catch (error) {
+            console.error(error);
+        }
+        form.addEventListener('keyup', function (evt) {
             if (evt.key === 'Enter') {
                 const input = evt.target;
                 if (input.type == 'textarea' && evt.shiftKey) {
@@ -24,7 +48,5 @@ export default {
                 that.onSubmit();
             }
         });
-            }
-        }
     },
 };

src/boot/quasar.js

@@ -3,11 +3,16 @@ import qFormMixin from './qformMixin';
 import keyShortcut from './keyShortcut';
 import useNotify from 'src/composables/useNotify.js';
 import { CanceledError } from 'axios';
+import { QForm } from 'quasar';
+import { QLayout } from 'quasar';
+import mainShortcutMixin from './mainShortcutMixin';
 
 const { notify } = useNotify();
 
 export default boot(({ app }) => {
-    app.mixin(qFormMixin);
+    QForm.mixins = [qFormMixin];
+    QLayout.mixins = [mainShortcutMixin];
+
     app.directive('shortcut', keyShortcut);
     app.config.errorHandler = (error) => {
         let message;

src/components/LeftMenu.vue

@@ -177,6 +177,7 @@ function normalize(text) {
                         class="full-width"
                         filled
                         dense
+                        autofocus
                     />
                 </QItem>
                 <QSeparator />

src/layouts/MainLayout.vue

@@ -1,50 +1,10 @@
 <script setup>
-import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
-import { useRouter } from 'vue-router';
-import routes from 'src/router/modules';
-import { onMounted } from 'vue';
-
-const quasar = useQuasar();
-
-onMounted(() => {
-    let isNotified = false;
-
-    const router = useRouter();
-    const keyBindingMap = routes
-        .filter((route) => route.meta.keyBinding)
-        .reduce((map, route) => {
-            map['Key' + route.meta.keyBinding.toUpperCase()] = route.path;
-            return map;
-        }, {});
-
-    const handleKeyDown = (event) => {
-        const { ctrlKey, altKey, code } = event;
-
-        if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) {
-            event.preventDefault();
-            router.push(keyBindingMap[code]);
-            isNotified = true;
-        }
-    };
-
-    const handleKeyUp = (event) => {
-        const { ctrlKey, altKey } = event;
-
-        if (!ctrlKey || !altKey) {
-            isNotified = false;
-        }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-});
 </script>
-
 <template>
     <QLayout view="hHh LpR fFf" v-shortcut>
         <Navbar />
         <RouterView></RouterView>
-        <QFooter v-if="quasar.platform.is.mobile"></QFooter>
+        <QFooter v-if="$q.platform.is.mobile"></QFooter>
     </QLayout>
 </template>

src/pages/Worker/Card/WorkerPda.vue

@@ -133,6 +133,7 @@ function reloadData() {
                                     option-value="id"
                                     id="deviceProductionFk"
                                     hide-selected
+                                    data-cy="pda-dialog-select"
                                 >
                                     <template #option="scope">
                                         <QItem v-bind="scope.itemProps">

src/pages/Zone/Card/ZoneBasicData.vue

@@ -32,7 +32,12 @@ const agencyOptions = ref([]);
     <FormModel :url="`Zones/${route.params.id}`" auto-load model="zone">
         <template #form="{ data, validate }">
             <VnRow>
-                <VnInput :label="t('Name')" clearable v-model="data.name" />
+                <VnInput
+                    data-cy="zone-basic-data-name"
+                    :label="t('Name')"
+                    clearable
+                    v-model="data.name"
+                />
             </VnRow>
 
             <VnRow>

test/cypress/integration/worker/workerPda.spec.js

@@ -1,6 +1,5 @@
 describe('WorkerPda', () => {
-    const deviceProductionField =
-        '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container';
+    const select = '[data-cy="pda-dialog-select"]';
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('developer');
@@ -9,7 +8,8 @@ describe('WorkerPda', () => {
 
     it('assign pda', () => {
         cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
-        cy.get(deviceProductionField).type('{downArrow}{enter}');
+        cy.get(select).click();
+        cy.get(select).type('{downArrow}{enter}');
         cy.get('.q-notification__message').should('have.text', 'Data created');
     });
 

test/cypress/integration/zone/zoneBasicData.spec.js

@@ -8,7 +8,7 @@ describe('ZoneBasicData', () => {
     });
 
     it('should throw an error if the name is empty', () => {
-        cy.get('.q-card > :nth-child(1)').clear();
+        cy.get('[data-cy="zone-basic-data-name"] input').type('{selectall}{backspace}');
         cy.get('.q-btn-group > .q-btn--standard').click();
         cy.get(notification).should('contains.text', "can't be blank");
     });