Nc feat/links from existing cols

packages/nc-gui/components/general/DeleteModal.vue

@@ -60,7 +60,13 @@ onKeyStroke('Enter', () => {
       </div>
 
       <slot name="entity-preview"></slot>
-
+      <template v-if="$slots.warning">
+        <a-alert type="warning" show-icon>
+          <template #message>
+            <slot name="warning"></slot>
+          </template>
+        </a-alert>
+      </template>
       <div class="flex flex-row gap-x-2 mt-2.5 pt-2.5 justify-end">
         <NcButton type="secondary" @click="visible = false">
           {{ $t('general.cancel') }}

packages/nc-gui/components/nc/Select.vue

@@ -1,17 +1,25 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  value?: string | string[]
-  placeholder?: string
-  mode?: 'multiple' | 'tags'
-  size?: 'small' | 'middle' | 'large'
-  dropdownClassName?: string
-  showSearch?: boolean
-  // filterOptions is a function
-  filterOption?: (input: string, option: any) => boolean
-  dropdownMatchSelectWidth?: boolean
-  allowClear?: boolean
-  loading?: boolean
-}>()
+import type { iconMap } from '#imports'
+
+const props = withDefaults(
+  defineProps<{
+    value?: string | string[]
+    placeholder?: string
+    mode?: 'multiple' | 'tags'
+    size?: 'small' | 'middle' | 'large'
+    dropdownClassName?: string
+    showSearch?: boolean
+    // filterOptions is a function
+    filterOption?: (input: string, option: any) => boolean
+    dropdownMatchSelectWidth?: boolean
+    allowClear?: boolean
+    loading?: boolean
+    suffixIcon?: keyof typeof iconMap
+  }>(),
+  {
+    suffixIcon: 'arrowDown',
+  },
+)
 
 const emits = defineEmits(['update:value', 'change'])
 
@@ -25,15 +33,7 @@ const dropdownClassName = computed(() => {
   return className
 })
 
-const showSearch = computed(() => props.showSearch)
-
-const filterOption = computed(() => props.filterOption)
-
-const dropdownMatchSelectWidth = computed(() => props.dropdownMatchSelectWidth)
-
-const loading = computed(() => props.loading)
-
-const mode = computed(() => props.mode)
+const { showSearch, filterOption, dropdownMatchSelectWidth, loading, mode } = toRefs(props)
 
 const vModel = useVModel(props, 'value', emits)
 
@@ -60,7 +60,7 @@ const onChange = (value: string) => {
   >
     <template #suffixIcon>
       <GeneralLoader v-if="loading" />
-      <GeneralIcon v-else class="text-gray-800 nc-select-expand-btn" icon="arrowDown" />
+      <GeneralIcon v-else class="text-gray-800 nc-select-expand-btn" :icon="suffixIcon" />
     </template>
     <slot />
   </a-select>

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

@@ -99,7 +99,11 @@ const { currentRow } = useSmartsheetRowStoreOrThrow()
 
 const { sqlUis } = storeToRefs(useBase())
 
-const sqlUi = ref(column.value?.source_id ? sqlUis.value[column.value?.source_id] : Object.values(sqlUis.value)[0])
+const sqlUi = ref(
+  column.value?.source_id && sqlUis.value[column.value?.source_id]
+    ? sqlUis.value[column.value?.source_id]
+    : Object.values(sqlUis.value)[0],
+)
 
 const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 

packages/nc-gui/components/smartsheet/PlainCell.vue

@@ -38,7 +38,11 @@ const { basesUser } = storeToRefs(basesStore)
 
 const { isXcdbBase, isMssql, isMysql } = useBase()
 
-const sqlUi = ref(column.value?.source_id ? sqlUis.value[column.value?.source_id] : Object.values(sqlUis.value)[0])
+const sqlUi = ref(
+  column.value?.source_id && sqlUis.value[column.value?.source_id]
+    ? sqlUis.value[column.value?.source_id]
+    : Object.values(sqlUis.value)[0],
+)
 
 const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -258,6 +258,7 @@ if (props.fromTableExplorer) {
       '!w-146': isTextArea(formState) && formState.meta?.richMode,
       '!w-116 overflow-visible': formState.uidt === UITypes.Formula && !props.embedMode,
       '!w-[500px]': formState.uidt === UITypes.Attachment && !props.embedMode && !appInfo.ee,
+      'min-w-[422px] !w-full': isLinksOrLTAR(formState.uidt),
       'shadow-lg border-1 border-gray-200 shadow-gray-300 rounded-xl p-6': !embedMode,
     }"
     @keydown="handleEscape"

packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  value: any
+}>()
+</script>
+
+<template>
+  <span></span>
+</template>

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -55,45 +55,114 @@ const filterOption = (value: string, option: { key: string }) => option.key.toLo
 const isLinks = computed(() => vModel.value.uidt === UITypes.Links && vModel.value.type !== RelationTypes.ONE_TO_ONE)
 
 const oneToOneEnabled = ref(false)
+
+const isAdvancedOptionsShownEasterEgg = ref(false)
+
+const cusValidators = {
+  'custom.column_id': [{ required: true, message: t('general.required') }],
+  'custom.ref_model_id': [{ required: true, message: t('general.required') }],
+  'custom.ref_column_id': [{ required: true, message: t('general.required') }],
+}
+
+const cusJuncTableValidations = {
+  'custom.junc_model_id': [{ required: true, message: t('general.required') }],
+  'custom.junc_column_id': [{ required: true, message: t('general.required') }],
+  'custom.junc_ref_column_id': [{ required: true, message: t('general.required') }],
+}
+
+const onCustomSwitchToggle = () => {
+  if (vModel.value?.is_custom_link)
+    setAdditionalValidations({
+      childId: [],
+      ...cusValidators,
+      ...(vModel.value.type === RelationTypes.MANY_TO_MANY ? cusJuncTableValidations : {}),
+    })
+  else
+    setAdditionalValidations({
+      childId: [{ required: true, message: t('general.required') }],
+    })
+}
+
+const handleShowAdvanceOptions = () => {
+  isAdvancedOptionsShownEasterEgg.value = !isAdvancedOptionsShownEasterEgg.value
+
+  if (!isAdvancedOptionsShownEasterEgg.value) {
+    vModel.value.is_custom_link = false
+  }
+}
 </script>
 
 <template>
-  <div class="w-full flex flex-col mb-2 mt-4">
-    <div class="border-2 p-6">
+  <div class="w-full flex flex-col mb-2 mt-1">
+    <div class="mb-2">Relation Type <span class="text-red-500">*</span></div>
+    <div class="border-1 border-gray-200 rounded-lg">
       <a-form-item v-bind="validateInfos.type" class="nc-ltar-relation-type">
-        <a-radio-group v-model:value="vModel.type" name="type" v-bind="validateInfos.type" class="!flex flex-col gap-2">
-          <a-radio value="hm" @dblclick="oneToOneEnabled = !oneToOneEnabled">{{ $t('title.hasMany') }}</a-radio>
-          <a-radio value="mm">{{ $t('title.manyToMany') }}</a-radio>
-          <a-radio v-if="oneToOneEnabled" value="oo">{{ $t('title.oneToOne') }}</a-radio>
+        <a-radio-group
+          v-model:value="vModel.type"
+          name="type"
+          v-bind="validateInfos.type"
+          class="nc-ltar-relation-type-radio-group !flex flex-col"
+        >
+          <a-radio value="mm">
+            <span class="nc-ltar-icon nc-mm-icon">
+              <GeneralIcon icon="mm" class="text-white" />
+            </span>
+            {{ $t('title.manyToMany') }}</a-radio
+          >
+          <a-radio value="hm" @dblclick="oneToOneEnabled = !oneToOneEnabled">
+            <span class="nc-ltar-icon nc-hm-icon"><GeneralIcon icon="hm" class="text-white" /></span>
+            {{ $t('title.hasMany') }}</a-radio
+          >
+
+          <a-radio v-if="oneToOneEnabled" value="oo" @dblclick="handleShowAdvanceOptions">
+            <span class="nc-ltar-icon nc-oo-icon">
+              <GeneralIcon icon="oneToOneSolid" class="text-white" />
+            </span>
+            {{ $t('title.oneToOne') }}</a-radio
+          >
         </a-radio-group>
       </a-form-item>
-
-      <a-form-item
-        class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-        :label="$t('labels.childTable')"
-        v-bind="validateInfos.childId"
-      >
-        <a-select
-          v-model:value="vModel.childId"
-          show-search
-          :filter-option="filterOption"
-          dropdown-class-name="nc-dropdown-ltar-child-table"
-          @change="onDataTypeChange"
-        >
-          <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
-            <div class="flex w-full items-center gap-2">
-              <div class="min-w-5 flex items-center justify-center">
-                <GeneralTableIcon :meta="table" class="text-gray-500" />
+    </div>
+    <div v-if="isAdvancedOptionsShownEasterEgg && isEeUI" class="mt-4">
+      <a-switch v-model:checked="vModel.is_custom_link" size="small" name="Custom" @change="onCustomSwitchToggle" />
+      <span class="ml-3">Advanced Link</span>
+    </div>
+    <div
+      :class="{
+        'mt-3': isAdvancedOptionsShownEasterEgg,
+        'mt-4': !isAdvancedOptionsShownEasterEgg,
+      }"
+    >
+      <LazySmartsheetColumnLinkAdvancedOptions v-if="isEeUI && vModel.is_custom_link" v-model:value="vModel" />
+      <template v-else>
+        <a-form-item class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos.childId">
+          <a-select
+            v-model:value="vModel.childId"
+            show-search
+            :filter-option="filterOption"
+            placeholder="-select child table-"
+            dropdown-class-name="nc-dropdown-ltar-child-table"
+            @change="onDataTypeChange"
+          >
+            <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
+              <div class="flex w-full items-center gap-2">
+                <div class="min-w-5 flex items-center justify-center">
+                  <GeneralTableIcon :meta="table" class="text-gray-500" />
+                </div>
+                <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                  <template #title>{{ table.title }}</template>
+                  <span>{{ table.title }}</span>
+                </NcTooltip>
               </div>
-              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                <template #title>{{ table.title }}</template>
-                <span>{{ table.title }}</span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
+            </a-select-option>
+            <template #suffixIcon>
+              <GeneralIcon class="" icon="chevronDown" />
+            </template>
+          </a-select>
+        </a-form-item>
+      </template>
     </div>
+
     <template v-if="!isXcdbBase || isLinks">
       <div
         class="text-xs cursor-pointer text-grey nc-more-options my-2 flex items-center gap-1 justify-end"
@@ -105,7 +174,7 @@ const oneToOneEnabled = ref(false)
       </div>
 
       <div v-if="advancedOptions" class="flex flex-col p-6 gap-4 border-2 mt-2">
-        <LazySmartsheetColumnLinkOptions v-if="isLinks" v-model:value="vModel" class="-my-2" />
+        <LazySmartsheetColumnLinkOptions v-if="isLinks" v-model:value="vModel" class="mt-3" />
         <template v-if="!isXcdbBase">
           <div class="flex flex-row space-x-2">
             <a-form-item class="flex w-1/2" :label="$t('labels.onUpdate')">
@@ -163,3 +232,39 @@ const oneToOneEnabled = ref(false)
     </template>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.nc-ltar-relation-type-radio-group {
+  .nc-ltar-icon {
+    @apply flex items-center p-1 rounded;
+
+    &.nc-mm-icon {
+      @apply bg-pink-500;
+    }
+    &.nc-hm-icon {
+      @apply bg-orange-500;
+    }
+    &.nc-oo-icon {
+      @apply bg-purple-500;
+      :deep(svg path) {
+        @apply stroke-purple-50;
+      }
+    }
+  }
+
+  :deep(.ant-radio-wrapper) {
+    @apply px-3 py-2 flex items-center mr-0;
+
+    &:not(:last-child) {
+      @apply border-b border-gray-200;
+    }
+  }
+
+  :deep(.ant-radio) {
+    @apply top-0;
+    & + span {
+      @apply flex items-center gap-2;
+    }
+  }
+}
+</style>

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

@@ -42,7 +42,9 @@ const refTables = computed(() => {
     .map((column) => ({
       col: column.colOptions,
       column,
-      ...tables.value.find((table) => table.id === (column.colOptions as LinkToAnotherRecordType).fk_related_model_id),
+      ...(tables.value.find((table) => table.id === (column.colOptions as LinkToAnotherRecordType).fk_related_model_id) ||
+        metas.value[(column.colOptions as LinkToAnotherRecordType).fk_related_model_id!] ||
+        {}),
     }))
     .filter((table) => (table.col as LinkToAnotherRecordType)?.fk_related_model_id === table.id && !table.mm)
   return _refTables as Required<TableType & { column: ColumnType; col: Required<LinkToAnotherRecordType> }>[]

packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts

@@ -106,6 +106,8 @@ export const useColumnDrag = ({
   }
 
   const handleReorderColumn = async () => {
+    if (!dragColPlaceholderDomRef.value) return
+
     dragColPlaceholderDomRef.value!.style.left = '0px'
     dragColPlaceholderDomRef.value!.style.height = '0px'
     await reorderColumn(draggedCol.value!.id!, toBeDroppedColId.value!)
@@ -118,6 +120,8 @@ export const useColumnDrag = ({
 
     const dom = document.querySelector('[data-testid="drag-icon-placeholder"]')
 
+    if (!dom || !dragColPlaceholderDomRef.value) return
+
     e.dataTransfer.dropEffect = 'none'
     e.dataTransfer.effectAllowed = 'none'
 

packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue

@@ -25,6 +25,31 @@ const { loadTables } = useBase()
 
 const isLoading = ref(false)
 
+// disable for time being - internal discussion required
+/*
+const warningMsg = computed(() => {
+  if (!column?.value) return []
+
+  const columns = meta?.value?.columns.filter((c) => {
+    if (isLinksOrLTAR(c) && c.colOptions) {
+      return (
+        (c.colOptions as LinkToAnotherRecordType).fk_parent_column_id === column.value?.id ||
+        (c.colOptions as LinkToAnotherRecordType).fk_child_column_id === column.value?.id ||
+        (c.colOptions as LinkToAnotherRecordType).fk_mm_child_column_id === column.value?.id ||
+        (c.colOptions as LinkToAnotherRecordType).fk_mm_parent_column_id === column.value?.id
+      )
+    }
+
+    return false
+  })
+
+  if (!columns.length) return null
+
+  return `This column is used in following Link column${columns.length > 1 ? 's' : ''}: '${columns
+    .map((c) => c.title)
+    .join("', '")}'. Deleting this column will also delete the related Link column${columns.length > 1 ? 's' : ''}.`
+}) */
+
 const onDelete = async () => {
   if (!column?.value) return
 
@@ -71,5 +96,8 @@ const onDelete = async () => {
         </div>
       </div>
     </template>
+
+    <!-- disable for time being - internal discussion required -->
+    <!-- <template v-if="warningMsg" #warning>{{ warningMsg }}</template> -->
   </GeneralDeleteModal>
 </template>

packages/nc-gui/components/smartsheet/header/Menu.vue

@@ -299,7 +299,7 @@ const isDeleteAllowed = computed(() => {
   return column?.value && !column.value.system
 })
 const isDuplicateAllowed = computed(() => {
-  return column?.value && !column.value.system
+  return column?.value && !column.value.system && !column.value.meta?.custom
 })
 const isFilterSupported = computed(
   () =>