From f54ef63b3e770448b595df85fbaabc1ce2c1e39a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Fri, 12 Jul 2024 18:22:02 +0000
Subject: [PATCH] fix(nc-gui): add relation settings tables

---
 .../smartsheet/column/LinkAdvancedOptions.vue | 529 +++++++++++-------
 .../column/LinkAdvancedOptions1.vue           | 311 ++++++++++
 2 files changed, 636 insertions(+), 204 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions1.vue

diff --git a/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue b/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
index f4d1e1401e..546c0bdba1 100644
--- a/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions.vue
@@ -1,15 +1,27 @@
 <script setup lang="ts">
-import { useColumnCreateStoreOrThrow, useVModel, computed, inject, MetaInj, ref, useI18n,useBase,
-  useBases, storeToRefs, useMetas } from '#imports'
+import {
+  useColumnCreateStoreOrThrow,
+  useVModel,
+  computed,
+  inject,
+  MetaInj,
+  ref,
+  useI18n,
+  useBase,
+  useBases,
+  storeToRefs,
+  useMetas,
+} from '#imports'
 import {
   isCreatedOrLastModifiedByCol,
   isCreatedOrLastModifiedTimeCol,
   isVirtualCol,
   ModelTypes,
   RelationTypes,
-} from "nocodb-sdk";
-import {useTable} from "../../../composables/useTable";
-import {useTablesStore} from "../../../store/tables";
+  type TableType,
+} from 'nocodb-sdk'
+import { useTable } from '../../../composables/useTable'
+import { useTablesStore } from '../../../store/tables'
 
 const props = defineProps<{
   value: any
@@ -19,30 +31,32 @@ const emit = defineEmits(['update:value'])
 
 const { t } = useI18n()
 
-const meta = inject(MetaInj, ref())
+const meta = inject(MetaInj, ref({} as TableType))
 
 const vModel = useVModel(props, 'value', emit)
 
 const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow()
 
-const baseStore = useBase()
-// const { tables } = storeToRefs(baseStore)
+// const baseStore = useBase()
+// const { base } = storeToRefs(baseStore)
 
 const { metas, getMeta } = useMetas()
 
-
 const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY)
 
-
 // set default value
 vModel.value.custom = {
-  base_id: meta.value?.base_id
+  base_id: meta.value?.base_id,
 }
 
-
+console.log('meta', meta.value, vModel.value)
 const { basesList, bases } = storeToRefs(useBases())
 const tablesStore = useTablesStore()
-const { baseTables } = storeToRefs(tablesStore)
+const { baseTables, activeTable, activeTables: sourceTables } = storeToRefs(tablesStore)
+
+const currentDisplayValueColumn = computed(() => {
+  return meta?.value?.columns?.find((f) => f.pv)
+})
 
 /*const refTables = computed(() =>{
 
@@ -52,23 +66,23 @@ const { baseTables } = storeToRefs(tablesStore)
 
   return tables.value.filter((t) => t.type === ModelTypes.TABLE && t.source_id === meta.value?.source_id)
 })*/
-const refTables = computed(() =>{
+
+const refTables = computed(() => {
   if (!baseTables.value.get(vModel.value.custom.base_id)) {
     return []
   }
 
-  return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE),
-  ...(vModel.value.custom.base_id !== meta.value?.base_id ? baseTables.value.get(meta.value.base_id).filter((t) => t.type === ModelTypes.TABLE) : [])
-  ]
+  return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE)]
 })
 
-
 const columns = computed(() => {
   if (!meta.value?.columns) {
     return []
   }
 
-  return meta.value.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c));
+  return meta.value.columns?.filter(
+    (c) => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c),
+  )
 })
 
 const refTableColumns = computed(() => {
@@ -76,8 +90,9 @@ const refTableColumns = computed(() => {
     return []
   }
 
-
-  return metas.value[vModel.value.custom?.ref_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
+  return metas.value[vModel.value.custom?.ref_model_id]?.columns?.filter(
+    (c) => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c),
+  )
 })
 
 const juncTableColumns = computed(() => {
@@ -85,22 +100,21 @@ const juncTableColumns = computed(() => {
     return []
   }
 
-
-  return metas.value[vModel.value.custom?.junc_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
+  return metas.value[vModel.value.custom?.junc_model_id]?.columns?.filter(
+    (c) => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c),
+  )
 })
 
-
 const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
 
-
-const onModelIdChange =async  (modelId:string) =>{
+const onModelIdChange = async (modelId: string) => {
   // todo: optimise
   await getMeta(modelId, false, false, vModel.value.custom.base_id)
   await getMeta(modelId)
   await onDataTypeChange()
 }
 
-const onBaseChange = async (baseId) =>{
+const onBaseChange = async (baseId) => {
   await tablesStore.loadProjectTables(baseId)
   vModel.value.custom.ref_model_id = null
 }
@@ -108,203 +122,310 @@ const onBaseChange = async (baseId) =>{
 
 <template>
   <div v-if="validateInfos">
-    <div class="flex flex-row space-x-2">
-
-      <a-form-item
-          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-          label="Column"
-          v-bind="validateInfos['custom.column_id']"
-      >
-        <a-select
-            v-model:value="vModel.custom.column_id"
+    <div class="mb-2">Relation Settings</div>
+    <div class="flex items-start gap-3">
+      <div class="nc-relation-settings-table flex flex-col">
+        <div class="nc-relation-settings-table-header">Source</div>
+
+        <a-form-item class="nc-relation-settings-table-row disabled nc-ltar-source-base" v-bind="validateInfos['custom.base_id']">
+          <a-select
+            :value="meta.base_id"
             show-search
             :filter-option="filterOption"
-            dropdown-class-name="nc-dropdown-ltar-child-table"
-            @change="onDataTypeChange"
-        >
-          <a-select-option v-for="column of columns" :key="column.title" :value="column.id">
-            <div class="flex w-full items-center gap-2">
-              <div class="min-w-5 flex items-center justify-center">
-                <GeneralTableIcon :meta="column" class="text-gray-500" />
+            disabled
+            :bordered="false"
+            dropdown-class-name="nc-dropdown-ltar-source-base"
+          >
+            <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
+              <div class="flex w-full items-center gap-2">
+                <div class="min-w-5 flex items-center justify-center">
+                  <!-- <GeneralTableIcon :meta="base" class="text-gray-500" /> -->
+                  <GeneralProjectIcon :color="parseProp(base.meta).iconColor" />
+                </div>
+                <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                  <template #title>{{ base.title }}</template>
+                  <span>{{ base.title }}</span>
+                </NcTooltip>
               </div>
-              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                <template #title>{{ column.title }}</template>
-                <span>{{ column.title }}</span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item
-        class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-        label="Target base"
-        v-bind="validateInfos['custom.base_id']"
-      >
-
-        <a-select
-          v-model:value="vModel.custom.base_id"
-          show-search
-          :filter-option="filterOption"
-          dropdown-class-name="nc-dropdown-ltar-child-table"
-          @change="onBaseChange(vModel.custom.base_id)"
-        >
-          <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
-            <div class="flex w-full items-center gap-2">
-              <div class="min-w-5 flex items-center justify-center">
-                <GeneralTableIcon :meta="base" class="text-gray-500" />
-              </div>
-              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                <template #title>{{ base.title }}</template>
-                <span>{{ base.title }}</span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-    </div>
-    <div class="flex flex-row space-x-2">
-      <a-form-item
-        class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-        label="Ref table"
-        v-bind="validateInfos['custom.ref_model_id']"
-      >
-        <a-select
-          v-model:value="vModel.custom.ref_model_id"
-          show-search
-          :filter-option="filterOption"
-          dropdown-class-name="nc-dropdown-ltar-child-table"
-          @change="onModelIdChange(vModel.custom.ref_model_id)"
+            </a-select-option>
+            <template #suffixIcon>
+              <GeneralIcon class="" icon="chevronDown" />
+            </template>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          class="nc-relation-settings-table-row disabled nc-ltar-source-table"
+          v-bind="validateInfos['custom.base_id']"
         >
-          <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" />
+          <a-select
+            :value="activeTable?.id"
+            show-search
+            :filter-option="filterOption"
+            disabled
+            :bordered="false"
+            dropdown-class-name="nc-dropdown-ltar-source-table"
+          >
+            <a-select-option v-for="table of sourceTables" :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 class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item
-          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-          label="Ref column"
-          v-bind="validateInfos['custom.ref_column_id']"
-      >
-        <a-select
-            v-model:value="vModel.custom.ref_column_id"
+            </a-select-option>
+            <template #suffixIcon>
+              <GeneralIcon class="" icon="chevronDown" />
+            </template>
+          </a-select>
+        </a-form-item>
+        <a-form-item class="nc-relation-settings-table-row nc-ltar-source-column" v-bind="validateInfos['custom.column_id']">
+          <a-select
+            v-model:value="vModel.custom.column_id"
             show-search
+            placeholder="-select field-"
             :filter-option="filterOption"
-            dropdown-class-name="nc-dropdown-ltar-child-table"
+            :bordered="false"
+            :default-value="currentDisplayValueColumn?.id"
+            dropdown-class-name="nc-dropdown-ltar-source-column !text-xs"
             @change="onDataTypeChange"
-        >
-          <a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
-            <div class="flex w-full items-center gap-2">
-              <div class="min-w-5 flex items-center justify-center">
-                <GeneralTableIcon :meta="column" class="text-gray-500" />
+          >
+            <a-select-option v-for="column of columns" :key="column.title" :value="column.id">
+              <div class="flex w-full items-center gap-2">
+                <div class="min-w-5 flex items-center justify-center">
+                  <SmartsheetHeaderVirtualCellIcon
+                    v-if="isVirtualCol(column)"
+                    :column-meta="column"
+                  ></SmartsheetHeaderVirtualCellIcon>
+                  <SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
+                </div>
+                <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                  <template #title>{{ column.title }}</template>
+                  <span>{{ column.title }}</span>
+                </NcTooltip>
               </div>
-              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                <template #title>{{ column.title }}</template>
-                <span>{{ column.title }}</span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-    </div>
-
-    <template v-if="isMm">
-
-    <div class="flex flex-row space-x-2">
-      <a-form-item
-          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-          label="Junction table"
-          v-bind="validateInfos['custom.junc_model_id']"
-      >
-        <a-select
-            v-model:value="vModel.custom.junc_model_id"
+            </a-select-option>
+            <template #suffixIcon>
+              <GeneralIcon class="" icon="chevronDown" />
+            </template>
+          </a-select>
+        </a-form-item>
+      </div>
+      <template v-if="isMm">
+        <div class="nc-relation-settings-table flex flex-col">
+          <div class="nc-relation-settings-table-header">Junction</div>
+          <a-form-item
+            class="nc-relation-settings-table-row nc-ltar-junction-table"
+            v-bind="validateInfos['custom.junc_model_id']"
+          >
+            <a-select
+              v-model:value="vModel.custom.junc_model_id"
+              show-search
+              :bordered="false"
+              :filter-option="filterOption"
+              dropdown-class-name="nc-dropdown-ltar-child-table"
+              @change="onModelIdChange(vModel.custom.junc_model_id)"
+            >
+              <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 class="text-8px">({{ bases.get(table.base_id)?.title }})</span></span
+                    >
+                  </NcTooltip>
+                </div>
+              </a-select-option>
+              <template #suffixIcon>
+                <GeneralIcon class="" icon="chevronDown" />
+              </template>
+            </a-select>
+          </a-form-item>
+
+          <a-form-item
+            class="nc-relation-settings-table-row nc-ltar-junction-column"
+            v-bind="validateInfos['custom.junc_column_id']"
+          >
+            <a-select
+              v-model:value="vModel.custom.junc_column_id"
+              show-search
+              :bordered="false"
+              :filter-option="filterOption"
+              dropdown-class-name="nc-dropdown-ltar-child-table"
+              @change="onDataTypeChange"
+            >
+              <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
+                <div class="flex w-full items-center gap-2">
+                  <div class="min-w-5 flex items-center justify-center">
+                    <SmartsheetHeaderVirtualCellIcon
+                      v-if="isVirtualCol(column)"
+                      :column-meta="column"
+                    ></SmartsheetHeaderVirtualCellIcon>
+                    <SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
+                  </div>
+                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                    <template #title>{{ column.title }}</template>
+                    <span>{{ column.title }}</span>
+                  </NcTooltip>
+                </div>
+              </a-select-option>
+              <template #suffixIcon>
+                <GeneralIcon class="" icon="chevronDown" />
+              </template>
+            </a-select>
+          </a-form-item>
+
+          <a-form-item
+            class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+            label="Ref column in jn table"
+            v-bind="validateInfos['custom.junc_ref_column_id']"
+          >
+            <a-select
+              v-model:value="vModel.custom.junc_ref_column_id"
+              show-search
+              :filter-option="filterOption"
+              dropdown-class-name="nc-dropdown-ltar-child-table"
+              @change="onDataTypeChange"
+            >
+              <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
+                <div class="flex w-full items-center gap-2">
+                  <div class="min-w-5 flex items-center justify-center">
+                    <GeneralTableIcon :meta="column" class="text-gray-500" />
+                  </div>
+                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                    <template #title>{{ column.title }}</template>
+                    <span>{{ column.title }}</span>
+                  </NcTooltip>
+                </div>
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </div>
+      </template>
+      <div class="nc-relation-settings-table flex flex-col">
+        <div class="nc-relation-settings-table-header">Child</div>
+
+        <a-form-item class="nc-relation-settings-table-row nc-ltar-child-base" v-bind="validateInfos['custom.base_id']">
+          <a-select
+            v-model:value="vModel.custom.base_id"
             show-search
             :filter-option="filterOption"
-            dropdown-class-name="nc-dropdown-ltar-child-table"
-            @change="onModelIdChange(vModel.custom.junc_model_id)"
-        >
-          <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" />
+            :bordered="false"
+            dropdown-class-name="nc-dropdown-ltar-child-base"
+            @change="onBaseChange(vModel.custom.base_id)"
+          >
+            <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
+              <div class="flex w-full items-center gap-2">
+                <div class="min-w-5 flex items-center justify-center">
+                  <GeneralProjectIcon :color="parseProp(base.meta).iconColor" />
+                </div>
+                <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                  <template #title>{{ base.title }}</template>
+                  <span>{{ base.title }}</span>
+                </NcTooltip>
               </div>
-              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                <template #title>{{ table.title }}</template>
-                <span>{{ table.title }} <span class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-    </div>
-
-
-
-
-
-
-
-    <div class="flex flex-row space-x-2">
-      <a-form-item
-          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-          label="Column in jn table"
-          v-bind="validateInfos['custom.junc_column_id']"
-      >
-        <a-select
-            v-model:value="vModel.custom.junc_column_id"
+            </a-select-option>
+            <template #suffixIcon>
+              <GeneralIcon class="" icon="chevronDown" />
+            </template>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item class="nc-relation-settings-table-row nc-ltar-child-table" v-bind="validateInfos['custom.ref_model_id']">
+          <a-select
+            v-model:value="vModel.custom.ref_model_id"
             show-search
+            placeholder="-select table-"
             :filter-option="filterOption"
+            :bordered="false"
             dropdown-class-name="nc-dropdown-ltar-child-table"
-            @change="onDataTypeChange"
-        >
-          <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
-            <div class="flex w-full items-center gap-2">
-              <div class="min-w-5 flex items-center justify-center">
-                <GeneralTableIcon :meta="column" class="text-gray-500" />
+            @change="onModelIdChange(vModel.custom.ref_model_id)"
+          >
+            <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>{{ column.title }}</template>
-                <span>{{ column.title }}</span>
-              </NcTooltip>
-            </div>
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-
-      <a-form-item
-          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
-          label="Ref column in jn table"
-          v-bind="validateInfos['custom.junc_ref_column_id']"
-      >
-        <a-select
-            v-model:value="vModel.custom.junc_ref_column_id"
+            </a-select-option>
+            <template #suffixIcon>
+              <GeneralIcon class="" icon="chevronDown" />
+            </template>
+          </a-select>
+        </a-form-item>
+        <a-form-item class="nc-relation-settings-table-row nc-ltar-child-column" v-bind="validateInfos['custom.ref_column_id']">
+          <a-select
+            v-model:value="vModel.custom.ref_column_id"
             show-search
+            placeholder="-select field-"
             :filter-option="filterOption"
-            dropdown-class-name="nc-dropdown-ltar-child-table"
+            :bordered="false"
+            dropdown-class-name="nc-dropdown-ltar-child-column !text-xs"
             @change="onDataTypeChange"
-        >
-          <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
-            <div class="flex w-full items-center gap-2">
-              <div class="min-w-5 flex items-center justify-center">
-                <GeneralTableIcon :meta="column" class="text-gray-500" />
+          >
+            <a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
+              <div class="flex w-full items-center gap-2">
+                <div class="min-w-5 flex items-center justify-center">
+                  <SmartsheetHeaderVirtualCellIcon
+                    v-if="isVirtualCol(column)"
+                    :column-meta="column"
+                  ></SmartsheetHeaderVirtualCellIcon>
+                  <SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
+                </div>
+                <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                  <template #title>{{ column.title }}</template>
+                  <span>{{ column.title }}</span>
+                </NcTooltip>
               </div>
-              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
-                <template #title>{{ column.title }}</template>
-                <span>{{ column.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>
+      </div>
     </div>
-    </template>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.nc-relation-settings-table {
+  @apply min-w-[180px] w-[180px] flex flex-col border-1 border-gray-200 rounded-lg;
+
+  .nc-relation-settings-table-header {
+    @apply px-3 py-2 flex items-center space-x-3 bg-gray-100 text-xs font-semibold border-b border-gray-200;
+  }
+
+  .nc-relation-settings-table-row {
+    @apply py-[1px] w-full flex items-center space-x-2 !my-0;
+
+    &:not(:last-child) {
+      @apply border-b border-gray-200;
+    }
+
+    &.disabled {
+      @apply bg-gray-50 text-gray-400;
+    }
+    :deep(.ant-select-selector) {
+      @apply px-4 text-xs;
+
+      .ant-select-selection-search-input {
+        @apply pl-2;
+      }
+    }
+    :deep(.ant-select-arrow) {
+      @apply mr-2;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions1.vue b/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions1.vue
new file mode 100644
index 0000000000..e61dc45378
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/LinkAdvancedOptions1.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { useColumnCreateStoreOrThrow, useVModel, computed, inject, MetaInj, ref, useI18n,useBase,
+  useBases, storeToRefs, useMetas } from '#imports'
+import {
+  isCreatedOrLastModifiedByCol,
+  isCreatedOrLastModifiedTimeCol,
+  isVirtualCol,
+  ModelTypes,
+  RelationTypes,
+} from "nocodb-sdk";
+import {useTable} from "../../../composables/useTable";
+import {useTablesStore} from "../../../store/tables";
+
+const props = defineProps<{
+  value: any
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const { t } = useI18n()
+
+const meta = inject(MetaInj, ref())
+
+const vModel = useVModel(props, 'value', emit)
+
+const { validateInfos, setAdditionalValidations, onDataTypeChange } = useColumnCreateStoreOrThrow()
+
+const baseStore = useBase()
+// const { tables } = storeToRefs(baseStore)
+
+const { metas, getMeta } = useMetas()
+
+
+const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY)
+
+
+// set default value
+vModel.value.custom = {
+  base_id: meta.value?.base_id
+}
+
+
+const { basesList, bases } = storeToRefs(useBases())
+const tablesStore = useTablesStore()
+const { baseTables } = storeToRefs(tablesStore)
+
+/*const refTables = computed(() =>{
+
+  if (!tables.value || !tables.value.length) {
+    return []
+  }
+
+  return tables.value.filter((t) => t.type === ModelTypes.TABLE && t.source_id === meta.value?.source_id)
+})*/
+const refTables = computed(() =>{
+  if (!baseTables.value.get(vModel.value.custom.base_id)) {
+    return []
+  }
+
+  return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE),
+  ...(vModel.value.custom.base_id !== meta.value?.base_id ? baseTables.value.get(meta.value.base_id).filter((t) => t.type === ModelTypes.TABLE) : [])
+  ]
+})
+
+
+const columns = computed(() => {
+  if (!meta.value?.columns) {
+    return []
+  }
+
+  return meta.value.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c));
+})
+
+const refTableColumns = computed(() => {
+  if (!vModel.value.custom?.ref_model_id || !metas.value[vModel.value.custom?.ref_model_id]) {
+    return []
+  }
+
+
+  return metas.value[vModel.value.custom?.ref_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
+})
+
+const juncTableColumns = computed(() => {
+  if (!vModel.value.custom?.junc_model_id || !metas.value[vModel.value.custom?.junc_model_id]) {
+    return []
+  }
+
+
+  return metas.value[vModel.value.custom?.junc_model_id]?.columns?.filter(c => !isCreatedOrLastModifiedByCol(c) && !isCreatedOrLastModifiedTimeCol(c) && !isVirtualCol(c))
+})
+
+
+const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
+
+
+const onModelIdChange =async  (modelId:string) =>{
+  // todo: optimise
+  await getMeta(modelId, false, false, vModel.value.custom.base_id)
+  await getMeta(modelId)
+  await onDataTypeChange()
+}
+
+const onBaseChange = async (baseId) =>{
+  await tablesStore.loadProjectTables(baseId)
+  vModel.value.custom.ref_model_id = null
+}
+</script>
+
+<template>
+  <div v-if="validateInfos">
+    <div class="flex flex-row space-x-2">
+
+      <a-form-item
+          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+          label="Column"
+          v-bind="validateInfos['custom.column_id']"
+      >
+        <a-select
+            v-model:value="vModel.custom.column_id"
+            show-search
+            :filter-option="filterOption"
+            dropdown-class-name="nc-dropdown-ltar-child-table"
+            @change="onDataTypeChange"
+        >
+          <a-select-option v-for="column of columns" :key="column.title" :value="column.id">
+            <div class="flex w-full items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="column" class="text-gray-500" />
+              </div>
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                <template #title>{{ column.title }}</template>
+                <span>{{ column.title }}</span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+        label="Target base"
+        v-bind="validateInfos['custom.base_id']"
+      >
+
+        <a-select
+          v-model:value="vModel.custom.base_id"
+          show-search
+          :filter-option="filterOption"
+          dropdown-class-name="nc-dropdown-ltar-child-table"
+          @change="onBaseChange(vModel.custom.base_id)"
+        >
+          <a-select-option v-for="base of basesList" :key="base.title" :value="base.id">
+            <div class="flex w-full items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="base" class="text-gray-500" />
+              </div>
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                <template #title>{{ base.title }}</template>
+                <span>{{ base.title }}</span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+    <div class="flex flex-row space-x-2">
+      <a-form-item
+        class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+        label="Ref table"
+        v-bind="validateInfos['custom.ref_model_id']"
+      >
+        <a-select
+          v-model:value="vModel.custom.ref_model_id"
+          show-search
+          :filter-option="filterOption"
+          dropdown-class-name="nc-dropdown-ltar-child-table"
+          @change="onModelIdChange(vModel.custom.ref_model_id)"
+        >
+          <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 class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+          label="Ref column"
+          v-bind="validateInfos['custom.ref_column_id']"
+      >
+        <a-select
+            v-model:value="vModel.custom.ref_column_id"
+            show-search
+            :filter-option="filterOption"
+            dropdown-class-name="nc-dropdown-ltar-child-table"
+            @change="onDataTypeChange"
+        >
+          <a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
+            <div class="flex w-full items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="column" class="text-gray-500" />
+              </div>
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                <template #title>{{ column.title }}</template>
+                <span>{{ column.title }}</span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+
+    <template v-if="isMm">
+
+    <div class="flex flex-row space-x-2">
+      <a-form-item
+          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+          label="Junction table"
+          v-bind="validateInfos['custom.junc_model_id']"
+      >
+        <a-select
+            v-model:value="vModel.custom.junc_model_id"
+            show-search
+            :filter-option="filterOption"
+            dropdown-class-name="nc-dropdown-ltar-child-table"
+            @change="onModelIdChange(vModel.custom.junc_model_id)"
+        >
+          <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 class="text-8px">({{bases.get(table.base_id)?.title }})</span></span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+
+
+
+
+
+
+
+    <div class="flex flex-row space-x-2">
+      <a-form-item
+          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+          label="Column in jn table"
+          v-bind="validateInfos['custom.junc_column_id']"
+      >
+        <a-select
+            v-model:value="vModel.custom.junc_column_id"
+            show-search
+            :filter-option="filterOption"
+            dropdown-class-name="nc-dropdown-ltar-child-table"
+            @change="onDataTypeChange"
+        >
+          <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
+            <div class="flex w-full items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="column" class="text-gray-500" />
+              </div>
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                <template #title>{{ column.title }}</template>
+                <span>{{ column.title }}</span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+          class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+          label="Ref column in jn table"
+          v-bind="validateInfos['custom.junc_ref_column_id']"
+      >
+        <a-select
+            v-model:value="vModel.custom.junc_ref_column_id"
+            show-search
+            :filter-option="filterOption"
+            dropdown-class-name="nc-dropdown-ltar-child-table"
+            @change="onDataTypeChange"
+        >
+          <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
+            <div class="flex w-full items-center gap-2">
+              <div class="min-w-5 flex items-center justify-center">
+                <GeneralTableIcon :meta="column" class="text-gray-500" />
+              </div>
+              <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                <template #title>{{ column.title }}</template>
+                <span>{{ column.title }}</span>
+              </NcTooltip>
+            </div>
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </div>
+    </template>
+  </div>
+</template>
+