Appearance

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 ​

javascript
{
  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 ​

javascript
{
  '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 ​

javascript
{
  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 ​

  • Endpoint: POST /api/typesense/search
  • Request Body:
    json
    {
  "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 ​

vue
<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 ​

vue
<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