Feature/arc 3788 search block

ui/src/react-admin/modules/content-page/components/blocks/BlockHetArchiefHeaderSearch/BlockHetArchiefHeaderSearch.tsx

@@ -1,15 +1,21 @@
 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';
 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<BlockHetArchiefHeade
 	searchAriaLabel,
 	textBelowSearch,
 }): ReactElement => {
+	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<number>(subtitles.length - 1);
 	const [searchTerm, setSearchTerm] = useState<string>('');
+	const [mediaType, setMediaType] = useState<string>(SEARCH_OPTIONS[0].id);
 
 	useEffect(() => {
 		const timerId = setInterval(() => {
@@ -42,9 +72,17 @@ export const BlockHetArchiefHeaderSearch: FunctionComponent<BlockHetArchiefHeade
 	}, [subtitles.length]);
 
 	const navigateToSearchPage = async () => {
+		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<BlockHetArchiefHeade
 				)}
 			</div>
 			<div>
-				<TextInput
-					id="block-hetarchief-header-search__search-input"
-					ariaLabel={searchAriaLabel}
-					placeholder={tText(
-						'react-admin/modules/content-page/components/blocks/block-het-archief-header-search/block-het-archief-header-search___start-je-zoektocht',
-						{},
-						[HET_ARCHIEF]
+				<div
+					className={clsx(
+						'c-block-het-archief-header-search__searchbar',
+						'c-block-het-archief-header-search__searchbar--has-dropdown'
 					)}
-					iconEnd={
-						<button
-							onClick={navigateToSearchPage}
-							onKeyUp={async (evt: KeyboardEvent) => {
-								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]
-							)}
-						>
-							<Icon name="filter" />
-						</button>
-					}
-					onChange={(evt) => setSearchTerm(evt.target.value)}
-					onEnter={navigateToSearchPage}
-					value={searchTerm}
-				/>
-				<p>{textBelowSearch}</p>
+				>
+					<SearchDropdown
+						options={SEARCH_OPTIONS}
+						selectedOptionId={mediaType}
+						onSelectOption={(selectedOption) => setMediaType(selectedOption.id)}
+					/>
+					<TextInput
+						id="block-hetarchief-header-search__search-input"
+						ariaLabel={searchAriaLabel}
+						placeholder={tText(
+							'react-admin/modules/content-page/components/blocks/block-het-archief-header-search/block-het-archief-header-search___start-je-zoektocht',
+							{},
+							[HET_ARCHIEF]
+						)}
+						iconEnd={
+							<button
+								onClick={navigateToSearchPage}
+								onKeyUp={async (evt: KeyboardEvent) => {
+									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]
+								)}
+							>
+								<Icon name="filter" />
+							</button>
+						}
+						onChange={(evt) => setSearchTerm(evt.target.value)}
+						onEnter={navigateToSearchPage}
+						value={searchTerm}
+					/>
+				</div>
+				{textBelowSearch && <p>{textBelowSearch}</p>}
 			</div>
 		</article>
 	);

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<SearchDropdownProps> = ({
+	options,
+	selectedOptionId,
+	onSelectOption,
+}) => {
+	const [isOpen, setIsOpen] = useState<boolean>(false);
+
+	const handleSelectOption = (selectedOption: SearchDropdownOption): void => {
+		setIsOpen(false);
+		onSelectOption(selectedOption);
+	};
+
+	const selected = options.find(({ id }: SearchDropdownOption) => id === selectedOptionId);
+
+	return (
+		<Dropdown
+			id={DROPDOWN_ID}
+			isOpen={isOpen}
+			onOpen={() => 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}
+		>
+			<DropdownButton>
+				<button
+					type="button"
+					className={clsx('c-search-dropdown__active', {
+						'c-search-dropdown__active--open': isOpen,
+					})}
+					aria-expanded={isOpen}
+					aria-controls={DROPDOWN_ID}
+				>
+					<div className="c-search-dropdown__active-content">
+						<p className="c-search-dropdown__active-label">{selected?.selectedLabel}</p>
+					</div>
+					<Icon
+						className={clsx('c-search-dropdown__active-icon', {
+							'c-search-dropdown__active-icon--open': isOpen,
+						})}
+						name="angleDown"
+					/>
+				</button>
+			</DropdownButton>
+			<DropdownContent>
+				{/* biome-ignore lint/a11y/useSemanticElements: Dropdown options */}
+				{/* biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: Dropdown options */}
+				<ul className="u-list-reset c-search-dropdown__list" role="listbox">
+					{options.map((option: SearchDropdownOption) => (
+						<li
+							key={option.id}
+							// biome-ignore lint/a11y/useSemanticElements: Dropdown options
+							// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: Dropdown options
+							role="option"
+							tabIndex={isOpen ? 0 : -1}
+							aria-selected={selectedOptionId === option.id}
+							onClick={() => handleSelectOption(option)}
+							onKeyDown={(e) =>
+								onKey(e, [...keysEnter, ...keysSpacebar], () => {
+									if (keysSpacebar.includes(e.key)) {
+										e.preventDefault();
+									}
+									handleSelectOption(option);
+								})
+							}
+							className="c-search-dropdown__option"
+						>
+							<p className="c-search-dropdown__option-label u-text-ellipsis">{option.label}</p>
+						</li>
+					))}
+				</ul>
+			</DropdownContent>
+		</Dropdown>
+	);
+};

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',
 }