UHF-12470: Convert search monitor to dialog

src/js/react/apps/job-search/components/AreaFilter.tsx

@@ -0,0 +1,55 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { areaFilterAtom, getAreaAtom, setStateValueAtom } from '../store';
+import SearchComponents from '../enum/SearchComponents';
+import { Select } from 'hds-react';
+import { defaultMultiSelectTheme } from '@/react/common/constants/selectTheme';
+
+const areaFilterLabel: string = Drupal.t(
+  'Job location',
+  {},
+  { context: 'Job search: Job location label' },
+);
+
+export const AreaFilter = () => {
+  const areaOptions = useAtomValue(areaFilterAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+  const value = useAtomValue(getAreaAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.AREA_FILTER}
+      multiSelect
+      noTags
+      onChange={(selectedOptions) => {
+        setStateValue({
+          key: SearchComponents.AREA_FILTER,
+          value: selectedOptions,
+        });
+      }}
+      options={areaOptions}
+      value={value}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': areaFilterLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': areaFilterLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: areaFilterLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t(
+          'All areas',
+          {},
+          { context: 'Location placeholder' },
+        ),
+      }}
+      theme={defaultMultiSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/CheckBoxFilters.tsx

@@ -0,0 +1,108 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import {
+  getCheckBoxValuesAtom,
+  getEmploymentSearchIdMap,
+  setStateValueAtom,
+} from '../store';
+import CustomIds from '../enum/CustomTermIds';
+import { Checkbox } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import { defaultCheckboxStyle } from '@/react/common/constants/checkboxStyle';
+
+export const CheckBoxFilters = () => {
+  const [continuous, internship, summerJobs, youthSummerJobs] = useAtomValue(
+    getCheckBoxValuesAtom,
+  );
+  const setStateValue = useSetAtom(setStateValueAtom);
+  const employmentSearchIdMap = useAtomValue(getEmploymentSearchIdMap);
+  const showContinuous = employmentSearchIdMap.get(CustomIds.CONTINUOUS);
+  const showInternships = employmentSearchIdMap.get(CustomIds.TRAINING);
+  const showSummerJobs = employmentSearchIdMap.get(CustomIds.SUMMER_JOBS);
+  const showYouthSummerJobs =
+    employmentSearchIdMap.get(CustomIds.YOUTH_SUMMER_JOBS) ||
+    employmentSearchIdMap.get(CustomIds.COOL_SUMMER_PROJECT);
+
+  return (
+    <fieldset className='job-search-form__checkboxes'>
+      <legend className='job-search-form__checkboxes-legend'>
+        {Drupal.t('Filters', {}, { context: 'Checkbox filters heading' })}
+      </legend>
+      {showContinuous && (
+        <Checkbox
+          checked={continuous}
+          className='job-search-form__checkbox'
+          id={SearchComponents.CONTINUOUS}
+          label={Drupal.t(
+            'Open-ended vacancies',
+            {},
+            { context: 'Job search' },
+          )}
+          name={SearchComponents.CONTINUOUS}
+          onClick={() =>
+            setStateValue({
+              key: SearchComponents.CONTINUOUS,
+              value: !continuous,
+            })
+          }
+          value={continuous.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+      {showInternships && (
+        <Checkbox
+          checked={internship}
+          className='job-search-form__checkbox'
+          id={SearchComponents.INTERNSHIPS}
+          label={Drupal.t('Practical training', {}, { context: 'Job search' })}
+          name={SearchComponents.INTERNSHIPS}
+          onClick={() =>
+            setStateValue({
+              key: SearchComponents.INTERNSHIPS,
+              value: !internship,
+            })
+          }
+          value={internship.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+      {showSummerJobs && (
+        <Checkbox
+          checked={summerJobs}
+          className='job-search-form__checkbox'
+          id={SearchComponents.SUMMER_JOBS}
+          label={Drupal.t('Summer jobs', {}, { context: 'Job search' })}
+          name={SearchComponents.SUMMER_JOBS}
+          onClick={() =>
+            setStateValue({
+              key: SearchComponents.SUMMER_JOBS,
+              value: !summerJobs,
+            })
+          }
+          value={summerJobs.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+      {showYouthSummerJobs && (
+        <Checkbox
+          checked={youthSummerJobs}
+          className='job-search-form__checkbox'
+          id={SearchComponents.YOUTH_SUMMER_JOBS}
+          label={Drupal.t(
+            'Summer jobs for young people',
+            {},
+            { context: 'Job search' },
+          )}
+          name={SearchComponents.YOUTH_SUMMER_JOBS}
+          onClick={() =>
+            setStateValue({
+              key: SearchComponents.YOUTH_SUMMER_JOBS,
+              value: !youthSummerJobs,
+            })
+          }
+          value={youthSummerJobs.toString()}
+          style={defaultCheckboxStyle}
+        />
+      )}
+    </fieldset>
+  );
+};

src/js/react/apps/job-search/components/EmploymentFilter.tsx

@@ -0,0 +1,55 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { employmentAtom, getEmploymentAtom, setStateValueAtom } from '../store';
+import { Select } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import { defaultMultiSelectTheme } from '@/react/common/constants/selectTheme';
+
+const employmentRelationshipLabel: string = Drupal.t(
+  'Employment type',
+  {},
+  { context: 'Employment filter label' },
+);
+
+export const EmploymentFilter = () => {
+  const employmentOptions = useAtomValue(employmentAtom);
+  const value = useAtomValue(getEmploymentAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.EMPLOYMENT}
+      multiSelect
+      noTags
+      onChange={(selectedOptions) =>
+        setStateValue({
+          key: SearchComponents.EMPLOYMENT,
+          value: selectedOptions,
+        })
+      }
+      options={employmentOptions}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': employmentRelationshipLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': employmentRelationshipLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: employmentRelationshipLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t(
+          'All types of employment',
+          {},
+          { context: 'Employment filter placeholder' },
+        ),
+      }}
+      value={value}
+      theme={defaultMultiSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/LanguageFilter.tsx

@@ -0,0 +1,54 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getLanguageAtom, languagesAtom, setStateValueAtom } from '../store';
+import { Select } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import { defaultSelectTheme } from '@/react/common/constants/selectTheme';
+
+const languageLabel: string = Drupal.t(
+  'Language',
+  {},
+  { context: 'Language filter label' },
+);
+
+export const LanguageFilter = () => {
+  const languageOptions = useAtomValue(languagesAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+  const value = useAtomValue(getLanguageAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.LANGUAGE}
+      noTags
+      onChange={(selectedOptions) => {
+        setStateValue({
+          key: SearchComponents.LANGUAGE,
+          value: selectedOptions,
+        });
+      }}
+      options={languageOptions}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': languageLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': languageLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: languageLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t(
+          'All languages',
+          {},
+          { context: 'Language placeholder' },
+        ),
+      }}
+      value={value}
+      theme={defaultSelectTheme}
+    />
+  );
+};

src/js/react/apps/job-search/components/SearchBar.tsx

@@ -0,0 +1,36 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getKeywordAtom, setStateValueAtom } from '../store';
+import { TextInput } from 'hds-react';
+import { defaultTextInputStyle } from '@/react/common/constants/textInputStyle';
+import SearchComponents from '../enum/SearchComponents';
+
+export const SearchBar = () => {
+  const keyword = useAtomValue(getKeywordAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setStateValue({
+      key: SearchComponents.KEYWORD,
+      value: event.target.value.replace(/\s+/g, ' '),
+    });
+  };
+
+  return (
+    <TextInput
+      className='job-search-form__filter'
+      id={SearchComponents.KEYWORD}
+      label={Drupal.t('Search term', {}, { context: 'Search keyword label' })}
+      name={SearchComponents.KEYWORD}
+      onChange={handleChange}
+      placeholder={Drupal.t(
+        'Eg. title, location, department',
+        {},
+        { context: 'HELfi Rekry job search keyword placeholder' },
+      )}
+      type='search'
+      value={keyword}
+      clearButtonAriaLabel={Drupal.t('Clear', {}, { context: 'React search' })}
+      style={defaultTextInputStyle}
+    />
+  );
+};

src/js/react/apps/job-search/components/TaskAreaFilter.tsx

@@ -0,0 +1,56 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { getTaskAreasAtom, setStateValueAtom, taskAreasAtom } from '../store';
+import { Select } from 'hds-react';
+import SearchComponents from '../enum/SearchComponents';
+import type { OptionType } from '../types/OptionType';
+import { defaultMultiSelectTheme } from '@/react/common/constants/selectTheme';
+
+const taskAreasLabel: string = Drupal.t(
+  'Task area',
+  {},
+  { context: 'Task areas filter label' },
+);
+
+export const TaskAreaFilter = () => {
+  const taskAreaOptions = useAtomValue(taskAreasAtom);
+  const value = useAtomValue(getTaskAreasAtom);
+  const setStateValue = useSetAtom(setStateValueAtom);
+
+  return (
+    <Select
+      className='job-search-form__dropdown'
+      clearable
+      id={SearchComponents.TASK_AREAS}
+      multiSelect
+      noTags
+      onChange={(selectedOptions) => {
+        setStateValue({
+          key: SearchComponents.TASK_AREAS,
+          value: selectedOptions as OptionType[],
+        });
+      }}
+      options={taskAreaOptions}
+      texts={{
+        clearButtonAriaLabel_one: Drupal.t(
+          'Clear @label selection',
+          { '@label': taskAreasLabel },
+          { context: 'React search clear selection label' },
+        ),
+        clearButtonAriaLabel_multiple: Drupal.t(
+          'Clear @label selection',
+          { '@label': taskAreasLabel },
+          { context: 'React search clear selection label' },
+        ),
+        label: taskAreasLabel,
+        language: window.drupalSettings.path.currentLanguage,
+        placeholder: Drupal.t(
+          'All fields',
+          {},
+          { context: 'Task areas filter placeholder' },
+        ),
+      }}
+      value={value}
+      theme={defaultMultiSelectTheme}
+    />
+  );
+};