feat(gui-v2): basic layout

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

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

@@ -248,7 +248,7 @@ const addTableTab = (table: TableType) => {
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
                     <template #overlay>
                       <a-menu class="cursor-pointer">
-                        <a-menu-item class="!text-xs" @click="showRenameTableDlg(table)"> Rename </a-menu-item>
+                        <a-menu-item v-t="" class="!text-xs" @click="showRenameTableDlg(table)"><div>Rename</div></a-menu-item>
                         <a-menu-item class="!text-xs" @click="deleteTable(table)"> Delete</a-menu-item>
                       </a-menu>
                     </template>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts"></script>
 
 <template>
-  <v-toolbar dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom" style="z-index: 7">
+  <div dense class="nc-table-toolbar w-100 p-1 flex gap-1" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
     <SmartsheetToolbarColumnFilterMenu />
     <SmartsheetToolbarSortListMenu />
-  </v-toolbar>
+  </div>
 </template>
 
 <style scoped></style>

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -37,7 +37,7 @@ watch(
 </script>
 
 <template>
-  <div class="overflow-auto">
+  <div class="overflow-auto nc-container">
     <SmartsheetToolbar />
     <template v-if="meta">
       <div class="d-flex">

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

@@ -2,8 +2,14 @@ import type { WritableComputedRef } from '@vue/reactivity'
 import { useState } from '#app'
 import useProject from '~/composables/useProject'
 
+enum TabType {
+  TABLE = 'table',
+  VIEW = 'view',
+  AUTH = 'auth',
+}
+
 export interface TabItem {
-  type: 'table' | 'view' | 'auth'
+  type: TabType
   title: string
   id?: string
 }
@@ -26,8 +32,8 @@ export default () => {
   const activeTabIndex: WritableComputedRef<number> = computed({
     get() {
       console.log(route?.name)
-      if ((route?.name as string)?.startsWith('nc-projectId-index-index-type-title') && tables?.value?.length) {
+      if ((route?.name as string)?.startsWith('nc-projectId-index-index-type-title-viewTitle') && tables?.value?.length) {
-        const tab: Partial<TabItem> = { type: 'table', title: route.params.title as string }
+        const tab: Partial<TabItem> = { type: route.params.type as TabType, title: route.params.title as string }
         const id = tables?.value?.find((t) => t.title === tab.title)?.id
         tab.id = id as string
         let index = tabs.value.findIndex((t) => t.id === tab.id)
@@ -47,11 +53,14 @@ export default () => {
       } else {
         const tab = tabs.value[index]
         if (!tab) {
-        } else if (tab.type === 'table') {
+          return
+        }
+
+        if (tab.type === TabType.TABLE) {
           router.push(`/nc/${route.params.projectId}/table/${tab?.title}`)
-        } else if (tab.type === 'view') {
+        } else if (tab.type === TabType.VIEW) {
           router.push(`/nc/${route.params.projectId}/view/${tab?.title}`)
-        } else if (tab.type === 'auth') {
+        } else if (tab.type === TabType.AUTH) {
           router.push(`/nc/${route.params.projectId}/auth`)
         }
       }

packages/nc-gui-v2/pages/nc/[projectId]/index.vue

@@ -6,7 +6,9 @@ const { loadProject, loadTables } = useProject(route.params.projectId as string)
 const { clearTabs, addTab } = useTabs()
 const { $state } = useNuxtApp()
 
-addTab({ type: 'auth', title: 'Team & Auth' })
+if (!route.params.type) {
+  addTab({ type: 'auth', title: 'Team & Auth' })
+}
 
 watch(
   () => route.params.projectId,
@@ -29,39 +31,6 @@ $state.sidebarOpen.value = true
     <template #sidebar>
       <DashboardTreeView />
     </template>
-
+    <NuxtPage />
-    <v-container fluid>
-      <!--      <DashboardTabView /> -->
-      <NuxtPage />
-    </v-container>
   </NuxtLayout>
 </template>
-
-<style scoped lang="scss">
-.nc-container {
-  .nc-topbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    z-index: 5;
-  }
-
-  .nc-sidebar {
-    position: fixed;
-    top: 50px;
-    left: 0;
-    height: calc(100% - 50px);
-    width: 250px;
-  }
-
-  .nc-content {
-    position: fixed;
-    top: 50px;
-    left: 250px;
-    height: calc(100% - 50px);
-    width: calc(100% - 250px);
-  }
-}
-</style>

packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

@@ -9,26 +9,24 @@ provide(TabMetaInj, activeTab)
 </script>
 
 <template>
-  <div>
+  <div class="nc-container d-flex flex-column">
-    <!--    <v-tabs v-model="activeTab" height="32" density="compact" color="primary">
+    <div>
-      <v-tab v-for="(tab, i) in tabs" :key="i" :value="i" class="text-capitalize">
+      <a-tabs v-model:activeKey="activeTabIndex" size="small" type="editable-card" @edit="closeTab">
-        {{ tab.title }}
+        <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
-        <MdiCloseIcon class="ml-2 text-gray-500/50" @click.stop="closeTab(i)"></MdiCloseIcon>
+      </a-tabs>
-      </v-tab>
+    </div>
-      <MdiPlusIcon @click="tableCreateDialog = true" />
+    <div class="flex-1">
-      <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
+      <NuxtPage />
-    </v-tabs> -->
+    </div>
-    <a-tabs v-model:activeKey="activeTabIndex" size="small" type="editable-card" @edit="closeTab">
-      <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
-    </a-tabs>
-
-    <NuxtPage />
-    <!--    <v-window v-model="activeTab">
-      <v-window-item v-for="(tab, i) in tabs" :key="i" :value="i">
-        <TabsSmartsheet :tab-meta="tab" />
-      </v-window-item>
-    </v-window> -->
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.nc-container {
+  height: calc(100vh - var(--header-height));
+}
+
+:deep(.ant-tabs-nav) {
+  @apply !mb-0;
+}
+</style>

packages/nc-gui-v2/pages/nc/[projectId]/index/index/[type]/[title]/index.vue

@@ -1,11 +0,0 @@
-<script>
-export default {
-  name: 'Index',
-}
-</script>
-
-<template>
-  <TabsSmartsheet />
-</template>
-
-<style scoped></style>