fix: skelton missing in link modal

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

@@ -64,6 +64,20 @@ const textVal = computed(() => {
   }
 })
 
+const toatlRecordsLinked = computed(() => {
+  if (isForm?.value) {
+    return state.value?.[colTitle.value]?.length
+  }
+  const parsedValue = +value?.value || 0
+  if (!parsedValue) {
+    return 0
+  } else if (parsedValue === 1) {
+    return 1
+  } else {
+    return parsedValue
+  }
+})
+
 const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
@@ -126,6 +140,7 @@ const localCellValue = computed<any[]>(() => {
     <LazyVirtualCellComponentsListChildItems
       v-if="listItemsDlg || childListDlg"
       v-model="childListDlg"
+      :items="toatlRecordsLinked"
       :column="relatedTableDisplayColumn"
       :cell-value="localCellValue"
       @attach-record="onAttachRecord"

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

@@ -18,7 +18,14 @@ import {
   useVModel,
 } from '#imports'
 
-const props = defineProps<{ modelValue?: boolean; cellValue: any; column: any }>()
+interface Prop {
+  modelValue?: boolean
+  cellValue: any
+  column: any
+  items: number
+}
+
+const props = defineProps<Prop>()
 
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
@@ -126,25 +133,45 @@ onKeyStroke('Escape', () => {
   vModel.value = false
 })
 
-const skeltonAmountToShow = ref(childrenListCount.value === 0 ? 10 : childrenListCount.value)
-
-/* 
+/*
    to render same number of skelton as the number of cards
    displayed
  */
-watch(childrenListPagination, () => {
+const skeltonCount = computed(() => {
+  if (props.items < 10 && childrenListPagination.page === 1) {
+    return props.items
+  }
+
   if (childrenListCount.value < 10 && childrenListPagination.page === 1) {
-    skeltonAmountToShow.value = childrenListCount.value === 0 ? 10 : childrenListCount.value
+    return childrenListCount.value || 10
   }
+  const totalRows = Math.ceil(childrenListCount.value / 10)
 
-  const totlaRows = Math.ceil(childrenListCount.value / 10)
+  if (totalRows === childrenListPagination.page) {
+    return childrenListCount.value % 10
+  }
+  return 10
+})
 
-  if (totlaRows === childrenListPagination.page) {
-    skeltonAmountToShow.value = childrenListCount.value % 10
-  } else {
-    skeltonAmountToShow.value = 10
+const totalItemsToShow = computed(() => {
+  if (isChildrenLoading.value) {
+    return props.items
   }
+  return childrenListCount.value
 })
+
+const isDataExist = computed<boolean>(() => {
+  return childrenList.value?.pageInfo?.totalRows || (isNew.value && state.value?.[colTitle.value]?.length)
+})
+
+const linkOrUnLink = (rowRef: Record<string, string>, id: string) => {
+  if (isPublic.value && !isForm.value) return
+  if (isNew.value || isChildrenListLinked.value[parseInt(id)]) {
+    unlinkRow(rowRef, parseInt(id))
+  } else {
+    linkRow(rowRef, parseInt(id))
+  }
+}
 </script>
 
 <template>
@@ -188,13 +215,12 @@ watch(childrenListPagination, () => {
         </a-input>
       </div>
     </div>
-
-    <div class="flex flex-col flex-grow nc-scrollbar-md">
-      <template v-if="(isNew && state?.[colTitle]?.length) || childrenList?.pageInfo?.totalRows">
+    <div class="flex flex-col flex-grow nc-scrollbar-md cursor-pointer pr-1">
+      <div v-if="isDataExist || isChildrenLoading" class="mt-2 mb-2">
         <div class="cursor-pointer pr-1">
           <template v-if="isChildrenLoading">
             <div
-              v-for="(x, i) in Array.from({ length: 10 })"
+              v-for="(x, i) in Array.from({ length: skeltonCount })"
               :key="i"
               class="!border-2 flex flex-row gap-2 mb-2 transition-all !rounded-xl relative !border-gray-200 hover:bg-gray-50"
             >
@@ -234,20 +260,11 @@ watch(childrenListPagination, () => {
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"
-              @click="
-                () => {
-                  if (isPublic && !isForm) return
-                  isNew
-                    ? unlinkRow(refRow, Number.parseInt(id))
-                    : isChildrenListLinked[Number.parseInt(id)]
-                    ? unlinkRow(refRow, Number.parseInt(id))
-                    : linkRow(refRow, Number.parseInt(id))
-                }
-              "
+              @click="linkOrUnLink(refRow, id)"
             />
           </template>
         </div>
-      </template>
+      </div>
       <div v-else class="pt-1 flex flex-col gap-3 my-auto items-center justify-center text-gray-500">
         <InboxIcon class="w-16 h-16 mx-auto" />
         <p>
@@ -278,8 +295,8 @@ watch(childrenListPagination, () => {
 
     <div class="flex flex-row justify-between bg-white relative pt-1">
       <div v-if="!isForm" class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">
-        {{ childrenListCount || 0 }} {{ !isMobileMode ? $t('objects.records') : '' }}
-        {{ !isMobileMode && childrenListCount !== 0 ? $t('general.are') : '' }}
+        {{ totalItemsToShow || 0 }} {{ !isMobileMode ? $t('objects.records') : '' }}
+        {{ !isMobileMode && totalItemsToShow !== 0 ? $t('general.are') : '' }}
         {{ $t('general.linked') }}
       </div>
       <div v-else class="flex items-center justify-center px-2 rounded-md text-gray-500 bg-brand-50">