feat: add toastr library

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

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

@@ -7,6 +7,7 @@
       "dependencies": {
         "nocodb-sdk": "file:../nocodb-sdk",
         "nuxt3-store": "^1.0.0",
+        "vue-toastification": "^2.0.0-rc.5",
         "vuetify": "^3.0.0-alpha.13"
       },
       "devDependencies": {
@@ -11528,6 +11529,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/vue/node_modules/@vue/shared": {
       "version": "3.2.33",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
@@ -20351,6 +20360,12 @@
         "@vue/devtools-api": "^6.0.0"
       }
     },
+    "vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "requires": {}
+    },
     "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

@@ -17,6 +17,7 @@
   "dependencies": {
     "nocodb-sdk": "file:../nocodb-sdk",
     "nuxt3-store": "^1.0.0",
+    "vue-toastification": "^2.0.0-rc.5",
     "vuetify": "^3.0.0-alpha.13"
   }
 }

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { useToast } from 'vue-toastification'
 import { useNuxtApp, useRouter } from '#app'
+import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils'
 
 const clientTypes = [
   {
@@ -36,10 +38,10 @@ const inflection = reactive({
   columnName: 'camelize',
 })
 
-const { $api } = useNuxtApp()
 const $router = useRouter()
+const { $api } = useNuxtApp()
 const { user } = useUser()
-
+const toast = useToast()
 const titleValidationRule = [
   v => !!v || 'Title is required',
   v => v.length <= 50 || 'Project name exceeds 50 characters',
@@ -65,7 +67,7 @@ const createProject = async () => {
   }
   catch (e) {
     // todo: toast
-    // this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+    toast.error(await extractSdkResponseErrorMsg(e))
   }
   loading.value = false
 }
@@ -98,6 +100,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-select
                     v-model="projectDatasource.client"
+                    density="compact"
                     :items="clientTypes"
                     item-title="text"
                     item-value="value"
@@ -108,6 +111,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="projectDatasource.connection.host"
+                    density="compact"
                     class="nc-metadb-project-name"
                     label="Host"
                   />
@@ -115,6 +119,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="projectDatasource.connection.port"
+                    density="compact"
                     class="nc-metadb-project-name"
                     label="Port"
                     type="number"
@@ -123,6 +128,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="projectDatasource.connection.user"
+                    density="compact"
                     class="nc-metadb-project-name"
                     label="Username"
                   />
@@ -130,6 +136,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="projectDatasource.connection.password"
+                    density="compact"
                     class="nc-metadb-project-name"
                     type="password"
                     label="Password"
@@ -138,6 +145,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="projectDatasource.connection.database"
+                    density="compact"
                     class="nc-metadb-project-name"
                     label="Database name"
                   />
@@ -146,6 +154,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="inflection.tableName"
+                    density="compact"
                     class="nc-metadb-project-name"
                     type="password"
                     label="Password"
@@ -154,6 +163,7 @@ const createProject = async () => {
                 <v-col cols="6">
                   <v-text-field
                     v-model="inflection.columnName"
+                    density="compact"
                     class="nc-metadb-project-name"
                     label="Database name"
                   />

packages/nc-gui-v2/plugins/primevue.ts

@@ -1,29 +0,0 @@
-// import { defineNuxtPlugin } from "#app";
-// import PrimeVue from "primevue/config";
-// import Button from "primevue/button";
-// 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 Dropdown from "primevue/dropdown";
-// import ToastService from "primevue/toastservice";
-//
-export default defineNuxtPlugin((nuxtApp) => {
-//   nuxtApp.vueApp.use(PrimeVue, { ripple: true });
-//   nuxtApp.vueApp.use(ToastService);
-//   nuxtApp.vueApp.component("Button", Button);
-//   nuxtApp.vueApp.component("InputText", InputText);
-//   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("Dropdown", Dropdown);
-//   nuxtApp.vueApp.component("Column", Column);
-//   //other components that you need
-})

packages/nc-gui-v2/plugins/toastr.ts

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import Toast from 'vue-toastification'
+// Import the CSS or use your own!
+import 'vue-toastification/dist/index.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(Toast, {})
+})