From f461d854c25fce61e28af68f2eda385ba414382f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 16:30:05 +0800
Subject: [PATCH] feat(nc-gui): keyboard shortcuts

---
 .../components/dlg/KeyboardShortcuts.vue      | 117 +++++++++++++++++-
 1 file changed, 116 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
index 822bc528f0..02b7684498 100644
--- a/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
+++ b/packages/nc-gui/components/dlg/KeyboardShortcuts.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { isMac } from '#imports'
+
 const { modelValue } = defineProps<{
   modelValue: boolean
 }>()
@@ -9,6 +11,92 @@ const dialogShow = computed({
   get: () => modelValue,
   set: (v) => emit('update:modelValue', v),
 })
+
+const renderCmdOrCtrlKey = () => {
+  return isMac() ? '⌘' : 'CTRL'
+}
+
+const shortcutList = [
+  {
+    title: 'General',
+    shortcuts: [
+      {
+        keys: ['ALT', 'T'],
+        behaviour: 'Insert new table',
+      },
+      {
+        keys: ['ALT', 'R'],
+        behaviour: 'Insert new row',
+      },
+      {
+        keys: ['ALT', 'C'],
+        behaviour: 'Insert new column',
+      },
+      {
+        keys: ['ALT', 'F'],
+        behaviour: 'Toggle fullscreen mode',
+      },
+      {
+        keys: ['ALT', 'I'],
+        behaviour: 'Invite a member to team',
+      },
+    ],
+  },
+  {
+    title: 'Grid View',
+    shortcuts: [
+      {
+        keys: [renderCmdOrCtrlKey(), '←'],
+        behaviour: 'Jump to leftmost column in this row',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), '→'],
+        behaviour: 'Jump to rightmost column in this row',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), '↑'],
+        behaviour: 'Jump to first record in this column (in same page)',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), '↓'],
+        behaviour: 'Jump to last record in this column (in same page)',
+      },
+      {
+        keys: [renderCmdOrCtrlKey(), 'C'],
+        behaviour: 'Copy cell contents',
+      },
+      {
+        keys: ['Enter'],
+        behaviour: 'Switch cell in focus to EDIT mode; opens modal / picker if cell is associated with one',
+      },
+      {
+        keys: ['Esc'],
+        behaviour: 'Exit cell EDIT mode',
+      },
+      {
+        keys: ['Delete'],
+        behaviour: 'Clear cell',
+      },
+      {
+        keys: ['Space'],
+        behaviour: 'Expand current row',
+      },
+      {
+        keys: ['←', '→', '↑', '↓'],
+        behaviour: 'General cell navigation',
+      },
+    ],
+  },
+  {
+    title: 'Expanded Form',
+    shortcuts: [
+      {
+        keys: [renderCmdOrCtrlKey(), 'Enter'],
+        behaviour: 'Save current expanded row item',
+      },
+    ],
+  },
+]
 </script>
 
 <template>
@@ -20,6 +108,33 @@ const dialogShow = computed({
     @keydown.esc="dialogShow = false"
   >
     <template #title> {{ $t('title.keyboardShortcut') }} </template>
-    <!-- TODO:   -->
+    <a-list
+      v-for="(shortcutItem, shortcutItemIdx) of shortcutList"
+      :key="shortcutItemIdx"
+      class="nc-shortcut-list !mb-5"
+      size="small"
+      bordered
+      :data-source="shortcutItem.shortcuts"
+    >
+      <template #header>
+        <div class="font-bold">{{ shortcutItem.title }}</div>
+      </template>
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <span class="inline-block">
+            <kbd
+              v-for="(key, keyIdx) of item.keys"
+              :key="keyIdx"
+              class="ml-[1px] mr-[1px] px-[8px] py-[3px] border-b-[3px] uppercase border-1 border-solid border-primary border-opacity-50 rounded"
+            >
+              {{ key }}
+            </kbd>
+          </span>
+          <span class="inline-block text-right">
+            {{ item.behaviour }}
+          </span>
+        </a-list-item>
+      </template>
+    </a-list>
   </a-modal>
 </template>