Browse Source

feat: add toastr library

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2716/head
Pranav C 2 years ago
parent
commit
bd1f0da46c
  1. 15
      packages/nc-gui-v2/package-lock.json
  2. 1
      packages/nc-gui-v2/package.json
  3. 16
      packages/nc-gui-v2/pages/projects/create-external.vue
  4. 29
      packages/nc-gui-v2/plugins/primevue.ts
  5. 8
      packages/nc-gui-v2/plugins/toastr.ts

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

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

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

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

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

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

29
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
})

8
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, {})
})
Loading…
Cancel
Save