Appearance

DamNotification Component ​

Overview ​

The SearchBar component provides a comprehensive search interface for users to search assets within the application. It includes advanced filtering options, recent search history, and visual feedback.

Features ​

  • Advanced Search:

    • Users can refine their search using various filters, including date range, file types, tags, orientation, and permission.

  • Recent Search History:

    • The component displays recently used search terms for quick access.

  • Visual Feedback:

    • The component provides visual indicators for loading, search results, and no results found.

  • Keyboard Navigation:

    • Users can navigate through search results and filter options using keyboard shortcuts.

  • Date Picker:

    • A built-in date picker allows users to select custom date ranges for their search.

Data Properties ​

  • orientations: An array of objects defining available search orientations (horizontal, vertical, square).
  • DATE_FORMAT: The format string used for representing dates (YYYY-MM-DD).
  • subFromToday: Function to calculate a date by subtracting a specified number of days from today's start of day.
  • getToday: Function to get today's date in the specified format.
  • optionDates: An array of objects defining pre-defined date ranges (All, Past 30 minutes, Past 24 hours, Last week, Last 30 days).
  • filterOptions: An array of objects defining available filter options (All, Audios, Documents, Images, Videos).
  • permissionOptions: An array of objects defining available permission options (All, Public, Private).
  • searchParams: An object to store the current search parameters (search term, exact match, filter, file types, tags, date range, etc.).
  • moreOptions: Boolean flag indicating whether advanced search options are open.
  • searchData: Object containing search-related data fetched from the server (popular file types, tags, etc.).
  • searchDataLoading: Boolean flag indicating whether search data is being loaded.
  • active: Boolean flag indicating whether the search bar is active.
  • pastedText: Text pasted into the search bar (if any).
  • loading: Boolean flag indicating whether search results are being loaded.
  • searchResult: Object containing search results fetched from the server.
  • recentActive: Boolean flag indicating whether recent search history is active.
  • searchHistoryList: Array of recent search terms.
  • focused: Boolean flag indicating whether the search input is focused.
  • openSearchList: Boolean flag indicating whether the search results list is open.
  • noResults: Boolean flag indicating whether no search results were found.
  • datePickerModel: Object containing date picker state (menu open, date range, formatted date range).
  • workspaceId: Workspace ID retrieved from the route or user data.

Watch ​

  • datePickerModel.dateRange: Watches for changes in the date range selected by the user and updates the formatted date range accordingly.
  • searchParams.search_term: Watches for change in search term and computes if search history is to be shown or not.

Computed ​

  • advancedSearchAllowed: Checks if the user's subscription allows advanced search features.
  • hashParam: Extracts the hash parameter from the route (used for setting filters).
  • hasFilters: Checks if any filters are currently applied.
  • fileTypes: Filters and sorts popular file types from search data.
  • popularTags: Filters and sorts popular tags from search data.
  • filterItems: Creates an array of objects representing the currently applied filters.

Methods ​

  • reset: Resets search parameters and potentially redirects the route.
  • getHasFilters: Returns the value of hasFilters.
  • getRequestBody: Creates a request body object based on the current search parameters.
  • search: Performs a search based on the current parameters and navigates to the search results page.
  • getSearchData: Fetches search data (popular file types & tags) from the server.
  • removeFilter: Removes a specific filter item from the search parameters.
  • selectOrientation: Sets the selected search orientation.
  • selectDate: Sets the selected date range.
  • selectFileType: Toggles a file type filter.
  • debouncedSearch: Creates a debounced function for delayed search after user input.
  • _debouncedSearch: The actual search function triggered by the debounced function.
  • computeSearch: Handles search based on different triggers (click or enter key).
  • commonSearch: Fetches search results based on the current search term and filter.
  • openAdvanceSearch: Opens or closes the advanced search options.
  • searchFromHistory: Sets the search term from a recent search history item and triggers a search.
  • getSearchHistoryData: Fetches recent search history from the server.
  • searchByTag: Performs a search based on a specific tag.
  • searchMoreByTag: Performs a search using all tags from the current search results.
  • searchMoreByText: Performs a search based on the current search term (without tags).
  • removeFromHistory: Removes a specific search history item.
  • clearHistory: Clears all search history items.
  • closeSearchMenu: Closes the search menu if applicable.
  • isActive: Checks if a file type is currently selected.
  • onDateRangeSelected: Handles date range selection from the date picker.
  • formatDateRange: Formats a date range for display.
  • disableKey: Disables certain keyboard keys for specific actions.
  • handleKeyboardNavigation: Handles keyboard navigation for autocomplete components.
  • triggerHoverEffect: Triggers a hover effect on a specific list item.
  • onFocus: Handles focus events on autocomplete components.

Lifecycle Hooks ​

  • created:
    • Listens for the openAdvSearch event to open or close the advanced search options.
  • mounted:
    • Initializes search parameters and checks for a specific hash parameter to set the filter.
    • Sets initial state for the active flag.
  • beforeDestroy:
    • Unsubscribes from the openAdvSearch event.

Dependencies ​

  • moment: Used for date manipulation and formatting.
  • lodash/debounce: Used for debouncing the search function.
  • v-click-outside: Used for detecting clicks outside a specific element.
  • EventBus: A custom event bus for communication between components.
  • SearchIcon, FilterIcon, CloseIcon: Custom components for icons used in the search bar.
  • Vuetify: Vuetify component library is used to display components such as v-img, v-menu, v-text-field etc.

Styles ​

The component uses scoped styles and global style. global style is used to override the vueitfy components default css. all the css can be found at the end of the file inside <style> tag

Usage ​

vue
<template>
  <SearchBar class="headerMainSearch" />
</template>

Notes ​

  • The SearchBar component uses Vuetify components for styling and functionality.
  • You may need to customize the component's behavior and styling based on your specific requirements.
  • For a complete understanding of the component's functionalities, refer to the source code.