fix(nc-gui): update groupBy, sort and global search dropdown

packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue

@@ -85,63 +85,16 @@ onMounted(() => {
   search.value = ''
   activeFieldIndex.value = -1
 })
-
-const onArrowDown = () => {
-  activeFieldIndex.value = Math.min(activeFieldIndex.value + 1, options.value.length - 1)
-}
-
-const onArrowUp = () => {
-  activeFieldIndex.value = Math.max(activeFieldIndex.value - 1, 0)
-}
 </script>
 
 <template>
-  <div
+  <div class="nc-group-by-create-modal">
-    class="flex flex-col w-full pt-2 w-64 nc-group-by-create-modal"
+    <SmartsheetToolbarFieldListWithSearch
-    @keydown.arrow-down.prevent="onArrowDown"
+      :is-parent-open="isParentOpen"
-    @keydown.arrow-up.prevent="onArrowUp"
+      :search-input-placeholder="$t('msg.selectFieldToGroup')"
-    @keydown.enter.prevent="onClick(options[activeFieldIndex])"
+      :options="options"
-  >
+      toolbar-menu="groupBy"
-    <div class="w-full pb-3 px-2" @click.stop>
+      @selected="onClick"
-      <a-input
+    />
-        ref="inputRef"
-        v-model:value="search"
-        :placeholder="$t('msg.selectFieldToGroup')"
-        class="nc-toolbar-dropdown-search-field-input"
-      >
-        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
-      ></a-input>
-    </div>
-
-    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
-      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
-        <img
-          src="~assets/img/placeholder/no-search-result-found.png"
-          class="!w-[164px] flex-none"
-          alt="No search results found"
-        />
-
-        {{ $t('title.noResultsMatchedYourSearch') }}
-      </div>
-
-      <div
-        v-for="(option, index) in options"
-        :key="index"
-        v-e="['c:group-by:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2 hover:bg-gray-100 cursor-pointer nc-group-by-column-search-item rounded-md"
-        :class="{
-          'bg-gray-100': activeFieldIndex === index,
-        }"
-        @click="onClick(option)"
-      >
-        <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate" show-on-truncate-only>
-          <template #title> {{ option.title }}</template>
-          <span>
-            {{ option.title }}
-          </span>
-        </NcTooltip>
-      </div>
-    </div>
   </div>
 </template>

packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue

@@ -82,63 +82,16 @@ onMounted(() => {
   search.value = ''
   activeFieldIndex.value = -1
 })
-
-const onArrowDown = () => {
-  activeFieldIndex.value = Math.min(activeFieldIndex.value + 1, options.value.length - 1)
-}
-
-const onArrowUp = () => {
-  activeFieldIndex.value = Math.max(activeFieldIndex.value - 1, 0)
-}
 </script>
 
 <template>
-  <div
+  <div class="nc-sort-create-modal">
-    class="flex flex-col w-full pt-2 w-64 nc-sort-create-modal"
+    <SmartsheetToolbarFieldListWithSearch
-    @keydown.arrow-down.prevent="onArrowDown"
+      :is-parent-open="isParentOpen"
-    @keydown.arrow-up.prevent="onArrowUp"
+      :search-input-placeholder="$t('msg.selectFieldToSort')"
-    @keydown.enter.prevent="onClick(options[activeFieldIndex])"
+      :options="options"
-  >
+      toolbar-menu="groupBy"
-    <div class="w-full pb-3 px-2" @click.stop>
+      @selected="onClick"
-      <a-input
+    />
-        ref="inputRef"
-        v-model:value="search"
-        :placeholder="$t('msg.selectFieldToSort')"
-        class="nc-toolbar-dropdown-search-field-input"
-      >
-        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
-      ></a-input>
-    </div>
-
-    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
-      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
-        <img
-          src="~assets/img/placeholder/no-search-result-found.png"
-          class="!w-[164px] flex-none"
-          alt="No search results found"
-        />
-
-        {{ $t('title.noResultsMatchedYourSearch') }}
-      </div>
-
-      <div
-        v-for="(option, index) in options"
-        :key="index"
-        v-e="['c:sort:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2 rounded-md hover:bg-gray-100 cursor-pointer nc-sort-column-search-item"
-        :class="{
-          'bg-gray-100': activeFieldIndex === index,
-        }"
-        @click="onClick(option)"
-      >
-        <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate" show-on-truncate-only>
-          <template #title> {{ option.title }}</template>
-          <span>
-            {{ option.title }}
-          </span>
-        </NcTooltip>
-      </div>
-    </div>
   </div>
 </template>

packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
-import type { TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import {
   ActiveViewInj,
   ReloadViewDataHookInj,
@@ -27,19 +27,8 @@ const { isMobileMode } = useGlobal()
 
 const isFocused = ref(false)
 
-const searchDropdown = ref(null)
+const columns = computed(
-
+  () => (meta.value as TableType)?.columns?.filter((column) => !isSystemColumn(column) && column?.uidt !== UITypes.Links) ?? [],
-onClickOutside(searchDropdown, () => (isDropdownOpen.value = false))
-
-const columns = computed(() =>
-  (meta.value as TableType)?.columns
-    ?.filter((column) => !isSystemColumn(column) && column?.uidt !== UITypes.Links)
-    ?.map((column) => ({
-      value: column.id,
-      label: column.title,
-      column,
-      primaryValue: column.pv,
-    })),
 )
 
 watch(
@@ -59,10 +48,12 @@ function onPressEnter() {
 const displayColumnLabel = computed(() => {
   if (search.value.field) {
     // use search field label if specified
-    return columns.value?.find((column) => column.value === search.value.field)?.label
+    return columns.value?.find((column) => column.id === search.value.field)?.title
   }
   // use primary value label by default
-  return columns.value?.find((column) => column.primaryValue)?.label
+  const pvColumn = columns.value?.find((column) => column.pv)
+  search.value.field = pvColumn?.id as string
+  return pvColumn?.title
 })
 
 watchDebounced(
@@ -76,11 +67,10 @@ watchDebounced(
   },
 )
 
-watch(columns, () => {
+const onSelectOption = (column: ColumnType) => {
-  if (columns.value?.length) {
+  search.value.field = column.id as string
-    search.value.field = columns.value[0].value as string
+  isDropdownOpen.value = false
-  }
+}
-})
 </script>
 
 <template>
@@ -88,46 +78,35 @@ watch(columns, () => {
     class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden"
     :class="{ 'border-primary': search.query.length !== 0 || isFocused }"
   >
-    <div
+    <NcDropdown
-      ref="searchDropdown"
+      v-model:visible="isDropdownOpen"
-      class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
+      :trigger="['click']"
-      :class="{ 'bg-gray-50 ': isDropdownOpen }"
+      overlay-class-name="nc-dropdown-toolbar-search-field-option"
-      @click="isDropdownOpen = !isDropdownOpen"
     >
-      <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
+      <div
-      <div v-if="!isMobileMode" class="w-16 text-[0.75rem] font-medium text-gray-400 truncate">
+        class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
-        {{ displayColumnLabel }}
+        :class="{ 'bg-gray-50 ': isDropdownOpen }"
-      </div>
+        @click="isDropdownOpen = !isDropdownOpen"
-      <div class="xs:(text-gray-600) group-hover:text-gray-700 sm:(text-gray-400)">
-        <component :is="iconMap.arrowDown" class="text-sm text-inherit" />
-      </div>
-      <a-select
-        v-model:value="search.field"
-        v-e="['c:search:field:select:open']"
-        :open="isDropdownOpen"
-        size="small"
-        :dropdown-match-select-width="false"
-        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option max-w-64"
-        class="py-1 !absolute top-2 left-0 w-full h-full z-10 text-xs opacity-0"
-        @change="onPressEnter"
       >
-        <a-select-option v-for="op of columns" :key="op.value" v-e="['c:search:field:select']" :value="op.value">
+        <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
-          <div class="text-sm flex items-center gap-2">
+        <div v-if="!isMobileMode" class="w-16 text-xs font-medium text-gray-400 truncate">
-            <SmartsheetHeaderIcon :column="op.column" />
+          {{ displayColumnLabel }}
-            <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
+        </div>
-              <template #title>{{ op.label }}</template>
+        <div class="xs:(text-gray-600) group-hover:text-gray-700 sm:(text-gray-400)">
-              {{ op.label }}
+          <component :is="iconMap.arrowDown" class="text-sm text-inherit" />
-            </NcTooltip>
+        </div>
-            <component
+      </div>
-              :is="iconMap.check"
+      <template #overlay>
-              v-if="search.field === op.value"
+        <SmartsheetToolbarFieldListWithSearch
-              id="nc-selected-item-icon"
+          :is-parent-open="isDropdownOpen"
-              class="text-primary w-4 h-4"
+          :selected-option-id="search.field"
-            />
+          show-selected-option
-          </div>
+          :options="columns"
-        </a-select-option>
+          toolbar-menu="globalSearch"
-      </a-select>
+          @selected="onSelectOption"
-    </div>
+        />
+      </template>
+    </NcDropdown>
 
     <a-input
       v-model:value="search.query"