AutocompleteFilter component

src/accessions/actions/public.ts

@@ -40,6 +40,7 @@ const apiAccessionsMapInfo = createApiCaller(AccessionService.mapInfo, RECEIVE_A
 
 const apiGeoJson = createPureApiCaller(AccessionService.geoJson);
 const apiClimateInfo = createPureApiCaller(ClimateService.getCurrentClimate);
+const apiAutocomplete = createPureApiCaller(AccessionService.autocomplete);
 
 const apiListAccessionByUuid = createPureApiCaller(AccessionService.listAllByUuid);
 const apiAccessionByUuid = createApiCaller(AccessionService.getDetailsByUuid, RECEIVE_ACCESSION);
@@ -164,6 +165,10 @@ const makeRange = (variable: number, diff: number) => {
   };
 };
 
+export const autocomplete = (field: string, term: string, filters: string | AccessionFilter) => (dispatch, getState) => {
+  return dispatch(apiAutocomplete(field, term, filters));
+};
+
 export const applyClimateFilters = (climate: TileClimate, extraFilters?: any) => (dispatch) => {
   // BIO1 = Annual Mean Temperature !!
   // BIO2 = Mean Diurnal Range (Mean of monthly (max temp - min temp))

src/accessions/ui/BrowsePage.tsx

@@ -63,7 +63,13 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
 
     return (
       <PageLayout sidebar={
-        <AccessionFilters initialValues={ paged && paged.filter || {} } onSubmit={ this.myApplyFilters } terms={ suggestionTerms } crops={ crops }/>
+        <AccessionFilters
+          initialValues={ paged && paged.filter || {} }
+          filterCode={ paged && paged.filterCode || '' }
+          onSubmit={ this.myApplyFilters }
+          terms={ suggestionTerms }
+          crops={ crops }
+        />
        }>
         <PageTitle  title={ t('accessions.public.p.browse.title') }/>
         <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />

src/accessions/ui/MapPage.tsx

@@ -356,9 +356,13 @@ class BrowsePage extends React.Component<IMapPageProps, any> {
               <ContentHeader title={ t('accessions.public.p.browse.title') } subTitle={ t('accessions.public.p.browse.subTitle') } />
 
               <Drawer variant="temporary" open={ sidebarOpened } onClose={ this.closeSidebar }>
-                    <AccessionsFilters terms={ suggestionTerms } onSubmit={ loadAccessionsMapInfo } initialValues={ mapInfo.data.filter }/>
-                </Drawer>
-
+                <AccessionsFilters
+                  filterCode={ filterCode || '' }
+                  terms={ suggestionTerms }
+                  onSubmit={ loadAccessionsMapInfo }
+                  initialValues={ mapInfo.data.filter }
+                />
+              </Drawer>
 
               <Dialog open={ dialogOpened } onClose={ this.hideDialog } maxWidth="md" fullWidth>
                 <BioClimateDisplay classes={ {section: classes.climateDialog} } climateData={ climateData }/>

src/accessions/ui/OverviewPage.tsx

@@ -158,7 +158,12 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
     return (
       <PageLayout
         sidebar={
-          <AccessionFilters terms={ suggestionTerms } initialValues={ overviewWrapper && overviewWrapper.filter || {} } onSubmit={ applyOverviewFilters }/>
+          <AccessionFilters
+            filterCode={ filterCode || '' }
+            terms={ suggestionTerms }
+            initialValues={ overviewWrapper && overviewWrapper.filter || {} }
+            onSubmit={ applyOverviewFilters }
+          />
         }
         withFooter
       >

src/accessions/ui/c/Filters.tsx

 import * as React from 'react';
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
 import {translate} from 'react-i18next';
 
@@ -10,11 +11,13 @@ import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSea
 import NumberFilter from 'ui/common/filter/NumberFilter';
 import StringFilter from 'ui/common/filter/StringFilter';
 import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import AutocompleteFilter from 'ui/common/filter/AutocompleteFilter';
 import Accession from 'model/accession/Accession';
 import DateFilter from 'ui/common/filter/DateFilter';
 import BooleanFilter from 'ui/common/filter/BooleanFilter';
+import { autocomplete } from 'accessions/actions/public';
 
-const AccessionFilters = ({handleSubmit, initialize, terms, crops, t, ...other}) => {
+const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode, autocomplete, terms, crops, t, ...other}) => {
   // console.log('AccessionFilters', initialValues);
   return (
     <FiltersBlock title={ t('accessions.public.f.filtersTitle') } handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
@@ -26,7 +29,14 @@ const AccessionFilters = ({handleSubmit, initialize, terms, crops, t, ...other})
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title={ t('common:f.textSearch') }>
-        <StringArrFilter name="institute.code" terms={ terms && terms.get('institute.code') } label={ t('accessions.common.instituteCode') } placeholder="NGA039"/>
+        <AutocompleteFilter
+          filterCode={ filterCode }
+          autocomplete={ autocomplete }
+          name="institute.code"
+          terms={ terms && terms.get('institute.code') }
+          label={ t('accessions.common.instituteCode') }
+          placeholder="NGA039"
+        />
         <StringArrFilter name="institute.country.code3" label={ t('accessions.model.institute.country.iso3') } placeholder="NGA"/>
         <StringFilter name="accessionNumber" searchType="contains" label={ t('accessions.common.acceNumb') } placeholder="IRGC"/>
         <NumberFilter name="seqNo" label={ t('accessions.public.f.seqNumber') } />
@@ -45,7 +55,9 @@ const AccessionFilters = ({handleSubmit, initialize, terms, crops, t, ...other})
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title={ t('accessions.common.taxonomy') }>
-        <StringArrFilter
+        <AutocompleteFilter
+          filterCode={ filterCode }
+          autocomplete={ autocomplete }
           name="taxonomy.genus"
           terms={ terms && terms.get('taxonomy.genus') }
           label={ t('accessions.common.genus') }
@@ -143,11 +155,14 @@ const AccessionFilters = ({handleSubmit, initialize, terms, crops, t, ...other})
 
 const mapStateToProps = (state, ownProps) => ({
   crops: state.crop.public.list ? state.crop.public.list.data : undefined,
-
 });
 
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+  autocomplete,
+}, dispatch);
+
 export default translate()(reduxForm({
     enableReinitialize: true,
     destroyOnUnmount: false,
     form: ACCESSION_FILTERFORM,
-})(connect(mapStateToProps)(AccessionFilters)));
+})(connect(mapStateToProps, mapDispatchToProps)(AccessionFilters)));

src/model/LabelValue.ts

+/*
+* Defined in Swagger as '#/definitions/LabelValue«string»'
+*/
+
+class LabelValue<T> {
+  public label: string;
+  public value: T;
+}
+
+export default LabelValue;

src/service/genesys/AccessionService.ts

@@ -11,12 +11,14 @@ import FilteredPage, { IPageRequest } from 'model/FilteredPage';
 import {AccessionRef} from 'model/accession/AccessionRef';
 import AccessionAuditLog from 'model/accession/AccessionAuditLog';
 import AccessionSuggestionPage from 'model/accession/AccessionSuggestionPage';
+import LabelValue from 'model/LabelValue';
 
 const URL_GET_BY_DOI = `/api/v1/acn/{doi}`; // UrlTemplate doesn't like the / in DOI
 const URL_UUIDS_FROM_ACCE_NUMBERS = `/api/v1/acn/acce-number`;
 const URL_UUID_FROM_ACCE_NUMBER = UrlTemplate.parse(`/api/v1/acn/acce-number/{acceNumber}`);
 const URL_GET_BY_UUID = UrlTemplate.parse(`/api/v1/acn/{uuid}`);
 const URL_GEO_JSON = `/api/v1/acn/geoJson`;
+const URL_AUTOCOMPLETE = UrlTemplate.parse(`/api/v1/acn/autocomplete/{field}`);
 const URL_UUID_FROM_IDS = `/api/v1/acn/id`;
 const URL_LIST_BY_UUID = `/api/v1/acn/for-uuid`;
 const URL_GET_ACCESSION_AUDIT_LOG_BY_DOI = `/api/v1/acn/auditlog/{doi}`; // UrlTemplate doesn't like the / in DOI
@@ -366,6 +368,30 @@ class AccessionService {
       ...content,
     }).then(({ data }) => data);
   }
+
+  /**
+   * autocomplete at /api/v1/acn/autocomplete/{field}
+   *
+   * @param field field
+   * @param filter filter
+   * @param term term
+   */
+  public static autocomplete(field: string, term: string, filter: string | AccessionFilter, xhrConfig?): Promise<Array<LabelValue<string>>> {
+
+    const qs = QueryString.stringify({
+      f: typeof filter === 'string' ? filter : undefined,
+      term: term || undefined,
+    }, {});
+    const apiUrl = URL_AUTOCOMPLETE.expand({ field }) + (qs ? `?${qs}` : '');
+    const content = { data: typeof filter === 'string' ? null : { ...filter } };
+
+    return axiosBackend.request({
+      ...xhrConfig,
+      url: apiUrl,
+      method: 'GET',
+      ...content,
+    }).then(({ data }) => data as Array<LabelValue<string>>);
+  }
 }
 
 export default AccessionService;

src/ui/common/material-autosuggest/index.tsx

@@ -42,6 +42,8 @@ interface IMaterialAutosuggestProps extends React.ClassAttributes<any> {
     // show all suggestions when the input is focused, without further input by the user
     emptyquery?: boolean;
 
+    onSuggestionSelected?: any;
+
     // styles
     classes: any;
 
@@ -152,7 +154,7 @@ class MaterialAutosuggest extends React.Component<IMaterialAutosuggestProps, any
     }
 
     public render() {
-        const {suggestions, suggestionLabel, input, classes, ...other} = this.props;
+        const {suggestions, suggestionLabel, input, onSuggestionSelected, classes, ...other} = this.props;
 
         const getSuggestionValue = (suggestion) => {
             input.onChange.call(this, suggestion[suggestionLabel]);
@@ -183,6 +185,7 @@ class MaterialAutosuggest extends React.Component<IMaterialAutosuggestProps, any
                 renderSuggestionsContainer={ this.renderSuggestionsContainer }
                 getSuggestionValue={ getSuggestionValue }
                 renderSuggestion={ this.renderSuggestion }
+                onSuggestionSelected={ (e, data) => onSuggestionSelected(e, data, input, this) }
                 inputProps={ {
                     classes,
                     ...input,