fix/solved issues with rollup and lookup

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

@@ -35,6 +35,8 @@ const {
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
+const onlyNameUpdateOnEditColumns = [UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup]
+
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
     ...uiTypes.filter((t) => !isEdit.value || !t.virtual),
@@ -80,6 +82,8 @@ watchEffect(() => {
       antInput.value.focus()
       antInput.value.select()
     }, 300)
+
+    advancedOptions.value = false
   }
 })
 
@@ -96,7 +100,7 @@ watch(
 </script>
 
 <template>
-  <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
+  <div class="max-w-[550px] min-w-[450px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
       <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
         <a-input
@@ -107,7 +111,10 @@ watch(
           @input="onAlter(8)"
         />
       </a-form-item>
-      <a-form-item :label="$t('labels.columnType')">
+      <a-form-item
+        v-if="!editColumnDropdown && onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt)"
+        :label="$t('labels.columnType')"
+      >
         <a-select
           v-model:value="formState.uidt"
           show-search
@@ -129,9 +136,9 @@ watch(
       <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
       <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
       <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
-      <SmartsheetColumnLookupOptions v-if="formState.uidt === UITypes.Lookup" />
+      <SmartsheetColumnLookupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Lookup" />
       <SmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" />
-      <SmartsheetColumnRollupOptions v-if="formState.uidt === UITypes.Rollup" />
+      <SmartsheetColumnRollupOptions v-if="!editColumnDropdown && formState.uidt === UITypes.Rollup" />
       <SmartsheetColumnLinkedToAnotherRecordOptions v-if="formState.uidt === UITypes.LinkToAnotherRecord" />
       <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
       <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />

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

@@ -38,6 +38,14 @@ const refTables = $computed(() => {
       }))
       .filter((table: any) => table.col?.fk_related_model_id === table.id && !table.mm) ?? []
   )
+  return meta.columns
+    .filter((c) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    .map((c) => ({
+      col: c.colOptions,
+      column: c,
+      ...tables.find((t) => t.id === c.colOptions.fk_related_model_id),
+    }))
+    .filter((table) => table.col.fk_related_model_id === table.id && !table.mm)
 })
 
 const columns = $computed(() => {
@@ -46,7 +54,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
 })
 </script>
 
@@ -54,17 +62,22 @@ const columns = $computed(() => {
   <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
-          <a-select-option v-for="(table, index) of refTables" :key="index" :value="table.col.fk_column_id">
-            <div class="flex flex-row items-center space-x-0.5 h-full">
-              <div class="font-weight-bold text-[0.7rem]">{{ table.column.title }}</div>
-
-              <div class="text-[0.5rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
+        <a-select
+          v-model:value="formState.fk_relation_column_id"
+          size="small"
+          dropdown-class-name="!w-64"
+          @change="onDataTypeChange"
+        >
+          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+            <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
+              <div class="font-semibold text-xs">{{ table.column.title }}</div>
+              <div class="text-[0.65rem] text-gray-600">
+                {{ relationNames[table.col.type] }} {{ table.title || table.table_name }}
+              </div>
             </div>
           </a-select-option>
         </a-select>
       </a-form-item>
-
       <a-form-item class="flex w-1/2" :label="$t('labels.childColumn')" v-bind="validateInfos.fk_lookup_column_id">
         <a-select
           v-model:value="formState.fk_lookup_column_id"

packages/nc-gui-v2/components/smartsheet-column/RollupOptions.vue

@@ -4,7 +4,6 @@ import { inject, useColumnCreateStoreOrThrow, useMetas, useProject } from '#impo
 import { MetaInj } from '~/context'
 
 const { formState, validateInfos, onDataTypeChange, setAdditionalValidations } = $(useColumnCreateStoreOrThrow())
-
 const { tables } = $(useProject())
 
 const meta = $(inject(MetaInj)!)
@@ -69,11 +68,18 @@ const columns = $computed(() => {
   <div class="p-4 w-full flex flex-col border-2 mb-2 mt-4">
     <div class="w-full flex flex-row space-x-2">
       <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.childTable')" v-bind="validateInfos.fk_relation_column_id">
-        <a-select v-model:value="formState.fk_relation_column_id" size="small" @change="onDataTypeChange">
-          <a-select-option v-for="(table, index) of refTables" :key="index" :value="table.col.fk_column_id">
-            <div class="flex flex-row items-center space-x-0.5">
-              <div class="font-weight-bold text-xs">{{ table.column.title }}</div>
-              <div class="text-[0.45rem]">({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})</div>
+        <a-select
+          v-model:value="formState.fk_relation_column_id"
+          size="small"
+          dropdown-class-name="!w-64"
+          @change="onDataTypeChange"
+        >
+          <a-select-option v-for="(table, index) in refTables" :key="index" :value="table.col.fk_column_id">
+            <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
+              <div class="font-semibold text-xs">{{ table.column.title }}</div>
+              <div class="text-[0.65rem] text-gray-600">
+                ({{ relationNames[table.col.type] }} {{ table.title || table.table_name }})
+              </div>
             </div>
           </a-select-option>
         </a-select>

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -11,6 +11,7 @@ import FormulaIcon from '~icons/mdi/math-integral'
 import RollupIcon from '~icons/mdi/movie-roll'
 import CountIcon from '~icons/mdi/counter'
 import SpecificDBTypeIcon from '~icons/mdi/database-settings'
+import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 
 const props = defineProps<{ columnMeta?: ColumnType }>()
 const columnMeta = toRef(props, 'columnMeta')
@@ -34,7 +35,7 @@ const icon = computed(() => {
     case UITypes.Formula:
       return FormulaIcon
     case UITypes.Lookup:
-      return GenericIcon
+      return TableColumnPlusBefore
     case UITypes.Rollup:
       return RollupIcon
     case UITypes.Count: