From 84fb8299bc695378d585d6c0be49de4b15ab966e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 4 Jun 2024 17:09:39 +0530
Subject: [PATCH] Nc fix/select type default value update issue if option is
 new (#8638)

* fix(nc-gui): update field modal column type search by it displayed name instead of UITypes

* fix(nc-gui): select type default value update issue if we create new column

* fix(nc-gui): refactor select type default value update code

* fix(nc-gui): allow search column type by it's type as well as display text
---
 .../components/smartsheet/column/EditOrAdd.vue       |  8 ++++++++
 .../components/smartsheet/column/SelectOptions.vue   | 12 +++++++++---
 .../smartsheet/column/UITypesOptionsWithSearch.vue   |  7 ++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index e2876d7bad..c272eb8cbb 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -269,6 +269,13 @@ const submitBtnLabel = computed(() => {
     loadingLabel: `${isEdit.value && !props.columnLabel ? t('general.updating') : t('general.saving')} ${columnLabel.value}`,
   }
 })
+
+const filterOption = (input: string, option: { value: UITypes }) => {
+  return (
+    option.value.toLowerCase().includes(input.toLowerCase()) ||
+    (UITypesName[option.value] && UITypesName[option.value].toLowerCase().includes(input.toLowerCase()))
+  )
+}
 </script>
 
 <template>
@@ -329,6 +336,7 @@ const submitBtnLabel = computed(() => {
             class="nc-column-type-input !rounded-lg"
             :disabled="isKanban || readOnly || (isEdit && !!onlyNameUpdateOnEditColumns.find((col) => col === formState.uidt))"
             dropdown-class-name="nc-dropdown-column-type border-1 !rounded-lg border-gray-200"
+            :filter-option="filterOption"
             @dropdown-visible-change="onDropdownChange"
             @change="onUidtOrIdTypeChange"
             @dblclick="showDeprecated = !showDeprecated"
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index 8241249cb7..f6ce22616d 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -22,7 +22,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, isEdit } = useColumnCreateStoreOrThrow()
 
 // const { base } = storeToRefs(useBase())
 
@@ -186,7 +186,7 @@ const syncOptions = () => {
       return renderA - renderB
     })
     .map((op) => {
-      const { index: _i, status: _s, ...rest } = op
+      const { status: _s, ...rest } = op
       return rest
     })
 }
@@ -221,7 +221,13 @@ const removeRenderedOption = (index: number) => {
 }
 
 const optionChanged = (changedElement: Option) => {
-  const changedDefaultOptionIndex = defaultOption.value.findIndex((o) => o.id === changedElement.id)
+  const changedDefaultOptionIndex = defaultOption.value.findIndex((o) => {
+    if (o.id !== undefined && changedElement.id !== undefined) {
+      return o.id === changedElement.id
+    } else {
+      return o.index === changedElement.index
+    }
+  })
 
   if (changedDefaultOptionIndex !== -1) {
     if (vModel.value.uidt === UITypes.SingleSelect) {
diff --git a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
index 4081dd38dc..3312381990 100644
--- a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
+++ b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
@@ -13,7 +13,12 @@ const { options } = toRefs(props)
 const searchQuery = ref('')
 
 const filteredOptions = computed(
-  () => options.value?.filter((c) => c.name.toLowerCase().includes(searchQuery.value.toLowerCase())) ?? [],
+  () =>
+    options.value?.filter(
+      (c) =>
+        c.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+        (UITypesName[c.name] && UITypesName[c.name].toLowerCase().includes(searchQuery.value.toLowerCase())),
+    ) ?? [],
 )
 
 const inputRef = ref()