From 6be0c340f6587d55df8b56fb778816de06915b10 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:44:46 +0000
Subject: [PATCH] fix(nc-gui): field list order issue

---
 .../toolbar/FieldListAutoCompleteDropdown.vue |  7 +++-
 .../toolbar/FieldListWithSearch.vue           | 33 +++++++++++++++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 7ddc1630a6..8367bc7c84 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -69,6 +69,7 @@ const options = computed<SelectProps['options']>(() =>
     ?.sort((field1, field2) => {
       let orderVal1 = 0
       let orderVal2 = 0
+      let sortByOrder = 0
 
       if (isSystemColumn(field1)) {
         orderVal1 = 1
@@ -77,7 +78,11 @@ const options = computed<SelectProps['options']>(() =>
         orderVal2 = 1
       }
 
-      return orderVal1 - orderVal2
+      if (field1?.order !== undefined && field2?.order !== undefined) {
+        sortByOrder = field1.order - field2.order
+      }
+
+      return orderVal1 - orderVal2 || sortByOrder
     })
     ?.map((c: ColumnType) => ({
       value: c.id,
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
index ee62cd4f84..44e4f92f7f 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListWithSearch.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ColumnType } from 'nocodb-sdk'
+import { isSystemColumn, type ColumnType } from 'nocodb-sdk'
 
 const props = defineProps<{
   // As we need to focus search box when the parent is opened
@@ -13,10 +13,39 @@ const props = defineProps<{
 
 const emits = defineEmits<{ selected: [ColumnType] }>()
 
-const { isParentOpen, toolbarMenu, searchInputPlaceholder, selectedOptionId, options, showSelectedOption } = toRefs(props)
+const {
+  isParentOpen,
+  toolbarMenu,
+  searchInputPlaceholder,
+  selectedOptionId,
+  options: _options,
+  showSelectedOption,
+} = toRefs(props)
 
 const searchQuery = ref('')
 
+const options = computed(() =>
+  (_options.value || []).sort((field1, field2) => {
+    // sort and keep system columns at the end
+    let orderVal1 = 0
+    let orderVal2 = 0
+    let sortByOrder = 0
+
+    if (isSystemColumn(field1)) {
+      orderVal1 = 1
+    }
+    if (isSystemColumn(field2)) {
+      orderVal2 = 1
+    }
+
+    if (field1?.order !== undefined && field2?.order !== undefined) {
+      sortByOrder = field1.order - field2.order
+    }
+
+    return orderVal1 - orderVal2 || sortByOrder
+  }),
+)
+
 const filteredOptions = computed(
   () => options.value?.filter((c: ColumnType) => c.title?.toLowerCase().includes(searchQuery.value.toLowerCase())) ?? [],
 )