wip: navigation correction

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

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

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <TabMenu :model="tabItems" v-model:activeIndex="activeIndex"/>
+    <TabMenu :model="tabItems" v-model:activeIndex="activeTab"/>
-    <template v-if="tabItems && tabItems[activeIndex]">
+    <template v-if="tabItems && tabItems[activeTab]">
-     <TabsSmartsheet :tab-meta="tabs[activeIndex]" :key="tabs[activeIndex].id"/>
+     <TabsSmartsheet :tab-meta="tabs[activeTab]" :key="tabs[activeTab].id"/>
     </template>
   </div>
 </template>
@@ -11,8 +11,7 @@
 
 import {useTabs} from "~/composables/tabs";
 
-const {tabs} = useTabs()
+const {tabs,activeTab} = useTabs()
-const activeIndex = ref(0)
 
 const tabItems = computed(() => {
   return tabs.value.map(tab => {

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

@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <div v-for="table in tables" class="p-2 text-sm"
+    <div v-for="table in tables" class="p-2 text-sm pointer"
          @click="addTab({type:'table',title:table.title, id:table.id})">
       {{ table.title }}
     </div>
@@ -18,5 +18,7 @@ const {addTab} = useTabs()
 </script>
 
 <style scoped>
-
+.pointer{
+  cursor: pointer;
+}
 </style>

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

@@ -8,10 +8,15 @@ interface TabItem {
 
 export const useTabs = () => {
   const tabs = useState<Array<TabItem>>('tabs', () => [])
+  const activeTab = useState<number>('activeTab', ()=>0)
 
   const addTab = (tabMeta: TabItem) => {
     tabs.value = [...(tabs.value || []), tabMeta]
+    activeTab.value = tabs.value.length - 1
+  }
+  const clearTabs = () => {
+    tabs.value = []
   }
 
-  return {tabs, addTab}
+  return {tabs, addTab, activeTab, clearTabs}
 }

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

@@ -1,15 +1,32 @@
 import {store} from 'nuxt3-store'
+import {Api} from "nocodb-sdk";
+import {useNuxtApp} from "#app";
 
 export  const useUser = () =>{
   const user =  store({
     name: 'user',
     type: 'localstorage',
-    value: {token: null},
+    value: {token: null, user : null},
     reactiveType: 'reactive',
     version: '1.0.0'
   })
 
-  const setToken = (token) => { user.token = token }
+  const {$api}: { $api: Api<any> } = useNuxtApp() as any
 
-  return {user,setToken}
+
+  const getUser =async (args = {}) => {
+    const userInfo = await $api.auth.me(args, {
+      headers: {
+        'xc-auth': user.value.token
+      }
+    })
+
+    user.user = userInfo
+  }
+
+  const setToken =  (token) => {
+    user.token = token
+  }
+
+  return {user,setToken, getUser}
 }

packages/nc-gui-v2/helpers/errorUtils.ts

@@ -8,7 +8,7 @@ export async function extractSdkResponseErrorMsg(e:Error & {response:any}) {
       msg = 'Some internal error occurred'
     }
   } else {
-    msg = e.response.data.msg || 'Some internal error occurred'
+    msg = e.response.data.msg || e.response.data.message || 'Some internal error occurred'
   }
   return msg || 'Some error occurred'
 }

packages/nc-gui-v2/layouts/default.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="">
-    <div class="topbar">
+<!--    <div class="topbar">-->
-    </div>
+<!--    </div>-->
-    <div class="sidebar">
+<!--    <div class="sidebar">-->
-    </div>
+<!--    </div>-->
-    <div class="content">
+<!--    <div class="content">-->
       <slot></slot>
-    </div>
+<!--    </div>-->
   </div>
 </template>
 

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

@@ -1,4 +1,5 @@
 <template>
+  <!--  todo: move to layout or create a reusable component -->
   <div class="nc-container">
     <div class="nc-topbar shadow-2">
     </div>
@@ -12,11 +13,13 @@
 </template>
 
 <script setup lang="ts">
-import {useNuxtApp} from "#app";
 import {useProject} from "~/composables/project";
+import {watch} from "vue";
+import {useTabs} from "~/composables/tabs";
 
 const route = useRoute()
 const {loadProject, loadTables} = useProject()
+const {clearTabs} = useTabs()
 
 
 onMounted(async () => {
@@ -24,6 +27,14 @@ onMounted(async () => {
   await loadTables()
 })
 
+watch(() => route.params.projectId, async (newVal, oldVal) => {
+  if (newVal && newVal !== oldVal) {
+    clearTabs()
+    await loadProject(newVal as string)
+    await loadTables()
+  }
+})
+
 </script>
 
 <style scoped lang="scss">
@@ -34,7 +45,7 @@ onMounted(async () => {
     left: 0;
     height: 50px;
     width: 100%;
-
+    z-index: 5;
   }
 
   .nc-sidebar {

packages/nc-gui-v2/pages/index.vue

@@ -1,41 +1,17 @@
 <template>
   <div class="container">
-    <div>
-      <img alt="Vue logo" src="../assets/icon.png" width="50">
-      <Toast />
 
-      <div >
-        <form @submit.prevent="greet">
-          <InputText type="text" v-model="text"/>
-          <Button type="submit" label="Submit"/>
-        </form>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import {useRouter} from "#app";
-import { useToast } from "primevue/usetoast";
+
-const text = ref();
+const $router = useRouter()
-const toast = useToast();
+
-const greet = () => {
+$router.replace('/projects')
-  toast.add({severity: 'info', summary: 'Hello '  + text.value});
-}
 </script>
 
 <style lang="scss">
-.container {
+
-  margin: 0 auto;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 1rem;
-  }
-}
 </style>

packages/nc-gui-v2/pages/projects/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <div>
 
+
+  <!--  todo: move to layout or create a reusable component -->
+  <div class="nc-container">
+    <div class="nc-topbar shadow-2">
+    </div>
+    <div class="nc-sidebar shadow-2 p-4 overflow-y-auto">
+
+    </div>
+    <div class="nc-content p-4 overflow-auto">
       <div class="grid">
         <div class="col-3 p-3" v-for="project in projects" :key="project.id">
 
@@ -14,18 +22,24 @@
 
         </div>
       </div>
-
     </div>
+  </div>
+
 </template>
 
 <script setup lang="ts">
 
-import {Api} from "nocodb-sdk";
+import {useRouter} from "#app";
 
-const {$api, $router}= useNuxtApp()
+const {$api} = useNuxtApp()
-const projects = ref()
 const {user} = useUser()
 
+
+
+const $router = useRouter()
+
+const projects = ref()
+
 const loadProjects = async () => {
   const projectsResponse = await $api.project.list({}, {
     headers: {
@@ -36,9 +50,7 @@ const loadProjects = async () => {
 }
 
 const navigateToDashboard = async (project) => {
-  await $router.push({
+  await $router.push('/dashboard/' + project.id)
-    path: '/dashboard/'  + project.id
-  })
 }
 
 onMounted(async () => {
@@ -46,6 +58,31 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped>
+<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/signin.vue

@@ -35,9 +35,11 @@
 import {ref, reactive} from 'vue'
 import {useUser} from "~/composables/user";
 import {extractSdkResponseErrorMsg} from "~/helpers/errorUtils";
-import {useNuxtApp} from "#app";
+import {useNuxtApp, useRouter} from "#app";
 
 const { $api} = useNuxtApp()
+const $router = useRouter()
+
 const valid = ref()
 const error = ref()
 const form = reactive({
@@ -50,7 +52,8 @@ const signIn = async () => {
   error.value = null
   try {
     const {token} = await $api.auth.signin(form)
-    setToken(token)
+    await setToken(token)
+    await $router.push('/projects')
   } catch (e) {
     error.value = await extractSdkResponseErrorMsg(e)
   }

packages/nc-gui-v2/pages/signup.vue

@@ -34,10 +34,9 @@
 <script setup lang="ts">
 import {ref, reactive} from 'vue'
 import {useUser} from "~/composables/user";
-import {Api} from "nocodb-sdk";
 import {extractSdkResponseErrorMsg} from "~/helpers/errorUtils";
 
-const {$api}: { $api: Api<any> } = useNuxtApp() as any
+const {$api, $router} = useNuxtApp()
 const valid = ref()
 const error = ref()
 const form = reactive({
@@ -50,7 +49,8 @@ const signUp = async () => {
   error.value = null
   try {
     const {token} = await $api.auth.signup(form)
-    setToken(token)
+    await setToken(token)
+    $router.push('/projects')
   } catch (e) {
     error.value = await extractSdkResponseErrorMsg(e)
   }