Simple search form

- Updated institute filter

src/accession/AccessionFilters.tsx

 import React, { useState } from 'react';
 import AccessionFilter from '@genesys/client/model/accession/AccessionFilter';
+import { useTranslation } from 'react-i18next';
 
 interface IAccessionFilters extends React.ClassAttributes<any> {
   filter: AccessionFilter;
@@ -8,24 +9,70 @@ interface IAccessionFilters extends React.ClassAttributes<any> {
 
 export function AccessionFilters(props: IAccessionFilters) {
   const { filter, applyFilter } = props;
+
+  const { t } = useTranslation();
   const [text, setText] = useState(filter._text || '');
+  const [historic, setHistoric] = useState(filter.historic === null);
+  const [available, setAvailable] = useState(!!filter.available && filter.institute && !!filter.institute.allowMaterialRequests);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    applyFilter({ _text: text });
+
+    applyFilter({
+      _text: text,
+      historic: historic ? null : false,
+      available: available || null,
+      institute: { ...(filter.institute || {}), allowMaterialRequests: !!available || null },
+    });
   };
 
   const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setText(e.target.value);
   };
 
+  const onHistoricChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = e.currentTarget as HTMLInputElement;
+    setHistoric(checked);
+  };
+
+  const onAvailableChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { checked } = e.currentTarget as HTMLInputElement;
+    setAvailable(checked);
+  };
+
   return (
     <form className="form-inline mb-4" onSubmit={ handleSubmit }>
       <div className="form-group mx-sm-2">
-        <label className="mr-2">Full text search</label>
+        <label className="mr-2">{ t('accession.filters.fullText') }</label>
         <input name="full-text-search" type="text" className="form-control" value={ text } onChange={ onInputChange }/>
       </div>
-      <button className="btn btn-primary" type="submit">Submit</button>
+      <div className="form-check pr-2">
+        <input
+          id="historical"
+          className="form-check-input"
+          name="historic"
+          type="checkbox"
+          onChange={ onHistoricChange }
+          checked={ historic }
+        />
+        <label htmlFor="historical" className="form-check-label">
+          { t('accession.filters.historical') }
+        </label>
+      </div>
+      <div className="form-check pr-2">
+        <input
+          id="available"
+          className="form-check-input"
+          name="internalRequest"
+          type="checkbox"
+          onChange={ onAvailableChange }
+          checked={ available }
+        />
+        <label htmlFor="available" className="form-check-label">
+          { t('accession.filters.available') }
+        </label>
+      </div>
+      <button className="btn btn-primary" type="submit">{ t('action.submit') }</button>
     </form>
   );
 }

src/locales/en/translations.json

@@ -3,6 +3,9 @@
   "label": {
     "andMore": "And {{otherMore, number}} more"
   },
+  "action": {
+    "submit": "Submit"
+  },
   "pag": {
     "first": "First",
     "prev": "Prev",
@@ -74,6 +77,11 @@
       "accessionNames": "Accession names",
       "remarks": "Remarks"
     },
+    "filters": {
+      "fullText": "Full text search",
+      "historical": "Include historical material",
+      "available": "Only material I can request"
+    },
     "overview": {
       "title": "Collection overview",
       "about": "About {{count, number}} {{what, lowercase}}",