From 4b0845bd302c51f538d1dd7c02fa005ace8a88e6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 15:13:13 +0530
Subject: [PATCH] feat(gui): on enter key press open ref table rows modal for
 LTAR cells

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/virtual-cell/BelongsTo.vue | 10 ++++++++++
 packages/nc-gui/components/virtual-cell/HasMany.vue   | 10 ++++++++++
 .../nc-gui/components/virtual-cell/ManyToMany.vue     | 11 +++++++++++
 .../components/virtual-cell/components/ListItems.vue  |  9 +++++++++
 .../composables/useSelectedCellKeyupListener/index.ts |  2 +-
 5 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 8a2eaed14f..f2bc101d45 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -17,6 +17,7 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener
 } from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
@@ -70,6 +71,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
     await unlink(rec)
   }
 }
+
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index 82d7cbbb06..f992ac322c 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -15,6 +15,7 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -81,6 +82,15 @@ const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index 3464471789..fd07fe4687 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -16,6 +16,8 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener,
+  ActiveCellInj,
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -82,6 +84,15 @@ const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index df6700cd02..83994b9eeb 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
@@ -98,6 +99,14 @@ const newRowState = computed(() => {
 watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
+
+// useEventListener((e: KeyboardEvent) => {
+//   switch (e.key) {
+//     case 'Enter':
+//       e.preventDefault()
+//       break
+//   }
+// })
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
index ef86be0e40..f26e584353 100644
--- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -6,7 +6,7 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
 
   watch(selected, (value) => {
     if (value) {
-      cleanup.value = useEventListener('keydown', handler)
+      cleanup.value = useEventListener('keydown', handler, true)
     } else {
       cleanup.value?.()
     }