From 49655b7c0a6689c3134f9d31a023134524089bfb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 29 Nov 2022 13:44:01 +0800
Subject: [PATCH] feat(nc-gui): add isDrawerOrModalExist

---
 packages/nc-gui/components/dashboard/TreeView.vue        | 5 +++--
 packages/nc-gui/components/general/FullScreen.vue        | 6 ++++--
 packages/nc-gui/components/general/ShareBaseButton.vue   | 4 ++--
 packages/nc-gui/components/smartsheet/Grid.vue           | 7 ++++---
 .../nc-gui/pages/[projectType]/[projectId]/index.vue     | 9 +++++----
 packages/nc-gui/utils/browserUtils.ts                    | 1 +
 6 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 23090adc02..fc8b89847a 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -6,7 +6,9 @@ import GithubButton from 'vue-github-button'
 import type { VNodeRef } from '#imports'
 import {
   Empty,
+  TabType,
   computed,
+  isDrawerOrModalExist,
   isMac,
   reactive,
   ref,
@@ -20,7 +22,6 @@ import {
   useUIPermission,
   watchEffect,
 } from '#imports'
-import { TabType } from '~/lib'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 
@@ -224,7 +225,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 84: {
         // ALT + T
-        if (isUIAllowed('table-create')) {
+        if (isUIAllowed('table-create') && !isDrawerOrModalExist()) {
           // prevent the key `T` is inputted to table title input
           e.preventDefault()
           openTableCreateDialog()
diff --git a/packages/nc-gui/components/general/FullScreen.vue b/packages/nc-gui/components/general/FullScreen.vue
index 5b7816e838..6c3fe32bd6 100644
--- a/packages/nc-gui/components/general/FullScreen.vue
+++ b/packages/nc-gui/components/general/FullScreen.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, isMac, useSidebar } from '#imports'
+import { computed, isDrawerOrModalExist, isMac, useSidebar } from '#imports'
 
 const rightSidebar = useSidebar('nc-right-sidebar')
 
@@ -19,7 +19,9 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 70: {
         // ALT + F
-        isSidebarsOpen.value = !isSidebarsOpen.value
+        if (!isDrawerOrModalExist()) {
+          isSidebarsOpen.value = !isSidebarsOpen.value
+        }
         break
       }
     }
diff --git a/packages/nc-gui/components/general/ShareBaseButton.vue b/packages/nc-gui/components/general/ShareBaseButton.vue
index 4eeb37a3b9..45cd622554 100644
--- a/packages/nc-gui/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui/components/general/ShareBaseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isMac, useRoute, useUIPermission } from '#imports'
+import { isDrawerOrModalExist, isMac, useRoute, useUIPermission } from '#imports'
 
 const route = useRoute()
 
@@ -22,7 +22,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 73: {
         // ALT + I
-        if (isShareBaseAllowed.value) {
+        if (isShareBaseAllowed.value && !isDrawerOrModalExist()) {
           showUserModal.value = true
         }
         break
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 0d07c26672..083e96dd3f 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -11,6 +11,7 @@ import {
   IsGridInj,
   IsLockedInj,
   MetaInj,
+  NavigateDir,
   OpenNewRecordFormHookInj,
   PaginationDataInj,
   ReadonlyInj,
@@ -22,6 +23,7 @@ import {
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
+  isDrawerOrModalExist,
   isMac,
   message,
   onBeforeUnmount,
@@ -42,7 +44,6 @@ import {
   watch,
 } from '#imports'
 import type { Row } from '~/lib'
-import { NavigateDir } from '~/lib'
 
 const { t } = useI18n()
 
@@ -178,8 +179,8 @@ const { selectCell, startSelectRange, endSelectRange, clearSelectedRange, copyVa
       return true
     }
 
-    // if expanded form is active skip keyboard event handling
-    if (document.querySelector('.nc-drawer-expanded-form.active')) {
+    // skip keyboard event handling if there is a drawer / modal
+    if (isDrawerOrModalExist()) {
       return true
     }
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 021d4e1dd0..71af000752 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
 import {
+  TabType,
   computed,
   definePageMeta,
+  extractSdkResponseErrorMsg,
+  isDrawerOrModalExist,
   isMac,
   message,
   navigateTo,
@@ -26,8 +29,6 @@ import {
   useTheme,
   useUIPermission,
 } from '#imports'
-import { TabType } from '~/lib'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 definePageMeta({
   hideHeader: true,
@@ -210,7 +211,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     switch (e.keyCode) {
       case 188: {
         // ALT + ,
-        if (isUIAllowed('settings')) {
+        if (isUIAllowed('settings') && !isDrawerOrModalExist()) {
           e.preventDefault()
           toggleDialog(true, 'teamAndAuth')
         }
@@ -221,7 +222,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
   if (cmdOrCtrl) {
     switch (e.key) {
       case '/':
-        if (!document.querySelector('.nc-modal-keyboard-shortcuts.active')) {
+        if (!isDrawerOrModalExist()) {
           openKeyboardShortcutDialog()
         }
         break
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index a4efcc1801..1532a483c0 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -1,2 +1,3 @@
 // refer - https://stackoverflow.com/a/11752084
 export const isMac = () => /Mac/i.test(navigator.platform)
+export const isDrawerOrModalExist = () => document.querySelector('.ant-modal, .ant-drawer')