Merge pull request #7007 from nocodb/develop

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

@@ -29,7 +29,7 @@ const { optionsMagic: _optionsMagic } = useNocoEe()
 
 const optionsWrapperDomRef = ref<HTMLElement>()
 
-const options = ref<(Option & { status?: 'remove' })[]>([])
+const options = ref<(Option & { status?: 'remove'; index?: number })[]>([])
 
 const isAddingOption = ref(false)
 
@@ -38,7 +38,7 @@ const OPTIONS_PAGE_COUNT = 20
 const loadedOptionAnchor = ref(OPTIONS_PAGE_COUNT)
 const isReverseLazyLoad = ref(false)
 
-const renderedOptions = ref<(Option & { status?: 'remove' })[]>([])
+const renderedOptions = ref<(Option & { status?: 'remove'; index?: number })[]>([])
 const savedDefaultOption = ref<Option | null>(null)
 const savedCdf = ref<string | null>(null)
 
@@ -98,6 +98,12 @@ onMounted(() => {
 
   options.value = vModel.value.colOptions.options
 
+  let indexCounter = 0
+  options.value.map((el) => {
+    el.index = indexCounter++
+    return el
+  })
+
   loadedOptionAnchor.value = Math.min(loadedOptionAnchor.value, options.value.length)
 
   renderedOptions.value = [...options.value].slice(0, loadedOptionAnchor.value)
@@ -135,6 +141,7 @@ const addNewOption = () => {
   const tempOption = {
     title: '',
     color: getNextColor(),
+    index: options.value.length,
   }
   options.value.push(tempOption)
 
@@ -168,20 +175,29 @@ const addNewOption = () => {
 // }
 
 const syncOptions = () => {
-  vModel.value.colOptions.options = options.value.filter((op) => op.status !== 'remove')
+  vModel.value.colOptions.options = options.value
+    .filter((op) => op.status !== 'remove')
+    .sort((a, b) => {
+      const renderA = renderedOptions.value.findIndex((el) => a.index !== undefined && el.index === a.index)
+      const renderB = renderedOptions.value.findIndex((el) => a.index !== undefined && el.index === b.index)
+      if (renderA === -1 || renderB === -1) return 0
+      return renderA - renderB
+    })
+    .map((op) => {
+      const { index: _i, status: _s, ...rest } = op
+      return rest
+    })
 }
 
 const removeRenderedOption = (index: number) => {
   const renderedOption = renderedOptions.value[index]
-  const option = options.value[loadedOptionAnchor.value + index]
 
-  renderedOption.status = 'remove'
-  option.status = 'remove'
+  if (renderedOption.index === undefined || isNaN(renderedOption.index)) return
+
+  const option = options.value[renderedOption.index]
 
   renderedOption.status = 'remove'
-  if (option) {
-    option.status = 'remove'
-  }
+  option.status = 'remove'
 
   syncOptions()
 
@@ -204,7 +220,10 @@ const optionChanged = (changedId: string) => {
 
 const undoRemoveRenderedOption = (index: number) => {
   const renderedOption = renderedOptions.value[index]
-  const option = options.value[loadedOptionAnchor.value + index]
+
+  if (renderedOption.index === undefined || isNaN(renderedOption.index)) return
+
+  const option = options.value[renderedOption.index]
 
   renderedOption.status = undefined
   option.status = undefined

packages/nc-gui/package.json

@@ -65,7 +65,7 @@
     "locale-codes": "^1.3.1",
     "monaco-editor": "^0.33.0",
     "monaco-sql-languages": "^0.11.0",
-    "nocodb-sdk": "0.202.6",
+    "nocodb-sdk": "workspace:^",
     "papaparse": "^5.3.2",
     "parse-github-url": "^1.0.2",
     "pinia": "^2.1.4",

packages/nocodb/package.json

@@ -136,7 +136,7 @@
     "ncp": "^2.0.0",
     "nestjs-kafka": "^1.0.6",
     "nestjs-throttler-storage-redis": "^0.3.0",
-    "nocodb-sdk": "0.202.6",
+    "nocodb-sdk": "workspace:^",
     "nodemailer": "^6.4.10",
     "object-hash": "^3.0.0",
     "object-sizeof": "^2.6.1",
@@ -228,4 +228,4 @@
     "coverageDirectory": "../coverage",
     "testEnvironment": "node"
   }
-}
+}