feat(nc-gui): update advance link field modal with new design

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

@@ -363,6 +363,7 @@ const isFullUpdateAllowed = computed(() => {
       'min-w-[500px]': formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links,
       'overflow-visible': formState.uidt === UITypes.Formula,
       '!w-[600px]': formState.uidt === UITypes.LinkToAnotherRecord || formState.uidt === UITypes.Links,
+      'min-w-[400px] !w-full': isLinksOrLTAR(formState.uidt),
       'shadow-lg shadow-gray-300 border-1 border-gray-200 rounded-xl p-5': !embedMode,
     }"
     @keydown="handleEscape"

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

@@ -44,9 +44,15 @@ const { metas, getMeta } = useMetas()
 
 const isMm = computed(() => vModel.value.type === RelationTypes.MANY_TO_MANY)
 
+const pkColumn = computed(() => {
+  return meta?.value?.columns?.find((f) => f.pk)
+})
+
 // set default value
 vModel.value.custom = {
   base_id: meta.value?.base_id,
+  column_id: pkColumn.value?.id,
+  junc_base_id: meta.value?.base_id,
 }
 
 console.log('meta', meta.value, vModel.value)
@@ -54,8 +60,8 @@ const { basesList, bases } = storeToRefs(useBases())
 const tablesStore = useTablesStore()
 const { baseTables, activeTable, activeTables: sourceTables } = storeToRefs(tablesStore)
 
-const currentDisplayValueColumn = computed(() => {
+const sourceColumn = computed(() => {
-  return meta?.value?.columns?.find((f) => f.pv)
+  return meta?.value?.columns?.find((f) => vModel.value.custom?.column_id === f.id)
 })
 
 /*const refTables = computed(() =>{
@@ -75,6 +81,14 @@ const refTables = computed(() => {
   return [...baseTables.value.get(vModel.value.custom.base_id).filter((t) => t.type === ModelTypes.TABLE)]
 })
 
+const junctionTables = computed(() => {
+  if (!baseTables.value.get(vModel.value.custom.junc_base_id)) {
+    return []
+  }
+
+  return [...baseTables.value.get(vModel.value.custom.junc_base_id).filter((t) => t.type === ModelTypes.TABLE)]
+})
+
 const columns = computed(() => {
   if (!meta.value?.columns) {
     return []
@@ -107,17 +121,52 @@ const juncTableColumns = computed(() => {
 
 const filterOption = (value: string, option: { key: string }) => option.key.toLowerCase().includes(value.toLowerCase())
 
-const onModelIdChange = async (modelId: string) => {
+const resetSelectedColumns = (isJunction: boolean = false) => {
+  if (isJunction) {
+    if (vModel.value.custom.junc_column_id) {
+      vModel.value.custom.junc_column_id = null
+    }
+    if (vModel.value.custom.junc_ref_column_id) {
+      vModel.value.custom.junc_ref_column_id = null
+    }
+  } else {
+    if (vModel.value.custom.ref_column_id) {
+      vModel.value.custom.ref_column_id = null
+    }
+  }
+}
+const onModelIdChange = async (modelId: string, isJunctionModel: boolean = false) => {
   // todo: optimise
   await getMeta(modelId, false, false, vModel.value.custom.base_id)
   await getMeta(modelId)
   await onDataTypeChange()
+  resetSelectedColumns(isJunctionModel)
 }
 
-const onBaseChange = async (baseId) => {
+const onBaseChange = async (baseId, isJunctionBase: boolean = false) => {
   await tablesStore.loadProjectTables(baseId)
+
+  if (isJunctionBase) {
+    if (vModel.value.custom.junc_model_id) {
+      vModel.value.custom.junc_model_id = null
+    }
+    resetSelectedColumns(true)
+  } else {
+    if (vModel.value.custom.ref_model_id) {
       vModel.value.custom.ref_model_id = null
     }
+    resetSelectedColumns(false)
+  }
+}
+
+watch(pkColumn, () => {
+  if (pkColumn.value?.id && !vModel.value.custom?.column_id) {
+    vModel.value.custom = {
+      ...vModel.value.custom,
+      column_id: pkColumn.value.id,
+    }
+  }
+})
 </script>
 
 <template>
@@ -189,7 +238,6 @@ const onBaseChange = async (baseId) => {
             placeholder="-select field-"
             :filter-option="filterOption"
             :bordered="false"
-            :default-value="currentDisplayValueColumn?.id"
             dropdown-class-name="nc-dropdown-ltar-source-column !text-xs"
             @change="onDataTypeChange"
           >
@@ -212,11 +260,38 @@ const onBaseChange = async (baseId) => {
               <GeneralIcon class="" icon="chevronDown" />
             </template>
           </a-select>
+          <div class="nc-relation-settings-table-connector-point nc-right" :class="`column-type-${vModel.type}`"></div>
         </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-base" v-bind="validateInfos['custom.junc_base_id']">
+            <a-select
+              v-model:value="vModel.custom.junc_base_id"
+              show-search
+              :filter-option="filterOption"
+              :bordered="false"
+              dropdown-class-name="nc-dropdown-ltar-junction-base"
+              @change="onBaseChange(vModel.custom.junc_base_id, true)"
+            >
+              <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>
+              </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-table"
             v-bind="validateInfos['custom.junc_model_id']"
@@ -224,21 +299,20 @@ const onBaseChange = async (baseId) => {
             <a-select
               v-model:value="vModel.custom.junc_model_id"
               show-search
+              placeholder="-select table-"
               :bordered="false"
               :filter-option="filterOption"
-              dropdown-class-name="nc-dropdown-ltar-child-table"
+              dropdown-class-name="nc-dropdown-ltar-junction-table"
-              @change="onModelIdChange(vModel.custom.junc_model_id)"
+              @change="onModelIdChange(vModel.custom.junc_model_id, true)"
             >
-              <a-select-option v-for="table of refTables" :key="table.title" :value="table.id">
+              <a-select-option v-for="table of junctionTables" :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
+                    <span>{{ table.title }}</span>
-                      >{{ table.title }} <span class="text-8px">({{ bases.get(table.base_id)?.title }})</span></span
-                    >
                   </NcTooltip>
                 </div>
               </a-select-option>
@@ -249,15 +323,16 @@ const onBaseChange = async (baseId) => {
           </a-form-item>
 
           <a-form-item
-            class="nc-relation-settings-table-row nc-ltar-junction-column"
+            class="nc-relation-settings-table-row nc-ltar-source-junction-column"
             v-bind="validateInfos['custom.junc_column_id']"
           >
             <a-select
               v-model:value="vModel.custom.junc_column_id"
               show-search
+              placeholder="-select field-"
               :bordered="false"
               :filter-option="filterOption"
-              dropdown-class-name="nc-dropdown-ltar-child-table"
+              dropdown-class-name="nc-dropdown-ltar-source-junction-column"
               @change="onDataTypeChange"
             >
               <a-select-option v-for="column of juncTableColumns" :key="column.title" :value="column.id">
@@ -269,8 +344,10 @@ const onBaseChange = async (baseId) => {
                     ></SmartsheetHeaderVirtualCellIcon>
                     <SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
                   </div>
-                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                  <NcTooltip class="flex-1 truncate" :show-on-truncate-only="sourceColumn?.dt === column.dt">
-                    <template #title>{{ column.title }}</template>
+                    <template #title>{{
+                      sourceColumn?.dt === column.dt ? column.title : `Incompatible with column '${sourceColumn?.title}'`
+                    }}</template>
                     <span>{{ column.title }}</span>
                   </NcTooltip>
                 </div>
@@ -279,32 +356,44 @@ const onBaseChange = async (baseId) => {
                 <GeneralIcon class="" icon="chevronDown" />
               </template>
             </a-select>
+            <div class="nc-relation-settings-table-connector-point nc-left" :class="`column-type-${vModel.type}`"></div>
           </a-form-item>
 
           <a-form-item
-            class="flex w-full pb-2 mt-4 nc-ltar-child-table"
+            class="nc-relation-settings-table-row nc-ltar-child-junction-column"
-            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
+              placeholder="-select field-"
+              :bordered="false"
               :filter-option="filterOption"
-              dropdown-class-name="nc-dropdown-ltar-child-table"
+              dropdown-class-name="nc-dropdown-ltar-child-junction-column"
               @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" />
+                    <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>
+                  <NcTooltip class="flex-1 truncate" :show-on-truncate-only="sourceColumn?.dt === column.dt">
-                    <template #title>{{ column.title }}</template>
+                    <template #title>{{
+                      sourceColumn?.dt === column.dt ? column.title : `Incompatible with column '${sourceColumn?.title}'`
+                    }}</template>
                     <span>{{ column.title }}</span>
                   </NcTooltip>
                 </div>
               </a-select-option>
+              <template #suffixIcon>
+                <GeneralIcon class="" icon="chevronDown" />
+              </template>
             </a-select>
+            <div class="nc-relation-settings-table-connector-point nc-right" :class="`column-type-${vModel.type}`"></div>
           </a-form-item>
         </div>
       </template>
@@ -373,7 +462,12 @@ const onBaseChange = async (baseId) => {
             dropdown-class-name="nc-dropdown-ltar-child-column !text-xs"
             @change="onDataTypeChange"
           >
-            <a-select-option v-for="column of refTableColumns" :key="column.title" :value="column.id">
+            <a-select-option
+              v-for="column of refTableColumns"
+              :key="column.title"
+              :value="column.id"
+              :disabled="sourceColumn?.dt !== column.dt"
+            >
               <div class="flex w-full items-center gap-2">
                 <div class="min-w-5 flex items-center justify-center">
                   <SmartsheetHeaderVirtualCellIcon
@@ -382,8 +476,10 @@ const onBaseChange = async (baseId) => {
                   ></SmartsheetHeaderVirtualCellIcon>
                   <SmartsheetHeaderCellIcon v-else :column-meta="column"></SmartsheetHeaderCellIcon>
                 </div>
-                <NcTooltip class="flex-1 truncate" show-on-truncate-only>
+                <NcTooltip class="flex-1 truncate" :show-on-truncate-only="sourceColumn?.dt === column.dt">
-                  <template #title>{{ column.title }}</template>
+                  <template #title>{{
+                    sourceColumn?.dt === column.dt ? column.title : `Incompatible with column '${sourceColumn?.title}'`
+                  }}</template>
                   <span>{{ column.title }}</span>
                 </NcTooltip>
               </div>
@@ -392,6 +488,7 @@ const onBaseChange = async (baseId) => {
               <GeneralIcon class="" icon="chevronDown" />
             </template>
           </a-select>
+          <div class="nc-relation-settings-table-connector-point nc-left" :class="`column-type-${vModel.type}`"></div>
         </a-form-item>
       </div>
     </div>
@@ -407,7 +504,7 @@ const onBaseChange = async (baseId) => {
   }
 
   .nc-relation-settings-table-row {
-    @apply py-[1px] w-full flex items-center space-x-2 !my-0;
+    @apply py-[1px] w-full flex items-center space-x-2 !my-0 relative;
 
     &:not(:last-child) {
       @apply border-b border-gray-200;
@@ -426,6 +523,28 @@ const onBaseChange = async (baseId) => {
     :deep(.ant-select-arrow) {
       @apply mr-2;
     }
+
+    .nc-relation-settings-table-connector-point {
+      @apply absolute top-[50%] rounded-full w-2 h-2;
+      transform: translateY(-50%);
+
+      &.nc-right {
+        @apply -right-1;
+      }
+
+      &.nc-left {
+        @apply -left-1;
+      }
+    }
+    .column-type-mm {
+      @apply bg-pink-500;
+    }
+    .column-type-hm {
+      @apply bg-orange-500;
+    }
+    .column-type-oo {
+      @apply bg-purple-500;
+    }
   }
 }
 </style>

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

@@ -186,11 +186,8 @@ const onCustomSwitchToggle = () => {
 </script>
 
 <template>
-  <div class="w-full flex flex-col mb-2 mt-4">
+  <div class="w-full flex flex-col mb-2 mt-2">
-    <div class="mb-2">
+    <div class="mb-2">Relation Type <span class="text-red-500">*</span></div>
-      Relation Type <span class="text-red-500">*</span>
-      <a-switch v-model:checked="vModel.is_custom_link" size="small" name="Custom" @change="onCustomSwitchToggle" /> Custom
-    </div>
     <div class="border-2 p-6">
     <div class="flex flex-col gap-4">
       <a-form-item :label="$t('labels.relationType')" v-bind="validateInfos.type" class="nc-ltar-relation-type">
@@ -216,7 +213,11 @@ const onCustomSwitchToggle = () => {
         </a-radio-group>
       </a-form-item>
     </div>
-    <div class="mt-6">
+    <div 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">
       <LazySmartsheetColumnLinkAdvancedOptions v-if="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">