From 0f9890d33b7dd2ed47c51282925b83445e5d6752 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 10 Dec 2024 07:57:58 +0000
Subject: [PATCH] fix(nc-gui): update change display value modal

---
 packages/nc-gui/components/nc/List/index.vue  | 21 ++++--
 .../smartsheet/header/UpdateDisplayValue.vue  | 74 ++++++++-----------
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/nc/List/index.vue b/packages/nc-gui/components/nc/List/index.vue
index 311780889d..e56fa597d5 100644
--- a/packages/nc-gui/components/nc/List/index.vue
+++ b/packages/nc-gui/components/nc/List/index.vue
@@ -381,18 +381,27 @@ watch(
                 @click="handleSelectOption(option, idx)"
               >
                 <slot name="listItem" :option="option" :is-selected="() => compareVModel(option[optionValueKey])" :index="idx">
+                  <slot name="listItemExtraLeft" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
+                  </slot>
+
                   <NcTooltip class="truncate flex-1" show-on-truncate-only>
                     <template #title>
                       {{ option[optionLabelKey] }}
                     </template>
                     {{ option[optionLabelKey] }}
                   </NcTooltip>
-                  <GeneralIcon
-                    v-if="showSelectedOption && compareVModel(option[optionValueKey])"
-                    id="nc-selected-item-icon"
-                    icon="check"
-                    class="flex-none text-primary w-4 h-4"
-                  />
+
+                  <slot name="listItemExtraRight" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
+                  </slot>
+
+                  <slot name="listItemSelectedIcon" :option="option" :is-selected="() => compareVModel(option[optionValueKey])">
+                    <GeneralIcon
+                      v-if="showSelectedOption && compareVModel(option[optionValueKey])"
+                      id="nc-selected-item-icon"
+                      icon="check"
+                      class="flex-none text-primary w-4 h-4"
+                    />
+                  </slot>
                 </slot>
               </div>
             </div>
diff --git a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
index 4438feb543..18ee1b62ed 100644
--- a/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
+++ b/packages/nc-gui/components/smartsheet/header/UpdateDisplayValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type ColumnType, isVirtualCol } from 'nocodb-sdk'
+import { type ColumnType, isSupportedDisplayValueColumn, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 
 interface Props {
   column: ColumnType
@@ -18,13 +18,11 @@ const { fields } = useViewColumnsOrThrow()
 
 const meta = inject(MetaInj, ref())
 
-const searchField = ref('')
-
 const column = toRef(props, 'column')
 
 const value = useVModel(props, 'value')
 
-const selectedField = ref()
+const selectedFieldId = ref()
 
 const isLoading = ref(false)
 
@@ -32,15 +30,22 @@ const filteredColumns = computed(() => {
   const columns = meta.value?.columnsById ?? {}
 
   return (fields.value ?? [])
-    .filter((f) => !isVirtualCol(columns[f.fk_column_id]))
-    .filter((c) => c.title.toLowerCase().includes(searchField.value.toLowerCase()))
+    .map((f) => {
+      return {
+        title: f.title,
+        id: f.fk_column_id,
+        column: columns[f.fk_column_id],
+      }
+    })
+    .filter((f) => f.column && !isSystemColumn(f.column) && isSupportedDisplayValueColumn(f.column))
 })
 
 const changeDisplayField = async () => {
+  if (!selectedFieldId.value) return
   isLoading.value = true
 
   try {
-    await $api.dbTableColumn.primaryColumnSet(selectedField?.value?.fk_column_id as string)
+    await $api.dbTableColumn.primaryColumnSet(selectedFieldId.value)
 
     await getMeta(meta?.value?.id as string, true)
 
@@ -53,14 +58,13 @@ const changeDisplayField = async () => {
   }
 }
 
-const getIcon = (c: ColumnType) =>
+const cellIcon = (c: ColumnType) =>
   h(isVirtualCol(c) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: c,
   })
 
 onMounted(() => {
-  searchField.value = ''
-  selectedField.value = fields.value?.find((f) => f.fk_column_id === column.value.id)
+  selectedFieldId.value = fields.value?.find((f) => f.fk_column_id === column.value.id)?.fk_column_id
 })
 </script>
 
@@ -79,39 +83,23 @@ onMounted(() => {
         </div>
       </div>
 
-      <div class="flex w-full gap-2 justify-between items-center">
-        <a-input v-model:value="searchField" class="w-full h-8 flex-1" size="small" :placeholder="$t('placeholder.searchFields')">
-          <template #prefix>
-            <component :is="iconMap.search" class="w-4 text-gray-500 h-4" />
-          </template>
-        </a-input>
-      </div>
-
-      <div class="border-1 rounded-md h-[250px] nc-scrollbar-md border-gray-200">
-        <div
-          v-for="col in filteredColumns"
-          :key="col.fk_column_id"
-          :class="{
-            'bg-gray-100': selectedField === col,
-          }"
-          :data-testid="`nc-display-field-update-menu-${col.title}`"
-          class="px-3 py-1 flex flex-row items-center rounded-md hover:bg-gray-100"
-          @click.stop="selectedField = col"
+      <div class="border-1 rounded-lg border-nc-border-gray-medium h-[250px]">
+        <NcList
+          v-model:value="selectedFieldId"
+          v-model:open="value"
+          :list="filteredColumns"
+          search-input-placeholder="Search"
+          option-label-key="title"
+          option-value-key="id"
+          :close-on-select="false"
+          class="!w-auto"
+          show-search-always
+          container-class-name="!max-h-[200px]"
         >
-          <div class="flex flex-row items-center w-full cursor-pointer truncate ml-1 py-[5px] pr-2">
-            <component :is="getIcon(meta.columnsById[col.fk_column_id])" class="!w-3.5 !h-3.5 !text-gray-500" />
-            <NcTooltip class="flex-1 pl-1 pr-2 truncate" show-on-truncate-only>
-              <template #title>
-                {{ col.title }}
-              </template>
-              <template #default>{{ col.title }}</template>
-            </NcTooltip>
-          </div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.check" v-if="selectedField === col" class="!w-4 !h-4 !text-brand-500" />
-        </div>
+          <template #listItemExtraLeft="{ option }">
+            <component :is="cellIcon(option.column)" class="!mx-0 opacity-70" />
+          </template>
+        </NcList>
       </div>
 
       <div class="flex w-full gap-2 justify-end">
@@ -120,7 +108,7 @@ onMounted(() => {
         </NcButton>
 
         <NcButton
-          :disabled="!selectedField || selectedField.fk_column_id === column.id"
+          :disabled="!selectedFieldId || selectedFieldId === column.id"
           :loading="isLoading"
           size="small"
           @click="changeDisplayField"