chore: tele

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",
+        "socket.io-client": "^4.5.1",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuetify": "^3.0.0-alpha.13"
@@ -1802,6 +1803,11 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -4149,6 +4155,46 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz",
+      "integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
@@ -10541,6 +10587,32 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz",
+      "integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.1",
+        "socket.io-parser": "~4.2.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -12045,6 +12117,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -13507,6 +13587,11 @@
         "picomatch": "^2.2.2"
       }
     },
+    "@socket.io/component-emitter": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
+      "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -15284,6 +15369,31 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.2.2.tgz",
+      "integrity": "sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.3",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.4.tgz",
+      "integrity": "sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg=="
+    },
     "enhanced-resolve": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
@@ -19881,6 +19991,26 @@
         "is-fullwidth-code-point": "^3.0.0"
       }
     },
+    "socket.io-client": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.5.1.tgz",
+      "integrity": "sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.2.1",
+        "socket.io-parser": "~4.2.0"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.1.tgz",
+      "integrity": "sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      }
+    },
     "source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -20967,6 +21097,11 @@
       "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
       "dev": true
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

packages/nc-gui-v2/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "nocodb-sdk": "file:../nocodb-sdk",
     "nuxt3-store": "^1.0.0",
+    "socket.io-client": "^4.5.1",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
     "vuetify": "^3.0.0-alpha.13"

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

@@ -115,7 +115,6 @@ const createProject = async () => {
                   <v-text-field
                     v-model="projectDatasource.connection.host"
                     density="compact"
-                    class="nc-metadb-project-name"
                     label="Host"
                   />
                 </v-col>
@@ -123,7 +122,6 @@ const createProject = async () => {
                   <v-text-field
                     v-model="projectDatasource.connection.port"
                     density="compact"
-                    class="nc-metadb-project-name"
                     label="Port"
                     type="number"
                   />
@@ -132,7 +130,6 @@ const createProject = async () => {
                   <v-text-field
                     v-model="projectDatasource.connection.user"
                     density="compact"
-                    class="nc-metadb-project-name"
                     label="Username"
                   />
                 </v-col>
@@ -140,7 +137,6 @@ const createProject = async () => {
                   <v-text-field
                     v-model="projectDatasource.connection.password"
                     density="compact"
-                    class="nc-metadb-project-name"
                     type="password"
                     label="Password"
                   />
@@ -149,16 +145,14 @@ const createProject = async () => {
                   <v-text-field
                     v-model="projectDatasource.connection.database"
                     density="compact"
-                    class="nc-metadb-project-name"
                     label="Database name"
                   />
                 </v-col>
 
-                <v-col cols="6">
+                <!--                <v-col cols="6">
                   <v-text-field
                     v-model="inflection.tableName"
                     density="compact"
-                    class="nc-metadb-project-name"
                     type="password"
                     label="Password"
                   />
@@ -167,10 +161,9 @@ const createProject = async () => {
                   <v-text-field
                     v-model="inflection.columnName"
                     density="compact"
-                    class="nc-metadb-project-name"
                     label="Database name"
                   />
-                </v-col>
+                </v-col> -->
               </v-row>
             </v-container>
 
@@ -197,16 +190,4 @@ const createProject = async () => {
 </template>
 
 <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/plugins/api.ts

@@ -85,7 +85,7 @@ const addAxiosInterceptors = ($api: Api<any>) => {
         // $toast.info('Token Expired. Please login again.', {
         //   position: 'bottom-center'
         // }).goAway(5000)
-        router.replace('/user/authentication/signin')
+        router.replace('/signin')
         // }
         return Promise.reject(error)
       })

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

@@ -8,7 +8,7 @@ import { createI18n } from 'vue-i18n'
 export default defineNuxtPlugin(async (nuxtApp) => {
   // Set the i18n instance on app
   // This way we can use it globally in our components through this.$i18n
-  nuxtApp.vueApp.i18n = createI18n({
+  const i18n = createI18n({
     // Set the initial locale
     locale: 'en', // store.state.settings.language,
 
@@ -45,9 +45,12 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       fa: await import('~/lang/fa.json'),
       tr: await import('~/lang/tr.json'),
     },
-  })
+  });
+
+  (nuxtApp.vueApp as any).i18n = i18n
+  nuxtApp.vueApp.use(i18n)
 
-  nuxtApp.vueApp.use(nuxtApp.vueApp.i18n)
+  // todo: toggle based on state
   // store.watch(
   //   state => state.settings.language,
   //   (language) => {

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

@@ -0,0 +1,98 @@
+import { defineNuxtPlugin } from 'nuxt/app'
+import io from 'socket.io-client'
+
+// todo: ignore init if tele disabled
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const router = useRouter()
+  const route = useRoute()
+  const { user } = useUser()
+
+  let socket
+
+  const init = async (token) => {
+    try {
+      if (socket)
+        socket.disconnect()
+
+      // todo: extract base url
+      const url = 'http://localhost:8080' // new URL($axios.defaults.baseURL, window.location.href.split(/[?#]/)[0]).href
+      socket = io(url, {
+        extraHeaders: { 'xc-auth': token },
+      })
+
+      socket.on('connect_error', () => {
+        socket.disconnect()
+        socket = null
+      })
+    }
+    catch {
+    }
+  }
+
+  router.afterEach((to, from) => {
+    if (!socket || (to.path === from.path && (to.query && to.query.type) === (from.query && from.query.type)))
+      return
+
+    socket.emit('page', {
+      path: to.matched[0].path + (to.query && to.query.type ? `?type=${to.query.type}` : ''),
+    })
+  })
+  if (socket) {
+    socket.emit('page', {
+      path: route.matched[0].path + (route.query && route.query.type ? `?type=${route.query.type}` : ''),
+    })
+  }
+
+  const tele = {
+    emit(evt, data) {
+      // debugger
+      if (socket) {
+        socket.emit('event', {
+          event: evt,
+          ...(data || {}),
+          path: route?.matched?.[0]?.path,
+        })
+      }
+    },
+  }
+
+  inject('tele', tele)
+  inject('e', tele.emit)
+
+  nuxtApp.vueApp.directive('t', {
+    created(el, binding, vnode) {
+      if (vnode.el)
+        vnode.el.addEventListener('click', getListener(binding))
+      else
+        el.addEventListener('click', getListener(binding))
+    },
+  })
+  function getListener(binding) {
+    return function (e) {
+      if (!socket)
+        return
+
+      const event = binding.value && binding.value[0]
+      const data = binding.value && binding.value[1]
+      const extra = binding.value && binding.value.slice(2)
+      tele.emit(event,
+        {
+          data,
+          extra,
+        })
+    }
+  }
+  if (user.token)
+    init(user.token)
+
+  watch(() => user.token, (newToken, oldToken) => {
+    if (newToken !== oldToken) {
+      init(newToken)
+    }
+    else if (!newToken) {
+      socket.disconnect()
+      socket = null
+    }
+  })
+})
+