Appearance

Search Filter Component ​

File Information ​

  • Path: components/dam/Search/SearchFilter.vue
  • Purpose: Advanced filter component for search results with multi-level filter selection

Overview ​

The SearchFilter component provides a comprehensive filtering interface for search results. It supports multiple filter types including tags, file types, custom fields, collages, uploaded by users, date ranges, and orientation. The component uses a hierarchical menu system with three levels of filter selection.

Key Features ​

  1. Multi-Level Filter Menu

    • Level 1: Main filter categories
    • Level 2: Filter subcategories
    • Level 3: Detailed filter options (ListLevelThree component)

  2. Filter Types

    • File Type filters (Images, Videos, Documents, etc.)
    • Tag filters
    • Custom Field filters
    • Collage filters
    • Uploaded By filters
    • Date Range filters
    • Orientation filters (Horizontal, Vertical, Square)

  3. Filter Management

    • Apply filters
    • Remove filters
    • Filter pagination
    • Filter search within categories

  4. Dynamic Filter Lists

    • Loads available filter options
    • Pagination for large filter lists
    • Search within filter options

Props ​

javascript
{
  filterObject: {
    type: Object,
    default: () => ({}),
    description: 'Current filter object state'
  },
  fileTypes: {
    type: Array,
    default: () => [],
    description: 'Available file types for filtering'
  },
  tagsListProp: {
    type: Array,
    default: () => [],
    description: 'Available tags for filtering'
  },
  collageList: {
    type: Array,
    default: () => [],
    description: 'Available collages for filtering'
  },
  uploadedByList: {
    type: Array,
    default: () => [],
    description: 'Available users for filtering'
  },
  flag: {
    type: String,
    default: null,
    description: 'Special flag for filter behavior'
  },
  tagsPaginationEnd: {
    type: Boolean,
    default: false,
    description: 'Tags pagination end flag'
  },
  fileTypePaginationEnd: {
    type: Boolean,
    default: false,
    description: 'File type pagination end flag'
  },
  collagePaginationEnd: {
    type: Boolean,
    default: false,
    description: 'Collage pagination end flag'
  },
  uploadedByPaginationEnd: {
    type: Boolean,
    default: false,
    description: 'Uploaded by pagination end flag'
  }
}

Events ​

javascript
{
  'filter-applied': (filter) => {},      // Filter applied
  'filter-removed': (filter) => {},      // Filter removed
  'filter-updated': (filters) => {},    // Filters updated
  'menu-closed': () => {}                // Filter menu closed
}

Data Properties ​

javascript
{
  menuActive: boolean,              // Filter menu visibility
  mainFilterLevel: number,          // Current filter level (1, 2, or 3)
  filterListLevel: array,          // Current level filter list
  disabledFilters: object,         // Disabled filter flags
  filterObject: object,            // Filter state object
  datePickerLevel: object          // Date picker reference
}

Components Used ​

  • ListLevelThree - Third level filter component (~/components/dam/Search/ListLevelThree.vue)
  • FilterIcon - Filter icon component
  • Various filter option icons

Methods ​

captureFilterOption(menu) ​

Captures filter option selection:

  • Updates filter level
  • Navigates to next filter level
  • Updates filter list
  • Handles special filter types (date, orientation)

keepMenuOpen() ​

Keeps filter menu open:

  • Prevents menu from closing
  • Used during filter selection
  • Maintains menu state

closeMenu() ​

Closes filter menu:

  • Hides menu
  • Resets filter level
  • Emits menu-closed event

handleDateFilter(dateRange) ​

Handles date range filter:

  • Sets date range in filter object
  • Applies date filter
  • Updates filter state

handleOrientationFilter(orientation) ​

Handles orientation filter:

  • Sets orientation in filter object
  • Applies orientation filter (images only)
  • Updates filter state

loadFilterOptions(type, page) ​

Loads filter options:

  • Fetches filter options from API
  • Handles pagination
  • Updates filter list
  • Supports search within filters

Filter Levels ​

Level 1: Main Categories ​

  • File Types
  • Tags
  • Custom Fields
  • Collages
  • Uploaded By
  • Date Range
  • Orientation

Level 2: Subcategories ​

  • Specific filter subcategories
  • Nested filter options

Level 3: Detailed Options ​

  • Specific filter values
  • Multi-select options
  • Search within options
  • Pagination

Filter Object Structure ​

javascript
{
  file_types: array,        // Selected file types
  tags: array,              // Selected tags
  custom_fields: object,    // Custom field filters
  collages: array,          // Selected collages
  uploaded_by: array,       // Selected users
  date_range: {
    start: string,          // Start date
    end: string             // End date
  },
  orientation: string        // Orientation value
}

API Integration ​

  • GET /dam/search/filter-options - Fetch filter options
    • Query Parameters:
      • type: Filter type
      • page: Page number
      • search: Search query within filters
    • Response: Array of filter options

Usage Examples ​

Basic Usage ​

vue
<template>
  <SearchFilter
    :filter-object="activeFilters"
    :file-types="availableFileTypes"
    :tags-list-prop="availableTags"
    @filter-applied="handleFilterApplied"
  />
</template>

<script>
export default {
  data() {
    return {
      activeFilters: {},
      availableFileTypes: [],
      availableTags: []
    }
  },
  methods: {
    handleFilterApplied(filter) {
      // Apply filter to search
      this.applyFilter(filter)
    }
  }
}
</script>

Styling ​

  • Uses custom CSS classes:
    • optionMenuList - Filter menu list
    • optionMenuLink - Filter menu link
    • link-hover-active - Hover state
    • visibleScrollbar - Scrollable areas
    • Responsive design for mobile/tablet/desktop

Integration Points ​

  • ListLevelThree Component: Third level filter display
  • Search Page: Main search interface
  • Search Common Functions Mixin: Filter building utilities
  • Typesense API: Filter application to search

Notes for Development ​

  • Component uses hierarchical menu system
  • Filter menu can be kept open during selection
  • Orientation filter only applies to images
  • Filter pagination supports large filter lists
  • Date picker integrated for date range selection
  • Filters can be combined with AND logic