From d0e1933f07cf7202ab019278628726ef1822f107 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 22 Aug 2022 10:13:31 +0200
Subject: [PATCH] fix(gui-v2): close correct tab on `x` icon click

---
 packages/nc-gui-v2/components.d.ts                   |  1 +
 .../pages/[projectType]/[projectId]/index/index.vue  | 12 ++++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index fd09b391f8..9b0fa75f45 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -122,6 +122,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDoubleLeft: typeof import('~icons/mdi/chevron-double-left')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index fdf703998c..8471d52a37 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabMetaInj, provide, useSidebar, useTabs } from '#imports'
-import { TabType, useGlobal } from '~/composables'
+import { TabType } from '~/composables'
+import { TabMetaInj, provide, useGlobal, useSidebar, useTabs } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
@@ -24,6 +24,10 @@ const icon = (tab: TabItem) => {
 }
 
 const { isOpen, toggle } = useSidebar()
+
+function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
+  if (action === 'remove') closeTab(targetKey)
+}
 </script>
 
 <template>
@@ -41,8 +45,8 @@ const { isOpen, toggle } = useSidebar()
           />
         </div>
 
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
-          <a-tab-pane v-for="(tab, i) in tabs" :key="i">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
+          <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
               <div class="flex items-center gap-2">
                 <component :is="icon(tab)" class="text-sm" />