fix: corrections in create project

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

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

@@ -5,7 +5,6 @@
   "packages": {
     "": {
       "dependencies": {
-        "@nuxtjs/toast": "^3.3.1",
         "nocodb-sdk": "file:../nocodb-sdk",
         "nuxt3-store": "^1.0.0",
         "vuetify": "^3.0.0-alpha.13"
@@ -1278,14 +1277,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@nuxtjs/toast": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
-      "integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
-      "dependencies": {
-        "vue-toasted": "^1.1.28"
-      }
-    },
     "node_modules/@rollup/plugin-alias": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz",
@@ -11537,11 +11528,6 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue-toasted": {
-      "version": "1.1.28",
-      "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
-      "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
-    },
     "node_modules/vue/node_modules/@vue/shared": {
       "version": "3.2.33",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
@@ -12850,14 +12836,6 @@
         }
       }
     },
-    "@nuxtjs/toast": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/toast/-/toast-3.3.1.tgz",
-      "integrity": "sha512-b9JpyjSw5ZOyjskBvNc4NEebe0qxB6LivBlO84gHOnsaF23rLkJoBfVNDcXwGNDl7vm09yM4WqBGTkm/OQ0ZCQ==",
-      "requires": {
-        "vue-toasted": "^1.1.28"
-      }
-    },
     "@rollup/plugin-alias": {
       "version": "3.1.9",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz",
@@ -20373,11 +20351,6 @@
         "@vue/devtools-api": "^6.0.0"
       }
     },
-    "vue-toasted": {
-      "version": "1.1.28",
-      "resolved": "https://registry.npmjs.org/vue-toasted/-/vue-toasted-1.1.28.tgz",
-      "integrity": "sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw=="
-    },
     "vuetify": {
       "version": "3.0.0-beta.5",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.0.0-beta.5.tgz",

packages/nc-gui-v2/package.json

@@ -15,7 +15,6 @@
     "sass-loader": "^10.3.0"
   },
   "dependencies": {
-    "@nuxtjs/toast": "^3.3.1",
     "nocodb-sdk": "file:../nocodb-sdk",
     "nuxt3-store": "^1.0.0",
     "vuetify": "^3.0.0-alpha.13"

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

@@ -1,58 +1,74 @@
 <script lang="ts" setup>
-
+import { ref } from 'vue'
-import { useNuxtApp, useRouter } from "#app";
+import { useNuxtApp, useRouter } from '#app'
-import { ref } from "vue";
+
-
+const clientTypes = [
-const name = ref('');
+  {
-const loading = ref(false);
+    text: 'MySql',
-const valid = ref(false);
+    value: 'mysql2',
+  }, {
+    text: 'MSSAL',
+    value: 'mssql',
+  }, {
+    text: 'PostgreSQL',
+    value: 'pg',
+  }, {
+    text: 'SQLite',
+    value: 'sqlite',
+  },
+]
+
+const name = ref('')
+const loading = ref(false)
+const valid = ref(false)
 const projectDatasource = reactive({
-  client:'mysql2',
+  client: 'mysql2',
-  connection:{
+  connection: {
     user: 'root',
     password: 'password',
     port: 3306,
     host: 'localhost',
     database: '',
-  }
+  },
-});
+})
-
+const inflection = reactive({
-const { $api } = useNuxtApp();
+  tableName: 'camelize',
-const $router = useRouter();
+  columnName: 'camelize',
-const {user} = useUser()
+})
 
+const { $api } = useNuxtApp()
+const $router = useRouter()
+const { user } = useUser()
 
 const titleValidationRule = [
-  v => !!v || "Title is required",
+  v => !!v || 'Title is required',
-  v => v.length <= 50 || "Project name exceeds 50 characters"
+  v => v.length <= 50 || 'Project name exceeds 50 characters',
-];
+]
 
 const createProject = async () => {
-  loading.value = true;
+  loading.value = true
   try {
-
+    const result = await $api.project.create({
-    const result= await $api.project.create({
       title: name.value,
       bases: [
         {
           type: projectDatasource.client,
           config: projectDatasource,
-          // inflection_column: inflection.column_name,
+          inflection_column: inflection.columnName,
-          // inflection_table: inflection.table_name
+          inflection_table: inflection.tableName,
-        }
+        },
       ],
-      external: true
+      external: true,
     })
 
-    await $router.push( `/dashboard/${result.id}`);
+    await $router.push(`/dashboard/${result.id}`)
-  } catch (e) {
+  }
+  catch (e) {
     // todo: toast
     // this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
   }
-  loading.value = false;
+  loading.value = false
-
+}
-};
-
 </script>
 
 <template>
@@ -60,11 +76,10 @@ const createProject = async () => {
     <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') }}-->
+              <!--            {{ $t('activity.createProject') }} -->
               Create Project
             </h1>
             <div class="mx-auto" style="width:350px">
@@ -75,18 +90,17 @@ const createProject = async () => {
                 class="nc-metadb-project-name"
                 label="Project name"
               />
-              <!--                :rules="titleValidationRule"-->
+              <!--                :rules="titleValidationRule" -->
             </div>
 
-
             <v-container fluid>
               <v-row>
                 <v-col cols="6">
                   <v-select
+                    v-model="projectDatasource.client"
                     :items="clientTypes"
                     item-title="text"
                     item-value="value"
-                    v-model="projectDatasource.client"
                     class="nc-metadb-project-name"
                     label="Database client"
                   />
@@ -128,12 +142,28 @@ const createProject = async () => {
                     label="Database name"
                   />
                 </v-col>
+
+                <v-col cols="6">
+                  <v-text-field
+                    v-model="inflection.tableName"
+                    class="nc-metadb-project-name"
+                    type="password"
+                    label="Password"
+                  />
+                </v-col>
+                <v-col cols="6">
+                  <v-text-field
+                    v-model="inflection.columnName"
+                    class="nc-metadb-project-name"
+                    label="Database name"
+                  />
+                </v-col>
               </v-row>
             </v-container>
 
             <div class="text-center">
               <v-btn
-                class="mt-3"
+                class="mt-3 mx-auto"
                 large
                 :loading="loading"
                 color="primary"
@@ -143,7 +173,7 @@ const createProject = async () => {
                   mdi-rocket-launch-outline
                 </v-icon>
                 <!-- Create -->
-                <!--                <span class="mr-1">{{ // $t("general.create") }}</span>-->
+                <!--                <span class="mr-1">{{ // $t("general.create") }}</span> -->
                 <span class="mr-1"> Create project </span>
               </v-btn>
             </div>

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

@@ -21,6 +21,13 @@ const navigateToDashboard = async (project) => {
   await $router.push(`/dashboard/${project.id}`)
 }
 
+const navigateToCreateProject = () => {
+  $router.push('/projects/create')
+}
+const navigateToCreateExtProject = () => {
+  $router.push('/projects/create-external')
+}
+
 onMounted(async () => {
   await loadProjects()
 })
@@ -33,10 +40,10 @@ onMounted(async () => {
       <v-container>
         <div class="pa-2 d-flex mb-10">
           <v-spacer />
-          <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="createProject">
+          <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateToCreateProject">
             Create Project
           </v-btn>
-          <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="createExtProject">
+          <v-btn size="small" class="caption text-capitalize mr-2" color="primary" @click="navigateToCreateExtProject">
             Create External Project
           </v-btn>
         </div><v-row>