Merge pull request #3606 from nocodb/refactor/defer-project-load

refactor(nc-gui): defer loading project to subpage

packages/nc-gui/components.d.ts

@@ -224,6 +224,7 @@ declare module '@vue/runtime-core' {
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MiCircleWarning: typeof import('~icons/mi/circle-warning')['default']
     PhFileCsv: typeof import('~icons/ph/file-csv')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -9,7 +9,7 @@ const { isUIAllowed } = useUIPermission()
 const {
   open,
   isLoading,
-  isPublicGrid,
+  isPublic,
   isReadonly,
   visibleItems,
   modalVisible,
@@ -68,7 +68,7 @@ function onClick(item: Record<string, any>) {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
+          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
           class="nc-attach-file group"
           @click="open"
         >

packages/nc-gui/components/cell/attachment/index.vue

@@ -65,7 +65,7 @@ watch(
     } else {
       nextTick(() => {
         const nextCell = cellRefs.value.reduceRight((cell, curr) => {
-          if (!cell && curr.dataset.key === `${rowIndex}${column.value.id}`) cell = curr
+          if (!cell && curr.dataset.key === `${rowIndex}${column.value!.id}`) cell = curr
 
           return cell
         }, undefined as HTMLTableDataCellElement | undefined)
@@ -118,7 +118,7 @@ onKeyDown('Escape', () => {
 watch(
   () => storedFiles.value.length || 0,
   () => {
-    rowState.value[column.value.title!] = storedFiles.value
+    rowState.value[column.value!.title!] = storedFiles.value
   },
 )
 

packages/nc-gui/components/cell/attachment/utils.ts

@@ -1,9 +1,9 @@
 import { message } from 'ant-design-vue'
 import FileSaver from 'file-saver'
-import { useI18n } from 'vue-i18n'
 import {
   ColumnInj,
   EditModeInj,
+  IsFormInj,
   IsPublicInj,
   MetaInj,
   NOCO,
@@ -14,11 +14,11 @@ import {
   ref,
   useApi,
   useFileDialog,
+  useI18n,
   useInjectionState,
   useProject,
   watch,
 } from '#imports'
-import { IsFormInj } from '~/context'
 import MdiPdfBox from '~icons/mdi/pdf-box'
 import MdiFileWordOutline from '~icons/mdi/file-word-outline'
 import MdiFilePowerpointBox from '~icons/mdi/file-powerpoint-box'
@@ -40,9 +40,9 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
     const isForm = inject(IsFormInj, ref(false))
 
-    const meta = inject(MetaInj)!
+    const meta = inject(MetaInj, ref())
 
-    const column = inject(ColumnInj)!
+    const column = inject(ColumnInj, ref())
 
     const editEnabled = inject(EditModeInj, ref(false))
 
@@ -119,7 +119,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         try {
           const data = await api.storage.upload(
             {
-              path: [NOCO, project.value.title, meta.value.title, column.value.title].join('/'),
+              path: [NOCO, project.value.title, meta.value?.title, column.value?.title].join('/'),
             },
             {
               files: file,

packages/nc-gui/components/dashboard/TreeView.vue

@@ -104,7 +104,7 @@ const initSortable = (el: Element) => {
 
       // update the item order
       await $api.dbTable.reorder(item.id as string, {
-        order: item.order as any,
+        order: item.order,
       })
     },
     animation: 150,
@@ -142,7 +142,7 @@ const reloadTables = async () => {
 }
 
 const addTableTab = (table: TableType) => {
-  addTab({ title: table.title, id: table.id, type: table.type as any })
+  addTab({ title: table.title, id: table.id, type: table.type as TabType })
 }
 
 function openRenameTableDialog(table: TableType, rightClick = false) {

packages/nc-gui/components/dashboard/settings/Modal.vue

@@ -208,7 +208,7 @@ watch(
           </a-menu-item>
         </a-menu>
 
-        <component :is="selectedSubTab.body" class="px-2 py-6" />
+        <component :is="selectedSubTab?.body" class="px-2 py-6" />
       </a-layout-content>
     </a-layout>
   </a-modal>

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -42,7 +42,7 @@ const { t } = useI18n()
 
 const { isLoading: loading, api } = useApi()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const viewList = inject(ViewListInj)
 

packages/nc-gui/components/shared-view/Grid.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '#imports'
 
 const { sharedView, meta, sorts, nestedFilters } = useSharedView()
 const { signedIn } = useGlobal()
-const { loadProject } = useProject(meta?.value.project_id)
+const { loadProject } = useProject(meta.value?.project_id)
 
 const reloadEventHook = createEventHook<void>()
 
@@ -14,10 +12,10 @@ provide(ReloadViewDataHookInj, reloadEventHook)
 provide(ReadonlyInj, true)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, ref(meta.value.columns as any[]))
+provide(FieldsInj, ref(meta.value?.columns || []))
 provide(IsPublicInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta, true, sorts, nestedFilters)
+useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
 
 if (signedIn.value) {
   try {

packages/nc-gui/components/smartsheet-column/EditOrAdd.vue

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
+import { IsFormInj, MetaInj, ReloadViewDataHookInj, computed, inject, uiTypes, useMetas, useNuxtApp, watchEffect } from '#imports'
-import { computed, inject, useMetas, watchEffect } from '#imports'
-import { IsFormInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 import MdiIdentifierIcon from '~icons/mdi/identifier'
@@ -20,7 +17,7 @@ const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const isForm = inject(IsFormInj, ref(false))
 
@@ -48,7 +45,7 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
 })
 
 const reloadMetaAndData = async () => {
-  await getMeta(meta?.value.id as string, true)
+  await getMeta(meta.value?.id as string, true)
   reloadDataTrigger?.trigger()
 }
 

packages/nc-gui/components/smartsheet-column/EditOrAddProvider.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { inject } from '#imports'
+import { MetaInj, inject } from '#imports'
-import { MetaInj } from '~/context'
 
 interface Props {
   column?: Ref<ColumnType & { meta: any }>
@@ -12,14 +11,10 @@ const props = defineProps<Props>()
 
 const emit = defineEmits(['submit', 'cancel'])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
-if (props?.column) {
+const column = toRef(props, 'column')
-  const column = toRef(props, 'column')
+useProvideColumnCreateStore(meta, column as Ref<ColumnType | undefined>)
-  useProvideColumnCreateStore(meta as Ref<TableType>, column)
-} else {
-  useProvideColumnCreateStore(meta as Ref<TableType>)
-}
 </script>
 
 <template>

packages/nc-gui/components/smartsheet-column/FormulaOptions.vue

@@ -41,7 +41,7 @@ enum JSEPNode {
   ARRAY_EXP = 'ArrayExpression',
 }
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const columns = computed(() => meta?.value?.columns || [])
 
@@ -102,7 +102,7 @@ const suggestionsList = computed(() => {
         if (c.uidt === UITypes.LinkToAnotherRecord && c.system) return false
         // v1 logic? skip the current column
         if (!column) return true
-        return column.value.id !== c.id
+        return column.value?.id !== c.id
       })
       .map((c: any) => ({
         text: c.title,
@@ -238,7 +238,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
   } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     if (
       columns.value
-        .filter((c: Record<string, any>) => !column || column.value.id !== c.id)
+        .filter((c: Record<string, any>) => !column || column.value?.id !== c.id)
         .every((c: Record<string, any>) => c.title !== parsedTree.name)
     ) {
       errors.add(`Column '${parsedTree.name}' is not available`)
@@ -249,7 +249,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
 
     // get all formula columns excluding itself
     const formulaPaths = columns.value
-      .filter((c: Record<string, any>) => c.id !== column?.value.id && c.uidt === UITypes.Formula)
+      .filter((c: Record<string, any>) => c.id !== column.value?.id && c.uidt === UITypes.Formula)
       .reduce((res: Record<string, any>[], c: Record<string, any>) => {
         // in `formula`, get all the target neighbours
         // i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
@@ -265,9 +265,9 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
     // include target formula column (i.e. the one to be saved if applicable)
     const targetFormulaCol = columns.value.find((c: ColumnType) => c.title === parsedTree.name && c.uidt === UITypes.Formula)
 
-    if (targetFormulaCol && column?.value.id) {
+    if (targetFormulaCol && column.value?.id) {
       formulaPaths.push({
-        [column?.value?.id as string]: [targetFormulaCol.id],
+        [column.value?.id as string]: [targetFormulaCol.id],
       })
     }
     const vertices = formulaPaths.length

packages/nc-gui/components/smartsheet-column/LinkedToAnotherRecordOptions.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ModelTypes, MssqlUi, SqliteUi } from 'nocodb-sdk'
-import { inject, useProject } from '#imports'
+import { MetaInj, inject, useProject } from '#imports'
-import { MetaInj } from '~/context'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
@@ -13,7 +12,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
@@ -25,10 +24,10 @@ setAdditionalValidations({
 
 const onUpdateDeleteOptions = sqlUi === MssqlUi ? ['NO ACTION'] : ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT']
 
-if (!vModel.value.parentId) vModel.value.parentId = meta.id
+if (!vModel.value.parentId) vModel.value.parentId = meta?.id
 if (!vModel.value.childId) vModel.value.childId = null
-if (!vModel.value.childColumn) vModel.value.childColumn = `${meta.table_name}_id`
+if (!vModel.value.childColumn) vModel.value.childColumn = `${meta?.table_name}_id`
-if (!vModel.value.childTable) vModel.value.childTable = meta.table_name
+if (!vModel.value.childTable) vModel.value.childTable = meta?.table_name
 if (!vModel.value.parentTable) vModel.value.parentTable = vModel.value.rtn || ''
 if (!vModel.value.parentColumn) vModel.value.parentColumn = vModel.value.rcn || ''
 

packages/nc-gui/components/smartsheet-column/LookupOptions.vue

@@ -11,7 +11,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
@@ -38,7 +38,7 @@ const refTables = $computed(() => {
     return []
   }
 
-  return meta.columns
+  return meta?.columns
     ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
     .map((c: ColumnType) => ({
       col: c.colOptions,

packages/nc-gui/components/smartsheet-column/PercentOptions.vue

@@ -1,7 +1,7 @@
 <!-- File not in use for now -->
 
 <script setup lang="ts">
-import { precisions } from '@/utils/percentUtils'
+import { precisions } from '#imports'
 
 interface Props {
   value: Record<string, any>

packages/nc-gui/components/smartsheet-column/RatingOptions.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getMdiIcon } from '@/utils'
+import { getMdiIcon } from '#imports'
 
 interface Props {
   value: Record<string, any>

packages/nc-gui/components/smartsheet-column/RollupOptions.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import { inject, useMetas, useProject } from '#imports'
+import { MetaInj, inject, useMetas, useProject } from '#imports'
-import { MetaInj } from '~/context'
 
 interface Props {
   value: Record<string, any>
@@ -11,7 +10,7 @@ const props = defineProps<Props>()
 const emit = defineEmits(['update:value'])
 const vModel = useVModel(props, 'value', emit)
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
 const { setAdditionalValidations, validateInfos, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
@@ -51,7 +50,7 @@ const refTables = $computed(() => {
   }
 
   return (
-    meta.columns
+    meta?.columns
       ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== 'bt' && !c.system)
       .map((c) => ({
         col: c.colOptions,

packages/nc-gui/components/smartsheet-header/CellIcon.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { toRef } from 'vue'
+import { ColumnInj, toRef, useColumn } from '#imports'
-import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
-import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
 import ClockIcon from '~icons/mdi/clock-time-five'
-// import FKIcon from '~icons/mdi/link-variant'
 import WebIcon from '~icons/mdi/web'
 import TextAreaIcon from '~icons/mdi/card-text-outline'
 import StringIcon from '~icons/mdi/alpha-a-box-outline'
@@ -65,11 +62,7 @@ const icon = computed(() => {
     return DecimalIcon
   } else if (additionalColMeta.isPhoneNumber.value) {
     return FilePhoneIcon
-  }
+  } else if (additionalColMeta.isURL.value) {
-  // else if(additionalColMeta.isForeignKey) {
-  //   return FKIcon
-  // }
-  else if (additionalColMeta.isURL.value) {
     return WebIcon
   } else if (additionalColMeta.isCurrency.value) {
     return CurrencyIcon

packages/nc-gui/components/smartsheet-header/Menu.vue

@@ -10,7 +10,7 @@ const emit = defineEmits(['edit'])
 
 const column = inject(ColumnInj)
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const isLocked = inject(IsLockedInj)
 

packages/nc-gui/components/smartsheet-header/VirtualCell.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import { useI18n } from 'vue-i18n'
 import {
   ColumnInj,
   IsFormInj,
@@ -11,6 +10,7 @@ import {
   provide,
   ref,
   toRef,
+  useI18n,
   useMetas,
   useUIPermission,
   useVirtualCell,
@@ -32,7 +32,7 @@ const { metas } = useMetas()
 
 const { isUIAllowed } = useUIPermission()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const isForm = inject(IsFormInj, ref(false))
 

packages/nc-gui/components/smartsheet-header/VirtualCellIcon.vue

@@ -2,8 +2,7 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { toRef } from 'vue'
+import { ColumnInj, toRef } from '#imports'
-import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
 import BTIcon from '~icons/mdi/table-arrow-left'
@@ -25,9 +24,9 @@ if (column) {
   const { isLookup, isBt, isRollup, isMm, isHm } = useVirtualCell(column as Ref<ColumnType>)
 
   if (isLookup || isBt || isRollup || isMm || isHm) {
-    const meta = inject(MetaInj)
+    const meta = inject(MetaInj, ref())
 
-    relationColumn = meta?.value.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
+    relationColumn = meta.value?.columns?.find((c) => c.id === column.value?.colOptions?.fk_relation_column_id) as ColumnType & {
       colOptions: LinkToAnotherRecordType
     }
   }

packages/nc-gui/components/smartsheet-toolbar/ColumnFilter.vue

@@ -33,9 +33,9 @@ const logicalOps = [
   { value: 'or', text: 'OR' },
 ]
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
-const activeView = inject(ActiveViewInj)!
+const activeView = inject(ActiveViewInj, ref())
 
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 

packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -5,7 +5,7 @@ import { ActiveViewInj, IsLockedInj, IsPublicInj, computed, inject, ref, useGlob
 
 const isLocked = inject(IsLockedInj, ref(false))
 
-const activeView = inject(ActiveViewInj)
+const activeView = inject(ActiveViewInj, ref())
 
 const isPublic = inject(IsPublicInj, ref(false))
 

packages/nc-gui/components/smartsheet-toolbar/ExportSubActions.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { RequestParams } from 'nocodb-sdk'
 import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import * as XLSX from 'xlsx'
@@ -15,7 +16,7 @@ const { project } = useProject()
 
 const { $api } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const selectedView = inject(ActiveViewInj)
 
@@ -35,8 +36,8 @@ const exportFile = async (exportType: ExportTypes) => {
       } else {
         res = await $api.dbViewRow.export(
           'noco',
-          project?.value.title as string,
+          project.value?.title as string,
-          meta?.value.title as string,
+          meta.value?.title as string,
           selectedView?.value.title as string,
           exportType,
           {
@@ -47,16 +48,16 @@ const exportFile = async (exportType: ExportTypes) => {
               sortArrJson: JSON.stringify(sorts.value),
               filterArrJson: JSON.stringify(nestedFilters.value),
             },
-          } as any,
+          } as RequestParams,
         )
       }
       const { data, headers } = res
       if (exportType === ExportTypes.EXCEL) {
         const workbook = XLSX.read(data, { type: 'base64' })
-        XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
+        XLSX.writeFile(workbook, `${meta.value?.title}_exported_${c++}.xlsx`)
       } else if (exportType === ExportTypes.CSV) {
         const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-        FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+        FileSaver.saveAs(blob, `${meta.value?.title}_exported_${c++}.csv`)
       }
       offset = +headers['nc-export-offset']
       if (offset > -1) {

packages/nc-gui/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue

@@ -2,8 +2,7 @@
 import type { SelectProps } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed } from 'vue'
+import { MetaInj, computed } from '#imports'
-import { MetaInj } from '~/context'
 import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 
@@ -16,39 +15,13 @@ const { modelValue, isSort } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const localValue = computed({
   get: () => modelValue,
   set: (val) => emit('update:modelValue', val),
 })
 
-/* export default {
-  name: 'FieldListAutoCompleteDropdown',
-  props: {
-    columns: Array,
-    value: String,
-  },
-  computed: {
-    localValue: {
-      set(v) {
-        this.$emit('input', v)
-      },
-      get() {
-        return this.value
-      },
-    },
-  },
-  mounted() {
-    const autocompleteInput = this.$refs.field.$refs.input
-    autocompleteInput.addEventListener('focus', this.onFocus, true)
-  },
-  methods: {
-    onFocus(e) {
-      this.$refs.field.isMenuActive = true // open item list
-    },
-  },
-} */
 const options = computed<SelectProps['options']>(() =>
   meta?.value?.columns
     ?.filter((c: ColumnType) => {

packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue

@@ -20,9 +20,9 @@ import {
 import CellIcon from '~/components/smartsheet-header/CellIcon.vue'
 import VirtualCellIcon from '~/components/smartsheet-header/VirtualCellIcon.vue'
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
-const activeView = inject(ActiveViewInj)!
+const activeView = inject(ActiveViewInj, ref())
 
 const reloadDataHook = inject(ReloadViewDataHookInj)!
 
@@ -48,7 +48,7 @@ const {
 } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
-  () => (activeView.value as any)?.id,
+  () => activeView.value?.id,
   async (newVal, oldVal) => {
     if (newVal !== oldVal && meta.value) {
       await loadViewColumns()

packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
+import type { RequestParams } from 'nocodb-sdk'
 import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
@@ -29,11 +30,11 @@ const { project } = useProject()
 
 const { $api } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const fields = inject(FieldsInj, ref([]))
 
-const selectedView = inject(ActiveViewInj)
+const selectedView = inject(ActiveViewInj, ref())
 
 const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
@@ -60,8 +61,8 @@ const exportFile = async (exportType: ExportTypes) => {
         res = await $api.dbViewRow.export(
           'noco',
           project?.value.title as string,
-          meta?.value.title as string,
+          meta.value?.title as string,
-          selectedView?.value.title as string,
+          selectedView.value?.title as string,
           exportType,
           {
             responseType,
@@ -71,16 +72,16 @@ const exportFile = async (exportType: ExportTypes) => {
               sortArrJson: JSON.stringify(sorts.value),
               filterArrJson: JSON.stringify(nestedFilters.value),
             },
-          } as any,
+          } as RequestParams,
         )
       }
       const { data, headers } = res
       if (exportType === ExportTypes.EXCEL) {
         const workbook = XLSX.read(data, { type: 'base64' })
-        XLSX.writeFile(workbook, `${meta?.value.title}_exported_${c++}.xlsx`)
+        XLSX.writeFile(workbook, `${meta.value?.title}_exported_${c++}.xlsx`)
       } else if (exportType === ExportTypes.CSV) {
         const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-        FileSaver.saveAs(blob, `${meta?.value.title}_exported_${c++}.csv`)
+        FileSaver.saveAs(blob, `${meta.value?.title}_exported_${c++}.csv`)
       }
       offset = +headers['nc-export-offset']
       if (offset > -1) {

packages/nc-gui/components/smartsheet-toolbar/ShareView.vue

@@ -1,9 +1,15 @@
 <script lang="ts" setup>
-import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import {
-import { computed, extractSdkResponseErrorMsg, useNuxtApp, useProject, useSmartsheetStoreOrThrow } from '#imports'
+  computed,
+  extractSdkResponseErrorMsg,
+  useClipboard,
+  useI18n,
+  useNuxtApp,
+  useProject,
+  useSmartsheetStoreOrThrow,
+} from '#imports'
 import MdiOpenInNewIcon from '~icons/mdi/open-in-new'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 
@@ -39,7 +45,7 @@ const allowCSVDownload = computed({
 })
 
 const genShareLink = async () => {
-  shared.value = await $api.dbViewShare.create(view.value.id as string)
+  shared.value = await $api.dbViewShare.create(view.value?.id as string)
   shared.value.meta =
     shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
   passwordProtected.value = shared.value.password !== null && shared.value.password !== ''
@@ -69,7 +75,7 @@ async function saveAllowCSVDownload() {
     const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
     await $api.dbViewShare.update(shared.value.id, {
       meta,
-    } as any)
+    })
     // Successfully updated
     message.success(t('msg.success.updated'))
   } catch (e: any) {

packages/nc-gui/components/smartsheet-toolbar/SharedViewList.vue

@@ -1,17 +1,12 @@
 <script lang="ts" setup>
-import { useClipboard } from '@vueuse/core'
 import { ViewTypes } from 'nocodb-sdk'
 import { Empty, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useSmartsheetStoreOrThrow } from '#imports'
-import { onMounted, useSmartsheetStoreOrThrow } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiVisibilityOnIcon from '~icons/mdi/visibility'
 import MdiVisibilityOffIcon from '~icons/mdi/visibility-off'
 import MdiCopyIcon from '~icons/mdi/content-copy'
 import MdiDeleteIcon from '~icons/mdi/delete-outline'
 
-const { t } = useI18n()
-
 interface SharedViewType {
   password: string
   title: string
@@ -21,6 +16,8 @@ interface SharedViewType {
   showPassword?: boolean
 }
 
+const { t } = useI18n()
+
 const { $api, meta } = useSmartsheetStoreOrThrow()
 
 const { copy } = useClipboard()

packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue

@@ -14,14 +14,14 @@ import {
   watch,
 } from '#imports'
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
 const isLocked = inject(IsLockedInj, ref(false))
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { sorts, saveOrUpdate, loadSorts, addSort, deleteSort } = useViewSorts(view, () => reloadDataHook?.trigger())
 
-const columns = computed(() => meta?.value?.columns || [])
+const columns = computed(() => meta.value?.columns || [])
 
 const columnByID = computed(() =>
   columns.value.reduce((obj, col) => {
@@ -32,7 +32,7 @@ const columnByID = computed(() =>
 )
 
 watch(
-  () => (view?.value as any)?.id,
+  () => view.value?.id,
   () => {
     loadSorts()
   },

packages/nc-gui/components/smartsheet-toolbar/ViewActions.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import {
   ActiveViewInj,
   IsLockedInj,
@@ -8,13 +7,14 @@ import {
   extractSdkResponseErrorMsg,
   inject,
   ref,
+  useI18n,
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
   useUIPermission,
+  viewIcons,
 } from '#imports'
 import { LockType } from '~/lib'
-import { viewIcons } from '~/utils'
 import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
 import MdiAccountIcon from '~icons/mdi/account'
 import MdiAccountGroupIcon from '~icons/mdi/account-group'
@@ -44,7 +44,7 @@ const { isUIAllowed } = useUIPermission()
 const { isSharedBase } = useProject()
 
 const Icon = computed(() => {
-  switch ((selectedView?.value as any)?.lock_type) {
+  switch (selectedView?.value.lock_type) {
     case LockType.Personal:
       return MdiAccountIcon
     case LockType.Locked:
@@ -65,8 +65,8 @@ async function changeLockType(type: LockType) {
     return message.info(t('msg.toast.futureRelease'))
   }
   try {
-    ;(selectedView.value as any).lock_type = type
+    selectedView.value.lock_type = type
-    $api.dbView.update(selectedView.value.id as string, {
+    await $api.dbView.update(selectedView.value.id as string, {
       lock_type: type,
     })
 

packages/nc-gui/components/smartsheet/ApiSnippet.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
-import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import {
-import { ActiveViewInj, MetaInj } from '~/context'
+  ActiveViewInj,
-import { inject, useGlobal, useProject, useSmartsheetStoreOrThrow, useVModel, useViewData } from '#imports'
+  MetaInj,
+  inject,
+  useClipboard,
+  useGlobal,
+  useI18n,
+  useProject,
+  useSmartsheetStoreOrThrow,
+  useVModel,
+  useViewData,
+} from '#imports'
 
 const props = defineProps<Props>()
 
@@ -20,13 +28,13 @@ const { project } = $(useProject())
 
 const { appInfo, token } = $(useGlobal())
 
-const meta = $(inject(MetaInj)!)
+const meta = $(inject(MetaInj, ref()))
 
-const view = $(inject(ActiveViewInj)!)
+const view = $(inject(ActiveViewInj, ref()))
 
 const { xWhere } = useSmartsheetStoreOrThrow()
 
-const { queryParams } = $(useViewData($$(meta), view as any, xWhere))
+const { queryParams } = $(useViewData($$(meta), $$(view), xWhere))
 
 const { copy } = useClipboard()
 

packages/nc-gui/components/smartsheet/Form.vue

@@ -2,8 +2,6 @@
 import Draggable from 'vuedraggable'
 import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
-import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 import {
   ActiveViewInj,
   IsFormInj,
@@ -18,12 +16,14 @@ import {
   ref,
   useDebounceFn,
   useGlobal,
+  useI18n,
   useNuxtApp,
   useUIPermission,
   useViewColumns,
   useViewData,
   watch,
 } from '#imports'
+import type { Permission } from '~/composables/useUIPermission/rolePermissions'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))
@@ -45,11 +45,11 @@ const secondsRemain = ref(0)
 
 const isEditable = isUIAllowed('editFormView' as Permission)
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
 
-const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view as any)
+const { loadFormView, insertRow, formColumnData, formViewData, updateFormView } = useViewData(meta, view)
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -59,7 +59,7 @@ reloadEventHook.on(async () => {
   setFormData()
 })
 
-const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, async () => reloadEventHook.trigger())
+const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta, async () => reloadEventHook.trigger())
 
 const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
   meta,
@@ -252,10 +252,9 @@ function setFormData() {
 
   formViewData.value = {
     ...formViewData.value,
-    submit_another_form: !!(formViewData?.value?.submit_another_form ?? 0),
+    submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
-    // todo: show_blank_form missing from FormType
+    show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
-    show_blank_form: !!((formViewData?.value as any)?.show_blank_form ?? 0),
+  }
-  } as any
 
   // email me
   let data: Record<string, boolean> = {}
@@ -309,7 +308,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 function updateEmail() {
   try {
-    const data = JSON.parse(formViewData.value?.email) || {}
+    const data = formViewData.value?.email ? JSON.parse(formViewData.value?.email) : {}
     data[state.user.value?.email as string] = emailMe.value
     formViewData.value!.email = JSON.stringify(data)
     checkSMTPStatus()
@@ -338,7 +337,7 @@ const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
 }, 250)
 
 watch(submitted, (v) => {
-  if (v && (formViewData?.value as any)?.show_blank_form) {
+  if (v && formViewData.value?.show_blank_form) {
     secondsRemain.value = 5
     const intvl = setInterval(() => {
       if (--secondsRemain.value < 0) {

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
-import { inject, provide, useViewData } from '#imports'
-import Row from '~/components/smartsheet/Row.vue'
-import type { Row as RowType } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
@@ -14,15 +11,21 @@ import {
   OpenNewRecordFormHookInj,
   PaginationDataInj,
   ReadonlyInj,
-} from '~/context'
+  ReloadViewDataHookInj,
+  inject,
+  provide,
+  useViewData,
+} from '#imports'
+import Row from '~/components/smartsheet/Row.vue'
+import type { Row as RowType } from '~/composables'
 import ImageIcon from '~icons/mdi/file-image-box'
 
 interface Attachment {
   url: string
 }
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
@@ -38,7 +41,7 @@ const {
   galleryData,
   changePage,
   addEmptyRow,
-} = useViewData(meta, view as any)
+} = useViewData(meta, view)
 
 const { isUIAllowed } = useUIPermission()
 
@@ -55,7 +58,7 @@ const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== ga
 
 const coverImageColumn: any = $(
   computed(() =>
-    meta?.value.columnsById
+    meta.value?.columnsById
       ? meta.value.columnsById[galleryData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
       : {},
   ),
@@ -192,14 +195,17 @@ openNewRecordFormHook?.on(async () => {
   grid-auto-rows: 1fr;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
-:depp(.slick-dots li button) {
+
+:deep(.slick-dots li button) {
   background-color: black;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-dots) {
   position: relative;
   height: auto;
   bottom: 0px;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
   background: #000;
   border: 0;
@@ -215,15 +221,18 @@ openNewRecordFormHook?.on(async () => {
   transition: all 0.5s;
   width: 100%;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
   opacity: 1;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-prev) {
   left: 0;
   height: 100%;
   top: 12px;
   width: 50%;
 }
+
 .ant-carousel.gallery-carousel :deep(.slick-next) {
   right: 0;
   height: 100%;

packages/nc-gui/components/smartsheet/Grid.vue

@@ -17,7 +17,6 @@ import {
   ReadonlyInj,
   ReloadViewDataHookInj,
   createEventHook,
-  enumColor,
   inject,
   onClickOutside,
   onMounted,
@@ -37,9 +36,9 @@ import { NavigateDir } from '~/lib'
 
 const { t } = useI18n()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
-const view = inject(ActiveViewInj)
+const view = inject(ActiveViewInj, ref())
 
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
@@ -93,9 +92,10 @@ const {
   deleteSelectedRows,
   selectedAllRecords,
   removeRowIfNew,
-} = useViewData(meta, view as any, xWhere)
+} = useViewData(meta, view, xWhere)
+
+const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view)
 
-const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
@@ -137,9 +137,9 @@ const selectCell = (row: number, col: number) => {
 }
 
 watch(
-  () => (view?.value as any)?.id,
+  () => view.value?.id,
-  async (n?: string, o?: string) => {
+  async (next, old) => {
-    if (n && o && n !== o) {
+    if (next && old && next !== old) {
       await loadData()
     }
   },
@@ -360,7 +360,7 @@ onBeforeUnmount(async () => {
     /** if existing row check updated cell and invoke update method */
     if (currentRow.rowMeta.changed) {
       currentRow.rowMeta.changed = false
-      for (const field of meta?.value.columns ?? []) {
+      for (const field of meta.value?.columns ?? []) {
         if (isVirtualCol(field)) continue
         if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
           await updateOrSaveRow(currentRow, field.title!)

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -5,9 +5,7 @@ import type { Menu as AntMenu } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { Ref } from 'vue'
 import Sortable from 'sortablejs'
-import { useI18n } from 'vue-i18n'
 import RenameableMenuItem from './RenameableMenuItem.vue'
-import { useNuxtApp } from '#app'
 import {
   ActiveViewInj,
   ViewListInj,
@@ -17,6 +15,8 @@ import {
   ref,
   useApi,
   useDialog,
+  useI18n,
+  useNuxtApp,
   useRoute,
   useRouter,
   viewTypeAlias,
@@ -40,7 +40,7 @@ const { $e } = useNuxtApp()
 
 const activeView = inject(ActiveViewInj, ref())
 
-const views = inject<Ref<any[]>>(ViewListInj, ref([]))
+const views = inject<Ref<ViewType[]>>(ViewListInj, ref([]))
 
 const { api } = useApi()
 
@@ -76,7 +76,7 @@ function markItem(id: string) {
 }
 
 /** validate view title */
-function validate(view: Record<string, any>) {
+function validate(view: ViewType) {
   if (!view.title || view.title.trim().length < 0) {
     return 'View name is required'
   }
@@ -110,28 +110,32 @@ async function onSortEnd(evt: SortableEvent) {
   const previousEl = children[newIndex - 1]
   const nextEl = children[newIndex + 1]
 
-  const currentItem: Record<string, any> = views.value.find((v) => v.id === evt.item.id)
+  const currentItem = views.value.find((v) => v.id === evt.item.id)
-  const previousItem: Record<string, any> = previousEl ? views.value.find((v) => v.id === previousEl.id) : {}
+
-  const nextItem: Record<string, any> = nextEl ? views.value.find((v) => v.id === nextEl.id) : {}
+  if (!currentItem || !currentItem.id) return
+
+  const previousItem = (previousEl ? views.value.find((v) => v.id === previousEl.id) : {}) as ViewType
+  const nextItem = (nextEl ? views.value.find((v) => v.id === nextEl.id) : {}) as ViewType
 
   let nextOrder: number
 
   // set new order value based on the new order of the items
   if (views.value.length - 1 === newIndex) {
-    nextOrder = parseFloat(previousItem.order) + 1
+    nextOrder = parseFloat(String(previousItem.order)) + 1
   } else if (newIndex === 0) {
-    nextOrder = parseFloat(nextItem.order) / 2
+    nextOrder = parseFloat(String(nextItem.order)) / 2
   } else {
-    nextOrder = (parseFloat(previousItem.order) + parseFloat(nextItem.order)) / 2
+    nextOrder = (parseFloat(String(previousItem.order)) + parseFloat(String(nextItem.order))) / 2
   }
 
-  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder.toString() : oldIndex.toString()
+  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
 
   currentItem.order = _nextOrder
 
   await api.dbView.update(currentItem.id, { order: _nextOrder })
 
   markItem(currentItem.id)
+
   $e('a:view:reorder')
 }
 
@@ -168,7 +172,7 @@ async function onRename(view: ViewType) {
   try {
     await api.dbView.update(view.id!, {
       title: view.title,
-      order: String(view.order),
+      order: view.order,
     })
 
     await router.replace({

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { ViewTypes } from 'nocodb-sdk'
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { viewIcons } from '~/utils'
+import type { WritableComputedRef } from '@vue/reactivity'
-import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
+import { IsLockedInj, onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel, viewIcons } from '#imports'
 
 interface Props {
-  view: Record<string, any>
+  view: ViewType
-  onValidate: (view: Record<string, any>) => boolean | string
+  onValidate: (view: ViewType) => boolean | string
 }
 
 interface Emits {
   (event: 'update:view', data: Record<string, any>): void
   (event: 'changeView', view: Record<string, any>): void
-  (event: 'rename', view: Record<string, any>): void
+  (event: 'rename', view: ViewType): void
-  (event: 'delete', view: Record<string, any>): void
+  (event: 'delete', view: ViewType): void
   (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string }): void
 }
 
@@ -21,7 +21,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const vModel = useVModel(props, 'view', emits)
+const vModel = useVModel(props, 'view', emits) as WritableComputedRef<any>
 
 const { $e } = useNuxtApp()
 
@@ -92,7 +92,7 @@ function focusInput(el: HTMLInputElement) {
 /** Duplicate a view */
 // todo: This is not really a duplication, maybe we need to implement a true duplication?
 function onDuplicate() {
-  emits('openModal', { type: vModel.value.type, title: vModel.value.title, copyViewId: vModel.value.id })
+  emits('openModal', { type: vModel.value.type!, title: vModel.value.title, copyViewId: vModel.value.id })
 
   $e('c:view:copy', { view: vModel.value.type })
 }
@@ -129,7 +129,7 @@ async function onRename() {
 function onCancel() {
   if (!isEditing) return
 
-  vModel.value.title = originalTitle
+  vModel.value.title = originalTitle || ''
   onStopEdit()
 }
 
@@ -161,7 +161,7 @@ function onStopEdit() {
         <component
           :is="viewIcons[vModel.type].icon"
           class="nc-view-icon group-hover:hidden"
-          :style="{ color: viewIcons[vModel?.type]?.color }"
+          :style="{ color: viewIcons[vModel.type].color }"
         />
       </div>
 

packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { MetaInj, inject, useTable } from '#imports'
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
 const { deleteTable } = useTable()
 

packages/nc-gui/components/tabs/Auth.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
 import UserManagement from './auth/UserManagement.vue'
 import ApiTokenManagement from './auth/ApiTokenManagement.vue'
-import { useUIPermission } from '#imports'
+import { useI18n, useUIPermission } from '#imports'
 
 interface Tab {
   title: string
@@ -10,6 +9,7 @@ interface Tab {
   body: any
   isUIAllowed: boolean
 }
+
 const { t } = useI18n()
 
 const { isUIAllowed } = useUIPermission()
@@ -29,8 +29,6 @@ const tabsInfo: Tab[] = [
   },
 ]
 
-// const firstKeyOfObject = (obj: object) => Object.keys(obj)[0]
-
 const selectedTabKey = $ref(0)
 const selectedTab = $computed(() => tabsInfo[selectedTabKey])
 </script>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
 import SmartsheetGrid from '../smartsheet/Grid.vue'
 import {
   ActiveViewInj,
@@ -18,7 +17,6 @@ import {
   useProvideSmartsheetStore,
   watch,
 } from '#imports'
-
 import type { TabItem } from '~/composables'
 
 const { activeTab } = defineProps<{
@@ -39,7 +37,7 @@ const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 const reloadEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
-const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
 
 // provide the sidebar injection state
 provideSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })

packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { ApiTokenType } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
-import { useClipboard } from '@vueuse/core'
+import { extractSdkResponseErrorMsg, useClipboard, useI18n } from '#imports'
-import { useI18n } from 'vue-i18n'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
 import CloseIcon from '~icons/material-symbols/close-rounded'
@@ -11,13 +10,13 @@ import VisibilityOpenIcon from '~icons/material-symbols/visibility'
 import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
-const { t } = useI18n()
 interface ApiToken extends ApiTokenType {
   show?: boolean
 }
 
+const { t } = useI18n()
+
 const { $api, $e } = useNuxtApp()
 
 const { project } = $(useProject())

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import type { RequestParams } from 'nocodb-sdk'
 import UsersModal from './user-management/UsersModal.vue'
 import FeedbackForm from './user-management/FeedbackForm.vue'
 import {
   extractSdkResponseErrorMsg,
-  onMounted,
+  onBeforeMount,
-  projectRoleTagColors,
   ref,
   useApi,
   useClipboard,
   useDashboard,
+  useI18n,
   useNuxtApp,
   useProject,
   useUIPermission,
@@ -61,7 +61,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
         offset: searchText.value.length === 0 ? (page - 1) * limit : 0,
         query: searchText.value,
       },
-    } as any)
+    } as RequestParams)
     if (!response.users) return
 
     totalRows = response.users.pageInfo.totalRows ?? 0
@@ -150,11 +150,13 @@ const copyInviteUrl = (user: User) => {
   $e('c:user:copy-url')
 }
 
-onMounted(() => {
+onBeforeMount(async () => {
   if (!users) {
     isLoading = true
 
-    loadUsers().finally(() => (isLoading = false))
+    await loadUsers()
+
+    isLoading = false
   }
 })
 
@@ -162,9 +164,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
 </script>
 
 <template>
-  <div v-if="isLoading" class="h-full w-full flex flex-row justify-center mt-42">
+  <div v-if="isLoading" class="h-full w-full flex items-center justify-center">
     <a-spin size="large" />
   </div>
+
   <div v-else class="flex flex-col w-full px-6">
     <UsersModal
       :key="showUserModal"

packages/nc-gui/components/tabs/auth/user-management/FeedbackForm.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import CloseIcon from '~icons/material-symbols/close-rounded'
-
 const { feedbackForm } = useGlobal()
+
 const showForm = ref(false)
+
 setTimeout(() => (showForm.value = true), 60000)
 </script>
 
 <template>
   <div v-if="showForm && feedbackForm && !feedbackForm.isHidden" class="nc-feedback-form-wrapper mt-6">
-    <CloseIcon class="nc-close-icon" @click="feedbackForm.isHidden = true" />
+    <MaterialSymbolsCloseRounded class="nc-close-icon" @click="feedbackForm.isHidden = true" />
 
     <iframe :src="feedbackForm.url" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading… </iframe>
   </div>

packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import { extractSdkResponseErrorMsg, onMounted, useClipboard, useI18n, useNuxtApp, useProject } from '#imports'
-import { onMounted, useClipboard, useNuxtApp, useProject } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-const { t } = useI18n()
 
 interface ShareBase {
   uuid?: string
@@ -17,6 +13,8 @@ enum ShareBaseRole {
   Viewer = 'viewer',
 }
 
+const { t } = useI18n()
+
 const { dashboardUrl } = $(useDashboard())
 
 const { $api, $e } = useNuxtApp()
@@ -35,8 +33,7 @@ const loadBase = async () => {
   try {
     if (!project.value.id) return
 
-    // todo: response is missing roles in type
+    const res = await $api.project.sharedBaseGet(project.value.id)
-    const res = (await $api.project.sharedBaseGet(project.value.id)) as any
 
     base = {
       uuid: res.uuid,
@@ -52,10 +49,9 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
-    // todo: return type void?
+    const res = await $api.project.sharedBaseUpdate(project.value.id, {
-    const res = (await $api.project.sharedBaseUpdate(project.value.id, {
       roles: role,
-    })) as any
+    })
 
     base = res ?? {}
     base!.role = role

packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import ShareBase from './ShareBase.vue'
 import {
   computed,
   extractSdkResponseErrorMsg,
   isEmail,
   onMounted,
+  projectRoleTagColors,
   projectRoles,
   ref,
   useClipboard,
   useDashboard,
+  useI18n,
   useNuxtApp,
   useProject,
 } from '#imports'
 import type { User } from '~/lib'
 import { ProjectRole } from '~/lib'
 
-const { show, selectedUser } = defineProps<Props>()
-
-const emit = defineEmits(['closed', 'reload'])
-
-const { t } = useI18n()
-
 interface Props {
   show: boolean
   selectedUser?: User
@@ -34,6 +29,12 @@ interface Users {
   invitationToken?: string
 }
 
+const { show, selectedUser } = defineProps<Props>()
+
+const emit = defineEmits(['closed', 'reload'])
+
+const { t } = useI18n()
+
 const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 const { copy } = useClipboard()
@@ -69,7 +70,8 @@ const { validateInfos } = useForm(usersData, validators)
 onMounted(() => {
   if (!usersData.emails && selectedUser?.email) {
     usersData.emails = selectedUser.email
-    usersData.role = selectedUser.roles
+    // todo: types not matching, probably a bug here?
+    usersData.role = selectedUser.roles as any
   }
 })
 

packages/nc-gui/components/template/Editor.vue

@@ -2,7 +2,6 @@
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { Empty, Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
 import { srcDestMappingColumns, tableColumns } from './utils'
 import {
   MetaInj,
@@ -17,6 +16,7 @@ import {
   onMounted,
   reactive,
   ref,
+  useI18n,
   useNuxtApp,
   useProject,
   useTabs,
@@ -44,7 +44,7 @@ interface Option {
   value: string
 }
 
-const meta = inject(MetaInj, ref({} as TableType))
+const meta = inject(MetaInj, ref())
 
 const columns = computed(() => meta.value?.columns || [])
 
@@ -255,7 +255,7 @@ function fieldsValidation(record: Record<string, any>) {
     return true
   }
 
-  const tableName = meta?.value.title || ''
+  const tableName = meta.value?.title || ''
 
   if (!record.destCn) {
     message.error(`${t('msg.error.columnDescriptionNotFound')} ${record.srcCn}`)
@@ -340,7 +340,7 @@ async function importTemplate() {
     try {
       isImporting.value = true
 
-      const tableName = meta.value.title
+      const tableName = meta.value?.title
 
       // only one file is allowed currently
       const data = importData[Object.keys(importData)[0]]
@@ -381,7 +381,7 @@ async function importTemplate() {
           }, {}),
         )
 
-        await $api.dbTableRow.bulkCreate('noco', projectName, tableName, batchData)
+        await $api.dbTableRow.bulkCreate('noco', projectName, tableName!, batchData)
 
         importingTip.value = `Importing data to ${projectName}: ${progress}/${total} records`
 
@@ -440,7 +440,7 @@ async function importTemplate() {
           table_name: table.ref_table_name,
           // leave title empty to get a generated one based on ref_table_name
           title: '',
-          columns: table.columns,
+          columns: table.columns || [],
         })
         table.title = tableMeta.title
 

packages/nc-gui/components/virtual-cell/Formula.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
+import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
-const column: any = inject(ColumnInj)
+const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
 
 const value = inject(CellValueInj)
 

packages/nc-gui/components/virtual-cell/HasMany.vue

@@ -54,7 +54,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 )
 await loadRelatedTableMeta()
 
-const localCellValue = computed(() => {
+const localCellValue = computed<any[]>(() => {
   if (cellValue?.value) {
     return cellValue?.value ?? []
   } else if (isNew.value) {
@@ -64,7 +64,7 @@ const localCellValue = computed(() => {
 })
 
 const cells = computed(() =>
-  localCellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc, curr) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -72,16 +72,21 @@ const cells = computed(() =>
     if (!value) return acc
 
     return [...acc, { value, item: curr }]
-  }, [] as any[]),
+  }, []),
 )
 
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(rec, column?.value as ColumnType)
+    await removeLTARRef(rec, column.value)
   } else {
     await unlink(rec)
   }
 }
+
+const onAttachRecord = () => {
+  childListDlg.value = false
+  listItemsDlg.value = true
+}
 </script>
 
 <template>
@@ -110,16 +115,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems
+    <ListChildItems v-model="childListDlg" :cell-value="localCellValue" @attach-record="onAttachRecord" />
-      v-model="childListDlg"
-      :cell-value="localCellValue"
-      @attach-record="
-        () => {
-          childListDlg = false
-          listItemsDlg = true
-        }
-      "
-    />
   </div>
 </template>
 

packages/nc-gui/components/virtual-cell/Lookup.vue

@@ -21,13 +21,13 @@ provide(ReadonlyInj, true)
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const value = inject(CellValueInj)
 
 const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]) ?? [])
 
-const relationColumn = meta?.value.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
+const relationColumn = meta.value?.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
   colOptions: LinkToAnotherRecordType
 }
 

packages/nc-gui/components/virtual-cell/ManyToMany.vue

@@ -53,7 +53,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
-const localCellValue = computed(() => {
+const localCellValue = computed<any[]>(() => {
   if (cellValue?.value) {
     return cellValue?.value ?? []
   } else if (isNew.value) {
@@ -63,7 +63,7 @@ const localCellValue = computed(() => {
 })
 
 const cells = computed(() =>
-  localCellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc, curr) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -71,16 +71,21 @@ const cells = computed(() =>
     if (!value) return acc
 
     return [...acc, { value, item: curr }]
-  }, [] as any[]),
+  }, []),
 )
 
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
-    removeLTARRef(rec, column?.value as ColumnType)
+    await removeLTARRef(rec, column.value)
   } else {
     await unlink(rec)
   }
 }
+
+const onAttachRecord = () => {
+  childListDlg.value = false
+  listItemsDlg.value = true
+}
 </script>
 
 <template>
@@ -110,16 +115,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems
+    <ListChildItems v-model="childListDlg" :cell-value="localCellValue" @attach-record="onAttachRecord" />
-      v-model="childListDlg"
-      :cell-value="localCellValue"
-      @attach-record="
-        () => {
-          childListDlg = false
-          listItemsDlg = true
-        }
-      "
-    />
   </div>
 </template>
 

packages/nc-gui/components/webhook/ChannelMultiSelect.vue

@@ -59,8 +59,8 @@ onMounted(() => {
 
 <template>
   <a-select v-model:value="localChannelValues" mode="multiple" :placeholder="placeholder" max-tag-count="responsive">
-    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">{{
+    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">
-      channel.channel
+      {{ channel.channel }}
-    }}</a-select-option>
+    </a-select-option>
   </a-select>
 </template>

packages/nc-gui/components/webhook/Editor.vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import type { Ref } from 'vue'
-import { MetaInj, extractSdkResponseErrorMsg, fieldRequiredValidator, inject, reactive, useApi, useNuxtApp } from '#imports'
+import type { AuditType } from 'nocodb-sdk'
+import {
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  inject,
+  reactive,
+  useApi,
+  useI18n,
+  useNuxtApp,
+} from '#imports'
 
 const emit = defineEmits(['backToList', 'editOrAdd'])
 
@@ -11,7 +21,7 @@ const { $e } = useNuxtApp()
 
 const { api, isLoading: loading } = useApi()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const useForm = Form.useForm
 
@@ -254,28 +264,28 @@ async function onEventChange() {
 
   hook.notification.payload = payload
 
-  let channels: Record<string, any>[] | null = null
+  let channels: Ref<Record<string, any>[] | null> = ref(null)
 
   switch (hook.notification.type) {
     case 'Slack':
-      channels = slackChannels as any
+      channels = slackChannels
       break
     case 'Microsoft Teams':
-      channels = teamsChannels as any
+      channels = teamsChannels
       break
     case 'Discord':
-      channels = discordChannels as any
+      channels = discordChannels
       break
     case 'Mattermost':
-      channels = mattermostChannels as any
+      channels = mattermostChannels
       break
   }
 
   if (channels) {
     hook.notification.payload.webhook_url =
       hook.notification.payload.webhook_url &&
-      hook.notification.payload.webhook_url.map((v: Record<string, any>) =>
+      hook.notification.payload.webhook_url.map((v: { webhook_url: string }) =>
-        channels?.find((s: Record<string, any>) => v.webhook_url === s.webhook_url),
+        channels.value?.find((s) => v.webhook_url === s.webhook_url),
       )
   }
 
@@ -289,13 +299,21 @@ async function onEventChange() {
 
 async function loadPluginList() {
   try {
-    const plugins = (await api.plugin.list()).list as any
+    const plugins = (await api.plugin.list()).list!
-    apps.value = plugins.reduce((o: Record<string, any>[], p: Record<string, any>) => {
+
-      p.tags = p.tags ? p.tags.split(',') : []
+    apps.value = plugins.reduce((o, p) => {
-      p.parsedInput = p.input && JSON.parse(p.input)
+      const plugin: { title: string; tags: string[]; parsedInput: Record<string, any> } = {
-      o[p.title] = p
+        title: '',
+        tags: [],
+        parsedInput: {},
+        ...(p as any),
+      }
+      plugin.tags = p.tags ? p.tags.split(',') : []
+      plugin.parsedInput = p.input && JSON.parse(p.input)
+      o[plugin.title] = plugin
+
       return o
-    }, {})
+    }, {} as Record<string, any>)
 
     if (hook.event && hook.operation) {
       hook.eventOperation = `${hook.event} ${hook.operation}`
@@ -330,13 +348,13 @@ async function saveHooks() {
         },
       })
     } else {
-      res = await api.dbTableWebhook.create(meta!.value.id!, {
+      res = await api.dbTableWebhook.create(meta.value!.id!, {
         ...hook,
         notification: {
           ...hook.notification,
           payload: hook.notification.payload,
         },
-      } as any)
+      } as AuditType)
     }
 
     if (!hook.id && res) {

packages/nc-gui/components/webhook/List.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import { MetaInj, extractSdkResponseErrorMsg, inject, onMounted, ref, useI18n, useNuxtApp } from '#imports'
-import { MetaInj } from '~/context'
-import { inject, onMounted, ref, useNuxtApp } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 const emit = defineEmits(['edit', 'add'])
 
@@ -13,11 +10,11 @@ const { $api, $e } = useNuxtApp()
 
 const hooks = ref<Record<string, any>[]>([])
 
-const meta = inject(MetaInj)!
+const meta = inject(MetaInj, ref())
 
 async function loadHooksList() {
   try {
-    const hookList = (await $api.dbTableWebhook.list(meta?.value.id as string)).list as Record<string, any>[]
+    const hookList = (await $api.dbTableWebhook.list(meta.value?.id as string)).list as Record<string, any>[]
     hooks.value = hookList.map((hook) => {
       hook.notification = hook.notification && JSON.parse(hook.notification)
       return hook

packages/nc-gui/components/webhook/Test.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import { onMounted } from '@vue/runtime-core'
 import { message } from 'ant-design-vue'
-import { useI18n } from 'vue-i18n'
+import { MetaInj, extractSdkResponseErrorMsg, onMounted, useI18n } from '#imports'
-import { MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-const { hook } = defineProps<Props>()
-
-const { t } = useI18n()
 
 interface Props {
   hook: Record<string, any>
 }
 
+const { hook } = defineProps<Props>()
+
+const { t } = useI18n()
+
 const { $api } = useNuxtApp()
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj, ref())
 
 const sampleData = ref({
   data: {},
@@ -37,7 +34,7 @@ async function loadSampleData() {
 
 async function testWebhook() {
   try {
-    await $api.dbTableWebhook.test(meta?.value.id as string, {
+    await $api.dbTableWebhook.test(meta.value?.id as string, {
       hook,
       payload: sampleData.value,
     })

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -12,14 +12,14 @@ const useForm = Form.useForm
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
-  (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
+  (meta: Ref<TableType | undefined>, column: Ref<ColumnType | undefined>) => {
     const { sqlUi } = useProject()
     const { $api } = useNuxtApp()
     const { getMeta } = useMetas()
     const { t } = useI18n()
     const { $e } = useNuxtApp()
 
-    const isEdit = computed(() => !!column?.value?.id)
+    const isEdit = computed(() => !!column.value?.id)
 
     const idType = null
 
@@ -32,7 +32,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const formState = ref<Record<string, any>>({
       title: 'title',
       uidt: UITypes.SingleLineText,
-      ...clone(column?.value || {}),
+      ...clone(column.value || {}),
     })
 
     // actions
@@ -84,7 +84,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const onUidtOrIdTypeChange = () => {
       const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
-      const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
+      const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
       formState.value = {
         ...formState.value,
         meta: {},
@@ -101,8 +101,8 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
       const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value?.uidt as UITypes)) {
+      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.value?.uidt as UITypes)) {
-        formState.value.dtxp = column?.value?.dtxp
+        formState.value.dtxp = column.value?.dtxp
       }
 
       if (columnToValidate.includes(formState.value.uidt)) {
@@ -112,7 +112,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
 
       if (isCurrency.value) {
-        if (column?.value?.uidt === UITypes.Currency) {
+        if (column.value?.uidt === UITypes.Currency) {
           formState.value.dtxp = column.value.dtxp
           formState.value.dtxs = column.value.dtxs
         } else {
@@ -140,12 +140,12 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       formState.value.dtx = 'specificType'
 
       const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-      if (column?.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value.uidt as UITypes)) {
+      if (column.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.value.uidt as UITypes)) {
-        formState.value.dtxp = column?.value.dtxp
+        formState.value.dtxp = column.value.dtxp
       }
 
       if (isCurrency.value) {
-        if (column?.value?.uidt === UITypes.Currency) {
+        if (column.value?.uidt === UITypes.Currency) {
           formState.value.dtxp = column.value.dtxp
           formState.value.dtxs = column.value.dtxs
         } else {
@@ -177,10 +177,10 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
 
       try {
-        formState.value.table_name = meta.value.table_name
+        formState.value.table_name = meta.value?.table_name
         // formState.value.title = formState.value.column_name
-        if (column?.value) {
+        if (column.value) {
-          await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
+          await $api.dbTableColumn.update(column.value?.id as string, formState.value)
           // Column updated
           message.success(t('msg.success.columnUpdated'))
         } else {
@@ -193,10 +193,10 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
             //   };
             // }
           }
-          await $api.dbTableColumn.create(meta.value.id as string, formState.value)
+          await $api.dbTableColumn.create(meta.value?.id as string, formState.value)
 
           /** if LTAR column then force reload related table meta */
-          if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value.id !== formState.value.childId) {
+          if (formState.value.uidt === UITypes.LinkToAnotherRecord && meta.value?.id !== formState.value.childId) {
             getMeta(formState.value.childId, true).then(() => {})
           }
 

packages/nc-gui/composables/useExpandedFormStore.ts

@@ -94,9 +94,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
-        // todo: description missing from argument type
         description: comment.value,
-      } as any)
+      })
 
       comment.value = ''
 

packages/nc-gui/composables/useGridViewColumnWidth.ts

@@ -1,11 +1,11 @@
 import { useStyleTag } from '@vueuse/core'
-import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk'
+import type { ColumnType, GridColumnType, GridType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useUIPermission } from './useUIPermission'
 import { IsPublicInj } from '~/context'
 
-export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) {
+export function useGridViewColumnWidth(view: Ref<GridType | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
   const { isUIAllowed } = useUIPermission()
   const { $api } = useNuxtApp()
@@ -16,7 +16,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const resizingColWidth = ref('200px')
   const isPublic = inject(IsPublicInj, ref(false))
 
-  const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
+  const columns = computed<ColumnType[]>(() => metas.value?.[(view.value as ViewType)?.fk_model_id as string]?.columns || [])
 
   watch(
     [gridViewCols, resizingCol, resizingColWidth],
@@ -38,7 +38,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
 
   const loadGridViewColumns = async () => {
     if (!view.value?.id && !isPublic.value) return
-    const colsData: GridColumnType[] = isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value.id)
+
+    const colsData: GridColumnType[] = (isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value!.id!)
+) ?? []
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,

packages/nc-gui/composables/useLTARStore.ts

@@ -1,4 +1,4 @@
-import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, PaginatedType, RequestParams, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
@@ -46,10 +46,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const isPublic: boolean = $(inject(IsPublicInj, ref(false)))
 
-    const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
+    const colOptions = $computed(() => column.value?.colOptions as LinkToAnotherRecordType)
 
     const { sharedView } = useSharedView() as Record<string, any>
-    const projectId = project?.value?.id || sharedView.value?.view?.project_id
+    const projectId = project.value?.id || sharedView.value?.view?.project_id
 
     // getters
     const meta = computed(() => metas?.value?.[column?.value?.fk_model_id as string])
@@ -73,18 +73,18 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     }
 
     const loadRelatedTableMeta = async () => {
-      await getMeta(colOptions?.fk_related_model_id as string)
+      await getMeta(colOptions.fk_related_model_id as string)
     }
 
     const relatedTablePrimaryValueProp = computed(() => {
-      return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
     const relatedTablePrimaryKeyProps = computed(() => {
-      return relatedTableMeta?.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
+      return relatedTableMeta.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
     })
     const primaryValueProp = computed(() => {
-      return (meta?.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
+      return (meta.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
     const loadChildrenExcludedList = async () => {
@@ -93,7 +93,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           const route = useRoute()
           childrenExcludedList.value = await $api.public.dataRelationList(
             route.params.viewId as string,
-            column?.value?.id,
+            column.value.id,
             {},
             {
               headers: {
@@ -106,7 +106,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
                   childrenExcludedListPagination.query &&
                   `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
                 fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
-              } as any,
+              } as RequestParams,
             },
           )
 

packages/nc-gui/composables/useLoadingIndicator/index.ts

@@ -0,0 +1,72 @@
+import { computed, ref } from '#imports'
+
+interface UseLoadingIndicatorProps {
+  duration?: number
+  throttle?: number
+}
+
+export function useLoadingIndicator({ duration = 2000, throttle = 200 }: UseLoadingIndicatorProps) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / duration)
+
+  let _timer: any = null
+  let _throttle: any = null
+
+  function start() {
+    clear()
+    progress.value = 0
+    isLoading.value = true
+    if (throttle) {
+      if (process.client) {
+        _throttle = setTimeout(_startTimer, throttle)
+      }
+    } else {
+      _startTimer()
+    }
+  }
+
+  function finish() {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear() {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase(num: number) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide() {
+    clear()
+    if (process.client) {
+      setTimeout(() => {
+        isLoading.value = false
+        setTimeout(() => {
+          progress.value = 0
+        }, 400)
+      }, 500)
+    }
+  }
+
+  function _startTimer() {
+    if (process.client) {
+      _timer = setInterval(() => {
+        _increase(step.value)
+      }, 100)
+    }
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear,
+  }
+}

packages/nc-gui/composables/useProject.ts

@@ -4,7 +4,7 @@ import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import { useNuxtApp, useRoute } from '#app'
 import type { ProjectMetaInfo } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
-import { useInjectionState } from '#imports'
+import { createEventHook, useInjectionState } from '#imports'
 
 const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { $api, $e } = useNuxtApp()
@@ -12,6 +12,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { includeM2M } = useGlobal()
   const { setTheme, theme } = useTheme()
 
+  const projectLoadedHook = createEventHook<ProjectType>()
+
   const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
   const project = ref<ProjectType>({})
   const tables = ref<TableType[]>([])
@@ -86,6 +88,8 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     await loadProjectRoles()
     await loadTables()
     setTheme(projectMeta.value?.theme)
+
+    projectLoadedHook.trigger(project.value)
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -151,6 +155,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     projectMetaInfo,
     projectMeta,
     saveTheme,
+    projectLoadedHook: projectLoadedHook.on,
   }
 }, 'useProject')
 

packages/nc-gui/composables/useSharedFormViewStore.ts

@@ -52,7 +52,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   )
   const loadSharedView = async () => {
     try {
-      const viewMeta: Record<string, any> = await api.public.sharedViewMetaGet(sharedViewId, {
+      const viewMeta = await api.public.sharedViewMetaGet(sharedViewId, {
         headers: {
           'xc-password': password.value,
         },
@@ -90,7 +90,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     for (const column of formColumns.value) {
       if (
         !isVirtualCol(column) &&
-        ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || (column as any).required)
+        ((column.rqd && !column.cdf) || (column.pk && !(column.ai || column.cdf)) || column.required)
       ) {
         obj.localState[column.title!] = { required }
       } else if (
@@ -141,7 +141,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       }
 
       await api.public.dataCreate(
-        (sharedView.value as any)?.uuid as string,
+        sharedView.value!.uuid!,
         {
           data,
           ...attachment,
@@ -156,7 +156,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       submitted.value = true
       progress.value = false
 
-      await message.success(sharedFormView.value?.sucess_msg || 'Saved successfully.')
+      await message.success(sharedFormView.value?.success_msg || 'Saved successfully.')
     } catch (e: any) {
       console.log(e)
       await message.error(await extractSdkResponseErrorMsg(e))
@@ -166,7 +166,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   /** reset form if show_blank_form is true */
   watch(submitted, (nextVal) => {
-    if (nextVal && (sharedFormView.value as any)?.show_blank_form) {
+    if (nextVal && sharedFormView.value?.show_blank_form) {
       secondsRemain.value = 5
       const intvl = setInterval(() => {
         secondsRemain.value = secondsRemain.value - 1

packages/nc-gui/composables/useSharedView.ts

@@ -1,4 +1,4 @@
-import type { ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import type { ExportTypes, FilterType, PaginatedType, RequestParams, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
@@ -8,16 +8,16 @@ export function useSharedView() {
     () => [],
   )
   const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: 25 }))
-  const sharedView = useState<ViewType>('sharedView')
+  const sharedView = useState<ViewType | undefined>('sharedView', () => undefined)
   const sorts = useState<SortType[]>('sorts', () => [])
-  const password = useState<string | undefined>('password')
+  const password = useState<string | undefined>('password', () => undefined)
   const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
+  const meta = useState<TableType | undefined>('meta', () => undefined)
 
-  const meta = useState<TableType>('meta')
   const formColumns = computed(
     () =>
-      meta.value.columns
+      meta.value?.columns
-        .filter(
+        ?.filter(
           (f: Record<string, any>) =>
             f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
         )
@@ -29,7 +29,7 @@ export function useSharedView() {
   const { setMeta } = useMetas()
 
   const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
-    const viewMeta = await $api.public.sharedViewMetaGet(viewId, {
+    const viewMeta: Record<string, any> = await $api.public.sharedViewMetaGet(viewId, {
       headers: {
         'xc-password': localPassword ?? password.value,
       },
@@ -38,11 +38,11 @@ export function useSharedView() {
     allowCSVDownload.value = JSON.parse(viewMeta.meta)?.allowCSVDownload
 
     if (localPassword) password.value = localPassword
-    sharedView.value = { ...viewMeta }
+    sharedView.value = { title: '', ...viewMeta }
     meta.value = { ...viewMeta.model }
 
     let order = 1
-    meta.value.columns = [...viewMeta.model.columns]
+    meta.value!.columns = [...viewMeta.model.columns]
       .filter((c) => c.show)
       .map((c) => ({ ...c, order: order++ }))
       .sort((a, b) => a.order - b.order)
@@ -54,11 +54,13 @@ export function useSharedView() {
   }
 
   const fetchSharedViewData = async () => {
+    if (!sharedView.value) return
+
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || 25
 
     const { data } = await $api.public.dataList(
-      sharedView?.value?.uuid,
+      sharedView.value.uuid!,
       {
         offset: (page - 1) * pageSize,
         filterArrJson: JSON.stringify(nestedFilters.value),
@@ -80,8 +82,8 @@ export function useSharedView() {
     type: ExportTypes.EXCEL | ExportTypes.CSV,
     responseType: 'base64' | 'blob',
   ) => {
-    return await $api.public.csvExport(sharedView.value?.uuid, type, {
+    return await $api.public.csvExport(sharedView.value!.uuid!, type, {
-      format: responseType as any,
+      format: responseType,
       query: {
         fields: fields.map((field) => field.title),
         offset,
@@ -92,7 +94,7 @@ export function useSharedView() {
       headers: {
         'xc-password': password.value,
       },
-    })
+    } as RequestParams)
   }
 
   return {

packages/nc-gui/composables/useSmartsheetRowStore.ts

@@ -20,123 +20,126 @@ import {
   useVirtualCell,
 } from '#imports'
 
-const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: MaybeRef<Row>) => {
+const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
-  const { $api } = useNuxtApp()
+  (meta: Ref<TableType | undefined>, row: MaybeRef<Row>) => {
+    const { $api } = useNuxtApp()
 
-  const { t } = useI18n()
+    const { t } = useI18n()
 
-  const { project } = useProject()
+    const { project } = useProject()
 
-  const { metas } = useMetas()
+    const { metas } = useMetas()
 
-  const currentRow = ref(row)
+    const currentRow = ref(row)
 
-  // state
+    // state
-  const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
+    const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
-  // getters
+    // getters
-  const isNew = computed(() => unref(row).rowMeta?.new ?? false)
+    const isNew = computed(() => unref(row).rowMeta?.new ?? false)
 
-  // actions
+    // actions
-  const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+    const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
-    if (isHm || isMm) {
+      if (isHm || isMm) {
-      if (!state.value[column.title!]) state.value[column.title!] = []
+        if (!state.value[column.title!]) state.value[column.title!] = []
 
-      if (state.value[column.title!]!.find((ln: Record<string, any>) => deepCompare(ln, value))) {
+        if (state.value[column.title!]!.find((ln: Record<string, any>) => deepCompare(ln, value))) {
-        // This value is already in the list
+          // This value is already in the list
-        return message.info(t('msg.info.valueAlreadyInList'))
+          return message.info(t('msg.info.valueAlreadyInList'))
-      }
+        }
 
-      state.value[column.title!]!.push(value)
+        state.value[column.title!]!.push(value)
-    } else if (isBt) {
+      } else if (isBt) {
-      state.value[column.title!] = value
+        state.value[column.title!] = value
-    }
+      }
-  }
-
-  // actions
-  const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
-    if (isHm || isMm) {
-      state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
-    } else if (isBt) {
-      state.value[column.title!] = null
     }
-  }
 
-  const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type: RelationTypes) => {
+    // actions
-    try {
+    const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-      await $api.dbTableRow.nestedAdd(
+      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
-        NOCO,
+      if (isHm || isMm) {
-        project.value.title as string,
+        state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
-        meta.value.title as string,
+      } else if (isBt) {
-        rowId,
+        state.value[column.title!] = null
-        type as 'mm' | 'hm',
+      }
-        column.title as string,
-        relatedRowId,
-      )
-    } catch (e: any) {
-      message.error(await extractSdkResponseErrorMsg(e))
     }
-  }
-
-  /** sync LTAR relations kept in local state */
-  const syncLTARRefs = async (row: Record<string, any>) => {
-    const id = extractPkFromRow(row, meta.value.columns as ColumnType[])
-    for (const column of meta?.value?.columns ?? []) {
-      if (column.uidt !== UITypes.LinkToAnotherRecord) continue
-      const colOptions = column?.colOptions as LinkToAnotherRecordType
 
-      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+    const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type: RelationTypes) => {
-      const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+      try {
+        await $api.dbTableRow.nestedAdd(
+          NOCO,
+          project.value.title as string,
+          meta.value?.title as string,
+          rowId,
+          type as 'mm' | 'hm',
+          column.title as string,
+          relatedRowId,
+        )
+      } catch (e: any) {
+        message.error(await extractSdkResponseErrorMsg(e))
+      }
+    }
 
-      if (isHm || isMm) {
+    /** sync LTAR relations kept in local state */
-        const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
+    const syncLTARRefs = async (row: Record<string, any>) => {
-        for (const relatedRow of relatedRows) {
+      const id = extractPkFromRow(row, meta.value?.columns as ColumnType[])
+      for (const column of meta?.value?.columns ?? []) {
+        if (column.uidt !== UITypes.LinkToAnotherRecord) continue
+        const colOptions = column?.colOptions as LinkToAnotherRecordType
+
+        const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+        const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+
+        if (isHm || isMm) {
+          const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
+          for (const relatedRow of relatedRows) {
+            await linkRecord(
+              id,
+              extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
+              column,
+              colOptions.type as RelationTypes,
+            )
+          }
+        } else if (isBt && state?.value?.[column.title!]) {
           await linkRecord(
             id,
-            extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
+            extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
             column,
             colOptions.type as RelationTypes,
           )
         }
-      } else if (isBt && state?.value?.[column.title!]) {
-        await linkRecord(
-          id,
-          extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
-          column,
-          colOptions.type as RelationTypes,
-        )
       }
     }
-  }
+
-
+    const loadRow = async () => {
-  const loadRow = async () => {
+      const record = await $api.dbTableRow.read(
-    const record = await $api.dbTableRow.read(
+        NOCO,
-      NOCO,
+        project.value?.id as string,
-      project?.value?.id as string,
+        meta.value?.title as string,
-      meta.value.title,
+        extractPkFromRow(ref(row).value?.row, meta.value?.columns as ColumnType[]),
-      extractPkFromRow(ref(row).value?.row, meta.value.columns as ColumnType[]),
+      )
-    )
+      Object.assign(ref(row).value, {
-    Object.assign(ref(row).value, {
+        row: record,
-      row: record,
+        oldRow: { ...record },
-      oldRow: { ...record },
+        rowMeta: {},
-      rowMeta: {},
+      })
-    })
+    }
-  }
+
-
+    return {
-  return {
+      row,
-    row,
+      state,
-    state,
+      isNew,
-    isNew,
+      // todo: use better name
-    // todo: use better name
+      addLTARRef,
-    addLTARRef,
+      removeLTARRef,
-    removeLTARRef,
+      syncLTARRefs,
-    syncLTARRefs,
+      loadRow,
-    loadRow,
+      currentRow,
-    currentRow,
+    }
-  }
+  },
-}, 'smartsheet-row-store')
+  'smartsheet-row-store',
+)
 
 export { useProvideSmartsheetRowStore }
 

packages/nc-gui/composables/useSmartsheetStore.ts

@@ -5,8 +5,8 @@ import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTempl
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
   (
-    view: Ref<ViewType>,
+    view: Ref<ViewType | undefined>,
-    meta: Ref<TableType>,
+    meta: Ref<TableType | undefined>,
     shared = false,
     initalSorts?: Ref<SortType[]>,
     initialFilters?: Ref<FilterType[]>,
@@ -24,15 +24,15 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
     })
 
     // getters
-    const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+    const isLocked = computed(() => view.value?.lock_type === 'locked')
-    const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
+    const isPkAvail = computed(() => meta.value?.columns?.some((c) => c.pk))
-    const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
+    const isGrid = computed(() => view.value?.type === ViewTypes.GRID)
-    const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
+    const isForm = computed(() => view.value?.type === ViewTypes.FORM)
-    const isSharedForm = computed(() => isForm?.value && shared)
+    const isSharedForm = computed(() => isForm.value && shared)
-    const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
+    const isGallery = computed(() => view.value?.type === ViewTypes.GALLERY)
     const xWhere = computed(() => {
       let where
-      const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
+      const col = meta.value?.columns?.find(({ id }) => id === search.field) || meta.value?.columns?.find((v) => v.pv)
       if (!col) return
 
       if (!search.query.trim()) return
@@ -44,7 +44,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
       return where
     })
 
-    const isSqlView = computed(() => meta?.value?.type === 'view')
+    const isSqlView = computed(() => meta.value?.type === 'view')
 
     const sorts = initalSorts ?? ref<SortType[]>([])
     const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])

packages/nc-gui/composables/useUIPermission/index.ts

@@ -1,6 +1,7 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
+import { USER_PROJECT_ROLES, computed, useGlobal, useState } from '#imports'
+import type { Role, Roles } from '~/lib'
 
 export function useUIPermission() {
   const { user, previewAs } = useGlobal()
@@ -8,7 +9,7 @@ export function useUIPermission() {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
   const baseRoles = computed(() => {
-    let userRoles = user.value?.roles || {}
+    let userRoles = typeof user.value?.roles === 'string' ? user.value?.roles : ({ ...(user.value?.roles || {}) } as Roles)
 
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
@@ -17,20 +18,20 @@ export function useUIPermission() {
         return acc
       }, {})
     }
+
     // merge user role and project specific user roles
-    const roles = {
+    return {
       ...userRoles,
       ...projectRoles.value,
     }
-
-    return roles
   })
 
   const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    let roles = baseRoles.value
+    let roles = baseRoles.value as Record<string, any>
+
     if (previewAs.value && !skipPreviewAs) {
       roles = {
-        [previewAs.value]: true,
+        [previewAs.value as Role]: true,
       }
     }
 

packages/nc-gui/composables/useViewColumns.ts

@@ -6,7 +6,11 @@ import { useNuxtApp } from '#app'
 import { IsPublicInj } from '#imports'
 import type { Field } from '~/lib'
 
-export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
+export function useViewColumns(
+  view: Ref<ViewType | undefined>,
+  meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+  reloadData?: () => void,
+) {
   const isPublic = inject(IsPublicInj, ref(false))
 
   const fields = ref<Field[]>()
@@ -26,12 +30,12 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   const metaColumnById = computed<Record<string, ColumnType>>(() => {
     if (!meta.value?.columns) return {}
 
-    return meta.value?.columns?.reduce(
+    return meta.value.columns.reduce(
-      (acc: ColumnType, curr: ColumnType) => ({
+      (acc, curr) => ({
         ...acc,
         [curr.id!]: curr,
       }),
-      {} as any,
+      {},
     )
   })
 
@@ -119,7 +123,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   const saveOrUpdate = async (field: any, index: number) => {
     if (isPublic.value && fields.value) {
       fields.value[index] = field
-      meta.value.columns = meta.value?.columns?.map((column: ColumnType) => {
+      meta.value!.columns = meta.value!.columns?.map((column: ColumnType) => {
         if (column.id === field.fk_column_id) {
           return {
             ...column,
@@ -136,7 +140,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
-      } else if (view?.value?.id) {
+      } else if (view.value?.id) {
         const insertedField = (await $api.dbViewColumn.create(view.value.id, field)) as any
 
         /** update the field in fields if defined */
@@ -151,8 +155,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
 
   const showSystemFields = computed({
     get() {
-      // todo: show_system_fields missing from ViewType
+      return view.value?.show_system_fields || false
-      return (view?.value as any)?.show_system_fields || false
     },
     set(v: boolean) {
       if (view?.value?.id) {
@@ -163,7 +166,7 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
             })
             .finally(() => reloadData?.())
         }
-        ;(view.value as any).show_system_fields = v
+        view.value.show_system_fields = v
       }
       $e('a:fields:system-fields')
     },

packages/nc-gui/composables/useViewData.ts

@@ -33,8 +33,8 @@ export interface Row {
 }
 
 export function useViewData(
-  meta: Ref<TableType> | ComputedRef<TableType> | undefined,
+  meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
-  viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
+  viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   where?: ComputedRef<string | undefined>,
 ) {
   if (!meta) {
@@ -47,8 +47,7 @@ export function useViewData(
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
   const formColumnData = ref<FormType>()
-  // todo: missing properties on FormType (success_msg, show_blank_form,
+  const formViewData = ref<FormType>()
-  const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
   const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
@@ -153,19 +152,19 @@ export function useViewData(
 
     aggCommentCount.value = await $api.utils.commentCount({
       ids,
-      fk_model_id: meta?.value.id as string,
+      fk_model_id: meta.value?.id as string,
     })
 
     for (const row of formattedData.value) {
-      const id = extractPkFromRow(row.row, meta?.value?.columns as ColumnType[])
+      const id = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
       row.rowMeta.commentCount = aggCommentCount.value?.find((c: Record<string, any>) => c.row_id === id)?.count || 0
     }
   }
 
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
-    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
+    if ((!project?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
     const response = !isPublic.value
-      ? await api.dbViewRow.list('noco', project.value.id!, meta!.value.id!, viewMeta!.value.id, {
+      ? await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
           ...queryParams.value,
           ...params,
           ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),
@@ -196,7 +195,7 @@ export function useViewData(
       const insertedData = await $api.dbViewRow.create(
         NOCO,
         project?.value.id as string,
-        meta?.value.id as string,
+        meta.value?.id as string,
         viewMeta?.value?.id as string,
         insertObj,
       )
@@ -216,12 +215,12 @@ export function useViewData(
 
   async function updateRowProperty(toUpdate: Row, property: string) {
     try {
-      const id = extractPkFromRow(toUpdate.row, meta?.value.columns as ColumnType[])
+      const id = extractPkFromRow(toUpdate.row, meta.value?.columns as ColumnType[])
 
       const updatedRowData = await $api.dbViewRow.update(
         NOCO,
         project?.value.id as string,
-        meta?.value.id as string,
+        meta.value?.id as string,
         viewMeta?.value?.id as string,
         id,
         {
@@ -235,7 +234,7 @@ export function useViewData(
       // audit
       $api.utils
         .auditRowUpdate(id, {
-          fk_model_id: meta?.value.id as string,
+          fk_model_id: meta.value?.id as string,
           column_name: property,
           row_id: id,
           value: getHTMLEncodedText(toUpdate.row[property]),
@@ -273,8 +272,8 @@ export function useViewData(
     const res: any = await $api.dbViewRow.delete(
       'noco',
       project.value.id as string,
-      meta?.value.id as string,
+      meta.value?.id as string,
-      viewMeta?.value.id as string,
+      viewMeta.value?.id as string,
       id,
     )
 
@@ -295,7 +294,7 @@ export function useViewData(
       if (!row.rowMeta.new) {
         const id = meta?.value?.columns
           ?.filter((c) => c.pk)
-          .map((c) => row.row[c.title as any])
+          .map((c) => row.row[c.title!])
           .join('___')
 
         const deleted = await deleteRowById(id as string)
@@ -362,7 +361,7 @@ export function useViewData(
         ?.map((c: Record<string, any>) => ({
           ...c,
           fk_column_id: c.id,
-          fk_view_id: viewMeta.value.id,
+          fk_view_id: viewMeta.value?.id,
           ...(fieldById[c.id] ? fieldById[c.id] : {}),
           order: (fieldById[c.id] && fieldById[c.id].order) || order++,
           id: fieldById[c.id] && fieldById[c.id].id,

packages/nc-gui/composables/useViewFilters.ts

@@ -1,4 +1,4 @@
-import type { ViewType } from 'nocodb-sdk'
+import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import {
@@ -16,7 +16,7 @@ import {
 import type { Filter } from '~/lib'
 
 export function useViewFilters(
-  view: Ref<ViewType> | undefined,
+  view: Ref<ViewType | undefined>,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
@@ -69,13 +69,14 @@ export function useViewFilters(
         if (parentId) {
           filters.value = await $api.dbTableFilter.childrenRead(parentId)
         } else {
-          filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
+          // todo: return type is incorrect
+          filters.value = (await $api.dbTableWebhookFilter.read(hookId!)) as unknown as Filter[]
         }
       } else {
         if (parentId) {
           filters.value = await $api.dbTableFilter.childrenRead(parentId)
         } else {
-          filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+          filters.value = await $api.dbTableFilter.read(view.value!.id!)
         }
       }
     } catch (e: any) {
@@ -99,12 +100,12 @@ export function useViewFilters(
             filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
               ...filter,
               fk_parent_id: parentId,
-            })) as any
+            })) as unknown as FilterType
           } else {
-            filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+            filters.value[+i] = await $api.dbTableFilter.create(view?.value?.id as string, {
               ...filter,
               fk_parent_id: parentId,
-            })) as any
+            })
           }
         }
       }
@@ -168,10 +169,10 @@ export function useViewFilters(
         })
       } else {
         // todo: return type of dbTableFilter is void?
-        filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+        filters.value[i] = await $api.dbTableFilter.create(view.value.id!, {
           ...filter,
           fk_parent_id: parentId,
-        })) as any
+        })
       }
     } catch (e: any) {
       console.log(e)

packages/nc-gui/composables/useViewSorts.ts

@@ -1,12 +1,9 @@
-import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
+import type { SortType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { IsPublicInj, ReloadViewDataHookInj, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
-export function useViewSorts(
+export function useViewSorts(view: Ref<ViewType | undefined>, reloadData?: () => void) {
-  view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
-  reloadData?: () => void,
-) {
   const { sharedView } = useSharedView()
   const { sorts } = useSmartsheetStoreOrThrow()
 
@@ -21,14 +18,15 @@ export function useViewSorts(
 
   const loadSorts = async () => {
     if (isPublic.value) {
-      const sharedSorts = sharedView.value?.sorts || []
+      // todo: sorts missing on `ViewType`
+      const sharedSorts = (sharedView.value as any)?.sorts || []
       sorts.value = [...sharedSorts]
       return
     }
 
     try {
       if (!view?.value) return
-      sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
+      sorts.value = (await $api.dbTableSort.list(view.value!.id!)).sorts?.list || []
     } catch (e: any) {
       console.error(e)
       message.error(await extractSdkResponseErrorMsg(e))
@@ -48,7 +46,7 @@ export function useViewSorts(
           await $api.dbTableSort.update(sort.id, sort)
           $e('sort-updated')
         } else {
-          sorts.value[i] = (await $api.dbTableSort.create(view?.value?.id as string, sort)) as any
+          sorts.value[i] = (await $api.dbTableSort.create(view.value?.id as string, sort)) as unknown as SortType
         }
       }
       reloadData?.()

packages/nc-gui/layouts/base.vue

@@ -102,7 +102,7 @@ hooks.hook('page:finish', () => {
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
 
-        <GeneralLanguage class="nc-lang-btn" />
+        <GeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
       </a-tooltip>
 
       <div class="w-full h-full overflow-hidden">

packages/nc-gui/lib/types.ts

@@ -31,7 +31,7 @@ export interface Field {
   system?: boolean
 }
 
-export type Roles = Record<Role, boolean>
+export type Roles = Record<Role, boolean> | string
 
 export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }
 

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import tinycolor from 'tinycolor2'
-import { useI18n } from 'vue-i18n'
 import {
   computed,
   definePageMeta,
@@ -14,6 +13,7 @@ import {
   ref,
   useClipboard,
   useGlobal,
+  useI18n,
   useProject,
   useRoute,
   useTabs,
@@ -25,15 +25,15 @@ definePageMeta({
   hideHeader: true,
 })
 
-const route = useRoute()
+const { t } = useI18n()
 
-const router = useRouter()
+const route = useRoute()
 
 const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
+const { projectLoadedHook, project, isSharedBase, loadProjectMetaInfo, projectMetaInfo, saveTheme } = useProject()
 
-const { addTab, clearTabs } = useTabs()
+const { clearTabs, addTab } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
@@ -62,27 +62,11 @@ const logout = () => {
   navigateTo('/signin')
 }
 
-onKeyStroke(
-  'Escape',
-  () => {
-    dropdownOpen.value = false
-  },
-  { eventName: 'keydown' },
-)
-
-clearTabs()
-
 function toggleDialog(value?: boolean, key?: string) {
   dialogOpen.value = value ?? !dialogOpen.value
   openDialogKey.value = key
 }
 
-await loadProject()
-
-await loadTables()
-
-const { t } = useI18n()
-
 const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: string) => {
   switch (mode) {
     case 'swatch': {
@@ -117,10 +101,6 @@ const handleThemeColor = async (mode: 'swatch' | 'primary' | 'accent', color: st
   }
 }
 
-if (!route.params.type && isUIAllowed('teamAndAuth')) {
-  addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
-}
-
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()
@@ -150,11 +130,21 @@ const copyAuthToken = async () => {
   }
 }
 
-/** If v1 url found navigate to corresponding new url */
+onKeyStroke(
-const { type, name, view } = route.query
+  'Escape',
-if (type && name) {
+  () => {
-  router.replace(`/nc/${route.params.projectId}/${type}/${name}${view ? `/${view}` : ''}`)
+    dropdownOpen.value = false
-}
+  },
+  { eventName: 'keydown' },
+)
+
+clearTabs()
+
+projectLoadedHook(() => {
+  if (!route.params.type && isUIAllowed('teamAndAuth')) {
+    addTab({ type: TabType.AUTH, title: t('title.teamAndAuth') })
+  }
+})
 </script>
 
 <template>

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -1,15 +1,48 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
 import { TabType } from '~/composables'
-import { TabMetaInj, provide, useGlobal, useSidebar, useTabs } from '#imports'
+import {
+  TabMetaInj,
+  onBeforeMount,
+  provide,
+  ref,
+  useGlobal,
+  useProject,
+  useRoute,
+  useRouter,
+  useSidebar,
+  useTabs,
+} from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
+const { project, loadProject, loadTables } = useProject()
+
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
 const { isLoading } = useGlobal()
 
+const route = useRoute()
+
+const router = useRouter()
+
+const isReady = ref(false)
+
+onBeforeMount(async () => {
+  if (!Object.keys(project.value).length) await loadProject()
+
+  /** If v1 url found navigate to corresponding new url */
+  const { type, name, view } = route.query
+  if (type && name) {
+    await router.replace(`/nc/${route.params.projectId}/${type}/${name}${view ? `/${view}` : ''}`)
+  }
+
+  await loadTables()
+
+  isReady.value = true
+})
+
 provide(TabMetaInj, activeTab)
 
 const icon = (tab: TabItem) => {
@@ -71,13 +104,17 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-gray-200">
             {{ $t('general.loading') }}
 
-            <MdiLoading :class="{ 'animate-infinite animate-spin': isLoading }" />
+            <MdiLoading class="animate-infinite animate-spin" />
           </div>
         </div>
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
-        <NuxtPage />
+        <NuxtPage v-if="isReady" />
+
+        <div v-else class="w-full h-full flex justify-center items-center">
+          <a-spin size="large" />
+        </div>
       </div>
     </div>
   </div>

packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@@ -22,5 +22,3 @@ getMeta(route.params.title as string, true).finally(() => {
   </div>
   <TabsSmartsheet v-else :key="route.params.title" :active-tab="activeTab" />
 </template>
-
-<style scoped></style>

packages/nc-gui/pages/[projectType]/[projectId]/index/index/auth.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Auth from '~~/components/tabs/Auth.vue'
+import Auth from '~/components/tabs/Auth.vue'
 </script>
 
 <template>

packages/nc-gui/pages/[projectType]/form/[viewId].vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk'
 import {
   IsFormInj,
   IsPublicInj,
@@ -34,7 +32,7 @@ if (!notFound.value) {
   provide(IsPublicInj, ref(true))
   provide(IsFormInj, ref(true))
 
-  useProvideSmartsheetStore(sharedView as Ref<TableType>, meta as Ref<TableType>, true)
+  useProvideSmartsheetStore(sharedView, meta, true)
 }
 </script>
 

packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@@ -39,9 +39,9 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       <template v-if="sharedFormView">
         <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
 
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView?.heading }}</h1>
 
-        <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+        <h2 v-if="sharedFormView?.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
 
         <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
 

packages/nc-gui/pages/index/index.vue

@@ -22,11 +22,11 @@ const route = useRoute()
       <div class="flex flex-1 justify-between gap-6 lg:block">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div>
+            <div key="social-card">
               <GeneralSocialCard />
             </div>
 
-            <div class="block mt-0 lg:(!mt-6) xl:hidden">
+            <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
               <GeneralSponsors />
             </div>
           </TransitionGroup>

packages/nc-gui/pages/index/index/[projectId].vue

@@ -57,7 +57,7 @@ onMounted(async () => {
     setTimeout(() => {
       const input = form.value?.$el?.querySelector('input[type=text]')
 
-      input.setSelectionRange(0, formState.title.length)
+      input.setSelectionRange(0, formState.title?.length)
 
       input.focus()
     }, 500)

packages/nc-gui/pages/index/index/index.vue

@@ -176,18 +176,18 @@ const getProjectPrimary = (project: ProjectType) => {
     </div>
 
     <TransitionGroup name="layout" mode="out-in">
-      <div v-if="isLoading">
+      <div v-if="isLoading" key="skeleton">
         <a-skeleton />
       </div>
 
       <a-table
         v-else
+        key="table"
         :custom-row="
           (record) => ({
             onClick: () => {
-              $e('a:project:open')
-
               navigateTo(`/nc/${record.id}`)
+              $e('a:project:open')
             },
             class: ['group'],
           })
@@ -198,6 +198,7 @@ const getProjectPrimary = (project: ProjectType) => {
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>
+
         <!-- Title -->
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
           <template #default="{ text, record }">

packages/nc-gui/utils/iconUtils.ts

@@ -13,7 +13,7 @@ import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
 import MdiFlag from '~icons/mdi/flag'
 import MdiFlagOutline from '~icons/mdi/flag-outline'
 
-export const getMdiIcon = (type: string) => {
+export const getMdiIcon = (type: string): any => {
   switch (type) {
     case 'mdi-check-bold':
       return MdiCheckBold

packages/nc-gui/utils/viewUtils.ts

@@ -18,7 +18,7 @@ export const viewIcons = {
 }
 
 export const viewTypeAlias = {
-  [ViewTypes.GRID as any]: 'grid',
+  [ViewTypes.GRID]: 'grid',
-  [ViewTypes.FORM as any]: 'form',
+  [ViewTypes.FORM]: 'form',
-  [ViewTypes.GALLERY as any]: 'gallery',
+  [ViewTypes.GALLERY]: 'gallery',
 }