Merge pull request '#7911 - Add Shortcut keyboard when press Ctrl+Alt++' (!653) from plus_key_shortcut into dev

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

src/boot/keyShortcut.js

@@ -0,0 +1,34 @@
+export default {
+    mounted: function (el, binding) {
+        const shortcut = binding.value ?? '+';
+
+        const { key, ctrl, alt, callback } =
+            typeof shortcut === 'string'
+                ? {
+                      key: shortcut,
+                      ctrl: true,
+                      alt: true,
+                      callback: () =>
+                          document
+                              .querySelector(`button[shortcut="${shortcut}"]`)
+                              ?.click(),
+                  }
+                : binding.value;
+
+        const handleKeydown = (event) => {
+            if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
+                callback();
+            }
+        };
+
+        // Attach the event listener to the window
+        window.addEventListener('keydown', handleKeydown);
+
+        el._handleKeydown = handleKeydown;
+    },
+    unmounted: function (el) {
+        if (el._handleKeydown) {
+            window.removeEventListener('keydown', el._handleKeydown);
+        }
+    },
+};

src/boot/quasar.js

@@ -1,8 +1,10 @@
 import { boot } from 'quasar/wrappers';
 import qFormMixin from './qformMixin';
 import mainShortcutMixin from './mainShortcutMixin';
+import keyShortcut from './keyShortcut';
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
     app.mixin(mainShortcutMixin);
+    app.directive('shortcut', keyShortcut);
 });

src/components/NavBar.vue

@@ -24,7 +24,13 @@ const pinnedModulesRef = ref();
 <template>
     <QHeader color="white" elevated>
         <QToolbar class="q-py-sm q-px-md">
-            <QBtn @click="stateStore.toggleLeftDrawer()" icon="menu" round dense flat>
+            <QBtn
+                @click="stateStore.toggleLeftDrawer()"
+                icon="dock_to_right"
+                round
+                dense
+                flat
+            >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}
                 </QTooltip>

src/components/VnTable/VnTable.vue

@@ -617,7 +617,7 @@ defineExpose({
         </template>
     </CrudModel>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
-        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
+        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" shortcut="+" />
         <QTooltip>
             {{ createForm.title }}
         </QTooltip>

src/components/common/RightMenu.vue

@@ -37,7 +37,7 @@ const stateStore = useStateStore();
                 @click="stateStore.toggleRightDrawer()"
                 round
                 dense
-                icon="menu"
+                icon="dock_to_left"
             >
                 <QTooltip bottom anchor="bottom right">
                     {{ t('globals.collapseMenu') }}

src/layouts/MainLayout.vue

@@ -5,7 +5,7 @@ const quasar = useQuasar();
 </script>
 
 <template>
-    <QLayout view="hHh LpR fFf">
+    <QLayout view="hHh LpR fFf" v-shortcut>
         <Navbar />
         <RouterView></RouterView>
         <QFooter v-if="quasar.platform.is.mobile"></QFooter>

src/pages/Account/Card/AccountMailAlias.vue

@@ -169,7 +169,13 @@ onMounted(async () => await getAccountData(false));
             <AccountMailAliasCreateForm @on-submit-create-alias="createMailAlias" />
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateMailAliasForm()">
+            <QBtn
+                fab
+                icon="add"
+                color="primary"
+                @click="openCreateMailAliasForm()"
+                shortcut="+"
+            >
                 <QTooltip>{{ t('warehouses.add') }}</QTooltip>
             </QBtn>
         </QPageSticky>

src/pages/Customer/Card/CustomerAddress.vue

@@ -218,7 +218,13 @@ const toCustomerAddressEdit = (addressId) => {
     </div>
 
     <QPageSticky :offset="[18, 18]">
-        <QBtn @click.stop="toCustomerAddressCreate()" color="primary" fab icon="add" />
+        <QBtn
+            @click.stop="toCustomerAddressCreate()"
+            color="primary"
+            fab
+            icon="add"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('New consignee') }}
         </QTooltip>

src/pages/Customer/Card/CustomerBalance.vue

@@ -292,7 +292,13 @@ const showBalancePdf = ({ id }) => {
         </template>
     </VnTable>
     <QPageSticky :offset="[18, 18]" style="z-index: 2">
-        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QBtn
+            @click.stop="showNewPaymentDialog()"
+            color="primary"
+            fab
+            icon="add"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('New payment') }}
         </QTooltip>

src/pages/Customer/Card/CustomerCreditContracts.vue

@@ -193,6 +193,7 @@ const updateData = () => {
             color="primary"
             fab
             icon="add"
+            shortcut="+"
         />
         <QTooltip>
             {{ t('New contract') }}

src/pages/Item/ItemList.vue

@@ -562,7 +562,13 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </VnPaginate>
 
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+            <QBtn
+                @click="redirectToItemCreate()"
+                color="primary"
+                fab
+                icon="add"
+                shortcut="+"
+            />
             <QTooltip class="text-no-wrap">
                 {{ t('New item') }}
             </QTooltip>

src/pages/Item/ItemTypeList.vue

@@ -99,7 +99,13 @@ const exprBuilder = (param, value) => {
         </div>
     </QPage>
     <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QBtn
+            fab
+            icon="add"
+            color="primary"
+            @click="redirectToCreateView()"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('New item type') }}
         </QTooltip>

src/pages/Shelving/ShelvingList.vue

@@ -87,7 +87,7 @@ function exprBuilder(param, value) {
         </div>
         <QPageSticky :offset="[20, 20]">
             <RouterLink :to="{ name: 'ShelvingCreate' }">
-                <QBtn fab icon="add" color="primary" />
+                <QBtn fab icon="add" color="primary" shortcut="+" />
                 <QTooltip>
                     {{ t('shelving.list.newShelving') }}
                 </QTooltip>

src/pages/Supplier/Card/SupplierAddresses.vue

@@ -81,7 +81,13 @@ const redirectToUpdateView = (addressData) => {
             </VnPaginate>
         </div>
         <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+            <QBtn
+                fab
+                icon="add"
+                color="primary"
+                @click="redirectToCreateView()"
+                shortcut="+"
+            />
             <QTooltip>
                 {{ t('New address') }}
             </QTooltip>
@@ -93,3 +99,4 @@ const redirectToUpdateView = (addressData) => {
 es:
     New address: Nueva dirección
 </i18n>
+s

src/pages/Supplier/Card/SupplierAgencyTerm.vue

@@ -109,7 +109,13 @@ const redirectToCreateView = () => {
         </template>
     </CrudModel>
     <QPageSticky :offset="[20, 20]">
-        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QBtn
+            fab
+            icon="add"
+            color="primary"
+            @click="redirectToCreateView()"
+            shortcut="+"
+        />
         <QTooltip>
             {{ t('supplier.agencyTerms.addRow') }}
         </QTooltip>

src/pages/Ticket/Card/TicketPurchaseRequest.vue

@@ -252,7 +252,13 @@ const openCreateModal = () => createTicketRequestDialogRef.value.show();
             <TicketCreateRequest @on-request-created="crudModelRef.reload()" />
         </QDialog>
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QBtn
+                @click="openCreateModal()"
+                color="primary"
+                fab
+                icon="add"
+                shortcut="+"
+            />
             <QTooltip class="text-no-wrap">
                 {{ t('purchaseRequest.newRequest') }}
             </QTooltip>

src/pages/Ticket/Card/TicketTracking.vue

@@ -82,7 +82,7 @@ const openCreateModal = () => createTrackingDialogRef.value.show();
             data-key="TicketTracking"
             :filter="paginateFilter"
             url="TicketTrackings"
-            auto-load            
+            auto-load
             order="created DESC"
             :limit="0"
         >
@@ -114,7 +114,13 @@ const openCreateModal = () => createTrackingDialogRef.value.show();
             <TicketCreateTracking @on-request-created="paginateRef.fetch()" />
         </QDialog>
         <QPageSticky :offset="[20, 20]">
-            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QBtn
+                @click="openCreateModal()"
+                color="primary"
+                fab
+                icon="add"
+                shortcut="+"
+            />
             <QTooltip class="text-no-wrap">
                 {{ t('tracking.addState') }}
             </QTooltip>

src/pages/Travel/Card/TravelThermographs.vue

@@ -196,6 +196,7 @@ const removeThermograph = async (id) => {
             icon="add"
             color="primary"
             @click="redirectToThermographForm('create')"
+            shortcut="+"
         />
         <QTooltip class="text-no-wrap">
             {{ t('Add thermograph') }}

src/pages/Wagon/Type/WagonTypeList.vue

@@ -74,7 +74,7 @@ async function remove(row) {
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+            <QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
         </QPageSticky>
     </QPage>
 </template>

src/pages/Wagon/WagonList.vue

@@ -94,7 +94,7 @@ async function remove(row) {
             </VnPaginate>
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn @click="create" fab icon="add" color="primary" />
+            <QBtn @click="create" fab icon="add" color="primary" shortcut="+" />
         </QPageSticky>
     </QPage>
 </template>

src/pages/Worker/Card/WorkerPda.vue

@@ -116,7 +116,7 @@ function reloadData() {
             </template>
         </VnPaginate>
         <QPageSticky :offset="[18, 18]">
-            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
+            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
                 <QDialog ref="dialog">
                     <FormModelPopup
                         :title="t('Add new device')"

src/pages/Zone/Card/ZoneEvents.vue

@@ -44,15 +44,34 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <Teleport to="#right-panel" v-if="useStateStore().isHeaderMounted()">
+    <template v-if="stateStore.isHeaderMounted()">
-        <ZoneEventsPanel
+        <Teleport to="#actions-append">
-            :first-day="firstDay"
+            <div class="row q-gutter-x-sm">
-            :last-day="lastDay"
+                <QBtn
-            :events="events"
+                    flat
-            v-model:formModeName="formModeName"
+                    @click="stateStore.toggleRightDrawer()"
-            @open-zone-form="openForm"
+                    round
-        />
+                    dense
-    </Teleport>
+                    icon="dock_to_left"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ZoneEventsPanel
+                :first-day="firstDay"
+                :last-day="lastDay"
+                :events="events"
+                v-model:formModeName="formModeName"
+                @open-zone-form="openForm"
+            />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="q-pa-md flex justify-center">
         <ZoneCalendarGrid
             v-model:events="events"
@@ -83,6 +102,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 color="primary"
                 fab
                 icon="add"
+                shortcut="+"
             />
             <QTooltip class="text-no-wrap">
                 {{ t('eventsInclusionForm.addEvent') }}

src/pages/Zone/Card/ZoneWarehouses.vue

@@ -111,7 +111,13 @@ const openCreateWarehouseForm = () => createWarehouseDialogRef.value.show();
             <ZoneCreateWarehouse @on-submit-create-warehouse="createZoneWarehouse" />
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateWarehouseForm()">
+            <QBtn
+                fab
+                icon="add"
+                color="primary"
+                @click="openCreateWarehouseForm()"
+                shortcut="+"
+            >
                 <QTooltip>{{ t('warehouses.add') }}</QTooltip>
             </QBtn>
         </QPageSticky>