From 5ec33a78834e7fc403fd669396d6cf0b6cb81de0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 12:48:47 +0530
Subject: [PATCH] feat(gui): open picker on pressing enter key nd close on
 escApe key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue    | 15 ++++++++++++++-
 .../nc-gui/components/cell/DateTimePicker.vue     | 15 ++++++++++++++-
 packages/nc-gui/components/cell/MultiSelect.vue   |  6 ++++--
 packages/nc-gui/components/cell/Rating.vue        |  3 ++-
 packages/nc-gui/components/cell/TimePicker.vue    | 15 ++++++++++++++-
 packages/nc-gui/components/cell/YearPicker.vue    | 15 ++++++++++++++-
 .../nc-gui/components/cell/attachment/index.vue   |  4 ++--
 7 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 08362605d7..f515e0873c 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj, computed, inject, ref, watch } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -57,6 +57,19 @@ watch(
 )
 
 const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index b28e7bf8d4..5c16909add 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, inject, ref, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, ref, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -56,6 +56,19 @@ watch(
   },
   { flush: 'post' },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 66b54e8cb0..ecca3abdd7 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -14,6 +14,7 @@ import {
   ref,
   useEventListener,
   useProject,
+  useSelectedCellKeyupListener,
   watch,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
@@ -139,8 +140,9 @@ watch(isOpen, (n, _o) => {
   if (!n) aselect.value?.$el.blur()
 })
 
-useEventListener(document, 'keydown', (e) => {
-  if (active.value && e.key === 'Enter') {
+useSelectedCellKeyupListener(active, (e) => {
+  if (e.key === 'Enter') {
+    e.stopPropagation()
     isOpen.value = true
   }
 })
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 7d44cdcd69..10e58a5775 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -30,8 +30,9 @@ const vModel = computed({
   set: (val) => emits('update:modelValue', val),
 })
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   if (/^\d$/.test(e.key)) {
+    e.stopPropagation()
     vModel.value = +e.key === +vModel.value ? 0 : +e.key
   }
 })
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index ed19d62277..ccc96c541a 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -65,6 +65,19 @@ watch(
   },
   { flush: 'post' },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 1dda01b09a..f4d3c68625 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, computed, inject, onClickOutside, ref, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, computed, inject, onClickOutside, ref, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -55,6 +55,19 @@ watch(
 )
 
 const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 0bdcadd5e9..c8a51a9b1d 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 import {
   DropZoneRef,
   IsGalleryInj,