Merge pull request 'feat: refs #7889 added shortcuts to modules' (!682) from 7889-KeyShortcuts into dev

Reviewed-on: verdnatura/salix-front#682
Reviewed-by: Javi Gallego <jgallego@verdnatura.es>

src/boot/mainShortcutMixin.js

@@ -9,16 +9,16 @@ export default {
         const keyBindingMap = routes
             .filter((route) => route.meta.keyBinding)
             .reduce((map, route) => {
-                map[route.meta.keyBinding.toLowerCase()] = route.path;
+                map['Key' + route.meta.keyBinding.toUpperCase()] = route.path;
                 return map;
             }, {});
 
         const handleKeyDown = (event) => {
-            const { ctrlKey, altKey, key } = event;
+            const { ctrlKey, altKey, code } = event;
 
-            if (ctrlKey && altKey && keyBindingMap[key] && !isNotified) {
+            if (ctrlKey && altKey && keyBindingMap[code] && !isNotified) {
                 event.preventDefault();
-                router.push(keyBindingMap[key]);
+                router.push(keyBindingMap[code]);
                 isNotified = true;
             }
         };

src/components/LeftMenuItem.vue

@@ -33,7 +33,12 @@ const itemComputed = computed(() => {
         <QItemSection avatar v-if="!itemComputed.icon">
             <QIcon name="disabled_by_default" />
         </QItemSection>
-        <QItemSection>{{ t(itemComputed.title) }}</QItemSection>
+        <QItemSection>
+            {{ t(itemComputed.title) }}
+            <QTooltip>
+                {{ 'Ctrl + Alt + ' + item.keyBinding.toUpperCase() }}
+            </QTooltip>
+        </QItemSection>
         <QItemSection side>
             <slot name="side" :item="itemComputed" />
         </QItemSection>

src/pages/Dashboard/DashboardMain.vue

@@ -55,6 +55,15 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
                                 >
                                     <div class="text-center text-primary button-text">
                                         {{ t(item.title) }}
+                                        <div v-if="item.keyBinding">
+                                            {{ '(' + item.keyBinding + ')' }}
+                                            <QTooltip>
+                                                {{
+                                                    'Ctrl + Alt + ' +
+                                                    item.keyBinding.toUpperCase()
+                                                }}
+                                            </QTooltip>
+                                        </div>
                                     </div>
                                 </QBtn>
                             </div>

src/router/modules/Supplier.js

@@ -7,6 +7,7 @@ export default {
         title: 'suppliers',
         icon: 'vn:supplier',
         moduleName: 'Supplier',
+        keyBinding: 'p',
     },
     component: RouterView,
     redirect: { name: 'SupplierMain' },

src/router/modules/account.js

@@ -7,6 +7,7 @@ export default {
         title: 'users',
         icon: 'face',
         moduleName: 'Account',
+        keyBinding: 'u',
     },
     component: RouterView,
     redirect: { name: 'AccountMain' },

src/router/modules/claim.js

@@ -7,6 +7,7 @@ export default {
         title: 'claims',
         icon: 'vn:claims',
         moduleName: 'Claim',
+        keyBinding: 'r',
     },
     component: RouterView,
     redirect: { name: 'ClaimMain' },

src/router/modules/customer.js

@@ -7,6 +7,7 @@ export default {
         title: 'customers',
         icon: 'vn:client',
         moduleName: 'Customer',
+        keyBinding: 'c',
     },
     component: RouterView,
     redirect: { name: 'CustomerMain' },

src/router/modules/entry.js

@@ -7,6 +7,7 @@ export default {
         title: 'entries',
         icon: 'vn:entry',
         moduleName: 'Entry',
+        keyBinding: 'e',
     },
     component: RouterView,
     redirect: { name: 'EntryMain' },

src/router/modules/item.js

@@ -7,6 +7,7 @@ export default {
         title: 'items',
         icon: 'vn:item',
         moduleName: 'Item',
+        keyBinding: 'a',
     },
     component: RouterView,
     redirect: { name: 'ItemMain' },

src/router/modules/monitor.js

@@ -7,6 +7,7 @@ export default {
         title: 'monitors',
         icon: 'grid_view',
         moduleName: 'Monitor',
+        keyBinding: 'm',
     },
     component: RouterView,
     redirect: { name: 'MonitorMain' },

src/router/modules/order.js

@@ -7,6 +7,7 @@ export default {
         title: 'order',
         icon: 'vn:basket',
         moduleName: 'Order',
+        keyBinding: 'o',
     },
     component: RouterView,
     redirect: { name: 'OrderMain' },

src/router/modules/route.js

@@ -7,7 +7,6 @@ export default {
         title: 'routes',
         icon: 'vn:delivery',
         moduleName: 'Route',
-        keyBinding: 'r',
     },
     component: RouterView,
     redirect: { name: 'RouteMain' },

src/router/modules/ticket.js

@@ -7,6 +7,7 @@ export default {
         title: 'tickets',
         icon: 'vn:ticket',
         moduleName: 'Ticket',
+        keyBinding: 't',
     },
     component: RouterView,
     redirect: { name: 'TicketMain' },

src/router/modules/worker.js

@@ -7,6 +7,7 @@ export default {
         title: 'workers',
         icon: 'vn:worker',
         moduleName: 'Worker',
+        keyBinding: 'w',
     },
     component: RouterView,
     redirect: { name: 'WorkerMain' },

src/router/modules/zone.js

@@ -7,6 +7,7 @@ export default {
         title: 'zones',
         icon: 'vn:zone',
         moduleName: 'Zone',
+        keyBinding: 'z',
     },
     component: RouterView,
     redirect: { name: 'ZoneMain' },

src/stores/useNavigationStore.js

@@ -72,6 +72,7 @@ export const useNavigationStore = defineStore('navigationStore', () => {
         if (meta) {
             item.title = `globals.pageTitles.${meta.title}`;
             item.icon = meta.icon;
+            item.keyBinding = meta.keyBinding;
         }
 
         parent.push(item);

test/cypress/integration/vnComponent/VnShortcut.spec.js

@@ -0,0 +1,33 @@
+/// <reference types="cypress" />
+
+describe('VnShortcuts', () => {
+    const modules = {
+        item: 'a',
+        customer: 'c',
+        ticket: 't',
+        claim: 'r',
+        worker: 'w',
+        monitor: 'm',
+        order: 'o',
+        supplier: 'p',
+        entry: 'e',
+        zone: 'z',
+        account: 'u',
+    };
+    beforeEach(() => {
+        cy.login('developer');
+        cy.visit('/');
+    });
+
+    for (const [module, shortcut] of Object.entries(modules)) {
+        it(`should visit ${module} module`, () => {
+            cy.get('body').trigger('keydown', {
+                ctrlKey: true,
+                altKey: true,
+                code: `Key${shortcut.toUpperCase()}`,
+            });
+
+            cy.url().should('include', module);
+        });
+    }
+});