feat: make Links column similar to LTAR

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import { CellValueInj, inject, useShowNotEditableWarning } from '#imports'
-import { Ref } from 'vue'
+import { computed } from '@vue/reactivity'
+import { inflect } from 'inflection'
+import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { CellValueInj, inject } from '#imports'
+import { pluralize, singularize } from 'inflection'
 
 const value = inject(CellValueInj)
 
-
-
-
-
-
-
-
 const column = inject(ColumnInj)!
 
-const relColumn = computed(() => {
-  return column.value?.related_column
-}
+const meta = inject(MetaInj, ref())
 
+const relColumn = computed(() => {
+  return meta.value.columns.find((c: ColumnType) => c.id === column.value?.colOptions?.fk_relation_column_id)
+})
 
 const cellValue = inject(CellValueInj)!
 
@@ -41,35 +39,64 @@ const { isUIAllowed } = useUIPermission()
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvideLTARStore(
-  column as Ref<Required<ColumnType>>,
+  relColumn as Ref<Required<ColumnType>>,
   row,
   isNew,
   reloadRowTrigger.trigger,
 )
 
 
-</script>
 
-<template>
-  <div>
-    <span class="text-center pl-3">
-      {{ value }}
-    </span>
 
+const relatedTableDisplayColumn = computed(
+  () =>
+    relatedTableMeta.value?.columns?.find((c: any) => c.title === relatedTableDisplayValueProp.value) as ColumnType | undefined,
+)
+
+loadRelatedTableMeta()
+
+const textVal = computed(() => {
+  if (!value.value) {
+    return 'Empty'
+  } else if (value.value === 1) {
+    return `1 ${singularize(relatedTableMeta.value?.title ?? '')}`
+  } else {
+    return `${value.value} ${pluralize(relatedTableMeta.value?.title ?? '')}`
+  }
+})
 
 
-    <LazyVirtualCellComponentsListItems v-model="listItemsDlg" :column="relColumn" />
+</script>
+
+<template>
+  <div class="flex w-full items-center">
+    <a @click.stop.prevent="childListDlg = true" class="text-center pl-3 flex-grow block"
+       :class="{'!text-gray-300': !value}">
+      {{ textVal }}
+    </a>
+
+    <div v-if="!isLocked && !isUnderLookup" class="flex justify-end gap-1 min-h-[30px] items-center">
+      <!--      <GeneralIcon-->
+      <!--        icon="expand"-->
+      <!--        class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-arrow-expand"-->
+      <!--        @click.stop="childListDlg = true"-->
+      <!--      />-->
+
+      <GeneralIcon
+        v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
+        icon="plus"
+        class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
+        @click.stop="listItemsDlg = true"
+      />
+    </div>
+
+    <LazyVirtualCellComponentsListItems v-model="listItemsDlg" :column="relatedTableDisplayColumn" />
 
     <LazyVirtualCellComponentsListChildItems
       v-model="childListDlg"
       :cell-value="localCellValue"
-      :column="relColumn"
+      :column="relatedTableDisplayColumn"
       @attach-record="onAttachRecord"
     />
-
-
-
-
-
   </div>
 </template>

packages/nc-gui/package-lock.json

@@ -23,6 +23,7 @@
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "httpsnippet": "^2.0.0",
+        "inflection": "^2.0.1",
         "jsbarcode": "^3.11.5",
         "jsep": "^1.3.6",
         "jwt-decode": "^3.1.2",
@@ -9967,6 +9968,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/inflection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-2.0.1.tgz",
+      "integrity": "sha512-wzkZHqpb4eGrOKBl34xy3umnYHx8Si5R1U4fwmdxLo5gdH6mEK8gclckTj/qWqy4Je0bsDYe/qazZYuO7xe3XQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -25648,6 +25657,11 @@
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true
     },
+    "inflection": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-2.0.1.tgz",
+      "integrity": "sha512-wzkZHqpb4eGrOKBl34xy3umnYHx8Si5R1U4fwmdxLo5gdH6mEK8gclckTj/qWqy4Je0bsDYe/qazZYuO7xe3XQ=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",

packages/nc-gui/package.json

@@ -47,6 +47,7 @@
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
     "httpsnippet": "^2.0.0",
+    "inflection": "^2.0.1",
     "jsbarcode": "^3.11.5",
     "jsep": "^1.3.6",
     "jwt-decode": "^3.1.2",