From 18523f795ad7952f70c6357753fbbe8742516067 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 4 Jul 2022 23:10:45 +0530 Subject: [PATCH] chore: tele Signed-off-by: Pranav C --- packages/nc-gui-v2/package-lock.json | 135 ++++++++++++++++++ packages/nc-gui-v2/package.json | 1 + .../pages/projects/create-external.vue | 23 +-- packages/nc-gui-v2/plugins/api.ts | 2 +- .../nc-gui-v2/plugins/{i18n.js => i18n.ts} | 9 +- packages/nc-gui-v2/plugins/tele.ts | 98 +++++++++++++ 6 files changed, 243 insertions(+), 25 deletions(-) rename packages/nc-gui-v2/plugins/{i18n.js => i18n.ts} (95%) create mode 100644 packages/nc-gui-v2/plugins/tele.ts diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json index b280efaa21..60e9761e00 100644 --- a/packages/nc-gui-v2/package-lock.json +++ b/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", diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json index bef45c67b1..ae3eb9ec65 100644 --- a/packages/nc-gui-v2/package.json +++ b/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" diff --git a/packages/nc-gui-v2/pages/projects/create-external.vue b/packages/nc-gui-v2/pages/projects/create-external.vue index 292e60d9c3..cc22923d5d 100644 --- a/packages/nc-gui-v2/pages/projects/create-external.vue +++ b/packages/nc-gui-v2/pages/projects/create-external.vue @@ -115,7 +115,6 @@ const createProject = async () => { @@ -123,7 +122,6 @@ const createProject = async () => { @@ -132,7 +130,6 @@ const createProject = async () => { @@ -140,7 +137,6 @@ const createProject = async () => { @@ -149,16 +145,14 @@ const createProject = async () => { - + @@ -197,16 +190,4 @@ const createProject = async () => { diff --git a/packages/nc-gui-v2/plugins/api.ts b/packages/nc-gui-v2/plugins/api.ts index ab44efba56..0691e2d86c 100644 --- a/packages/nc-gui-v2/plugins/api.ts +++ b/packages/nc-gui-v2/plugins/api.ts @@ -85,7 +85,7 @@ const addAxiosInterceptors = ($api: Api) => { // $toast.info('Token Expired. Please login again.', { // position: 'bottom-center' // }).goAway(5000) - router.replace('/user/authentication/signin') + router.replace('/signin') // } return Promise.reject(error) }) diff --git a/packages/nc-gui-v2/plugins/i18n.js b/packages/nc-gui-v2/plugins/i18n.ts similarity index 95% rename from packages/nc-gui-v2/plugins/i18n.js rename to packages/nc-gui-v2/plugins/i18n.ts index f2335abe9c..c33feeea40 100644 --- a/packages/nc-gui-v2/plugins/i18n.js +++ b/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.use(nuxtApp.vueApp.i18n) + (nuxtApp.vueApp as any).i18n = i18n + nuxtApp.vueApp.use(i18n) + + // todo: toggle based on state // store.watch( // state => state.settings.language, // (language) => { diff --git a/packages/nc-gui-v2/plugins/tele.ts b/packages/nc-gui-v2/plugins/tele.ts new file mode 100644 index 0000000000..a91a6aa5fd --- /dev/null +++ b/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 + } + }) +}) +