Merge pull request #6292 from nocodb/fix-search-reset

fix(nc-gui): fix search reset on view toggle

packages/nc-gui/components.d.ts

@@ -80,10 +80,12 @@ declare module '@vue/runtime-core' {
     ClarityColorPickerSolid: typeof import('~icons/clarity/color-picker-solid')['default']
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
+    IcOutlineAccessTime: typeof import('~icons/ic/outline-access-time')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    IcRoundStarBorder: typeof import('~icons/ic/round-star-border')['default']
     LogosGoogleGmail: typeof import('~icons/logos/google-gmail')['default']
     MaterialSymbolsArrowCircleLeftRounded: typeof import('~icons/material-symbols/arrow-circle-left-rounded')['default']
     MaterialSymbolsArrowCircleRightRounded: typeof import('~icons/material-symbols/arrow-circle-right-rounded')['default']
@@ -93,6 +95,8 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default']
     MaterialSymbolsDeleteOutlineRounded: typeof import('~icons/material-symbols/delete-outline-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
+    MaterialSymbolsGroupOutlineRounded: typeof import('~icons/material-symbols/group-outline-rounded')['default']
+    MaterialSymbolsInboxOutlineRounded: typeof import('~icons/material-symbols/inbox-outline-rounded')['default']
     MaterialSymbolsKeyboardArrowDownRounded: typeof import('~icons/material-symbols/keyboard-arrow-down-rounded')['default']
     MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
     MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
@@ -121,15 +125,20 @@ declare module '@vue/runtime-core' {
     MdiChatProcessingOutline: typeof import('~icons/mdi/chat-processing-outline')['default']
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     MdiCircleMedium: typeof import('~icons/mdi/circle-medium')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
+    MdiCloseCircleOutline: typeof import('~icons/mdi/close-circle-outline')['default']
     MdiCodeTags: typeof import('~icons/mdi/code-tags')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiCurrencyUsd: typeof import('~icons/mdi/currency-usd')['default']
+    MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiEditOutline: typeof import('~icons/mdi/edit-outline')['default']
     MdiEye: typeof import('~icons/mdi/eye')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
@@ -143,6 +152,8 @@ declare module '@vue/runtime-core' {
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']

packages/nc-gui/components/nc/Badge.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 
 const props = defineProps<{
   color: string
@@ -28,6 +27,6 @@ const props = defineProps<{
 
 <style>
 .badge-color {
-  @apply mt-1 border w-23 h-6 rounded-lg;
+  @apply mt-1 w-23 border h-6 rounded-lg;
 }
 </style>

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

@@ -55,15 +55,19 @@ 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
+  }
+  // use primary value label by default
   return columns.value?.find((column) => column.primaryValue)?.label
 })
 
 watch(
-  () => (meta.value as TableType)?.columns,
+  () => search.value.field,
   () => {
-    if (columns.value && search.value) search.value.field = columns.value.find((column) => column.primaryValue)?.value
-  },
-  { immediate: true },
+    onPressEnter()
+  }
 )
 
 watchDebounced(
@@ -81,29 +85,32 @@ watchDebounced(
 <template>
   <div
     class="flex flex-row border-1 rounded-lg h-8 ml-1 border-gray-200 overflow-hidden"
-    :class="{ '!border-primary': search.query.length !== 0 || isFocused }"
+    :class="{ 'border-primary': search.query.length !== 0 || isFocused }"
   >
     <div
       ref="searchDropdown"
       class="flex items-center group relative px-2 cursor-pointer border-r-1 border-gray-200 hover:bg-gray-100"
-      :class="{ '!bg-gray-50 ': isDropdownOpen }"
+      :class="{ 'bg-gray-50 ': isDropdownOpen }"
       @click="isDropdownOpen = !isDropdownOpen"
     >
-      <GeneralIcon icon="search" class="ml-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
-
-      <component :is="iconMap.arrowDown" class="ml-1 text-gray-400 !text-sm" />
-
+      <GeneralIcon icon="search" class="ml-1 mr-2 h-3.5 w-3.5 text-gray-500 group-hover:text-black" />
+      <div class="w-16 group-hover:w-12 text-[0.75rem] font-medium text-gray-400 truncate">
+        {{ displayColumnLabel }}
+      </div>
+      <div class="hidden group-hover:block">
+      <component :is="iconMap.arrowDown" class="text-gray-400 text-sm" />
+      </div>
       <a-select
         v-model:value="search.field"
         :open="isDropdownOpen"
         size="small"
         :dropdown-match-select-width="false"
-        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option !w-48"
-        class="!py-1 !absolute top-0 left-0 w-full h-full z-10 !text-xs opacity-0"
+        dropdown-class-name="!rounded-lg nc-dropdown-toolbar-search-field-option w-48"
+        class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
       >
         <a-select-option v-for="op of columns" :key="op.value" :value="op.value">
-          <div class="flex items-center -ml-1 gap-2">
-            <SmartsheetHeaderIcon class="" :column="op.column" />
+          <div class="text-[0.75rem] flex items-center -ml-1 gap-2">
+            <SmartsheetHeaderIcon class="text-sm" :column="op.column" />
             {{ op.label }}
           </div>
         </a-select-option>
@@ -113,18 +120,17 @@ watchDebounced(
     <a-input
       v-model:value="search.query"
       size="small"
-      class="!text-xs"
+      class="text-xs"
       :style="{
-        width: '12rem',
+        width: '10rem',
       }"
-      :placeholder="`${$t('general.search')} in ${displayColumnLabel}`"
+      :placeholder="$t('general.search')"
       :bordered="false"
       data-testid="search-data-input"
       @press-enter="onPressEnter"
       @focus="isFocused = true"
       @blur="isFocused = false"
     >
-      <template #addonBefore> </template>
     </a-input>
   </div>
 </template>