wip(nuxt3): create project pages

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

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>
 

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
     }

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"

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 () => {

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>

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>

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();
 });

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