Search.svelte

<script>
  import { createEventDispatcher, getContext, onMount } from 'svelte';
  import FilterApplied from './FilterApplied.svelte';
  import { normalizeOptions, shallowCompare } from '../util';
  import SearchFilters from './SearchFilters.svelte';
  import SearchFilterToggle from './SearchFilterToggle.svelte';
  import SearchSort from './SearchSort.svelte';
  import {
    filters,
    filtersVocabularies,
    moduleCategoryFilter,
    moduleCategoryVocabularies,
    sort,
    searchString,
    sortCriteria,
  } from '../stores';
  import {
    COVERED_ID,
    ACTIVELY_MAINTAINED_ID,
    MAINTENANCE_OPTIONS,
    DEVELOPMENT_OPTIONS,
    SECURITY_OPTIONS,
    ALL_VALUES_ID,
    FULL_MODULE_PATH,
    DARK_COLOR_SCHEME,
  } from '../constants';
  // cspell:ignore searchterm

  const { Drupal } = window;
  const dispatch = createEventDispatcher();
  const stateContext = getContext('state');

  export let refreshLiveRegion;
  export const filter = (row, text) =>
    Object.values(row).filter(
      (item) =>
        item && item.toString().toLowerCase().indexOf(text.toLowerCase()) > 1,
    ).length > 0;
  export let index = -1;
  export let searchText;
  searchString.subscribe((value) => {
    searchText = value;
  });
  export let labels = {
    placeholder: Drupal.t('Module Name, Keyword(s), etc.'),
  };

  // eslint-disable-next-line prefer-const
  let filtersOpen = false;
  let sortMatch = $sortCriteria.find((option) => option.id === $sort);
  if (typeof sortMatch === 'undefined') {
    $sort = $sortCriteria[0].id;
    sortMatch = $sortCriteria.find((option) => option.id === $sort);
  }
  let sortText = sortMatch.text;

  const updateVocabularies = (vocabulary, value) => {
    const normalizedValue = normalizeOptions(value);
    const storedValue = JSON.parse(localStorage.getItem(`pb.${vocabulary}`));
    if (storedValue === null || !shallowCompare(normalizedValue, storedValue)) {
      $filtersVocabularies[vocabulary] = normalizedValue;
      localStorage.setItem(`pb.${vocabulary}`, JSON.stringify(normalizedValue));
    }
  };

  onMount(() => {
    updateVocabularies('developmentStatus', DEVELOPMENT_OPTIONS);
    updateVocabularies('maintenanceStatus', MAINTENANCE_OPTIONS);
    updateVocabularies('securityCoverage', SECURITY_OPTIONS);
  });