From 05dbf3b3bb8e4a51e3ed75f9c14b0dd99f4f457b Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Mon, 19 Feb 2024 05:09:32 +0000
Subject: [PATCH] fix(nc-gui): cmd l update

---
 .../nc-gui/assets/nc-icons/project-gray.svg   |   9 +
 packages/nc-gui/components/cmd-l/index.vue    | 155 +++++++++---------
 .../nc-gui/components/dlg/TableRename.vue     |   6 +-
 packages/nc-gui/store/views.ts                |   2 +
 packages/nc-gui/utils/iconUtils.ts            |   2 +
 5 files changed, 90 insertions(+), 84 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/project-gray.svg

diff --git a/packages/nc-gui/assets/nc-icons/project-gray.svg b/packages/nc-gui/assets/nc-icons/project-gray.svg
new file mode 100644
index 0000000000..fd278c5551
--- /dev/null
+++ b/packages/nc-gui/assets/nc-icons/project-gray.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99294 15.3098L14.548 12.7802C14.8177 12.6574 14.9569 12.4978 14.9659 12.3369H1C1.00896 12.4978 1.14826 12.6574 1.4179 12.7802L6.97294 15.3098C7.53075 15.5637 8.43514 15.5637 8.99294 15.3098Z" fill="#5F5F5F"/>
+<path d="M14.9999 9.77881H1.00513V12.3366H14.9999V9.77881Z" fill="#5F5F5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99294 12.7517L14.548 10.2221C14.8177 10.0993 14.9569 9.93968 14.9659 9.77881H1C1.00896 9.93968 1.14826 10.0993 1.4179 10.2221L6.97294 12.7517C7.53075 13.0056 8.43514 13.0056 8.99294 12.7517Z" fill="#5F5F5F"/>
+<path d="M14.9999 7.22119H1.00513V9.77897H14.9999V7.22119Z" fill="#5F5F5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99294 11.4729L14.548 8.94332C14.8177 8.82054 14.9569 8.66088 14.9659 8.5H1C1.00896 8.66088 1.14826 8.82054 1.4179 8.94332L6.97294 11.4729C7.53075 11.7269 8.43514 11.7269 8.99294 11.4729Z" fill="#C4C4C4"/>
+<path d="M14.9997 4.66309H1.00488V8.50309H14.9997V4.66309Z" fill="#C4C4C4"/>
+<path d="M14.5484 5.13991L8.99337 7.66947C8.43561 7.92348 7.53121 7.92348 6.9734 7.66947L1.41836 5.13991C0.860546 4.8859 0.860546 4.47408 1.41836 4.22007L6.9734 1.69051C7.53121 1.4365 8.43561 1.4365 8.99337 1.69051L14.5484 4.22007C15.1063 4.47408 15.1063 4.8859 14.5484 5.13991Z" fill="#C4C4C4"/>
+</svg>
diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue
index 57e99cd02c..e9ddade3c9 100644
--- a/packages/nc-gui/components/cmd-l/index.vue
+++ b/packages/nc-gui/components/cmd-l/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onKeyUp, useDebounceFn, useMagicKeys, useVModel, whenever } from '@vueuse/core'
+import { onKeyUp, useDebounceFn, useVModel } from '@vueuse/core'
 import { onClickOutside } from '#imports'
 import type { CommandPaletteType } from '~/lib'
 
@@ -39,10 +39,6 @@ const changeView = useDebounceFn(
   200,
 )
 
-const keys = useMagicKeys()
-
-const { current } = keys
-
 onKeyUp('Enter', async () => {
   if (vOpen.value && newView.value) {
     await changeView({ viewId: newView.value.viewId, tableId: newView.value.tableId, baseId: newView.value.baseId })
@@ -115,79 +111,59 @@ const moveDown = () => {
   }
 }
 
-whenever(keys['Ctrl+Shift+L'], async () => {
-  if (!user.value) return
-  vOpen.value = true
-  moveUp()
-})
-
-whenever(keys['Meta+Shift+L'], async () => {
-  if (!user.value) return
-  vOpen.value = true
-  moveUp()
-})
-
-whenever(keys.ctrl_l, async () => {
-  if (!user.value) return
-  if (current.has('shift')) return
-  vOpen.value = true
-  moveDown()
-})
-
-whenever(keys.meta_l, async () => {
-  if (!user.value) return
-  if (current.has('shift')) return
-  vOpen.value = true
-  moveDown()
-})
-
-whenever(keys.arrowup, () => {
-  if (vOpen.value) moveUp()
-})
-
-whenever(keys.arrowdown, () => {
-  if (vOpen.value) moveDown()
-})
-
 const hide = () => {
   vOpen.value = false
 }
 
-whenever(keys.Escape, () => {
-  if (vOpen.value) hide()
-})
-
-whenever(keys.ctrl_k, () => {
-  if (vOpen.value) hide()
-})
-
-whenever(keys.meta_k, () => {
-  if (vOpen.value) hide()
-})
-
-whenever(keys.ctrl_j, () => {
-  if (vOpen.value) hide()
-})
-
-whenever(keys.meta_j, () => {
-  if (vOpen.value) hide()
-})
-
 onClickOutside(modalEl, () => {
   if (vOpen.value) hide()
 })
 
+const onKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    hide()
+  } else if (e.key === 'Enter') {
+    if (newView.value) {
+      changeView({ viewId: newView.value.viewId, tableId: newView.value.tableId, baseId: newView.value.baseId })
+    }
+  } else if (e.key === 'ArrowUp') {
+    if (!vOpen.value) return
+    e.preventDefault()
+    moveUp()
+  } else if (e.key === 'ArrowDown') {
+    if (!vOpen.value) return
+    e.preventDefault()
+    moveDown()
+  } else if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === 'l') {
+    if (!user.value) return
+    e.preventDefault()
+    if (!vOpen.value) vOpen.value = true
+    moveUp()
+  } else if ((e.metaKey || e.ctrlKey) && e.key === 'l') {
+    if (!user.value) return
+    e.preventDefault()
+    if (!vOpen.value) vOpen.value = true
+    moveDown()
+  } else if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+    hide()
+  } else if ((e.ctrlKey || e.metaKey) && e.key === 'j') {
+    hide()
+  }
+}
+
 onMounted(() => {
   document.querySelector('.cmdOpt-list')?.focus()
   if (!activeView.value) return
   const index = recentViews.value.findIndex(
-    (v) => v.viewName === activeView.value?.name && v.tableID === activeView.value?.tableId,
+    (v) => v.viewName === activeView.value?.title && v.tableID === activeView.value?.fk_model_id,
   )
   if (index + 1 > recentViews.value.length) {
     selected.value = recentViews.value[0].tableID + recentViews.value[0].viewName
   } else {
     selected.value = recentViews.value[index + 1].tableID + recentViews.value[index + 1].viewName
   }
+
+  window.addEventListener('keydown', onKeyDown)
 })
 </script>
 
@@ -209,30 +185,45 @@ onMounted(() => {
                 selected: selected === cmdOption.tableID + cmdOption.viewName,
               }"
               class="cmdk-action"
-              @click="changeView({ viewId: cmdOption.viewId, tableId: cmdOption.tableID, baseId: cmdOption.baseId })"
+              @click="changeView({ viewId: cmdOption.viewId!, tableId: cmdOption.tableID, baseId: cmdOption.baseId })"
             >
-              <div class="cmdk-action-content !flex w-full">
-                <div class="flex gap-2 w-full flex-grow-1 items-center">
-                  <GeneralViewIcon :meta="{ type: cmdOption.viewType }" />
-                  <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
-                    <template #title>
-                      {{ cmdOption.isDefault ? $t('title.defaultView') : cmdOption.viewName }}
-                    </template>
-                    <span class="max-w- truncate capitalize">
-                      {{ cmdOption.isDefault ? $t('title.defaultView') : cmdOption.viewName }}
-                    </span>
-                  </a-tooltip>
+              <div class="cmdk-action-content">
+                <div class="flex w-1/2 flex-grow-1 items-center">
+                  <div class="flex gap-2">
+                    <GeneralViewIcon :meta="{ type: cmdOption.viewType }" />
+                    <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+                      <template #title>
+                        {{ cmdOption.viewName }}
+                      </template>
+                      <span class="truncate max-w-56 capitalize">
+                        {{ cmdOption.viewName }}
+                      </span>
+                    </a-tooltip>
+                  </div>
                 </div>
-                <div class="flex gap-2 bg-gray-100 px-2 py-1 rounded-md text-gray-600 items-center">
-                  <component :is="iconMap.project" class="w-4 h-4 text-transparent" />
-                  <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
-                    <template #title>
-                      {{ cmdOption.baseName }}
-                    </template>
-                    <span class="max-w-32 truncate capitalize">
-                      {{ cmdOption.baseName }}
-                    </span>
-                  </a-tooltip>
+                <div class="flex w-1/2 text-gray-600">
+                  <div class="flex gap-2 px-2 py-1 rounded-md bg-gray-100 items-center">
+                    <component :is="iconMap.projectGray" class="w-4 h-4 text-transparent" />
+                    <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+                      <template #title>
+                        {{ cmdOption.baseName }}
+                      </template>
+                      <span class="max-w-32 truncate capitalize">
+                        {{ cmdOption.baseName }}
+                      </span>
+                    </a-tooltip>
+                    <span class="text-bold"> / </span>
+
+                    <component :is="iconMap.table" class="w-4 h-4 text-transparent" />
+                    <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
+                      <template #title>
+                        {{ cmdOption.tableName }}
+                      </template>
+                      <span class="max-w-28 truncate capitalize">
+                        {{ cmdOption.tableName }}
+                      </span>
+                    </a-tooltip>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 1b5dd6fc7e..d8550d56ea 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -162,8 +162,10 @@ const renameTable = async (undo = false, disableTitleDiffCheck?: boolean | undef
 
     // update recent views if default view is renamed
     allRecentViews.value = allRecentViews.value.map((v) => {
-      if (v.tableID === tableMeta.id && v.isDefault) {
-        v.viewName = formState.title
+      if (v.tableID === tableMeta.id) {
+        if (v.isDefault) v.viewName = formState.title
+
+        v.tableName = formState.title
       }
       return v
     })
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index 7783be8a7a..f32ca96271 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -11,6 +11,7 @@ export const useViewsStore = defineStore('viewsStore', () => {
     tableID: string
     isDefault: boolean
     baseName: string
+    tableName: string
     workspaceId: string
     baseId: string
   }
@@ -293,6 +294,7 @@ export const useViewsStore = defineStore('viewsStore', () => {
         viewName: view.is_default ? (tableName as string) : view.title,
         viewType: view.type,
         workspaceId: activeWorkspaceId.value,
+        tableName: tableName as string,
         baseName: baseName as string,
       },
       ...allRecentViews.value.filter((f) => f.viewId !== view.id || f.tableID !== view.fk_model_id),
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 519c261e75..7de4ac2005 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -120,6 +120,7 @@ import NcArrowUp from '~icons/nc-icons/arrow-up'
 import NcArrowDown from '~icons/nc-icons/arrow-down'
 import NcUpload from '~icons/nc-icons/upload'
 import NcDownload from '~icons/nc-icons/download'
+import NcProjectGray from '~icons/nc-icons/project-gray'
 
 // keep it for reference
 // todo: remove it after all icons are migrated
@@ -269,6 +270,7 @@ import NcDownload from '~icons/nc-icons/download'
 } as const */
 
 export const iconMap = {
+  projectGray: NcProjectGray,
   sort: Sort,
   group: Group,
   filter: Filter,