chore(gui-v2): cleanup typecheck issues

packages/nc-gui-v2/components/cell/Url.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, computed, inject, isValidURL } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
-  modelValue: string | null | undefined
+  modelValue?: string | null
 }
 
 const { modelValue: value } = defineProps<Props>()
@@ -13,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const vModel = computed({
   get: () => value,
@@ -26,10 +25,12 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const url = computed<string | null>(() => {
-  if (!value || !isValidURL(value)) return null
+const url = computed(() => {
+  if (!value || !isValidURL(value)) return ''
+
   /** add url scheme if missing */
   if (/^https?:\/\//.test(value)) return value
+
   return `https://${value}`
 })
 
@@ -38,7 +39,9 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+
   <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
+
   <span v-else>{{ value }}</span>
 </template>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import { MetaInj } from '#imports'
 
@@ -39,16 +39,13 @@ const refTables = $computed(() => {
   }
 
   return meta.columns
-    ?.filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map<TableType & { col: LinkToAnotherRecordType; column: ColumnType }>((c: ColumnType) => ({
+    ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    .map((c: ColumnType) => ({
       col: c.colOptions,
       column: c,
       ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter(
-      (table: TableType & { col: LinkToAnotherRecordType; column: ColumnType }) =>
-        table.col.fk_related_model_id === table.id && !table.mm,
-    )
+    .filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
 })
 
 const columns = $computed(() => {
@@ -57,7 +54,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
 })
 </script>
 

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -10,7 +10,7 @@ interface Props {
   column: ColumnType
   modelValue: any
   editEnabled: boolean
-  rowIndex: number
+  rowIndex?: number
   active?: boolean
 }
 

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

@@ -18,6 +18,7 @@ import {
   useGlobal,
   useNuxtApp,
   useUIPermission,
+  useViewColumns,
   useViewData,
   watch,
 } from '#imports'
@@ -35,7 +36,7 @@ const { $api, $e } = useNuxtApp()
 
 const { isUIAllowed } = useUIPermission()
 
-const formState = reactive({})
+const formState: Record<any, any> = reactive({})
 
 const secondsRemain = ref(0)
 
@@ -54,13 +55,13 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
 
 const columns = computed(() => meta?.value?.columns || [])
 
-const localColumns = ref<Record<string, any>>([])
+const localColumns = ref<Record<string, any>[]>([])
 
-const hiddenColumns = ref<Record<string, any>>([])
+const hiddenColumns = ref<Record<string, any>[]>([])
 
 const draggableRef = ref()
 
-const systemFieldsIds = ref<Record<string, any>>([])
+const systemFieldsIds = ref<Record<string, any>[]>([])
 
 const showColumnDropdown = ref(false)
 
@@ -279,7 +280,7 @@ async function submitCallback() {
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
   if (col.id) {
     try {
-      $api.dbView.formColumnUpdate(col.id, col)
+      await $api.dbView.formColumnUpdate(col.id, col)
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
     }
@@ -428,7 +429,14 @@ onMounted(async () => {
       <div class="h-[200px] !bg-[#dbdad7]">
         <!-- for future implementation of cover image -->
       </div>
-      <a-card class="h-full ma-0 rounded-b-0 pa-4" body-style="max-width: 700px; margin: 0 auto; margin-top: -200px;">
+      <a-card
+        class="h-full ma-0 rounded-b-0 pa-4"
+        :body-style="{
+          maxWidth: '700px',
+          margin: '0 auto',
+          marginTop: '-200px',
+        }"
+      >
         <a-form ref="formRef" :model="formState">
           <a-card class="rounded ma-2 py-10 px-5">
             <!-- Header -->
@@ -444,7 +452,9 @@ onMounted(async () => {
                 @keydown.enter="updateView"
               />
             </a-form-item>
+
             <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
+
             <!-- Sub Header -->
             <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
               <a-input
@@ -459,7 +469,9 @@ onMounted(async () => {
                 @click="updateView"
               />
             </a-form-item>
+
             <div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
+
             <Draggable
               ref="draggableRef"
               :list="localColumns"
@@ -495,6 +507,7 @@ onMounted(async () => {
                       <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                     </div>
                   </div>
+
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     class="ma-0 gap-0 pa-0"
@@ -503,6 +516,7 @@ onMounted(async () => {
                   >
                     <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
                   </a-form-item>
+
                   <a-form-item
                     v-else
                     class="ma-0 gap-0 pa-0"
@@ -511,6 +525,7 @@ onMounted(async () => {
                   >
                     <SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
                   </a-form-item>
+
                   <div v-if="activeRow === element.title">
                     <a-form-item class="my-0 w-1/2">
                       <a-input
@@ -522,6 +537,7 @@ onMounted(async () => {
                       >
                       </a-input>
                     </a-form-item>
+
                     <a-form-item class="mt-2 mb-0 w-1/2">
                       <a-input
                         v-model:value="element.description"
@@ -531,14 +547,18 @@ onMounted(async () => {
                         @change="updateColMeta(element)"
                       />
                     </a-form-item>
+
                     <div class="items-center flex">
                       <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
+
                       <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
                     </div>
                   </div>
+
                   <span class="text-gray-500">{{ element.description }}</span>
                 </div>
               </template>
+
               <template #footer>
                 <div
                   v-if="!localColumns.length"
@@ -563,9 +583,11 @@ onMounted(async () => {
           <div class="text-gray-500 mt-4 mb-2">
             {{ $t('msg.info.afterFormSubmitted') }}
           </div>
+
           <!-- Show this message -->
           <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
-          <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
+
+          <a-textarea v-model:value="formViewData.success_msg" :rows="3" hide-details @change="updateView" />
 
           <!-- Other options -->
           <div class="mt-4">
@@ -590,6 +612,7 @@ onMounted(async () => {
               />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
+
             <div class="my-4">
               <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
               <!-- Email me at <email> -->

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -42,23 +42,31 @@ const iconColor = '#1890ff'
       <template v-if="meta">
         {{ meta.title }}
       </template>
+
+      <!-- todo: table doesn't exist?
       <template v-else>
         {{ table }}
       </template>
+      -->
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
+
     <div class="flex-grow" />
+
     <mdi-reload class="cursor-pointer select-none" />
+
     <component
       :is="drawerToggleIcon"
       v-if="isUIAllowed('rowComments')"
       class="cursor-pointer select-none"
       @click="commentsDrawer = !commentsDrawer"
     />
+
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>
+
     <a-button :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
       <!-- Save Row -->
       {{ $t('activity.saveRow') }}

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

@@ -16,6 +16,7 @@ import {
   ref,
   useProject,
   useTabs,
+  useTemplateRefsList,
 } from '#imports'
 import { TabType } from '~/composables'
 
@@ -53,7 +54,7 @@ const expansionPanel = ref<number[]>([])
 
 const editableTn = ref<boolean[]>([])
 
-const inputRefs = ref<HTMLInputElement[]>([])
+const inputRefs = useTemplateRefsList<HTMLInputElement>()
 
 const isImporting = ref(false)
 
@@ -493,9 +494,11 @@ onMounted(() => {
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
               <mdi-table class="text-primary" />
+
               {{ table.ref_table_name }}
             </span>
           </template>
+
           <a-table
             v-if="srcDestMapping"
             class="template-form"
@@ -509,10 +512,12 @@ onMounted(() => {
                 {{ column.name }}
               </span>
             </template>
+
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'source_column'">
                 <span>{{ record.srcCn }}</span>
               </template>
+
               <template v-else-if="column.key === 'destination_column'">
                 <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
                   <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
@@ -538,13 +543,14 @@ onMounted(() => {
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import
         </p>
+
         <a-collapse
           v-if="data.tables && data.tables.length"
           v-model:activeKey="expansionPanel"
           class="template-collapse"
           accordion
         >
-          <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
+          <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
             <template #header>
               <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
                 <a-input
@@ -552,16 +558,18 @@ onMounted(() => {
                   class="max-w-xs"
                   size="large"
                   hide-details
-                  @click="(e) => e.stopPropagation()"
+                  @click="$event.stopPropagation()"
                   @blur="setEditableTn(tableIdx, false)"
                   @keydown.enter="setEditableTn(tableIdx, false)"
                 />
               </a-form-item>
+
               <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
                 <mdi-table class="text-primary" />
                 {{ table.table_name }}
               </span>
             </template>
+
             <template #extra>
               <a-tooltip bottom>
                 <template #title>
@@ -573,7 +581,7 @@ onMounted(() => {
             </template>
 
             <a-table
-              v-if="table.columns.length"
+              v-if="table.columns && table.columns.length"
               class="template-form"
               row-class-name="template-form-row"
               :data-source="table.columns"
@@ -586,11 +594,13 @@ onMounted(() => {
                     {{ $t('labels.columnName') }}
                   </span>
                 </template>
+
                 <template v-else-if="column.key === 'uidt'">
                   <span>
                     {{ $t('labels.columnType') }}
                   </span>
                 </template>
+
                 <template v-else-if="column.key === 'dtxp' && hasSelectColumn[tableIdx]">
                   <span>
                     <!-- TODO: i18n -->
@@ -598,19 +608,14 @@ onMounted(() => {
                   </span>
                 </template>
               </template>
+
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input
-                      :ref="
-                        (el) => {
-                          inputRefs[record.key] = el
-                        }
-                      "
-                      v-model:value="record.column_name"
-                    />
+                    <a-input :ref="inputRefs.set" v-model:value="record.column_name" />
                   </a-form-item>
                 </template>
+
                 <template v-else-if="column.key === 'uidt'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
                     <a-select
@@ -635,6 +640,7 @@ onMounted(() => {
                       <!-- TODO: i18n -->
                       <span>Primary Value</span>
                     </template>
+
                     <div class="flex items-center float-right mr-4">
                       <mdi-key-star class="text-lg" />
                     </div>

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

@@ -1,9 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { ref, useNuxtApp, useProject } from '#imports'
-import { NOCO } from '~/lib'
-import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -34,9 +32,10 @@ export function useViewData(
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
-  const galleryData = ref<GalleryType | undefined>(undefined)
-  const formColumnData = ref<FormType | undefined>(undefined)
-  const formViewData = ref<FormType | undefined>(undefined)
+  const galleryData = ref<GalleryType>()
+  const formColumnData = ref<FormType>()
+  // todo: missing properties on FormType (success_msg, show_blank_form,
+  const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
@@ -101,7 +100,7 @@ export function useViewData(
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
 
-    loadAggCommentsCount()
+    await loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -132,7 +131,8 @@ export function useViewData(
         rowMeta: {},
         oldRow: { ...insertedData },
       })
-      syncCount()
+
+      await syncCount()
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
     }
@@ -240,8 +240,10 @@ export function useViewData(
           return
         }
       }
+
       formattedData.value.splice(rowIndex, 1)
-      syncCount()
+
+      await syncCount()
     } catch (e: any) {
       message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
     }
@@ -271,7 +273,8 @@ export function useViewData(
         return message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
       }
     }
-    syncCount()
+
+    await syncCount()
   }
 
   const loadFormView = async () => {

packages/nc-gui-v2/utils/columnUtils.ts

@@ -147,7 +147,7 @@ const uiTypes = [
   },
 ]
 
-const getUIDTIcon = (uidt: UITypes) => {
+const getUIDTIcon = (uidt: UITypes | string) => {
   return (
     [
       ...uiTypes,