Merge pull request #6417 from nocodb/nc-fix/link-modal

Nc fix/link modal

packages/nc-gui/assets/nc-icons/column.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 1.5V13.5M7.5 1.5H12.1667C12.5203 1.5 12.8594 1.64048 13.1095 1.89052C13.3595 2.14057 13.5 2.47971 13.5 2.83333V12.1667C13.5 12.5203 13.3595 12.8594 13.1095 13.1095C12.8594 13.3595 12.5203 13.5 12.1667 13.5H7.5V1.5ZM7.5 1.5H2.83333C2.47971 1.5 2.14057 1.64048 1.89052 1.89052C1.64048 2.14057 1.5 2.47971 1.5 2.83333V12.1667C1.5 12.5203 1.64048 12.8594 1.89052 13.1095C2.14057 13.3595 2.47971 13.5 2.83333 13.5H7.5V1.5Z" stroke="#4A5268" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -2,6 +2,7 @@
 import { type ColumnType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import type { Row } from '#imports'
 import InboxIcon from '~icons/nc-icons/inbox'
+import ColumnIcon from '~icons/nc-icons/column'
 
 import {
   ColumnInj,
@@ -196,10 +197,23 @@ watch(expandedFormDlg, () => {
         'h-[420px]': !isForm,
         'h-[250px]': isForm,
       }"
-      class="pt-1 flex flex-col items-center justify-center text-gray-500"
+      class="pt-1 flex flex-col gap-3 items-center justify-center text-gray-500"
     >
       <InboxIcon class="w-16 h-16 mx-auto" />
-      <p>There are no records in table</p>
+      <p>
+        No records are linked from table
+        <span class="border-gray-300 text-gray-600 rounded-md border-1 p-1">
+          <ColumnIcon class="w-4 h-4 mt-[-2px]" />
+          {{ relatedTableMeta?.title }}
+        </span>
+      </p>
+      <NcButton
+        v-if="!readonly && childrenListCount < 1"
+        data-testid="nc-child-list-button-link-to"
+        @click="emit('attachRecord')"
+      >
+        <div class="flex items-center gap-1"><MdiPlus /> Link more records</div>
+      </NcButton>
     </div>
 
     <div class="my-2 bg-gray-50 border-gray-50 border-b-2"></div>
@@ -225,10 +239,14 @@ watch(expandedFormDlg, () => {
         />
       </div>
       <div class="flex flex-row gap-1">
-        <NcButton v-if="!readonly" type="ghost" data-testid="nc-child-list-button-link-to" @click="emit('attachRecord')">
+        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> Cancel </NcButton>
-          <MdiPlus /> Link more records
+        <NcButton
+          v-if="!readonly && childrenListCount > 0"
+          data-testid="nc-child-list-button-link-to"
+          @click="emit('attachRecord')"
+        >
+          <div class="flex items-center gap-1"><MdiPlus /> Link more records</div>
         </NcButton>
-        <NcButton v-if="!isForm" type="primary" class="nc-close-btn" @click="vModel = false"> Close </NcButton>
       </div>
     </div>
 

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

@@ -44,7 +44,7 @@ const attachments: Attachment[] = computed(() => {
 
 <template>
   <a-card
-    class="!border-1 group transition-all !rounded-xl relative !mb-4 !border-gray-200 hover:bg-gray-50"
+    class="!border-1 group transition-all !rounded-xl relative !mb-2 !border-gray-200 hover:bg-gray-50"
     :class="{
       '!bg-white !border-blue-500': isLoading,
       '!border-brand-500 !bg-brand-50 !border-2 !hover:bg-brand-50 !hover:border-brand-500': isLinked,

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

@@ -2,6 +2,7 @@
 import { RelationTypes, UITypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import InboxIcon from '~icons/nc-icons/inbox'
+import ColumnIcon from '~icons/nc-icons/column'
 import {
   ColumnInj,
   IsPublicInj,
@@ -194,8 +195,7 @@ watch(expandedFormDlg, () => {
           }
         "
       >
-        <MdiPlus class="w-4 h-4" />
+        <div class="flex items-center gap-1"><MdiPlus /> New Record</div>
-        New Record
       </NcButton>
     </div>
 
@@ -228,9 +228,15 @@ watch(expandedFormDlg, () => {
         </div>
       </div>
     </template>
-    <div v-else class="py-2 h-[420px] flex flex-col items-center justify-center text-gray-500">
+    <div v-else class="py-2 h-[420px] flex flex-col gap-3 items-center justify-center text-gray-500">
       <InboxIcon class="w-16 h-16 mx-auto" />
-      <p>There are no records in table</p>
+      <p>
+        There are no records in table
+        <span class="border-gray-300 text-gray-600 rounded-md border-1 p-1">
+          <ColumnIcon class="w-4 h-4 mt-[-2px]" />
+          {{ relatedTableMeta?.title }}
+        </span>
+      </p>
     </div>
     <div class="my-2 bg-gray-50 border-gray-50 border-b-2"></div>
 
@@ -252,7 +258,7 @@ watch(expandedFormDlg, () => {
           show-less-items
         />
       </div>
-      <NcButton class="nc-close-btn ml-auto" @click="vModel = false"> Close </NcButton>
+      <NcButton class="nc-close-btn ml-auto" type="ghost" @click="vModel = false"> Cancel </NcButton>
     </div>
     <Suspense>
       <LazySmartsheetExpandedForm