diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/BlockHetArchiefHeaderSearch.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/BlockHetArchiefHeaderSearch.tsx index 72ad4449..7f2baf26 100644 --- a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/BlockHetArchiefHeaderSearch.tsx +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/BlockHetArchiefHeaderSearch.tsx @@ -1,8 +1,13 @@ import { TextInput } from '@meemoo/react-components'; import clsx from 'clsx'; import { stringifyUrl } from 'query-string'; -import type { FunctionComponent, KeyboardEvent, ReactElement } from 'react'; -import React, { useEffect, useState } from 'react'; +import React, { + type FunctionComponent, + type KeyboardEvent, + type ReactElement, + useEffect, + useState, +} from 'react'; import { AdminConfigManager } from '~core/config/config.class'; import type { DefaultComponentProps } from '~modules/shared/types/components'; import { Icon } from '~shared/components/Icon/Icon'; @@ -10,6 +15,7 @@ import { navigateFunc } from '~shared/helpers/navigate-fnc'; import { tText } from '~shared/helpers/translation-functions'; import { HET_ARCHIEF } from '~shared/types'; import { BlockHeading } from '../BlockHeading/BlockHeading'; +import { SearchDropdown, type SearchDropdownOption } from './SearchDropdown.tsx'; export interface BlockHetArchiefHeaderSearchProps extends DefaultComponentProps { title: string; @@ -25,8 +31,32 @@ export const BlockHetArchiefHeaderSearch: FunctionComponent { + const SEARCH_OPTIONS: SearchDropdownOption[] = [ + { + id: 'all', + selectedLabel: tText('Alles'), + label: tText('Zoek in alle objecten'), + }, + { + id: 'video', + selectedLabel: tText('Alle video'), + label: tText('Zoek in video'), + }, + { + id: 'audio', + selectedLabel: tText('Alle audio'), + label: tText('Zoek in audio'), + }, + { + id: 'newspaper', + selectedLabel: tText('Alle kranten'), + label: tText('Zoek in kranten'), + }, + ]; + const [activeIndex, setActiveIndex] = useState(subtitles.length - 1); const [searchTerm, setSearchTerm] = useState(''); + const [mediaType, setMediaType] = useState(SEARCH_OPTIONS[0].id); useEffect(() => { const timerId = setInterval(() => { @@ -42,9 +72,17 @@ export const BlockHetArchiefHeaderSearch: FunctionComponent { + const baseQuery = { + format: mediaType, + }; const url = stringifyUrl({ url: AdminConfigManager.getConfig().routes.SEARCH || '/zoeken', - query: searchTerm ? { zoekterm: searchTerm } : {}, + query: searchTerm + ? { + ...baseQuery, + zoekterm: searchTerm, + } + : baseQuery, }); await navigateFunc(url); }; @@ -73,37 +111,49 @@ export const BlockHetArchiefHeaderSearch: FunctionComponent
- { - if (evt.key === 'Enter') { - await navigateToSearchPage(); - } - }} - type="submit" - aria-label={tText( - 'modules/content-page/components/blocks/block-het-archief-header-search/block-het-archief-header-search___zoek-in-de-publieke-catalogus-input-aria-label', - {}, - [HET_ARCHIEF] - )} - > - - - } - onChange={(evt) => setSearchTerm(evt.target.value)} - onEnter={navigateToSearchPage} - value={searchTerm} - /> -

{textBelowSearch}

+ > + setMediaType(selectedOption.id)} + /> + { + if (evt.key === 'Enter') { + await navigateToSearchPage(); + } + }} + type="submit" + aria-label={tText( + 'modules/content-page/components/blocks/block-het-archief-header-search/block-het-archief-header-search___zoek-in-de-publieke-catalogus-input-aria-label', + {}, + [HET_ARCHIEF] + )} + > + + + } + onChange={(evt) => setSearchTerm(evt.target.value)} + onEnter={navigateToSearchPage} + value={searchTerm} + /> +
+ {textBelowSearch &&

{textBelowSearch}

} ); diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/SearchDropdown.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/SearchDropdown.tsx new file mode 100644 index 00000000..c5c04656 --- /dev/null +++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/SearchDropdown.tsx @@ -0,0 +1,104 @@ +import { + Dropdown, + DropdownButton, + DropdownContent, + keysEnter, + keysSpacebar, + onKey, +} from '@meemoo/react-components'; +import clsx from 'clsx'; +import { type FC, useState } from 'react'; +import { Icon } from '~shared/components/Icon/Icon'; + +export interface SearchDropdownOption { + id: string; + label: string; + selectedLabel: string; +} + +interface SearchDropdownProps { + options: SearchDropdownOption[]; + selectedOptionId: string; + onSelectOption: (selectedOption: SearchDropdownOption) => void; +} + +const DROPDOWN_ID = 'search-dropdown-options'; + +export const SearchDropdown: FC = ({ + options, + selectedOptionId, + onSelectOption, +}) => { + const [isOpen, setIsOpen] = useState(false); + + const handleSelectOption = (selectedOption: SearchDropdownOption): void => { + setIsOpen(false); + onSelectOption(selectedOption); + }; + + const selected = options.find(({ id }: SearchDropdownOption) => id === selectedOptionId); + + return ( + setIsOpen(true)} + onClose={() => setIsOpen(false)} + menuClassName="c-search-dropdown" + triggerClassName="c-search-dropdown__trigger" + flyoutClassName="c-search-dropdown__flyout" + menuWidth="fit-trigger" + placement="bottom-start" + offset={0} + > + + + + + {/* biome-ignore lint/a11y/useSemanticElements: Dropdown options */} + {/* biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: Dropdown options */} +
    + {options.map((option: SearchDropdownOption) => ( +
  • handleSelectOption(option)} + onKeyDown={(e) => + onKey(e, [...keysEnter, ...keysSpacebar], () => { + if (keysSpacebar.includes(e.key)) { + e.preventDefault(); + } + handleSelectOption(option); + }) + } + className="c-search-dropdown__option" + > +

    {option.label}

    +
  • + ))} +
+
+
+ ); +}; diff --git a/ui/src/react-admin/modules/shared/types/index.ts b/ui/src/react-admin/modules/shared/types/index.ts index 6ecd65ed..4e18e6e7 100644 --- a/ui/src/react-admin/modules/shared/types/index.ts +++ b/ui/src/react-admin/modules/shared/types/index.ts @@ -43,4 +43,5 @@ export enum QUERY_KEYS { GET_THEMES = 'GET_THEMES', GET_THEMES_BY_IDS = 'GET_THEMES_BY_IDS', GET_THEME_WITH_OBJECTS = 'GET_THEME_WITH_OBJECTS', + GET_VISIT_REQUESTS = 'GET_VISIT_REQUESTS', }