Checkbox for NOT filter

- moved checkbox filters to new component

- removed innocent console.log

- fixed nullPtr issue

- fixed after update dependencies

src/accessions/ui/c/Filters.tsx

@@ -12,6 +12,7 @@ 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 OptionsFilter from 'ui/common/filter/OptionsFilter';
 import AutocompleteFilter from 'ui/common/filter/AutocompleteFilter';
 import Accession from 'model/accession/Accession';
 import Crop from 'model/genesys/Crop';
@@ -79,12 +80,13 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode,
         <DateFilter name="lastModifiedDate" label={ t('common:f.lastModifiedDate') }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('accessions.public.f.crop') }>
-        <StringArrFilter
+        <OptionsFilter
           name="crop"
           valueField="shortName"
           labelField="name"
           options={ crops }
           terms={ terms && terms.get('crop.shortName') }
+          initialFormValues={ initialValues }
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('accessions.common.taxonomy') }>
@@ -129,7 +131,7 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode,
         <NumberFilter name="geo.elevation" label={ t('accessions.public.f.elevation') } />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('accessions.common.sampStat') }>
-        <StringArrFilter
+        <OptionsFilter
           name="sampStat"
           options={ Accession.SAMPSTAT }
           byKey
@@ -138,7 +140,7 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode,
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('accessions.common.storageType') }>
-        <StringArrFilter
+        <OptionsFilter
           name="storage"
           options={ Accession.STORAGE }
           byKey

src/crop/ui/c/CropFilter.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import Crop from 'model/genesys/Crop';
 
-import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter from 'ui/common/filter/OptionsFilter';
 
 interface IProps extends React.ClassAttributes<any> {
   crops: Crop[];
@@ -14,7 +14,7 @@ class CropFilter extends React.Component<IProps, any> {
   public render() {
     const {crops} = this.props;
     return (
-      <StringArrFilter name="crop" options={ crops && crops.sort((a, b) => a.name.localeCompare(b.name)) } valueField="shortName" labelField="name" { ...this.props }/>
+      <OptionsFilter name="crop" options={ crops && crops.sort((a, b) => a.name.localeCompare(b.name)) } valueField="shortName" labelField="name" { ...this.props }/>
     );
   }
 }

src/datasets/ui/c/Filters.tsx

@@ -11,6 +11,7 @@ import FiltersBlock from 'ui/common/filter/FiltersBlock';
 import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
 import StringFilter from 'ui/common/filter/StringFilter';
 import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter from 'ui/common/filter/OptionsFilter';
 import TextFilter from 'ui/common/filter/TextFilter';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 import NumberFilter from 'ui/common/filter/NumberFilter';
@@ -21,7 +22,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 
 // <StringArrFilter name="language" label="Language" placeholder="Language"/>
 
-const DatasetFilters = ({ handleSubmit, initialize, t, terms, crops, ...other }:
+const DatasetFilters = ({ handleSubmit, initialize, t, terms, crops, initialValues, ...other }:
                           WithTranslation & { handleSubmit: any, initialize: any, terms: any, crops: Crop[]} & any) => {
   let sectionIndex: number = 0;
   return (
@@ -54,12 +55,13 @@ const DatasetFilters = ({ handleSubmit, initialize, t, terms, crops, ...other }:
         <NumberFilter name="locations.decimalLongitude" label={ t('datasets.public.f.longitude') }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('datasets.public.f.crop') }>
-        <StringArrFilter
+        <OptionsFilter
           name="crops"
           valueField="shortName"
           labelField="name"
           options={ crops }
           terms={ terms && terms.get('crops') }
+        initialFormValues={ initialValues }
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('datasets.public.f.accession') }>

src/datasets/ui/dashboard/c/DashboardFilters.tsx

@@ -12,7 +12,7 @@ import Authorize from 'ui/common/authorized/Authorize';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 import StatusFilter from 'ui/catalog/dashboard/c/StatusFilter';  // move
 
-const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTranslation & { handleSubmit, initialize } & any) => (
+const DashboardFilters = ({ handleSubmit, initialize, initialValues, t, ...other }: WithTranslation & { handleSubmit, initialize } & any) => (
   <FiltersBlock
     title={ t('descriptors.dashboard.f.title') }
     handleSubmit={ handleSubmit }
@@ -20,7 +20,7 @@ const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTransla
     { ...other }
   >
     <CollapsibleComponentSearch title={ t('descriptors.dashboard.f.status') }>
-      <StatusFilter/>
+      <StatusFilter initialFormValues={ initialValues }/>
     </CollapsibleComponentSearch>
     <CollapsibleComponentSearch title={ t('common:f.textSearch') }>
       <TextFilter
@@ -34,7 +34,7 @@ const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTransla
       </CollapsibleComponentSearch>
     </Authorize>
     <CollapsibleComponentSearch title={ t('descriptors.dashboard.f.crop') }>
-      <CropFilter name="crops"/>
+      <CropFilter name="crops" initialFormValues={ initialValues }/>
     </CollapsibleComponentSearch>
   </FiltersBlock>
 );

src/descriptorlists/ui/c/Filters.tsx

@@ -15,10 +15,10 @@ import PartnerFilter from 'partners/ui/c/PartnerFilter';
 import IconButton from '@material-ui/core/IconButton';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import InputAdornment from '@material-ui/core/InputAdornment';
-import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter from 'ui/common/filter/OptionsFilter';
 
 
-const DescriptorListFilters = ({ handleSubmit, initialize, t, terms, crops, ...other }:
+const DescriptorListFilters = ({ handleSubmit, initialize, t, terms, crops, initialValues, ...other }:
                                  WithTranslation & { handleSubmit?: any, initialize: any, terms: any, crops: Crop[] } & any) => {
   let sectionIndex: number = 0;
   return (
@@ -44,12 +44,13 @@ const DescriptorListFilters = ({ handleSubmit, initialize, t, terms, crops, ...o
         <PartnerFilter name="owner" label={ t('descriptorlists.public.common.partner') }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('descriptorlists.public.common.crop') }>
-        <StringArrFilter
+        <OptionsFilter
           name="crop"
           valueField="shortName"
           labelField="name"
           options={ crops }
           terms={ terms && terms.get('crop') }
+        initialFormValues={ initialValues }
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('descriptorlists.public.common.publisher') }>

src/descriptors/ui/c/Filters.tsx

@@ -5,6 +5,7 @@ import { WithTranslation, withTranslation } from 'react-i18next';
 import FiltersBlock from 'ui/common/filter/FiltersBlock';
 import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
 import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter from 'ui/common/filter/OptionsFilter';
 import BooleanFilter from 'ui/common/filter/BooleanFilter';
 import TextFilter from 'ui/common/filter/TextFilter';
 import CropFilter from 'crop/ui/c/CropFilter';
@@ -13,7 +14,7 @@ import Descriptor from 'model/catalog/Descriptor';
 import DescriptorListPicker from './DescriptorListPicker';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 
-const DescriptorFilters = ({ handleSubmit, initialize, t, ...other }:
+const DescriptorFilters = ({ handleSubmit, initialize, t, initialValues, ...other }:
                              WithTranslation & { handleSubmit: any, initialize: any } & any) => {
   let sectionIndex: number = 0;
   return (
@@ -32,10 +33,10 @@ const DescriptorFilters = ({ handleSubmit, initialize, t, ...other }:
         <DescriptorListPicker name="descriptorLists.uuid" label={ t('descriptors.public.f.select') }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('descriptors.public.f.crop') }>
-        <CropFilter/>
+        <CropFilter initialFormValues={ initialValues }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('descriptors.public.f.category') }>
-        <StringArrFilter name="category" options={ Descriptor.CATEGORIES } byKey/>
+        <OptionsFilter name="category" options={ Descriptor.CATEGORIES } byKey initialFormValues={ initialValues }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title={ t('descriptors.public.f.tidbits') }>
         <BooleanFilter name="used" label={ t('descriptors.public.f.isUsed') } notNull/>

src/descriptors/ui/dashboard/c/DashboardFilters.tsx

@@ -13,7 +13,7 @@ import Authorize from 'ui/common/authorized/Authorize';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 import StatusFilter from 'ui/catalog/dashboard/c/StatusFilter';  // move
 
-const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTranslation & { handleSubmit, initialize } & any) => (
+const DashboardFilters = ({ handleSubmit, initialize, t, initialValues, ...other }: WithTranslation & { handleSubmit, initialize } & any) => (
   <FiltersBlock
     title={ t('descriptors.dashboard.f.title') }
     handleSubmit={ handleSubmit }
@@ -21,7 +21,7 @@ const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTransla
     { ...other }
   >
     <CollapsibleComponentSearch title={ t('descriptors.dashboard.f.status') }>
-      <StatusFilter/>
+      <StatusFilter initialFormValues={ initialValues }/>
       <BooleanFilter name="used" label={ t('descriptors.dashboard.f.descriptorInUse') } notNull/>
     </CollapsibleComponentSearch>
     <CollapsibleComponentSearch title={ t('common:f.textSearch') }>
@@ -36,7 +36,7 @@ const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTransla
       </CollapsibleComponentSearch>
     </Authorize>
     <CollapsibleComponentSearch title={ t('descriptors.dashboard.f.crop') }>
-      <CropFilter/>
+      <CropFilter initialFormValues={ initialValues }/>
     </CollapsibleComponentSearch>
   </FiltersBlock>
 );

src/requests/ui/admin/c/MaterialRequestFilter.tsx

@@ -18,7 +18,7 @@ const MaterialRequestFilters = ({handleSubmit, initialValues, initialize, ...oth
         <StringArrFilter name="pid" label="requests.admin.f.pid" placeholder="ihope-youk-noww-hatyouredoing"/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title="common:label.status">
-        <StatusFilter isMaterialRequestFilter/>
+        <StatusFilter isMaterialRequestFilter initialFormValues={ initialValues }/>
       </CollapsibleComponentSearch>
     </FiltersBlock>
   );

src/requests/ui/admin/c/MaterialSubRequestFilters.tsx

@@ -22,7 +22,7 @@ const MaterialSubRequestFilters = ({handleSubmit, initialValues, initialize, ...
         <DateFilter name="lastReminderDate" label="common:f.lastReminderDate"/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title="common:label.status">
-        <StatusFilter isMaterialSubRequestFilter/>
+        <StatusFilter isMaterialSubRequestFilter initialFormValues={ initialValues }/>
       </CollapsibleComponentSearch>
     </FiltersBlock>
   );

src/subsets/ui/c/Filters.tsx

@@ -8,6 +8,7 @@ import FiltersBlock from 'ui/common/filter/FiltersBlock';
 import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
 import StringFilter from 'ui/common/filter/StringFilter';
 import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter from 'ui/common/filter/OptionsFilter';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 import TextFilter from 'ui/common/filter/TextFilter';
 import IconButton from '@material-ui/core/IconButton';
@@ -43,12 +44,13 @@ const SubsetFilters = ({handleSubmit, initialValues, initialize, t, terms, crops
         <StringFilter name="description" searchType="contains" label={ t('subsets.public.f.description') } placeholder={ t('subsets.public.f.descriptionPlaceholder') }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ }  title={ t('subsets.public.f.crop') }>
-        <StringArrFilter
+        <OptionsFilter
           name="crops"
           valueField="shortName"
           labelField="name"
           options={ crops }
           terms={ terms && terms.get('crops') }
+          initialFormValues={ initialValues }
         />
       </CollapsibleComponentSearch>
     </FiltersBlock>

src/subsets/ui/dashboard/c/SubsetFilters.tsx

@@ -15,7 +15,7 @@ const SubsetFilters = ({handleSubmit, initialValues, initialize, t, ...other}) =
   return (
     <FiltersBlock title={ t('subsets.dashboard.f.filterTitle') } handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
       <CollapsibleComponentSearch title={ t('common:label.status') }>
-        <StatusFilter/>
+        <StatusFilter initialFormValues={ initialValues }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title={ t('subsets.public.f.partner') }>
         <PartnerFilter name="owner" label="subsets.public.f.partner"/>
@@ -28,7 +28,7 @@ const SubsetFilters = ({handleSubmit, initialValues, initialize, t, ...other}) =
         <StringArrFilter name="publisher" label={ t('subsets.dashboard.f.publisher') } placeholder={ t('subsets.dashboard.f.publisherPlaceholder') }/>
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title={ t('subsets.dashboard.f.crop') }>
-        <CropFilter name="crops" />
+        <CropFilter name="crops" initialFormValues={ initialValues }/>
       </CollapsibleComponentSearch>
     </FiltersBlock>
   );

src/ui/catalog/dashboard/c/Filters.tsx

@@ -12,10 +12,10 @@ import Authorize from 'ui/common/authorized/Authorize';
 import PartnerFilter from 'partners/ui/c/PartnerFilter';
 import StatusFilter from './StatusFilter';
 
-const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTranslation & { handleSubmit, initialize } & any) => (
+const DashboardFilters = ({ handleSubmit, initialize, initialValues, t, ...other }: WithTranslation & { handleSubmit, initialize } & any) => (
   <FiltersBlock title={ t('common:label.filters') } handleSubmit={ handleSubmit } initialize={ initialize } { ...other }>
     <CollapsibleComponentSearch title={ t('common:label.status') }>
-      <StatusFilter/>
+      <StatusFilter initialFormValues={ initialValues }/>
     </CollapsibleComponentSearch>
     <CollapsibleComponentSearch title={ t('common:f.textSearch') }>
       <TextFilter name="_text" label={ t('common:f.textSearch') } placeholder={ t('dashboard.f.keywordSearchPlaceholder') }/>
@@ -26,7 +26,7 @@ const DashboardFilters = ({ handleSubmit, initialize, t, ...other }: WithTransla
       </CollapsibleComponentSearch>
     </Authorize>
     <CollapsibleComponentSearch title={ t('crop.common.modelName') }>
-      <CropFilter/>
+      <CropFilter initialFormValues={ initialValues }/>
     </CollapsibleComponentSearch>
   </FiltersBlock>
 );

src/ui/catalog/dashboard/c/StatusFilter.tsx

 import * as React from 'react';
 
-import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter, {IOptionsFilterProps} from 'ui/common/filter/OptionsFilter';
 import { PublishState } from 'model/common.model';
 
-interface IStatusFilter {
+interface IStatusFilter extends Partial<IOptionsFilterProps> {
   isMaterialRequestFilter?: boolean;
   isMaterialSubRequestFilter?: boolean;
 }
@@ -29,7 +29,7 @@ class StatusFilter extends React.Component<IStatusFilter, any> {
 
   public render() {
     return (
-      <StringArrFilter name="state" options={ this.options } byKey/>
+      <OptionsFilter name="state" options={ this.options } byKey { ...this.props }/>
     );
   }
 }

src/ui/common/checkbox/ThreeStateCheckbox.tsx

+import * as React from 'react';
+import { Checkbox } from '@material-ui/core';
+
+
+interface IThreeStateCheckboxProps extends React.ClassAttributes<any> {
+  value?: number;
+  onPositiveChange?: () => void;
+  onNeutralChange?: () => void;
+  onNegativeChange?: () => void;
+  onChange?: (value: number) => void;
+}
+
+class ThreeStateCheckbox extends React.Component<IThreeStateCheckboxProps> {
+
+  public state = {
+    currentState: 0,
+  };
+
+  public componentDidMount(): void {
+    const {value} = this.props;
+    this.setState({currentState: value});
+  }
+
+  public componentWillReceiveProps(nextProps) {
+    const {value} = nextProps;
+    this.setState({currentState: value});
+  }
+
+  public render() {
+    const {currentState} = this.state;
+
+    return currentState === -1 ? (
+      <Checkbox
+        checked
+        indeterminate
+        onChange={ this.onNegativeChange }
+      />
+    ) : (
+      <Checkbox
+        checked={ !!currentState }
+        onChange={ this.onPositiveChange }
+      />
+    );
+  }
+
+  protected onNegativeChange = () => {
+    const {onChange, onNeutralChange} = this.props;
+    if (onChange) {
+      onChange(0);
+    }
+    if (onNeutralChange) {
+      onNeutralChange();
+    }
+    return this.setState({currentState: 0});
+  }
+
+  protected onPositiveChange = (event, value) => {
+    const {onChange, onNegativeChange, onPositiveChange} = this.props;
+
+    if (value) {
+      if (onChange) {
+        onChange(1);
+      }
+      if (onPositiveChange) {
+        onPositiveChange();
+      }
+      return this.setState({currentState: 1});
+    } else {
+      if (onChange) {
+        onChange(-1);
+      }
+      if (onNegativeChange) {
+        onNegativeChange();
+      }
+      return this.setState({currentState: -1});
+    }
+  }
+}
+
+export default ThreeStateCheckbox;

src/user/ui/admin/c/UserFilter.tsx

@@ -7,6 +7,7 @@ import FiltersBlock from 'ui/common/filter/FiltersBlock';
 import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
 import StringFilter from 'ui/common/filter/StringFilter';
 import StringArrFilter from 'ui/common/filter/StringArrFilter';
+import OptionsFilter from 'ui/common/filter/OptionsFilter';
 import BooleanFilter from 'ui/common/filter/BooleanFilter';
 import {User} from 'model/user/User';
 import DateFilter from 'ui/common/filter/DateFilter';
@@ -21,7 +22,7 @@ const UserFilters = ({handleSubmit, initialValues, initialize, t,  ...other}) =>
         <StringArrFilter name="uuid" label="common:label.UUID" placeholder="ihope-youk-noww-hatyouredoing" validate={ [Validators.uuid] }/>
         </CollapsibleComponentSearch>
         <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title="user.common.roleLabel">
-          <StringArrFilter name="role" options={ User.USERROLES } byKey />
+          <OptionsFilter name="role" options={ User.USERROLES } byKey initialFormValues={ initialValues }/>
         </CollapsibleComponentSearch>
       <CollapsibleComponentSearch sectionIndex={ sectionIndex++ } title="common:f.dateSearch">
         <DateFilter name="createdDate" label="common:f.createdDate"/>