Appearance

Search Common Functions Mixin ​

File Information ​

  • Path: mixins/search-common-functions.js
  • Purpose: Common search utility functions for filter building and query construction

Overview ​

The Search Common Functions mixin provides utility functions for building Typesense search filters, managing filter lists, and constructing complex filter queries. It's used by search components to build filter strings that are sent to the Typesense search API.

Key Features ​

  1. Filter Management

    • Filter list updates
    • Filter removal
    • Filter object management
    • Filter state synchronization

  2. Filter Query Building

    • Tag filter construction
    • Custom field filter construction
    • File type filter construction
    • Date range filter construction
    • Permission filter construction
    • Orientation filter construction
    • Uploaded by filter construction

  3. Typesense Integration

    • Filter string generation
    • Collection-specific filters
    • Multi-collection filter support

Data Properties ​

javascript
{
  mainFilterObj: object,      // Main filter object
  allFilterList: array,       // All active filters list
  _origIndexCache: object     // Original index cache
}

Methods ​

updateFilterObj(payload) ​

Updates main filter object:

  • Accepts array or object payload
  • Sets filter levels (level1, level2, level3)
  • Updates filter state

Parameters:

  • payload (Array|Object): Filter payload
    • Array: [level1, level2, level3]
    • Object: { level1, level2, level3 }

updateFilterListData(payload) ​

Updates filter list with new data:

  • Finds old filter in list
  • Replaces with new filter
  • Updates store
  • Triggers filter update

Parameters:

  • payload (Object): Update payload
    • old: Old filter object
    • new: New filter object

removeFilterOptn(payload) ​

Removes filter from list:

  • Finds filter in list
  • Removes from list
  • Updates store
  • Refetches results
  • Clears filter state

Parameters:

  • payload (Object): Filter object to remove

updateFilterList(payload) ​

Updates filter list in store:

  • Updates local state
  • Dispatches store action
  • Synchronizes filter state

Parameters:

  • payload (Array): Filter list array

buildFiltersNew(collection, searchContext) ​

Builds Typesense filter query string:

  • Processes all active filters
  • Builds filter query for each filter
  • Combines filters with AND logic
  • Returns filter string

Parameters:

  • collection (string): Typesense collection name
  • searchContext (Object|null): Search context for custom fields

Returns: Filter query string

Filter Types Supported:

  • permission - Permission filters
  • orientation - Image orientation
  • date-added - Creation date
  • last-modified-date - Modification date
  • tags - Tag filters
  • file-type - File type filters
  • collage - Collage filters
  • uploaded-by - User filters
  • custom-field-* - Custom field filters

buildTagFilter(field, operator, values, collection) ​

Builds tag filter query:

  • Constructs filter for tag field
  • Supports 'is', 'is not', 'contains', 'not contains'
  • Handles array of tag values
  • Returns filter string

Parameters:

  • field (string): Field name (e.g., 'tags', 'file_type')
  • operator (string): Operator ('is', 'is not', 'contains')
  • values (Array|string): Tag values
  • collection (string): Collection name

Returns: Filter query string

buildCustomFieldFilter(level1, level2, level3, searchContext) ​

Builds custom field filter:

  • Constructs filter for custom fields
  • Handles different field types
  • Uses search context for field definitions
  • Returns filter string

Parameters:

  • level1 (string): Custom field identifier
  • level2 (string): Operator
  • level3 (string|Array): Field values
  • searchContext (Object): Search context with field definitions

Returns: Filter query string

buildTimestampFilter(level1, level2, level3) ​

Builds timestamp/date filter:

  • Constructs date range filter
  • Handles relative dates (today, last week, etc.)
  • Calculates timestamp ranges
  • Returns filter string

Parameters:

  • level1 (string): Date field name
  • level2 (string): Operator
  • level3 (string): Date value or range

Returns: Filter query string

buildUploadedByFilter(operator, userIds, collection, searchContext) ​

Builds uploaded by user filter:

  • Constructs user filter
  • Handles user ID arrays
  • Returns filter string

Parameters:

  • operator (string): Operator
  • userIds (Array): User IDs
  • collection (string): Collection name
  • searchContext (Object): Search context

Returns: Filter query string

Filter Object Structure ​

javascript
{
  level1: string,    // Filter category (e.g., 'tags', 'file-type')
  level2: string,    // Operator (e.g., 'is', 'contains')
  level3: string|Array  // Filter values
}

Filter Query Format ​

Filters are combined with AND logic:

(filter1) && (filter2) && (filter3)

Example Filter Queries ​

Tag Filter:

(tags:=[marketing,design])

File Type Filter:

(file_type:=jpg || file_type:=png)

Date Range Filter:

(created_at:>=1234567890 && created_at:<=1234567890)

Permission Filter:

(visibility:=0)

Usage Examples ​

Basic Filter Building ​

vue
<script>
import searchCommonFunctions from '~/mixins/search-common-functions'

export default {
  mixins: [searchCommonFunctions],
  methods: {
    async performSearch() {
      // Build filters
      const filterQuery = this.buildFiltersNew('digital_assets', null)
      
      // Perform search
      const results = await this.$axios.post('/api/typesense/search', {
        q: this.searchQuery,
        filter_by: filterQuery,
        collection: 'digital_assets'
      })
      
      return results.data
    }
  }
}
</script>

Adding Filters ​

vue
<script>
import searchCommonFunctions from '~/mixins/search-common-functions'

export default {
  mixins: [searchCommonFunctions],
  methods: {
    addTagFilter(tagIds) {
      this.updateFilterObj({
        level1: 'tags',
        level2: 'is',
        level3: tagIds
      })
      
      // Add to filter list
      this.allFilterList.push({
        level1: 'tags',
        level2: 'is',
        level3: tagIds
      })
      
      this.updateFilterList(this.allFilterList)
    }
  }
}
</script>

Removing Filters ​

vue
<script>
import searchCommonFunctions from '~/mixins/search-common-functions'

export default {
  mixins: [searchCommonFunctions],
  methods: {
    removeFilter(filter) {
      this.removeFilterOptn(filter)
      // Filter removed, results refetched automatically
    }
  }
}
</script>

Integration Points ​

  • Search Filter Component: Filter selection
  • Search Page: Search execution
  • Typesense API: Filter application
  • DAM Store: Filter state management

Notes for Development ​

  • Mixin builds Typesense-compatible filter strings
  • Filters are combined with AND logic
  • Collection-specific filters are supported
  • Custom fields require search context
  • Filter list is synchronized with store
  • Filter removal triggers result refetch