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';

import { ACCESSION_FILTERFORM } from 'accessions/constants';

import FiltersBlock from 'ui/common/filter/FiltersBlock';
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
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, 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 }>
      <CollapsibleComponentSearch title={ t('accessions.public.f.historic') }>
        <BooleanFilter
          name="historic"
          terms={ terms && terms.get('historic') }
          notNull
        />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('common:f.textSearch') }>
        <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') } />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('common:f.dateSearch') }>
        <DateFilter name="createdDate" label={ t('common:f.createdDate') }/>
        <DateFilter name="lastModifiedDate" label={ t('common:f.lastModifiedDate') }/>
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.public.f.crop') }>
        <StringArrFilter
          name="crop"
          valueField="shortName"
          labelField="name"
          options={ crops }
          terms={ terms && terms.get('crop.shortName') }
        />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.common.taxonomy') }>
        <AutocompleteFilter
          filterCode={ filterCode }
          autocomplete={ autocomplete }
          name="taxonomy.genus"
          terms={ terms && terms.get('taxonomy.genus') }
          label={ t('accessions.common.genus') }
          placeholder="Hordeum"
          classes={ {propertiesRowLabel: 'font-italic'} }
        />
        <StringArrFilter
          name="taxonomy.genusSpecies"
          terms={ terms && terms.get('taxonomy.genusSpecies') }
          label={ t('accessions.common.genusSpecies') }
          placeholder="Hordeum vulgare"
          classes={ {propertiesRowLabel: 'font-italic'} }
        />
        <StringArrFilter
          name="taxonomy.species"
          terms={ terms && terms.get('taxonomy.species') }
          label={ t('accessions.common.species') }
          placeholder="vulgare"
          classes={ {propertiesRowLabel: 'font-italic'} }
        />
        <StringFilter name="taxonomy.subtaxa" searchType="contains" label={ t('accessions.public.f.subtaxon') } placeholder=""/>
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.public.f.originOfMaterial') }>
        <StringArrFilter name="countryOfOrigin.code3" terms={ terms && terms.get('countryOfOrigin.code3') } label={ t('accessions.common.countryOfOrigin') } placeholder="SVN"/>
        <NumberFilter name="geo.latitude" label={ t('geo.common.latitude') } />
        <NumberFilter name="geo.longitude" label={ t('geo.common.longitude') } />
        <NumberFilter name="geo.elevation" label={ t('accessions.public.f.elevation') } />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.common.sampStat') }>
        <StringArrFilter
          name="sampStat"
          options={ Accession.SAMPSTAT }
          byKey
          indented
          terms={ terms && terms.get('sampStat') }
        />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.common.storageType') }>
        <StringArrFilter
          name="storage"
          options={ Accession.STORAGE }
          byKey
          indented
          terms={ terms && terms.get('storage') }
        />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.public.f.status') }>
        <BooleanFilter
          name="available"
          label={ t('accessions.public.f.available') }
          terms={ terms && terms.get('available') }
        />
        <BooleanFilter
          name="mlsStatus"
          label={ t('accessions.public.f.mlsStatus') }
          terms={ terms && terms.get('mlsStatus') }
        />
        <BooleanFilter
          name="sgsv"
          label={ t('accessions.public.f.sgsv') }
          terms={ terms && terms.get('sgsv') }
          notNull
        />
        <BooleanFilter
          name="images"
          label={ t('accessions.public.f.images') }
          terms={ terms && terms.get('images') }
          notNull
        />
      </CollapsibleComponentSearch>
      <CollapsibleComponentSearch title={ t('accessions.public.f.climate') }>
        <NumberFilter name="geo.climate.bio1" label={ t('accessions.climate.bio1') } />
        <NumberFilter name="geo.climate.bio2" label={ t('accessions.climate.bio2') } />
        <NumberFilter name="geo.climate.bio3" label={ t('accessions.climate.bio3') } />
        <NumberFilter name="geo.climate.bio4" label={ t('accessions.climate.bio4') } />
        <NumberFilter name="geo.climate.bio5" label={ t('accessions.climate.bio5') } />
        <NumberFilter name="geo.climate.bio6" label={ t('accessions.climate.bio6') } />
        <NumberFilter name="geo.climate.bio7" label={ t('accessions.climate.bio7') } />
        <NumberFilter name="geo.climate.bio8" label={ t('accessions.climate.bio8') } />
        <NumberFilter name="geo.climate.bio9" label={ t('accessions.climate.bio9') } />
        <NumberFilter name="geo.climate.bio10" label={ t('accessions.climate.bio10') } />
        <NumberFilter name="geo.climate.bio11" label={ t('accessions.climate.bio11') } />
        <NumberFilter name="geo.climate.bio12" label={ t('accessions.climate.bio12') } />
        <NumberFilter name="geo.climate.bio13" label={ t('accessions.climate.bio13') } />
        <NumberFilter name="geo.climate.bio14" label={ t('accessions.climate.bio14') } />
        <NumberFilter name="geo.climate.bio15" label={ t('accessions.climate.bio15') } />
        <NumberFilter name="geo.climate.bio16" label={ t('accessions.climate.bio16') } />
        <NumberFilter name="geo.climate.bio17" label={ t('accessions.climate.bio17') } />
        <NumberFilter name="geo.climate.bio18" label={ t('accessions.climate.bio18') } />
        <NumberFilter name="geo.climate.bio19" label={ t('accessions.climate.bio19') } />
      </CollapsibleComponentSearch>
    </FiltersBlock>
  );
};

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, mapDispatchToProps)(AccessionFilters)));