SearchBar Typesense Component

File Information

• Path: components/dam/SearchBarTypeSense.vue
• Purpose: Main search bar component with Typesense integration for real-time search across assets, folders, and collages

Overview

The SearchBarTypeSense component provides a comprehensive search interface integrated with Typesense for high-performance full-text search. It supports real-time search suggestions, autocomplete, multi-collection searching, advanced filtering, and seamless navigation to search results. The component is used in the main header and provides the primary search functionality for the DAM system.

Key Features

1. Typesense Integration

   • Real-time search with Typesense backend
   • Multi-collection search (assets, folders, collages)
   • Autocomplete suggestions
   • Search result preview

2. Search Interface

   • Search input with placeholder
   • Loading indicators
   • Result count display
   • Keyboard shortcuts (Ctrl+K)
   • Clear search functionality

3. Search Tabs

   • Switch between result types (All, Assets, Folders, Collages)
   • Tab-specific result counts
   • Active tab indication

4. Advanced Filters

   • Tag filters
   • Custom field filters
   • File type filters
   • Date range filters
   • Permission filters

5. Search Results Display

   • Inline search results
   • Result preview cards
   • Quick actions on results
   • Navigate to full results page

Props

{
  workspaceId: {
    type: String,
    required: true,
    description: 'Workspace ID for search scope'
  },
  placeholder: {
    type: String,
    default: 'Search for assets, collages, or folders',
    description: 'Search input placeholder text'
  },
  autoFocus: {
    type: Boolean,
    default: false,
    description: 'Auto-focus search input on mount'
  },
  debounce: {
    type: Number,
    default: 300,
    description: 'Debounce delay for search input (ms)'
  },
  shortcutKey: {
    type: String,
    default: 'Ctrl+K',
    description: 'Keyboard shortcut key combination'
  }
}

Events

{
  'search': (query, filters) => {},        // Search executed
  'suggestion-selected': (item) => {},   // Suggestion clicked
  'filter-applied': (filters) => {},      // Filters applied
  'tab-changed': (tab) => {},             // Tab switched
  'clear': () => {},                      // Search cleared
  'close': () => {}                       // Search menu closed
}

Data Properties

{
  searchParams: {
    search_term: string,        // Search query
    filters: object,            // Applied filters
    tab: string                 // Active tab
  },
  loading: boolean,            // Search in progress
  searchResult: object,         // Search results
  openSearchList: boolean,     // Search results visible
  isShowResultsCount: boolean, // Show result count
  isFocused: boolean,          // Input focused state
  tab: number,                  // Active tab index
  tabLabels: array,            // Tab labels ['All', 'Assets', 'Folders', 'Collages']
  advancedSearchAllowed: boolean, // Advanced search permission
  activeFilters: array,        // Active filter list
  searchClass: string          // Dynamic CSS class
}

Mixins Used

• search-common-functions - Search utilities (~/mixins/search-common-functions)

Computed Properties

• advancedSearchAllowed - Permission check for advanced search
• getResultsCount - Total results count across all tabs
• hasFilters - Whether any filters are applied
• activeFilters - List of active filters for display

Methods

computeSearch(trigger)

Executes search:

• trigger: 'click', 'enter', or 'auto'
• Builds search query
• Calls Typesense API
• Updates search results
• Navigates to search page or shows inline results
• Emits search event

debouncedSearch()

Debounced search function:

• Delays search execution
• Prevents excessive API calls
• Updates search query
• Shows suggestions while typing

commonSearch(query, filters)

Performs common search:

• Builds Typesense query
• Applies filters
• Calls multi-search API
• Formats results
• Updates UI state

getSuggestions(query)

Gets search suggestions:

• Calls Typesense autocomplete
• Returns matching suggestions
• Formats suggestion data
• Updates suggestion list

handleSuggestionSelect(suggestion)

Handles suggestion selection:

• Sets search query
• Executes search
• Navigates to result
• Closes suggestion list

applyFilters(filters)

Applies search filters:

• Updates filter state
• Rebuilds search query
• Executes filtered search
• Updates active filters display
• Emits filter-applied event

removeFilter(filter)

Removes a filter:

• Removes from active filters
• Rebuilds search query
• Executes search
• Updates UI

changeTab(tabIndex)

Changes active tab:

• Updates tab state
• Filters results by type
• Updates result display
• Emits tab-changed event

closeSearchMenu(force)

Closes search menu:

• Hides search results
• Resets search state
• Clears search input if force is true
• Emits close event

closeSearch()

Closes search:

• Clears search input
• Closes search menu
• Resets state

API Integration

Typesense Multi-Search

• Endpoint: POST /api/typesense/search
• Request Body:

  {
    "request": {
      "q": "search query",
      "collections": ["digital_assets", "digital_assets_categories", "dam_collections"]
    },
    "filterQuery": {
      "digital_assets": "file_type:=jpg && tags:=[marketing]",
      "digital_assets_categories": "visibility:=0",
      "dam_collections": "visibility:=0"
    },
    "commonSearchParams": {
      "query_by": "search_name,description",
      "per_page": 20,
      "page": 1,
      "sort_by": "modified_at:desc"
    },
    "workspace_id": "workspace-id"
  }

• Response: Multi-collection search results

Typesense Autocomplete

• Endpoint: POST /api/typesense/autocomplete
• Request: Query string and collection
• Response: Array of suggestions

Search Flow

1. User Input

   • User types in search input
   • Debounced search triggers
   • Suggestions shown (if enabled)

2. Search Execution

   • User presses Enter or clicks search
   • Query built with filters
   • Typesense API called

3. Results Display

   • Results received and formatted
   • Displayed in active tab
   • Result counts updated

4. Navigation

   • Click result to view details
   • Or navigate to full search page
   • Search state preserved

Keyboard Shortcuts

• Ctrl+K (or Cmd+K): Focus search input
• Enter: Execute search
• Esc: Close search menu
• Arrow Keys: Navigate suggestions (if enabled)
• Tab: Switch between tabs (if enabled)

Usage Examples

Basic Usage

<template>
  <SearchBarTypeSense
    :workspace-id="workspaceId"
    @search="handleSearch"
  />
</template>

<script>
export default {
  methods: {
    handleSearch(query, filters) {
      // Navigate to search page
      this.$router.push({
        path: `/${this.workspaceId}/dam/search`,
        query: { q: query, ...filters }
      })
    }
  }
}
</script>

With Filters

<template>
  <SearchBarTypeSense
    :workspace-id="workspaceId"
    @filter-applied="handleFilters"
  />
</template>

Styling

• Uses custom CSS classes:
  • headerMainSearch - Main container
  • searchInput - Input container
  • searchResult - Results container
  • searchTopFixed - Fixed top section
  • searchType - Tab section
  • search-progress-bar - Loading indicator
  • Responsive design for mobile/tablet/desktop

Integration Points

• Typesense API: Search backend
• Search Common Functions Mixin: Filter building
• Search Page: Full search results
• Router: Navigation to search results
• Analytics: Search tracking

Notes for Development

• Component integrates with Typesense for real-time search
• Search is debounced to prevent excessive API calls
• Results can be displayed inline or navigate to full page
• Advanced filters require subscription permission
• Keyboard shortcuts enhance UX
• Component maintains search state during navigation

Related Documentation

• Search Feature - Complete search system
• Typesense Integration - Typesense backend
• Search Filter Component - Filter interface
• Search Tabs Component - Tab navigation
• Search Common Functions Mixin - Search utilities