feat(gui-v2): add tab close option

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/dashboard/TabView.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import useTabs from '~/composables/useTabs'
+import MdiCloseIcon from '~icons/mdi/close'
 
-const { tabs, activeTab } = useTabs()
+const { tabs, activeTab, closeTab } = useTabs()
 </script>
 
 <template>
   <div>
-    <v-tabs v-model="activeTab" density="compact">
-      <v-tab v-for="(tab, i) in tabs" :key="i" :value="i">
+    <v-tabs v-model="activeTab" height="32" density="compact" color="primary">
+      <v-tab v-for="(tab, i) in tabs" :key="i" :value="i" class="text-capitalize">
         {{ tab.title }}
+        <MdiCloseIcon class="ml-2 text-gray-500/50" @click.stop="closeTab(i)"></MdiCloseIcon>
       </v-tab>
     </v-tabs>
 

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -131,7 +131,7 @@ onKeyStroke(['Enter'], (e) => {
             v-model="row[columnObj.title]"
             :column="columnObj"
             :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-            @update:modelValue="updateRowProperty(row,columnObj.title)"
+            @update:model-value="updateRowProperty(row, columnObj.title)"
           />
 
           <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->

packages/nc-gui-v2/composables/useTabs.ts

@@ -25,6 +25,9 @@ export default () => {
   const clearTabs = () => {
     tabs.value = []
   }
+  const closeTab = (index: number) => {
+    tabs.value.splice(index, 1)
+  }
 
-  return { tabs, addTab, activeTab, clearTabs }
+  return { tabs, addTab, activeTab, clearTabs, closeTab }
 }

packages/nc-gui-v2/composables/useViewData.ts

@@ -1,48 +1,49 @@
-import type { Api, PaginatedType, TableType } from "nocodb-sdk";
-import type { ComputedRef, Ref } from "vue";
-import { useNuxtApp } from "#app";
-import useProject from "~/composables/useProject";
+import type { Api, PaginatedType, TableType } from 'nocodb-sdk'
+import type { ComputedRef, Ref } from 'vue'
+import { useNuxtApp } from '#app'
+import useProject from '~/composables/useProject'
 
 const formatData = (list: Array<Record<string, any>>) =>
   list.map((row) => ({
     row: { ...row },
     oldRow: { ...row },
-    rowMeta: {}
-  }));
+    rowMeta: {},
+  }))
 
 export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
-  const data = ref<Array<Record<string, any>>>();
-  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }>>();
-  const paginationData = ref<PaginatedType>();
+  const data = ref<Array<Record<string, any>>>()
+  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }>>()
+  const paginationData = ref<PaginatedType>()
 
-  const { project } = useProject();
-  const { $api } = useNuxtApp();
+  const { project } = useProject()
+  const { $api } = useNuxtApp()
 
-  const loadData = async (params: Parameters<Api<any>["dbTableRow"]["list"]>[3] = {}) => {
-    if (!project?.value?.id || !meta?.value?.id) return;
-    const response = await $api.dbTableRow.list("noco", project.value.id, meta.value.id, params);
-    data.value = response.list;
-    formattedData.value = formatData(response.list);
-  };
+  const loadData = async (params: Parameters<Api<any>['dbTableRow']['list']>[3] = {}) => {
+    if (!project?.value?.id || !meta?.value?.id) return
+    const response = await $api.dbTableRow.list('noco', project.value.id, meta.value.id, params)
+    data.value = response.list
+    formattedData.value = formatData(response.list)
+  }
 
   const updateRowProperty = async (row: Record<string, any>, property: string) => {
-    const id = meta?.value?.columns?.filter(c => c.pk)
-      .map(c => row[c.title as string])
-      .join("___") as string;
+    const id = meta?.value?.columns
+      ?.filter((c) => c.pk)
+      .map((c) => row[c.title as string])
+      .join('___') as string
 
     const newData = await $api.dbTableRow.update(
-      "noco",
+      'noco',
       project?.value.id as string,
       meta?.value.id as string,
       id,
       {
-        [property]: row[property]
-      }
+        [property]: row[property],
+      },
       // todo:
       // {
       //   query: { ignoreWebhook: !saved }
       // }
-    );
+    )
 
     /*
 
@@ -59,32 +60,25 @@ export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
             })
             .then(() => {})
         */
-
-  };
+  }
   const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.length) => {
     // todo: implement insert row
 
-
     const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
       if (!col.ai && row?.[col.title as string] !== null) {
-        o[col.title as string] = row?.[col.title as string];
+        o[col.title as string] = row?.[col.title as string]
       }
-      return o;
-    }, {});
+      return o
+    }, {})
 
-    const insertedData = await $api.dbTableRow.create(
-      "noco",
-      project?.value.id as string,
-      meta?.value.id as string,
-      insertObj
-    );
+    const insertedData = await $api.dbTableRow.create('noco', project?.value.id as string, meta?.value.id as string, insertObj)
 
     formattedData.value?.splice(rowIndex ?? 0, 1, {
       row: insertedData,
       rowMeta: {},
-      oldRow: { ...insertedData }
-    });
-  };
+      oldRow: { ...insertedData },
+    })
+  }
 
-  return { data, loadData, paginationData, formattedData, insertRow, updateRowProperty };
+  return { data, loadData, paginationData, formattedData, insertRow, updateRowProperty }
 }