From f0e98ace78f41c41e738a31721e65ae1212fa786 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 28 Nov 2022 18:59:13 +0800
Subject: [PATCH] feat(nc-gui): add keyboardShortcut

---
 .../components/dlg/KeyboardShortcuts.vue      | 29 ++++++++++++++++++
 packages/nc-gui/lang/en.json                  |  3 +-
 .../pages/[projectType]/[projectId]/index.vue | 30 +++++++++++++++++++
 3 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/dlg/KeyboardShortcuts.vue

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
new file mode 100644
index 0000000000..d7e3d4d2f6
--- /dev/null
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { useI18n } from '#imports'
+
+const { modelValue } = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const dialogShow = computed({
+  get: () => modelValue,
+  set: (v) => emit('update:modelValue', v),
+})
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="dialogShow"
+    width="max(30vw, 600px)"
+    class="p-2"
+    :wrap-class-name="`nc-modal-keyboard-shortcuts ${dialogShow ? 'active' : ''}`"
+    @keydown.esc="dialogShow = false"
+  >
+    <template #title> {{ $t('general.title.keyboardShortcut') }} </template>
+    <!-- TODO:   -->
+  </a-modal>
+</template>
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index a7d4ed55d6..08b0da76e1 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -199,7 +199,8 @@
     "quickImportFrom": "Quick Import From",
     "quickImport": "Quick Import",
     "advancedSettings": "Advanced Settings",
-    "codeSnippet": "Code Snippet"
+    "codeSnippet": "Code Snippet",
+    "keyboardShortcut": "Keyboard Shortcuts"
   },
   "labels": {
     "createdBy": "Created By",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 645bc5c5d8..0782552aa1 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -13,7 +13,9 @@ import {
   openLink,
   projectThemeColors,
   ref,
+  resolveComponent,
   useCopy,
+  useDialog,
   useGlobal,
   useI18n,
   useProject,
@@ -35,6 +37,8 @@ const { theme, defaultTheme } = useTheme()
 
 const { t } = useI18n()
 
+const { $e } = useNuxtApp()
+
 const route = useRoute()
 
 const router = useRouter()
@@ -184,6 +188,22 @@ onMounted(() => {
 
 onBeforeUnmount(reset)
 
+function openKeyboardShortcutDialog() {
+  $e('a:actions:keyboard-shortcut')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgKeyboardShortcuts'), {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+    close(1000)
+  }
+}
+
 useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
   if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
@@ -198,6 +218,16 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
       }
     }
   }
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (cmdOrCtrl) {
+    switch (e.key) {
+      case '/':
+        if (!document.querySelector('.nc-modal-keyboard-shortcuts.active')) {
+          openKeyboardShortcutDialog()
+        }
+        break
+    }
+  }
 })
 </script>