Merge pull request #4550 from nocodb/feat/shortcut-e

feat(nc-gui): add $e for shortcuts

packages/nc-gui/components/dashboard/TreeView.vue

@@ -241,6 +241,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         if (isCreateTableAllowed.value && !isDrawerOrModalExist()) {
           // prevent the key `T` is inputted to table title input
           e.preventDefault()
+          $e('c:shortcut', { key: 'ALT + T' })
           openTableCreateDialog()
         }
         break

packages/nc-gui/components/general/FullScreen.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { computed, isDrawerOrModalExist, isMac, useSidebar } from '#imports'
+import { computed, isDrawerOrModalExist, isMac, useNuxtApp, useSidebar } from '#imports'
 
 const rightSidebar = useSidebar('nc-right-sidebar')
 
 const leftSidebar = useSidebar('nc-left-sidebar')
 
+const { $e } = useNuxtApp()
+
 const isSidebarsOpen = computed({
   get: () => rightSidebar.isOpen.value || leftSidebar.isOpen.value,
   set: (value) => {
@@ -20,6 +22,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       case 70: {
         // ALT + F
         if (!isDrawerOrModalExist()) {
+          $e('c:shortcut', { key: 'ALT + F' })
           isSidebarsOpen.value = !isSidebarsOpen.value
         }
         break

packages/nc-gui/components/general/ShareBaseButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDrawerOrModalExist, isMac, useRoute, useUIPermission } from '#imports'
+import { isDrawerOrModalExist, isMac, useNuxtApp, useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
@@ -7,6 +7,8 @@ const showUserModal = ref(false)
 
 const { isUIAllowed } = useUIPermission()
 
+const { $e } = useNuxtApp()
+
 const isShareBaseAllowed = computed(
   () =>
     isUIAllowed('newUser') &&
@@ -24,6 +26,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       case 73: {
         // ALT + I
         if (isShareBaseAllowed.value && !isDrawerOrModalExist()) {
+          $e('c:shortcut', { key: 'ALT + I' })
           showUserModal.value = true
         }
         break

packages/nc-gui/components/smartsheet/Grid.vue

@@ -37,6 +37,7 @@ import {
   useI18n,
   useMetas,
   useMultiSelect,
+  useNuxtApp,
   useRoles,
   useRoute,
   useSmartsheetStoreOrThrow,
@@ -52,6 +53,8 @@ const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
 
+const { $e } = useNuxtApp()
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
@@ -223,6 +226,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
         switch (e.key) {
           case 'ArrowUp':
             e.preventDefault()
+            $e('c:shortcut', { key: 'CTRL + ArrowUp' })
             selectedCell.row = 0
             selectedCell.col = selectedCell.col ?? 0
             scrollToCell?.()
@@ -230,6 +234,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
             return true
           case 'ArrowDown':
             e.preventDefault()
+            $e('c:shortcut', { key: 'CTRL + ArrowDown' })
             selectedCell.row = data.value.length - 1
             selectedCell.col = selectedCell.col ?? 0
             scrollToCell?.()
@@ -237,6 +242,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
             return true
           case 'ArrowRight':
             e.preventDefault()
+            $e('c:shortcut', { key: 'CTRL + ArrowRight' })
             selectedCell.row = selectedCell.row ?? 0
             selectedCell.col = fields.value?.length - 1
             scrollToCell?.()
@@ -244,6 +250,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
             return true
           case 'ArrowLeft':
             e.preventDefault()
+            $e('c:shortcut', { key: 'CTRL + ArrowLeft' })
             selectedCell.row = selectedCell.row ?? 0
             selectedCell.col = 0
             scrollToCell?.()
@@ -257,6 +264,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
           case 82: {
             // ALT + R
             if (isAddingEmptyRowAllowed) {
+              $e('c:shortcut', { key: 'ALT + R' })
               addEmptyRow()
             }
             break
@@ -264,6 +272,7 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
           case 67: {
             // ALT + C
             if (isAddingColumnAllowed) {
+              $e('c:shortcut', { key: 'ALT + C' })
               addColumnDropdown.value = true
             }
             break

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -213,6 +213,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         // ALT + ,
         if (isUIAllowed('settings') && !isDrawerOrModalExist()) {
           e.preventDefault()
+          $e('c:shortcut', { key: 'ALT + ,' })
           toggleDialog(true, 'teamAndAuth')
         }
         break
@@ -223,6 +224,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.key) {
       case '/':
         if (!isDrawerOrModalExist()) {
+          $e('c:shortcut', { key: 'CTRL + /' })
           openKeyboardShortcutDialog()
         }
         break