From a58eede9511a7ce34b81c0c4860ea340115b8150 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 14 Feb 2023 17:22:41 +0530
Subject: [PATCH] refactor(gui): reset column on changing relation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/column/LookupOptions.vue  | 11 ++++++-----
 .../components/smartsheet/column/RollupOptions.vue  | 13 +++++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
index a24e9dc9bb..b205d4f06c 100644
--- a/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/LookupOptions.vue
@@ -53,26 +53,27 @@ const columns = $computed<ColumnType[]>(() => {
   return metas[selectedTable.id].columns.filter((c: ColumnType) => !isSystemColumn(c))
 })
 
-
 onMounted(() => {
   if (isEdit.value) {
     vModel.value.fk_lookup_column_id = vModel.value.colOptions?.fk_lookup_column_id
     vModel.value.fk_relation_column_id = vModel.value.colOptions?.fk_relation_column_id
-    // delete vModel.value.colOptions
   }
 })
 
+const onRelationColChange = () => {
+  vModel.value.fk_rollup_column_id = columns?.[0]?.id
+  onDataTypeChange()
+}
 </script>
 
 <template>
   <div class="p-6 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.linkToAnotherRecord')"
-                   v-bind="validateInfos.fk_relation_column_id">
+      <a-form-item class="flex w-1/2 pb-2" :label="$t('labels.linkToAnotherRecord')" v-bind="validateInfos.fk_relation_column_id">
         <a-select
           v-model:value="vModel.fk_relation_column_id"
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
-          @change="onDataTypeChange"
+          @change="onRelationColChange"
         >
           <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">
diff --git a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
index 5264e52eeb..e52ad0da7f 100644
--- a/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/RollupOptions.vue
@@ -70,18 +70,23 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c: ColumnType) => !isVirtualCol(c.uidt as UITypes) && !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter(
+    (c: ColumnType) => !isVirtualCol(c.uidt as UITypes) && (!isSystemColumn(c) || c.pk),
+  )
 })
 
-
 onMounted(() => {
   if (isEdit.value) {
     vModel.value.fk_relation_column_id = vModel.value.colOptions?.fk_relation_column_id
     vModel.value.fk_rollup_column_id = vModel.value.colOptions?.fk_rollup_column_id
     vModel.value.rollup_function = vModel.value.colOptions?.rollup_function
-    // delete vModel.value.colOptions
   }
 })
+
+const onRelationColChange = () => {
+  vModel.value.fk_rollup_column_id = columns?.[0]?.id
+  onDataTypeChange()
+}
 </script>
 
 <template>
@@ -91,7 +96,7 @@ onMounted(() => {
         <a-select
           v-model:value="vModel.fk_relation_column_id"
           dropdown-class-name="!w-64 nc-dropdown-relation-table"
-          @change="onDataTypeChange"
+          @change="onRelationColChange"
         >
           <a-select-option v-for="(table, i) of refTables" :key="i" :value="table.col.fk_column_id">
             <div class="flex flex-row space-x-0.5 h-full pb-0.5 items-center justify-between">