From ebe791395a7af6a93a6150ba8b11b7e4279e34f5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:19 +0000
Subject: [PATCH 01/15] fix: in richtext editor on backspace field status
 changes to deleted field

---
 .../components/smartsheet/details/Fields.vue  | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index e9c5ade692..8361b960aa 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -631,8 +631,14 @@ onKeyDown('ArrowUp', () => {
 onKeyDown('Delete', () => {
   if (isLocked.value) return
 
-  if (document.activeElement?.tagName === 'INPUT') return
-  if (document.activeElement?.tagName === 'TEXTAREA') return
+  if (
+    document.activeElement?.tagName === 'INPUT' ||
+    document.activeElement?.tagName === 'TEXTAREA' ||
+    // A rich text editor is a div with the contenteditable attribute set to true.
+    document.activeElement?.getAttribute('contenteditable')
+  ) {
+    return
+  }
 
   const isDeletedField = fieldStatus(activeField.value) === 'delete'
   if (!isDeletedField && activeField.value) {
@@ -643,8 +649,14 @@ onKeyDown('Delete', () => {
 onKeyDown('Backspace', () => {
   if (isLocked.value) return
 
-  if (document.activeElement?.tagName === 'INPUT') return
-  if (document.activeElement?.tagName === 'TEXTAREA') return
+  if (
+    document.activeElement?.tagName === 'INPUT' ||
+    document.activeElement?.tagName === 'TEXTAREA' ||
+    // A rich text editor is a div with the contenteditable attribute set to true.
+    document.activeElement?.getAttribute('contenteditable')
+  ) {
+    return
+  }
 
   const isDeletedField = fieldStatus(activeField.value) === 'delete'
   if (!isDeletedField && activeField.value) {

From 7a569443a16746e46e5ce35bd0e4e87627f291c3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:19 +0000
Subject: [PATCH 02/15] fix: lint errors

---
 packages/nc-gui/components/smartsheet/VirtualCell.vue  |  2 +-
 .../nc-gui/components/smartsheet/grid/GroupByLabel.vue |  2 +-
 .../virtual-cell/components/ListChildItems.vue         |  3 +--
 .../components/virtual-cell/components/ListItems.vue   |  2 +-
 packages/nc-gui/composables/useLTARStore.ts            | 10 +++++-----
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index 51a0a03a87..47e8c7c4d9 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -20,11 +20,11 @@ import {
   isLink,
   isLookup,
   isMm,
+  isPrimary,
   isQrCode,
   isRollup,
   provide,
   toRef,
-  isPrimary,
 } from '#imports'
 import type { Row } from '#imports'
 
diff --git a/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue b/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
index 977742537e..7c6dd3aa96 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupByLabel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
-import { ReadonlyInj, IsGroupByLabelInj } from '#imports'
+import { IsGroupByLabelInj, ReadonlyInj } from '#imports'
 
 defineProps<{
   column: ColumnType
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 3a35ef42b0..3599043a64 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -55,10 +55,9 @@ const {
   isChildrenListLinked,
   isChildrenLoading,
   relatedTableMeta,
-  row,
   link,
   meta,
-  headerDisplayValue
+  headerDisplayValue,
 } = useLTARStoreOrThrow()
 
 const { isNew, state, removeLTARRef, addLTARRef } = useSmartsheetRowStoreOrThrow()
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index ee5059f3b6..95e1815e65 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -49,7 +49,7 @@ const {
   meta,
   unlink,
   row,
-  headerDisplayValue
+  headerDisplayValue,
 } = useLTARStoreOrThrow()
 
 const { addLTARRef, isNew, removeLTARRef, state: rowState } = useSmartsheetRowStoreOrThrow()
diff --git a/packages/nc-gui/composables/useLTARStore.ts b/packages/nc-gui/composables/useLTARStore.ts
index 623dd8008a..8b51c2524d 100644
--- a/packages/nc-gui/composables/useLTARStore.ts
+++ b/packages/nc-gui/composables/useLTARStore.ts
@@ -1,13 +1,13 @@
 import {
-  UITypes,
   type ColumnType,
   type LinkToAnotherRecordType,
   type PaginatedType,
   type RequestParams,
   type TableType,
+  UITypes,
   dateFormats,
-  timeFormats,
   parseStringDateTime,
+  timeFormats,
 } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import {
@@ -19,6 +19,7 @@ import {
   extractSdkResponseErrorMsg,
   inject,
   message,
+  parseProp,
   reactive,
   ref,
   storeToRefs,
@@ -30,7 +31,6 @@ import {
   useRouter,
   useSharedView,
   watch,
-  parseProp,
 } from '#imports'
 import type { Row } from '#imports'
 
@@ -145,7 +145,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
         type: '',
         format: '',
       }
-      let currentColumn = relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0]
+      const currentColumn = relatedTableMeta.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0]
 
       if (currentColumn) {
         if (currentColumn?.uidt === UITypes.DateTime) {
@@ -545,7 +545,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       isChildrenExcludedLoading,
       deleteRelatedRow,
       getRelatedTableRowId,
-      headerDisplayValue
+      headerDisplayValue,
     }
   },
   'ltar-store',

From f32725190a2cee5413f7c059b814cfd4d2f8da2b Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:19 +0000
Subject: [PATCH 03/15] fix: onDrop json parse issue

---
 packages/nc-gui/components/tabs/Smartsheet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index ca6982178f..bd69aa775e 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -87,7 +87,7 @@ const onDrop = async (event: DragEvent) => {
   event.preventDefault()
   try {
     // Access the dropped data
-    const data = JSON.parse(event.dataTransfer!.getData('text/json'))
+    const data = JSON.parse(event.dataTransfer!.getData('text/json') || '{}')
     // Do something with the received data
 
     // if dragged item is not from the same source, return

From d65ba1d130579cb92c2cc0325e58ed9a88d7d480 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:19 +0000
Subject: [PATCH 04/15] fix: active field update issue on clicking save changes

---
 packages/nc-gui/components/smartsheet/details/Fields.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 8361b960aa..ed51d390a6 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -299,6 +299,9 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
         column: state,
       })
     }
+    if (activeField.value) {
+      activeField.value = state
+    }
   }
 }
 
@@ -1092,7 +1095,7 @@ const onFieldOptionUpdate = () => {
               </template>
             </Draggable>
           </div>
-          <Transition v-if="!changingField" name="slide-fade">
+          <Transition name="slide-fade">
             <div v-if="!changingField" class="border-gray-200 border-l-1 nc-scrollbar-md nc-fields-height !overflow-y-auto">
               <SmartsheetColumnEditOrAddProvider
                 v-if="activeField"

From 0ff78bc234f9b502d1f55cf5c995b07170e0c5d3 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:19 +0000
Subject: [PATCH 05/15] fix: active field update issue

---
 .../components/smartsheet/details/Fields.vue    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index ed51d390a6..3ce80a1de9 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -268,8 +268,10 @@ const duplicateField = async (field: TableExplorerColumn) => {
 const onFieldUpdate = (state: TableExplorerColumn) => {
   const col = fields.value.find((col) => compareCols(col, state))
   if (!col) return
+
   const diffs = diff(col, state)
-  if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs)) {
+
+  if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs) || isUpdated) {
     ops.value = ops.value.filter((op) => op.op === 'add' || !compareCols(op.column, state))
   } else {
     const field = ops.value.find((op) => compareCols(op.column, state))
@@ -299,9 +301,6 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
         column: state,
       })
     }
-    if (activeField.value) {
-      activeField.value = state
-    }
   }
 }
 
@@ -720,6 +719,16 @@ const onFieldOptionUpdate = () => {
     isFieldIdCopied.value = false
   }, 200)
 }
+
+watch(
+  fields,
+  () => {
+    if (activeField.value) {
+      activeField.value = fields.value.find((field) => field.id === activeField.value.id) || activeField.value
+    }
+  },
+  { deep: true },
+)
 </script>
 
 <template>

From 21ebbc5b914f8658758994379f08d2583b5986be Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:20 +0000
Subject: [PATCH 06/15] fix: field modified issue on cliking field

---
 .../components/smartsheet/details/Fields.vue  | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 3ce80a1de9..b79b20df66 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -271,7 +271,45 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
 
   const diffs = diff(col, state)
 
-  if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs) || isUpdated) {
+  // hack to prevent update status `Updated Field` when clicking on field
+  let isUpdated = true
+
+  switch (col?.uidt) {
+    case UITypes.QrCode:
+      if (Object.keys(diffs).length === 1 && col.colOptions?.fk_qr_value_column_id === state?.fk_qr_value_column_id) {
+        isUpdated = false
+      }
+      break
+    case UITypes.Barcode:
+      if (Object.keys(diffs).length === 1 && col.colOptions?.fk_barcode_value_column_id === state?.fk_barcode_value_column_id) {
+        isUpdated = false
+      }
+      break
+    case UITypes.Lookup:
+      if (
+        Object.keys(diffs).length === 2 &&
+        col.colOptions?.fk_lookup_column_id === state?.fk_lookup_column_id &&
+        col.colOptions?.fk_relation_column_id === state?.fk_relation_column_id
+      ) {
+        isUpdated = false
+      }
+      break
+    case UITypes.SingleSelect:
+    case UITypes.MultiSelect:
+      if (
+        Object.keys(diffs).length === 1 &&
+        (diffs.colOptions as SelectOptionsType).options &&
+        ((diffs.colOptions as SelectOptionsType).options.length == 0 ||
+          ((diffs.colOptions as SelectOptionsType).options[0]?.index !== undefined &&
+            Object.keys((diffs.colOptions as SelectOptionsType).options[0] || {}).length == 1))
+      ) {
+        isUpdated = false
+      }
+
+      break
+  }
+
+  if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs) || !isUpdated) {
     ops.value = ops.value.filter((op) => op.op === 'add' || !compareCols(op.column, state))
   } else {
     const field = ops.value.find((op) => compareCols(op.column, state))
@@ -516,10 +554,6 @@ const saveChanges = async () => {
       }
     }
 
-    for (const f of fields.value) {
-      console.log(f.title, getFieldOrder(f))
-    }
-
     for (const op of ops.value) {
       if (op.op === 'add') {
         if (activeField.value && compareCols(activeField.value, op.column)) {

From 5b7383688a84121e15dc3f7d7ff68261a3702734 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:20 +0000
Subject: [PATCH 07/15] fix: lint error

---
 .../components/smartsheet/details/Fields.vue      | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index b79b20df66..b768c3211a 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -276,20 +276,20 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
 
   switch (col?.uidt) {
     case UITypes.QrCode:
-      if (Object.keys(diffs).length === 1 && col.colOptions?.fk_qr_value_column_id === state?.fk_qr_value_column_id) {
+      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_qr_value_column_id === state?.fk_qr_value_column_id) {
         isUpdated = false
       }
       break
     case UITypes.Barcode:
-      if (Object.keys(diffs).length === 1 && col.colOptions?.fk_barcode_value_column_id === state?.fk_barcode_value_column_id) {
+      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_barcode_value_column_id === state?.fk_barcode_value_column_id) {
         isUpdated = false
       }
       break
     case UITypes.Lookup:
       if (
         Object.keys(diffs).length === 2 &&
-        col.colOptions?.fk_lookup_column_id === state?.fk_lookup_column_id &&
-        col.colOptions?.fk_relation_column_id === state?.fk_relation_column_id
+        col?.colOptions?.fk_lookup_column_id === state?.fk_lookup_column_id &&
+        col?.colOptions?.fk_relation_column_id === state?.fk_relation_column_id
       ) {
         isUpdated = false
       }
@@ -298,10 +298,9 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
     case UITypes.MultiSelect:
       if (
         Object.keys(diffs).length === 1 &&
-        (diffs.colOptions as SelectOptionsType).options &&
-        ((diffs.colOptions as SelectOptionsType).options.length == 0 ||
-          ((diffs.colOptions as SelectOptionsType).options[0]?.index !== undefined &&
-            Object.keys((diffs.colOptions as SelectOptionsType).options[0] || {}).length == 1))
+        diffs?.colOptions?.options &&
+        (diffs?.colOptions?.options?.length === 0 ||
+          (diffs?.colOptions?.options[0]?.index !== undefined && Object.keys(diffs?.colOptions?.options[0] || {}).length === 1))
       ) {
         isUpdated = false
       }

From 8292da3e7de115d0caa3c3b29779efaf2d5a44ff Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:20 +0000
Subject: [PATCH 08/15] fix: multifield editor field reorder issue

---
 packages/nc-gui/components/smartsheet/details/Fields.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index b768c3211a..1681b60168 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -116,6 +116,10 @@ const fields = computed<TableExplorerColumn[]>({
   },
 })
 
+const _fields = computed(() => {
+  return fields.value
+})
+
 // Current Selected Field
 const activeField = ref()
 
@@ -828,7 +832,7 @@ watch(
         </div>
         <div class="flex flex-row rounded-lg border-1 overflow-clip border-gray-200">
           <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto flex-1 flex-grow-1 nc-fields-height">
-            <Draggable v-model="fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
+            <Draggable v-model="_fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
               <template #item="{ element: field }">
                 <div
                   v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"

From 92d975fe185843d3307a94abf9dd6b7e86e85c5c Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:20 +0000
Subject: [PATCH 09/15] fix: comment info

---
 packages/nc-gui/components/smartsheet/details/Fields.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 1681b60168..9416c5f6c5 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -275,7 +275,7 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
 
   const diffs = diff(col, state)
 
-  // hack to prevent update status `Updated Field` when clicking on field
+  // hack to prevent update status `Updated Field` when clicking on field first time
   let isUpdated = true
 
   switch (col?.uidt) {
@@ -308,7 +308,6 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
       ) {
         isUpdated = false
       }
-
       break
   }
 

From 6d3bc801ce84e133c15be35b97e879c8fe4c8dd0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:20 +0000
Subject: [PATCH 10/15] fix: multifield editor on click field status update
 issues

---
 .../components/smartsheet/details/Fields.vue  | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 9416c5f6c5..85ea412fdb 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -280,20 +280,20 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
 
   switch (col?.uidt) {
     case UITypes.QrCode:
-      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_qr_value_column_id === state?.fk_qr_value_column_id) {
+      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_qr_value_column_id === diffs?.fk_qr_value_column_id) {
         isUpdated = false
       }
       break
     case UITypes.Barcode:
-      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_barcode_value_column_id === state?.fk_barcode_value_column_id) {
+      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_barcode_value_column_id === diffs?.fk_barcode_value_column_id) {
         isUpdated = false
       }
       break
     case UITypes.Lookup:
       if (
         Object.keys(diffs).length === 2 &&
-        col?.colOptions?.fk_lookup_column_id === state?.fk_lookup_column_id &&
-        col?.colOptions?.fk_relation_column_id === state?.fk_relation_column_id
+        col?.colOptions?.fk_lookup_column_id === diffs?.fk_lookup_column_id &&
+        col?.colOptions?.fk_relation_column_id === diffs?.fk_relation_column_id
       ) {
         isUpdated = false
       }
@@ -309,6 +309,21 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
         isUpdated = false
       }
       break
+    case UITypes.Formula:
+      if (Object.keys(diffs).length === 1 && col?.colOptions?.formula_raw === diffs?.formula_raw) {
+        isUpdated = false
+      }
+      break
+    case UITypes.Rollup:
+      if (
+        Object.keys(diffs).length === 3 &&
+        col?.colOptions?.fk_relation_column_id === diffs?.fk_relation_column_id &&
+        col?.colOptions?.fk_rollup_column_id === diffs?.fk_rollup_column_id &&
+        col?.colOptions?.rollup_function === diffs?.rollup_function
+      ) {
+        isUpdated = false
+      }
+      break
   }
 
   if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs) || !isUpdated) {

From 7b1cb7cb751900f5b28b631f736e257d341376de Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:20 +0000
Subject: [PATCH 11/15] fix: reorder and status update issue for some fields

---
 .../components/smartsheet/details/Fields.vue  | 113 ++++++++++--------
 1 file changed, 66 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 85ea412fdb..44623b3b5b 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -100,6 +100,7 @@ const fields = computed<TableExplorerColumn[]>({
     const x = ((meta.value?.columns as ColumnType[]) ?? [])
       .filter((field) => !field.fk_column_id && !isSystemColumn(field))
       .concat(newFields.value)
+      .map((field) => updateDefaultColumnValues(field))
       .sort((a, b) => {
         return getFieldOrder(a) - getFieldOrder(b)
       })
@@ -278,52 +279,21 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
   // hack to prevent update status `Updated Field` when clicking on field first time
   let isUpdated = true
 
-  switch (col?.uidt) {
-    case UITypes.QrCode:
-      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_qr_value_column_id === diffs?.fk_qr_value_column_id) {
-        isUpdated = false
-      }
-      break
-    case UITypes.Barcode:
-      if (Object.keys(diffs).length === 1 && col?.colOptions?.fk_barcode_value_column_id === diffs?.fk_barcode_value_column_id) {
-        isUpdated = false
-      }
-      break
-    case UITypes.Lookup:
-      if (
-        Object.keys(diffs).length === 2 &&
-        col?.colOptions?.fk_lookup_column_id === diffs?.fk_lookup_column_id &&
-        col?.colOptions?.fk_relation_column_id === diffs?.fk_relation_column_id
-      ) {
-        isUpdated = false
-      }
-      break
-    case UITypes.SingleSelect:
-    case UITypes.MultiSelect:
-      if (
-        Object.keys(diffs).length === 1 &&
-        diffs?.colOptions?.options &&
-        (diffs?.colOptions?.options?.length === 0 ||
-          (diffs?.colOptions?.options[0]?.index !== undefined && Object.keys(diffs?.colOptions?.options[0] || {}).length === 1))
-      ) {
-        isUpdated = false
-      }
-      break
-    case UITypes.Formula:
-      if (Object.keys(diffs).length === 1 && col?.colOptions?.formula_raw === diffs?.formula_raw) {
-        isUpdated = false
-      }
-      break
-    case UITypes.Rollup:
-      if (
-        Object.keys(diffs).length === 3 &&
-        col?.colOptions?.fk_relation_column_id === diffs?.fk_relation_column_id &&
-        col?.colOptions?.fk_rollup_column_id === diffs?.fk_rollup_column_id &&
-        col?.colOptions?.rollup_function === diffs?.rollup_function
-      ) {
-        isUpdated = false
-      }
-      break
+  if (
+    [UITypes.SingleSelect, UITypes.MultiSelect].includes(col.uidt) &&
+    Object.keys(diffs).length === 1 &&
+    diffs?.colOptions?.options &&
+    (diffs?.colOptions?.options?.length === 0 ||
+      (diffs?.colOptions?.options[0]?.index !== undefined && Object.keys(diffs?.colOptions?.options[0] || {}).length === 1))
+  ) {
+    isUpdated = false
+  }
+
+  if (!isUpdated) {
+    let field = fields.value.find((field) => compareCols(field, state))
+    if (field) {
+      field = state
+    }
   }
 
   if (Object.keys(diffs).length === 0 || (Object.keys(diffs).length === 1 && 'altered' in diffs) || !isUpdated) {
@@ -495,6 +465,52 @@ const isColumnValid = (column: TableExplorerColumn) => {
   return true
 }
 
+const updateDefaultColumnValues = (column: TableExplorerColumn) => {
+  if (column.uidt === UITypes.QrCode && column.colOptions?.fk_qr_value_column_id) {
+    if (!column?.fk_qr_value_column_id) {
+      column.fk_qr_value_column_id = column.colOptions.fk_qr_value_column_id
+    }
+  }
+
+  if (column.uidt === UITypes.Barcode && column.colOptions?.fk_barcode_value_column_id) {
+    if (!column?.fk_barcode_value_column_id) {
+      column.fk_barcode_value_column_id = column.colOptions.fk_barcode_value_column_id
+    }
+  }
+
+  if (column.uidt === UITypes.Lookup && column?.colOptions?.fk_lookup_column_id && column?.colOptions?.fk_relation_column_id) {
+    if (!column?.fk_lookup_column_id) {
+      column.fk_lookup_column_id = column.colOptions.fk_lookup_column_id
+    }
+    if (!column?.fk_relation_column_id) {
+      column.fk_relation_column_id = column.colOptions.fk_relation_column_id
+    }
+  }
+
+  if (
+    column.uidt === UITypes.Rollup &&
+    column?.colOptions?.fk_relation_column_id &&
+    column?.colOptions?.fk_rollup_column_id &&
+    column?.colOptions?.rollup_function
+  ) {
+    if (!column?.fk_relation_column_id) {
+      column.fk_relation_column_id = column.colOptions.fk_relation_column_id
+    }
+    if (!column?.fk_rollup_column_id) {
+      column.fk_rollup_column_id = column.colOptions.fk_rollup_column_id
+    }
+    if (!column?.rollup_function) {
+      column.rollup_function = column.colOptions.rollup_function
+    }
+  }
+
+  if (column.uidt === UITypes.Formula && column.colOptions?.formula_raw && !column?.formula_raw) {
+    column.formula_raw = column.colOptions?.formula_raw
+  }
+
+  return column
+}
+
 const recoverField = (state: TableExplorerColumn) => {
   const field = ops.value.find((op) => compareCols(op.column, state))
   if (field) {
@@ -598,7 +614,10 @@ const saveChanges = async () => {
     await loadViewColumns()
 
     if (res) {
-      ops.value = (res.failedOps as op[]) || []
+      ops.value =
+        res.failedOps && res.failedOps?.length
+          ? (res.failedOps as (op & { error: unknown })[]).map(({ error, ...rest }) => rest)
+          : []
       newFields.value = newFields.value.filter((col) => {
         if (res.failedOps) {
           const op = res.failedOps.find((fop) => {

From e20f0be5cf75942e7140958d1559ce4cc80cc8e5 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:21 +0000
Subject: [PATCH 12/15] fix: duplicate fields in payload issue

---
 .../components/smartsheet/details/Fields.vue  | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 44623b3b5b..03bd63e746 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -318,7 +318,7 @@ const onFieldUpdate = (state: TableExplorerColumn) => {
       return
     }
 
-    if (field && !moveField) {
+    if (field || (field && moveField)) {
       field.column = state
     } else {
       ops.value.push({
@@ -403,6 +403,19 @@ const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
     return
   }
 
+  const mop = moveOps.value.find((op) => compareCols(op.column, fields.value[_event.moved.oldIndex]))
+  if (mop) {
+    mop.index = _event.moved.newIndex
+    mop.order = order
+  } else {
+    moveOps.value.push({
+      op: 'move',
+      column: fields.value[_event.moved.oldIndex],
+      index: _event.moved.newIndex,
+      order,
+    })
+  }
+
   if (op) {
     onFieldUpdate({
       ...op.column,
@@ -420,19 +433,6 @@ const onMove = (_event: { moved: { newIndex: number; oldIndex: number } }) => {
       },
     })
   }
-
-  const mop = moveOps.value.find((op) => compareCols(op.column, fields.value[_event.moved.oldIndex]))
-  if (mop) {
-    mop.index = _event.moved.newIndex
-    mop.order = order
-  } else {
-    moveOps.value.push({
-      op: 'move',
-      column: fields.value[_event.moved.oldIndex],
-      index: _event.moved.newIndex,
-      order,
-    })
-  }
 }
 
 const isColumnValid = (column: TableExplorerColumn) => {
@@ -585,6 +585,13 @@ const saveChanges = async () => {
           view_id: view.value?.id as string,
         }
       }
+      
+      if (op && op.op === 'update') {
+        op.column.column_order = {
+          order: mop.order,
+          view_id: view.value?.id as string,
+        }
+      }
     }
 
     for (const op of ops.value) {

From de58fc34869c2a60fd10cdd7df625c5e7b60ce11 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:21 +0000
Subject: [PATCH 13/15] feat: bulk update reorder view support for Links &
 LinkToAnotherRecord

---
 .../nocodb/src/services/columns.service.ts    | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/nocodb/src/services/columns.service.ts b/packages/nocodb/src/services/columns.service.ts
index b07d36a485..40830ca928 100644
--- a/packages/nocodb/src/services/columns.service.ts
+++ b/packages/nocodb/src/services/columns.service.ts
@@ -52,6 +52,7 @@ import {
   KanbanView,
   Model,
   Source,
+  View,
 } from '~/models';
 import Noco from '~/Noco';
 import NcConnectionMgrv2 from '~/utils/common/NcConnectionMgrv2';
@@ -195,7 +196,8 @@ export class ColumnsService {
       formula?: string;
       formula_raw?: string;
       parsed_tree?: any;
-    };
+    } & Partial<Pick<ColumnReqType, 'column_order'>>;
+    
     if (
       isCreatedOrLastModifiedTimeCol(column) ||
       [
@@ -274,7 +276,28 @@ export class ColumnsService {
               meta: colBody.meta,
             });
           }
+
+          if (
+            [UITypes.Links, UITypes.LinkToAnotherRecord].includes(
+              column.uidt,
+            ) &&
+            colBody?.column_order &&
+            colBody.column_order?.order &&
+            colBody.column_order?.view_id
+          ) {
+            const viewColumn = (
+              await View.getColumns(colBody.column_order.view_id)
+            ).find((col) => col.fk_column_id === column.id);
+            await View.updateColumn(
+              colBody.column_order.view_id,
+              viewColumn.id,
+              {
+                order: colBody.column_order.order,
+              },
+            );
+          }
         }
+
         await this.updateRollupOrLookup(colBody, column);
       } else {
         NcError.notImplemented(

From 88e28da71f03bb7c99b784e310b7e7b89196bde4 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:21 +0000
Subject: [PATCH 14/15] fix: lint error

---
 packages/nocodb/src/services/columns.service.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nocodb/src/services/columns.service.ts b/packages/nocodb/src/services/columns.service.ts
index 40830ca928..94edb59fad 100644
--- a/packages/nocodb/src/services/columns.service.ts
+++ b/packages/nocodb/src/services/columns.service.ts
@@ -197,7 +197,7 @@ export class ColumnsService {
       formula_raw?: string;
       parsed_tree?: any;
     } & Partial<Pick<ColumnReqType, 'column_order'>>;
-    
+
     if (
       isCreatedOrLastModifiedTimeCol(column) ||
       [
@@ -277,6 +277,7 @@ export class ColumnsService {
             });
           }
 
+          // handle reorder column for Links and LinkToAnotherRecord
           if (
             [UITypes.Links, UITypes.LinkToAnotherRecord].includes(
               column.uidt,

From c1b0991521a57a745928bfb1f22f4a301d90f3df Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Mon, 8 Jan 2024 08:42:21 +0000
Subject: [PATCH 15/15] fix: review changes

---
 .../nc-gui/components/smartsheet/details/Fields.vue  | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index 03bd63e746..7f32a19197 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -117,10 +117,6 @@ const fields = computed<TableExplorerColumn[]>({
   },
 })
 
-const _fields = computed(() => {
-  return fields.value
-})
-
 // Current Selected Field
 const activeField = ref()
 
@@ -465,7 +461,7 @@ const isColumnValid = (column: TableExplorerColumn) => {
   return true
 }
 
-const updateDefaultColumnValues = (column: TableExplorerColumn) => {
+function updateDefaultColumnValues(column: TableExplorerColumn) {
   if (column.uidt === UITypes.QrCode && column.colOptions?.fk_qr_value_column_id) {
     if (!column?.fk_qr_value_column_id) {
       column.fk_qr_value_column_id = column.colOptions.fk_qr_value_column_id
@@ -585,7 +581,7 @@ const saveChanges = async () => {
           view_id: view.value?.id as string,
         }
       }
-      
+
       if (op && op.op === 'update') {
         op.column.column_order = {
           order: mop.order,
@@ -623,7 +619,7 @@ const saveChanges = async () => {
     if (res) {
       ops.value =
         res.failedOps && res.failedOps?.length
-          ? (res.failedOps as (op & { error: unknown })[]).map(({ error, ...rest }) => rest)
+          ? (res.failedOps as (op & { error: unknown })[]).map(({ error: _, ...rest }) => rest)
           : []
       newFields.value = newFields.value.filter((col) => {
         if (res.failedOps) {
@@ -872,7 +868,7 @@ watch(
         </div>
         <div class="flex flex-row rounded-lg border-1 overflow-clip border-gray-200">
           <div ref="fieldsListWrapperDomRef" class="nc-scrollbar-md !overflow-auto flex-1 flex-grow-1 nc-fields-height">
-            <Draggable v-model="_fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
+            <Draggable :model-value="fields" :disabled="isLocked" item-key="id" @change="onMove($event)">
               <template #item="{ element: field }">
                 <div
                   v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase()) && !field.pv"