diff --git a/packages/nc-gui-v2/components/dashboard/TabView.vue b/packages/nc-gui-v2/components/dashboard/TabView.vue new file mode 100644 index 0000000000..2d02d1b0e2 --- /dev/null +++ b/packages/nc-gui-v2/components/dashboard/TabView.vue @@ -0,0 +1,31 @@ + + + + + + + + + + + + diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue new file mode 100644 index 0000000000..89aa2917c5 --- /dev/null +++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue @@ -0,0 +1,22 @@ + + + + + {{ table.title }} + + + + + + + + diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue new file mode 100644 index 0000000000..9305ca4769 --- /dev/null +++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue @@ -0,0 +1,56 @@ + + + + + + + + + {{ d&& (Array.isArray(d) ? d : [d]).map(c1 => c1[Object.keys(c1)[1]]).join(', ') }} + + + + + + + + + + + diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue new file mode 100644 index 0000000000..f6c0f374d4 --- /dev/null +++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue @@ -0,0 +1,36 @@ + + + + + + + + + + + diff --git a/packages/nc-gui-v2/composables/metas.ts b/packages/nc-gui-v2/composables/metas.ts new file mode 100644 index 0000000000..599e5f143e --- /dev/null +++ b/packages/nc-gui-v2/composables/metas.ts @@ -0,0 +1,41 @@ +import {useNuxtApp, useState} from "#app"; +import {Api, TableType} from "nocodb-sdk"; +import {useUser} from "~/composables/user"; +import {useProject} from "~/composables/project"; + + +export const useMetas = () => { + const {$api}: { $api: Api } = useNuxtApp() as any + const {user} = useUser() + const {tables} = useProject() + + const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({})) + + const getMeta = async (tableIdOrTitle: string, force = false) => { + if (!force && metas[tableIdOrTitle]) { + return metas[tableIdOrTitle] + } + + const modelId = (tables.value.find(t => t.title === tableIdOrTitle || t.id === tableIdOrTitle) || {}).id + if (!modelId) { + console.warn(`Table '${tableIdOrTitle}' is not found in the table list`) + return + } + + const model = await $api.dbTable.read(modelId, { + headers: { + 'xc-auth': user.token + } + }) + + metas.value = { + ...metas.value, + [model.id]: model, + [model.title]: model + } + + return model + } + + return {getMeta, metas} +} diff --git a/packages/nc-gui-v2/composables/project.ts b/packages/nc-gui-v2/composables/project.ts new file mode 100644 index 0000000000..8564d772ee --- /dev/null +++ b/packages/nc-gui-v2/composables/project.ts @@ -0,0 +1,36 @@ +import {useNuxtApp} from "#app"; +import {Api, TableType} from "nocodb-sdk"; +import {useUser} from "~/composables/user"; + +export const useProject = () => { + const {$api}: { $api: Api } = useNuxtApp() as any + const {user} = useUser() + + const project = useState<{ id?: string, title?: string }>('project', null) + const tables = useState>('tables', null) + + const loadTables = async () => { + const tablesResponse = await $api.dbTable.list(project?.value?.id, {}, { + headers: { + 'xc-auth': user.token + } + }) + + console.log(tablesResponse) + tables.value = tablesResponse.list + } + + const loadProject = async (projectId:string) => { + const projectResponse = await $api.project.read(projectId, { + headers: { + 'xc-auth': user.token + } + }) + + console.log(projectResponse) + project.value = projectResponse + } + + + return {project, tables, loadProject, loadTables} +} diff --git a/packages/nc-gui-v2/composables/tabs.ts b/packages/nc-gui-v2/composables/tabs.ts new file mode 100644 index 0000000000..2fec3df13a --- /dev/null +++ b/packages/nc-gui-v2/composables/tabs.ts @@ -0,0 +1,17 @@ +import {useState} from "#app"; + +interface TabItem { + type: 'table' | 'view', + title: string, + id:string +} + +export const useTabs = () => { + const tabs = useState>('tabs', () => []) + + const addTab = (tabMeta: TabItem) => { + tabs.value = [...(tabs.value || []), tabMeta] + } + + return {tabs, addTab} +} diff --git a/packages/nc-gui-v2/composables/user.ts b/packages/nc-gui-v2/composables/user.ts index 137ce32533..7cb1d641de 100644 --- a/packages/nc-gui-v2/composables/user.ts +++ b/packages/nc-gui-v2/composables/user.ts @@ -1,9 +1,15 @@ import {store} from 'nuxt3-store' -export const user = store({ - name: 'user', - type: 'localstorage', - value: {token: null}, - reactiveType: 'reactive', - version: '1.0.0' -}) +export const useUser = () =>{ + const user = store({ + name: 'user', + type: 'localstorage', + value: {token: null}, + reactiveType: 'reactive', + version: '1.0.0' + }) + + const setToken = (token) => { user.token = token } + + return {user,setToken} +} diff --git a/packages/nc-gui-v2/helpers/errorUtils.ts b/packages/nc-gui-v2/helpers/errorUtils.ts new file mode 100644 index 0000000000..7bcc605e4e --- /dev/null +++ b/packages/nc-gui-v2/helpers/errorUtils.ts @@ -0,0 +1,14 @@ +export async function extractSdkResponseErrorMsg(e:Error & {response:any}) { + if (!e || !e.response) { return e.message } + let msg + if (e.response.data instanceof Blob) { + try { + msg = JSON.parse(await e.response.data.text()).msg + } catch { + msg = 'Some internal error occurred' + } + } else { + msg = e.response.data.msg || 'Some internal error occurred' + } + return msg || 'Some error occurred' +} diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue index 74487e2760..03cb32c75d 100644 --- a/packages/nc-gui-v2/layouts/default.vue +++ b/packages/nc-gui-v2/layouts/default.vue @@ -1,11 +1,13 @@ - - - - + + + + + + - - + + + + diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue new file mode 100644 index 0000000000..e030b6e9cc --- /dev/null +++ b/packages/nc-gui-v2/pages/projects/index.vue @@ -0,0 +1,51 @@ + + + + + + + + + + {{ project.title }} + + + + + + + + + + + + + diff --git a/packages/nc-gui-v2/pages/dashboard.vue b/packages/nc-gui-v2/pages/sample.vue similarity index 100% rename from packages/nc-gui-v2/pages/dashboard.vue rename to packages/nc-gui-v2/pages/sample.vue diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue index 29954c4885..0d770e1914 100644 --- a/packages/nc-gui-v2/pages/signin.vue +++ b/packages/nc-gui-v2/pages/signin.vue @@ -1,72 +1,62 @@ - - - {{userStore}} - - - + + + + - - + {{ error }} - - Sign In - + + + Email + - - - + + + + Password + + + + + Sign In + + + + + - + diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue index 2c47d1c203..7b52b3cbbf 100644 --- a/packages/nc-gui-v2/pages/signup.vue +++ b/packages/nc-gui-v2/pages/signup.vue @@ -1,13 +1,62 @@ + + + + + + {{ error }} + + + + Email + + + + + + Password + + + + + Sign Up + + + + + - + diff --git a/packages/nc-gui-v2/plugins/primevue.ts b/packages/nc-gui-v2/plugins/primevue.ts index bdcb14bd2d..a2a5a0ae21 100644 --- a/packages/nc-gui-v2/plugins/primevue.ts +++ b/packages/nc-gui-v2/plugins/primevue.ts @@ -5,6 +5,10 @@ import InputText from "primevue/inputtext"; import Toast from "primevue/toast"; import Card from "primevue/card"; import Sidebar from "primevue/sidebar"; +import Message from "primevue/message"; +import TabMenu from "primevue/tabmenu"; +import DataTable from "primevue/datatable"; +import Column from "primevue/column"; import ToastService from 'primevue/toastservice'; export default defineNuxtPlugin((nuxtApp) => { @@ -15,5 +19,9 @@ export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component('Toast', Toast); nuxtApp.vueApp.component('Card', Card); nuxtApp.vueApp.component('Sidebar', Sidebar); + nuxtApp.vueApp.component('Message', Message); + nuxtApp.vueApp.component('TabMenu', TabMenu); + nuxtApp.vueApp.component('DataTable', DataTable); + nuxtApp.vueApp.component('Column', Column); //other components that you need }); diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json index a7bfa186c3..f2f514a1b0 100644 --- a/packages/nc-gui-v2/tsconfig.json +++ b/packages/nc-gui-v2/tsconfig.json @@ -1,4 +1,5 @@ { // https://v3.nuxtjs.org/concepts/typescript - "extends": "./.nuxt/tsconfig.json" + "extends": "./.nuxt/tsconfig.json", + }