Nc fix(nc-gui): select type fields default value update issue (#7864)

* fix(nc-gui): select type fields default value update issue

* chore(nc-gui): lint

* fix(nc-gui): pr review changes #2535

* fix: remove null assertion

---------

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -527,7 +527,7 @@ const projectDelete = () => {
                     v-if="base?.sources?.[0]?.enabled"
                     key="erd"
                     data-testid="nc-sidebar-base-relations"
-                    @click="openErdView(base?.sources?.[0]!)"
+                    @click="openErdView(base?.sources?.[0])"
                   >
                     <div v-e="['c:base:erd']" class="flex gap-2 items-center">
                       <GeneralIcon icon="erd" />

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

@@ -11,6 +11,8 @@ interface Option {
   id?: string
   fk_colum_id?: string
   order?: number
+  status?: 'remove'
+  index?: number
 }
 
 const props = defineProps<{
@@ -30,7 +32,7 @@ const { optionsMagic: _optionsMagic } = useNocoEe()
 
 const optionsWrapperDomRef = ref<HTMLElement>()
 
-const options = ref<(Option & { status?: 'remove'; index?: number })[]>([])
+const options = ref<Option[]>([])
 
 const isAddingOption = ref(false)
 
@@ -39,15 +41,14 @@ const OPTIONS_PAGE_COUNT = 20
 const loadedOptionAnchor = ref(OPTIONS_PAGE_COUNT)
 const isReverseLazyLoad = ref(false)
 
-const renderedOptions = ref<(Option & { status?: 'remove'; index?: number })[]>([])
-const savedDefaultOption = ref<Option | null>(null)
-const savedCdf = ref<string | null>(null)
+const renderedOptions = ref<Option[]>([])
+const savedDefaultOption = ref<Option[]>([])
 
 const colorMenus = ref<any>({})
 
 const colors = ref(enumColor.light)
 
-const defaultOption = ref()
+const defaultOption = ref<Option[]>([])
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
@@ -115,15 +116,15 @@ onMounted(() => {
   }
 
   if (vModel.value.cdf && typeof vModel.value.cdf === 'string') {
-    const fndDefaultOption = options.value.find((el) => el.title === vModel.value.cdf)
-    if (!fndDefaultOption) {
+    const fndDefaultOption = options.value.filter((el) => el.title === vModel.value.cdf)
+    if (!fndDefaultOption.length) {
       vModel.value.cdf = vModel.value.cdf.replace(/^'/, '').replace(/'$/, '')
     }
   }
 
-  const fndDefaultOption = options.value.find((el) => el.title === vModel.value.cdf)
-  if (fndDefaultOption) {
-    defaultOption.value = fndDefaultOption
+  const fndDefaultOption = options.value.filter((el) => el.title === vModel.value.cdf)
+  if (fndDefaultOption.length) {
+    defaultOption.value = vModel.value.uidt === UITypes.SingleSelect ? [fndDefaultOption[0]] : fndDefaultOption
   }
 })
 
@@ -206,17 +207,32 @@ const removeRenderedOption = (index: number) => {
 
   const optionId = renderedOptions.value[index]?.id
 
-  if (optionId === defaultOption.value?.id) {
-    savedDefaultOption.value = { ...defaultOption.value }
-    savedCdf.value = vModel.value.cdf
-    defaultOption.value = null
-    vModel.value.cdf = null
+  const removedDefaultOption = defaultOption.value.find((o) => o.id === optionId)
+
+  if (removedDefaultOption) {
+    if (vModel.value.uidt === UITypes.SingleSelect) {
+      savedDefaultOption.value = [removedDefaultOption]
+      defaultOption.value = []
+      vModel.value.cdf = null
+    } else {
+      savedDefaultOption.value = [...savedDefaultOption.value, removedDefaultOption]
+      defaultOption.value = defaultOption.value.filter((o) => o.id !== optionId)
+      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
+    }
   }
 }
 
-const optionChanged = (changedId: string) => {
-  if (changedId && changedId === defaultOption.value?.id) {
-    vModel.value.cdf = defaultOption.value.title
+const optionChanged = (changedElement: Option) => {
+  const changedDefaultOptionIndex = defaultOption.value.findIndex((o) => o.id === changedElement.id)
+
+  if (changedDefaultOptionIndex !== -1) {
+    if (vModel.value.uidt === UITypes.SingleSelect) {
+      defaultOption.value[changedDefaultOptionIndex].title = changedElement.title
+      vModel.value.cdf = changedElement.title
+    } else {
+      defaultOption.value[changedDefaultOptionIndex].title = changedElement.title
+      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
+    }
   }
   syncOptions()
 }
@@ -235,11 +251,18 @@ const undoRemoveRenderedOption = (index: number) => {
 
   const optionId = renderedOptions.value[index]?.id
 
-  if (optionId === savedDefaultOption.value?.id) {
-    defaultOption.value = { ...savedDefaultOption.value }
-    vModel.value.cdf = savedCdf.value
-    savedDefaultOption.value = null
-    savedCdf.value = null
+  const addedDefaultOption = savedDefaultOption.value.find((o) => o.id === optionId)
+
+  if (addedDefaultOption) {
+    if (vModel.value.uidt === UITypes.SingleSelect) {
+      defaultOption.value = [addedDefaultOption]
+      vModel.value.cdf = addedDefaultOption.title
+      savedDefaultOption.value = []
+    } else {
+      defaultOption.value = [...defaultOption.value, addedDefaultOption]
+      vModel.value.cdf = defaultOption.value.map((o) => o.title).join(',')
+      savedDefaultOption.value = savedDefaultOption.value.filter((o) => o.id !== optionId)
+    }
   }
 }
 
@@ -251,12 +274,26 @@ const undoRemoveRenderedOption = (index: number) => {
 // })
 
 // Removes the Select Option from cdf if the option is removed
-watch(vModel.value, (next) => {
+watch(vModel, (next) => {
   const cdfs = (next.cdf ?? '').toString().split(',')
-  const values = (next.colOptions.options ?? []).map((col) => {
-    return col.title.replace(/^'/, '').replace(/'$/, '')
-  })
-  const newCdf = cdfs.filter((c: string) => values.includes(c)).join(',')
+
+  const valuesMap = (next.colOptions.options ?? []).reduce((acc, c) => {
+    acc[c.title.replace(/^'|'$/g, '')] = c
+    return acc
+  }, {})
+
+  defaultOption.value = []
+
+  const newCdf = cdfs
+    .filter((c: string) => {
+      if (valuesMap[c]) {
+        defaultOption.value.push(valuesMap[c])
+        return true
+      }
+      return false
+    })
+    .join(',')
+
   next.cdf = newCdf.length === 0 ? null : newCdf
 })
 
@@ -365,7 +402,7 @@ const loadListData = async ($state: any) => {
                 :data-testid="`select-column-option-input-${index}`"
                 :disabled="element.status === 'remove'"
                 @keydown.enter.prevent="element.title?.trim() && addNewOption()"
-                @change="optionChanged(element.id)"
+                @change="optionChanged(element)"
               />
             </div>