Appearance

Advanced Search Filters ​

Overview ​

The Advanced Search Filters system provides a comprehensive filtering interface with multiple criteria including file types, tags, custom fields, dates, users, and more. It supports filter presets, combinations, and integration with Typesense search.

Filter Types ​

1. File Type Filter ​

  • Image, Video, Audio, Document, etc.
  • Multiple selection
  • Pagination support

2. Tag Filter ​

  • Tag selection
  • Tag search
  • Multiple tags

3. Custom Field Filter ​

  • Field-specific filters
  • Value selection
  • Type-based filtering

4. Collage Filter ​

  • Collage selection
  • Multiple collages

5. Uploaded By Filter ​

  • User selection
  • Multiple users

6. Date Range Filter ​

  • Created date
  • Modified date
  • Upload date

7. Orientation Filter ​

  • Horizontal
  • Vertical
  • Square

8. Permission Filter ​

  • Public
  • Private
  • Shared

Frontend Implementation ​

Filter Component ​

vue
<template>
  <v-card class="filter-panel">
    <v-card-title>Filters</v-card-title>
    <v-card-text>
      <!-- File Type Filter -->
      <v-select
        v-model="filters.fileTypes"
        :items="fileTypes"
        label="File Types"
        multiple
        chips
      />
      
      <!-- Tag Filter -->
      <v-autocomplete
        v-model="filters.tags"
        :items="availableTags"
        label="Tags"
        multiple
        chips
      />
      
      <!-- Date Range -->
      <v-date-picker
        v-model="filters.dateRange"
        range
      />
      
      <!-- Uploaded By -->
      <v-select
        v-model="filters.uploadedBy"
        :items="users"
        label="Uploaded By"
        multiple
      />
    </v-card-text>
  </v-card>
</template>

Filter Query Building ​

javascript
buildFilterQuery(filters) {
  const queries = []
  
  if (filters.fileTypes?.length > 0) {
    const typeFilter = filters.fileTypes
      .map(type => `file_type:=${type}`)
      .join(' || ')
    queries.push(`(${typeFilter})`)
  }
  
  if (filters.tags?.length > 0) {
    const tagFilter = filters.tags
      .map(tag => `tags:=[${tag}]`)
      .join(' && ')
    queries.push(`(${tagFilter})`)
  }
  
  if (filters.dateFrom) {
    const timestamp = Math.floor(new Date(filters.dateFrom).getTime() / 1000)
    queries.push(`modified_at:>=${timestamp}`)
  }
  
  return queries.join(' && ')
}