Browse Source

wip: navigation correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2524/head
Pranav C 2 years ago
parent
commit
b8ac1605e9
  1. 9
      packages/nc-gui-v2/components/dashboard/TabView.vue
  2. 6
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  3. 7
      packages/nc-gui-v2/composables/tabs.ts
  4. 23
      packages/nc-gui-v2/composables/user.ts
  5. 2
      packages/nc-gui-v2/helpers/errorUtils.ts
  6. 12
      packages/nc-gui-v2/layouts/default.vue
  7. 15
      packages/nc-gui-v2/pages/dashboard/[projectId].vue
  8. 36
      packages/nc-gui-v2/pages/index.vue
  9. 55
      packages/nc-gui-v2/pages/projects/index.vue
  10. 7
      packages/nc-gui-v2/pages/signin.vue
  11. 6
      packages/nc-gui-v2/pages/signup.vue

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

@ -1,8 +1,8 @@
<template> <template>
<div> <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> </template>
</div> </div>
</template> </template>
@ -11,8 +11,7 @@
import {useTabs} from "~/composables/tabs"; import {useTabs} from "~/composables/tabs";
const {tabs} = useTabs() const {tabs,activeTab} = useTabs()
const activeIndex = ref(0)
const tabItems = computed(() => { const tabItems = computed(() => {
return tabs.value.map(tab => { return tabs.value.map(tab => {

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

@ -1,7 +1,7 @@
<template> <template>
<div> <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})"> @click="addTab({type:'table',title:table.title, id:table.id})">
{{ table.title }} {{ table.title }}
</div> </div>
@ -18,5 +18,7 @@ const {addTab} = useTabs()
</script> </script>
<style scoped> <style scoped>
.pointer{
cursor: pointer;
}
</style> </style>

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

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

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

@ -1,15 +1,32 @@
import {store} from 'nuxt3-store' import {store} from 'nuxt3-store'
import {Api} from "nocodb-sdk";
import {useNuxtApp} from "#app";
export const useUser = () =>{ export const useUser = () =>{
const user = store({ const user = store({
name: 'user', name: 'user',
type: 'localstorage', type: 'localstorage',
value: {token: null}, value: {token: null, user : null},
reactiveType: 'reactive', reactiveType: 'reactive',
version: '1.0.0' 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}
} }

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

@ -8,7 +8,7 @@ export async function extractSdkResponseErrorMsg(e:Error & {response:any}) {
msg = 'Some internal error occurred' msg = 'Some internal error occurred'
} }
} else { } 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' return msg || 'Some error occurred'
} }

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

@ -1,12 +1,12 @@
<template> <template>
<div class=""> <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> <slot></slot>
</div> <!-- </div>-->
</div> </div>
</template> </template>

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

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

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

@ -1,41 +1,17 @@
<template> <template>
<div class="container"> <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> </div>
</template> </template>
<script setup lang="ts"> <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> </script>
<style lang="scss"> <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> </style>

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

@ -1,6 +1,14 @@
<template> <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="grid">
<div class="col-3 p-3" v-for="project in projects" :key="project.id"> <div class="col-3 p-3" v-for="project in projects" :key="project.id">
@ -14,18 +22,24 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <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 {user} = useUser()
const $router = useRouter()
const projects = ref()
const loadProjects = async () => { const loadProjects = async () => {
const projectsResponse = await $api.project.list({}, { const projectsResponse = await $api.project.list({}, {
headers: { headers: {
@ -36,9 +50,7 @@ const loadProjects = async () => {
} }
const navigateToDashboard = async (project) => { const navigateToDashboard = async (project) => {
await $router.push({ await $router.push('/dashboard/' + project.id)
path: '/dashboard/' + project.id
})
} }
onMounted(async () => { onMounted(async () => {
@ -46,6 +58,31 @@ onMounted(async () => {
}) })
</script> </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> </style>

7
packages/nc-gui-v2/pages/signin.vue

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

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

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

Loading…
Cancel
Save