Browse Source

wip(nuxt3): create project pages

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 3 years ago
parent
commit
b201c514bf
  1. 23
      packages/nc-gui-v2/components/dashboard/TabView.vue
  2. 1
      packages/nc-gui-v2/composables/user.ts
  3. 3657
      packages/nc-gui-v2/package-lock.json
  4. 2
      packages/nc-gui-v2/package.json
  5. 1
      packages/nc-gui-v2/pages/dashboard/[projectId].vue
  6. 97
      packages/nc-gui-v2/pages/projects/create.vue
  7. 167
      packages/nc-gui-v2/pages/projects/createExternal.vue
  8. 11
      packages/nc-gui-v2/pages/projects/index.vue
  9. 2
      packages/nc-gui-v2/plugins/api.ts

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

@ -1,18 +1,23 @@
<template>
<div>
<!-- <TabMenu :model="tabItems" v-model:activeIndex="activeTab"/>
<template v-if="tabItems && tabItems[activeTab]">
<TabsSmartsheet :tab-meta="tabs[activeTab]" :key="tabs[activeTab].id"/>
</template>-->
<v-tabs v-model="activeTab">
<v-tab v-for="(tab,i) in tabs" :key="i" v-model:activeIndex="activeTab" >{{tab.title}} </v-tab>
<v-tabs density="compact" v-model="activeTab">
<v-tab v-for="(tab,i) in tabs" :key="i" :value="i" >{{tab.title}} </v-tab>
<v-tab-item v-for="(tab,i) in tabs" :key="i">
<TabsSmartsheet :tab-meta="tab" />
</v-tab-item>
</v-tabs>
<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>

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

@ -34,6 +34,7 @@ export const useUser = () =>{
$api?.instance?.interceptors.request.use((config) => {
config.headers['xc-gui'] = 'true'
if (user?.token) {
config.headers['xc-auth'] = user?.token
}

3657
packages/nc-gui-v2/package-lock.json generated

File diff suppressed because it is too large Load Diff

2
packages/nc-gui-v2/package.json

@ -16,7 +16,7 @@
"dependencies": {
"nocodb-sdk": "file:../nocodb-sdk",
"nuxt3-store": "^1.0.0",
"vuetify": "^3.0.0-alpha.12",
"vuetify": "^3.0.0-alpha.13",
"primevue": "3.10.0",
"primeflex": "3.2.0",
"primeicons": "5.0.0"

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

@ -39,6 +39,7 @@ import { useTabs } from "~/composables/tabs";
const route = useRoute();
const { loadProject, loadTables } = useProject();
const { clearTabs } = useTabs();
const {user} = useUser()
onMounted(async () => {

97
packages/nc-gui-v2/pages/projects/create.vue

@ -0,0 +1,97 @@
<template>
<NuxtLayout>
<div class="main justify-center d-flex mx-auto" style="min-height: 600px;overflow: auto">
<v-form ref="form" v-model="valid" @submit.prevent="createProject">
<v-card style="width:530px;margin-top: 100px" class="mx-auto">
<!-- Create Project -->
<v-container class="pb-10 px-12" style="padding-top: 43px !important;">
<h1 class="mt-4 mb-4 text-center">
<!-- {{ $t('activity.createProject') }}-->
Create Project
</h1>
<div class="mx-auto" style="width:350px">
<!-- label="Enter Project Name" -->
<!-- rule text: Required -->
<v-text-field
v-model="name"
class="nc-metadb-project-name"
label="Project name"
/>
<!-- :rules="titleValidationRule"-->
</div>
<div class="text-center">
<v-btn
class="mt-3"
large
:loading="loading"
color="primary"
@click="createProject"
>
<v-icon class="mr-1 mt-n1">
mdi-rocket-launch-outline
</v-icon>
<!-- Create -->
<!-- <span class="mr-1">{{ // $t("general.create") }}</span>-->
<span class="mr-1"> Create project </span>
</v-btn>
</div>
</v-container>
</v-card>
</v-form>
</div>
</NuxtLayout>
</template>
<script lang="ts" setup>
import { useNuxtApp, useRouter } from "#app";
import { ref } from "vue";
const name = ref('');
const loading = ref(false);
const valid = ref(false);
const { $api } = useNuxtApp();
const $router = useRouter();
const {user} = useUser()
const titleValidationRule = [
v => !!v || "Title is required",
v => v.length <= 50 || "Project name exceeds 50 characters"
];
const createProject = async () => {
loading.value = true;
try {
const result = (await $api.project.create({
title: name.value
}));
await $router.push( `/dashboard/${result.id}`);
} catch (e) {
// todo: toast
// this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
}
loading.value = false;
};
</script>
<style scoped>
/deep/ label {
font-size: .75rem;
}
.wrapper {
border: 2px solid var(--v-backgroundColor-base);
border-radius: 4px;
}
.main {
height: calc(100vh - 48px)
}
</style>

167
packages/nc-gui-v2/pages/projects/createExternal.vue

@ -0,0 +1,167 @@
<template>
<NuxtLayout>
<div class="main justify-center d-flex mx-auto" style="min-height: 600px;overflow: auto">
<v-form ref="form" v-model="valid" @submit.prevent="createProject">
<v-card style="width:530px;margin-top: 100px" class="mx-auto">
<!-- Create Project -->
<v-container class="pb-10 px-12" style="padding-top: 43px !important;">
<h1 class="mt-4 mb-4 text-center">
<!-- {{ $t('activity.createProject') }}-->
Create Project
</h1>
<div class="mx-auto" style="width:350px">
<!-- label="Enter Project Name" -->
<!-- rule text: Required -->
<v-text-field
v-model="name"
class="nc-metadb-project-name"
label="Project name"
/>
<!-- :rules="titleValidationRule"-->
</div>
<v-container fluid>
<v-row>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.client"
class="nc-metadb-project-name"
label="Database client"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.host"
class="nc-metadb-project-name"
label="Host"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.port"
class="nc-metadb-project-name"
label="Port"
type="number"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.user"
class="nc-metadb-project-name"
label="Username"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.password"
class="nc-metadb-project-name"
type="password"
label="Password"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="projectDatasource.connection.database"
class="nc-metadb-project-name"
label="Database name"
/>
</v-col>
</v-row>
</v-container>
<div class="text-center">
<v-btn
class="mt-3"
large
:loading="loading"
color="primary"
@click="createProject"
>
<v-icon class="mr-1 mt-n1">
mdi-rocket-launch-outline
</v-icon>
<!-- Create -->
<!-- <span class="mr-1">{{ // $t("general.create") }}</span>-->
<span class="mr-1"> Create project </span>
</v-btn>
</div>
</v-container>
</v-card>
</v-form>
</div>
</NuxtLayout>
</template>
<script lang="ts" setup>
import { useNuxtApp, useRouter } from "#app";
import { ref } from "vue";
const name = ref('');
const loading = ref(false);
const valid = ref(false);
const projectDatasource = reactive({
client:'mysql2',
connection:{
user: 'root',
password: 'password',
port: 3306,
host: 'localhost',
database: '',
}
});
const { $api } = useNuxtApp();
const $router = useRouter();
const {user} = useUser()
const titleValidationRule = [
v => !!v || "Title is required",
v => v.length <= 50 || "Project name exceeds 50 characters"
];
const createProject = async () => {
loading.value = true;
try {
const result= await $api.project.create({
title: name.value,
bases: [
{
type: projectDatasource.client,
config: projectDatasource,
// inflection_column: inflection.column_name,
// inflection_table: inflection.table_name
}
],
external: true
})
await $router.push( `/dashboard/${result.id}`);
} catch (e) {
// todo: toast
// this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
}
loading.value = false;
};
</script>
<style scoped>
/deep/ label {
font-size: .75rem;
}
.wrapper {
border: 2px solid var(--v-backgroundColor-base);
border-radius: 4px;
}
.main {
height: calc(100vh - 48px)
}
</style>

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

@ -3,6 +3,14 @@
<v-navigation-drawer color="" permanent></v-navigation-drawer>
<v-main>
<v-container>
<div class="pa-2 d-flex mb-10">
<v-spacer></v-spacer>
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="createProject">Create Project</v-btn>
<v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="createExtProject">Create External Project</v-btn>
</div>
<!-- tod
o: move to layout or create a reusable component -->
<!-- <div class="nc-container">-->
@ -55,6 +63,9 @@ const navigateToDashboard = async (project) => {
await $router.push("/dashboard/" + project.id);
};
const createProject =()=> $router.push('/projects/create')
const createExtProject =()=> $router.push('/projects/createExternal')
onMounted(async () => {
await loadProjects();
});

2
packages/nc-gui-v2/plugins/api.ts

@ -5,14 +5,12 @@ import { defineNuxtPlugin } from "nuxt3/app";
export default defineNuxtPlugin((nuxtApp) => {
// Doing something with nuxtApp
const api = getApi(null, null);
// nuxtApp.provide("api", api);
return {
provide: {
api

Loading…
Cancel
Save