From 3d82925bac85714cb922fef9823b3f8b4aeb61c0 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 19 Sep 2023 10:29:09 +0000
Subject: [PATCH] fix: link modal

---
 packages/nc-gui/assets/nc-icons/column.svg    |  3 ++
 .../components/ListChildItems.vue             | 28 +++++++++++++++----
 .../virtual-cell/components/ListItem.vue      |  2 +-
 .../virtual-cell/components/ListItems.vue     | 16 +++++++----
 4 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui/assets/nc-icons/column.svg

diff --git a/packages/nc-gui/assets/nc-icons/column.svg b/packages/nc-gui/assets/nc-icons/column.svg
new file mode 100644
index 0000000000..6ff642b019
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 4a6a2052ed..766df7082d 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/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')">
-          <MdiPlus /> Link more records
+        <NcButton v-if="!isForm" type="ghost" class="nc-close-btn" @click="vModel = false"> Cancel </NcButton>
+        <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>
 
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index f05a9bb67c..5472dea5e1 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/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,
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index ead74d2e94..bd669e2132 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/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" />
-        New Record
+        <div class="flex items-center gap-1"><MdiPlus /> New Record</div>
       </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"> Close </NcButton>
     </div>
     <Suspense>
       <LazySmartsheetExpandedForm