chore(gui-v2): fix ts issues

packages/nc-gui-v2/composables/metas.ts

@@ -11,8 +11,8 @@ export const useMetas = () => {
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
 
   const getMeta = async (tableIdOrTitle: string, force = false) => {
-    if (!force && metas[tableIdOrTitle])
-      return metas[tableIdOrTitle]
+    if (!force && metas[tableIdOrTitle as keyof typeof metas])
+      return metas[tableIdOrTitle as keyof typeof metas]
 
     const modelId = (tables.value.find(t => t.title === tableIdOrTitle || t.id === tableIdOrTitle) || {}).id
     if (!modelId) {
@@ -28,7 +28,7 @@ export const useMetas = () => {
 
     metas.value = {
       ...metas.value,
-      [model.id]: model,
+      [model.id!]: model,
       [model.title]: model,
     }
 

packages/nc-gui-v2/composables/project.ts

@@ -4,21 +4,19 @@ import { useNuxtApp } from '#app'
 export const useProject = () => {
   const { $api } = useNuxtApp()
 
-  const project = useState<{ id?: string; title?: string }>('project', null)
-  const tables = useState<Array<TableType>>('tables', null)
+  const project = useState<{ id?: string; title?: string }>('project')
+  const tables = useState<TableType[]>('tables')
 
   const loadTables = async () => {
-    const tablesResponse = await $api.dbTable.list(project?.value?.id)
+    if (project.value.id) {
+      const tablesResponse = await $api.dbTable.list(project.value.id)
 
-    console.log(tablesResponse)
-    tables.value = tablesResponse.list
+      if (tablesResponse.list) tables.value = tablesResponse.list
+    }
   }
 
   const loadProject = async (projectId: string) => {
-    const projectResponse = await $api.project.read(projectId)
-
-    console.log(projectResponse)
-    project.value = projectResponse
+    project.value = await $api.project.read(projectId)
   }
 
   return { project, tables, loadProject, loadTables }

packages/nc-gui-v2/composables/user.ts

@@ -17,7 +17,7 @@ export const useUser = () => {
     user.user = await $api.auth.me(...args)
   }
 
-  const setToken = (token) => {
+  const setToken = (token: string) => {
     user.token = token
   }
 

packages/nc-gui-v2/helpers/projectCreateUtils.ts

@@ -12,7 +12,7 @@ export type ClientType = 'mysql2' | 'mssql' | 'pg' | 'sqlite3' | 'vitess'
 export const getTestDatabaseName = (db: { client: ClientType; connection?: { database?: string } }) => {
   if (db.client === 'pg')
     return db.connection?.database
-  return testDataBaseNames[db.client]
+  return testDataBaseNames[db.client as keyof typeof testDataBaseNames]
 }
 
 export const clientTypes = [{

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

@@ -22,11 +22,11 @@ function addAxiosInterceptors(api: Api<any>) {
     if (user?.token)
       config.headers['xc-auth'] = user?.token
 
-    if (!config.url.endsWith('/user/me') && !config.url.endsWith('/admin/roles')) {
+    if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
       // config.headers['xc-preview'] = store.state.users.previewAs
     }
 
-    if (!config.url.endsWith('/user/me') && !config.url.endsWith('/admin/roles')) {
+    if (!config.url?.endsWith('/user/me') && !config.url?.endsWith('/admin/roles')) {
       if (route && route.params && route.params.shared_base_id)
         config.headers['xc-shared-base-id'] = route.params.shared_base_id
     }
@@ -96,7 +96,7 @@ function addAxiosInterceptors(api: Api<any>) {
     })
 }
 
-export function getApi(store, axios) {
+export function getApi(store: any, axios: any) {
   const api = new Api({
     baseURL: 'http://localhost:8080',
     headers: {

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

@@ -1,20 +1,20 @@
-// plugins/i18n.js
-
 import { defineNuxtPlugin } from 'nuxt/app'
 import { createI18n } from 'vue-i18n'
 
-// Tell Vue to use our plugin
-
 export default defineNuxtPlugin(async (nuxtApp) => {
   // Set the i18n instance on app
   // This way we can use it globally in our components through this.$i18n
   const i18n = createI18n({
     // Set the initial locale
-    locale: 'en', // store.state.settings.language,
+    locale: 'en',
 
     // Set the fallback locale in case the current locale can't be found
     fallbackLocale: 'en',
-    allowComposition: true,
+
+    legacy: false,
+
+    globalInjection: true,
+
     // Associate each locale to a content file
     messages: {
       en: await import('~/lang/en.json'),
@@ -49,15 +49,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
 
   (nuxtApp.vueApp as any).i18n = i18n
   nuxtApp.vueApp.use(i18n)
-
-  // todo: toggle based on state
-  // store.watch(
-  //   state => state.settings.language,
-  //   (language) => {
-  //     if (app.i18n.availableLocales.includes(language))
-  //       app.i18n.locale = language
-  //   },
-  // )
 })
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd

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

@@ -1,4 +1,5 @@
 import { defineNuxtPlugin } from 'nuxt/app'
+import type { Socket } from 'socket.io-client'
 import io from 'socket.io-client'
 
 // todo: ignore init if tele disabled
@@ -7,9 +8,9 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const route = useRoute()
   const { user } = useUser()
 
-  let socket
+  let socket: Socket
 
-  const init = async (token) => {
+  const init = async (token: string) => {
     try {
       if (socket)
         socket.disconnect()
@@ -22,7 +23,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
 
       socket.on('connect_error', () => {
         socket.disconnect()
-        socket = null
       })
     }
     catch {
@@ -37,14 +37,18 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       path: to.matched[0].path + (to.query && to.query.type ? `?type=${to.query.type}` : ''),
     })
   })
+
+  /**
+   * unreachable code?
       if (socket) {
         socket.emit('page', {
           path: route.matched[0].path + (route.query && route.query.type ? `?type=${route.query.type}` : ''),
         })
       }
+   */
 
   const tele = {
-    emit(evt, data) {
+    emit(evt: string, data: Record<string, any>) {
       // debugger
       if (socket) {
         socket.emit('event', {
@@ -67,7 +71,8 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         el.addEventListener('click', getListener(binding))
     },
   })
-  function getListener(binding) {
+
+  function getListener(binding: any) {
     return function () {
       if (!socket)
         return
@@ -82,17 +87,16 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         })
     }
   }
+
   if (user.token)
     await init(user.token)
 
   watch(() => user.token, (newToken, oldToken) => {
-    if (newToken !== oldToken) {
+    if (newToken !== oldToken)
       init(newToken)
-    }
-    else if (!newToken) {
+
+    else if (!newToken)
       socket.disconnect()
-      socket = null
-    }
   })
 })
 

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

@@ -30,31 +30,6 @@ export default defineNuxtPlugin((nuxtApp) => {
         ncLightTheme,
       },
     },
-    // theme: {
-
-    // dark: {
-    //   primary: '#0989ff',
-    //   // primary: '#0989ff',
-    //   'x-active': '#e91e63',
-    //   textColor: '#ffffff',
-    //   text: '#ffffff',
-    //   textLight: '#b3b3b3',
-    //   backgroundColor: '#565656',
-    //   backgroundColor1: '#252525',
-    //   backgroundColorDefault: '#1f1f1f'
-    // },
-    // light: {
-    //   'primary': '#1348ba',
-    //   // primary: '#0989ff',
-    //   'x-active': '#e91e63',
-    //   'textColor': '#333333',
-    //   'text': '#333333',
-    //   'textLight': '#929292',
-    //   'backgroundColor': '#f7f7f7',
-    //   'backgroundColor1': '#f7f6f3',
-    //   'backgroundColorDefault': '#ffffff',
-    // },
-    // },
   })
   nuxtApp.vueApp.use(vuetify)
 })