Merge branch '573-checkbox-for-not-filter' into 'master'

Resolve "Checkbox for NOT filter"

Closes #573

See merge request genesys-pgr/genesys-ui!603

src/ui/common/filter/LicenceFilter.tsx

 import * as React from 'react';
-import { Field } from 'redux-form';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { withTranslation } from 'react-i18next';
 
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormControl from '@material-ui/core/FormControl';
-import FormGroup from '@material-ui/core/FormGroup';
 import { AVAILABLE_LICENSES } from 'model/License';
 import { ExternalLink } from 'ui/catalog/Links';
-import Checkbox from '@material-ui/core/Checkbox/Checkbox';
+import OptionsFilter, {IOptionsFilterProps} from 'ui/common/filter/OptionsFilter';
 
-
-interface ILicenceFilterInternalProps extends React.ClassAttributes<any> {
-  label: any;
-  input: any;
-  t: any;
-}
-
-class LicenceFilterInternal extends React.Component<ILicenceFilterInternalProps> {
-
-
-  public state = {
-    values: [],
-  };
-  private maybeAdd = (text: string) => {
-    const values = [...this.state.values];
-
-    if (text && text.length > 0) {
-      if (values.indexOf(text) < 0) {
-        values.push(text);
-      }
-      this.setState({
-        values,
-      });
-    }
-    return values;
-  }
-  private maybeRemove = (text: string) => {
-    const values = [...this.state.values];
-
-    if (text && text.length > 0) {
-      const index: number = values.indexOf(text);
-      if (index >= 0) {
-        values.splice(index, 1);
-      }
-      this.setState({
-        values,
-      });
-    }
-    return values;
-  }
-  private handleCheckbox = (event) => {
-    const { input } = this.props;
-
-    const values = event.target.checked ? this.maybeAdd(event.target.value) : this.maybeRemove(event.target.value);
-    input.onChange(values);
-  }
-
-  public componentWillMount() {
-    this.setState({
-      values: [...this.props.input.value],
-    });
-  }
-
-  public componentWillReceiveProps(nextProps) {
-    this.setState({
-      values: [...nextProps.input.value],
-    });
-  }
-
-  public render() {
-
-    const { values } = this.state;
-
-    return (
-      <FormControl fullWidth component={ 'fieldset' as 'div' }>
-        <FormGroup>
-          { AVAILABLE_LICENSES.map((license) => (
-            <FormControlLabel
-              key={ license.code }
-              value={ license.code }
-              label={ (
-                <div><b>{ license.code }</b>
-                  { license.url &&
-                  <div><ExternalLink link={ license.url }>{ license.title }</ExternalLink></div>
-                  }
-                </div>
-              ) }
-              control={
-                <Checkbox
-                  value={ license.code }
-                  checked={ values.indexOf(license.code) >= 0 }
-                  onChange={ this.handleCheckbox }/>
-              }
-            />
-          )) }
-        </FormGroup>
-      </FormControl>
-    );
-  }
-}
-
-interface ILicenceFilterProps extends React.ClassAttributes<any>, WithTranslation {
+interface ILicenceFilterProps extends Partial<IOptionsFilterProps> {
   name: string;
   className?: string;
 }
 
-class LicenceFilter extends React.Component<ILicenceFilterProps> {
+class LicenceFilter extends React.Component<ILicenceFilterProps | any> {
 
   public render() {
-    const { name, className, t } = this.props;
-
     return (
-      <Field
-        name={ name }
-        component={ LicenceFilterInternal }
-        t={ t }
-        className={ className }
+      <OptionsFilter
+        name={ this.props.name }
+        options={AVAILABLE_LICENSES }
+        valueField="code"
+        labelField="name"
+        renderCustomLabel={(license) => (
+          <div><b>{ license.code }</b>
+            { license.url &&
+            <div><ExternalLink link={ license.url }>{ license.title }</ExternalLink></div>
+            }
+          </div>
+        )}
+        { ...this.props }
       />
     );
   }

src/ui/common/filter/OptionsFilter.tsx

@@ -16,6 +16,7 @@ interface IOptionsFilterInternalProps extends React.ClassAttributes<any>, WithTr
   label?: string;
   labelField?: string;
   valueField?: string;
+  renderCustomLabel: (option: any) => any;
   options?: { [key: string]: any };
   indented?: boolean;
   t: any;
@@ -74,7 +75,7 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps,
 
 
   public render() {
-    const { label, options, indented, t, terms, valueField, labelField } = this.props;
+    const { label, options, indented, t, terms, valueField, labelField, renderCustomLabel } = this.props;
     const { values, notValues } = this.state;
 
     let tree;
@@ -102,14 +103,18 @@ class OptionsFilterInternal extends React.Component<IOptionsFilterInternalProps,
                 }
                 classes={ {label: 'full-width', root: 'mr-0'} }
                 label={
-                  <span className="full-width" style={ {display: 'flex', justifyContent: 'space-between'} }>
-                    { `${ t(options[key]) || (labelField ? key[labelField] : key) }` }
-                    { terms &&
-                      <span className="float-right">
-                        <Number value={ terms.get(valueField ? `${ key[valueField] }` : `${ key }`) }/>
+                  renderCustomLabel
+                    ? renderCustomLabel(key)
+                    : (
+                      <span className="full-width" style={ {display: 'flex', justifyContent: 'space-between'} }>
+                        { `${ t(options[key]) || (labelField ? key[labelField] : key) }` }
+                        { terms &&
+                          <span className="float-right">
+                            <Number value={ terms.get(valueField ? `${ key[valueField] }` : `${ key }`) }/>
+                          </span>
+                        }
                       </span>
-                    }
-                  </span>
+                    )
                 }
                 control={
                   <ThreeStateCheckbox
@@ -271,13 +276,14 @@ export interface IOptionsFilterProps extends React.ClassAttributes<any>, WithTra
   byKey?: boolean;
   validate?: any;
   indented?: boolean;
+  renderCustomLabel?: (option: any) => any;
 }
 
 class OptionsFilter extends React.Component<IOptionsFilterProps, any> {
 
 
   public render() {
-    const { name, label, options, indented, terms, valueField, labelField, byKey, t, initialFormValues = {}, validate = [] } = this.props;
+    const { name, label, options, indented, terms, valueField, labelField, byKey, t, initialFormValues = {}, validate = [], renderCustomLabel } = this.props;
 
     const notIgnoredValues = [...(_.get(initialFormValues, name) || []), ...(_.get(initialFormValues, `NOT.${name}`) || [])];
 
@@ -287,6 +293,7 @@ class OptionsFilter extends React.Component<IOptionsFilterProps, any> {
           notIgnoredValues={ notIgnoredValues }
           names={ [`${name}`, `NOT.${name}`] }
           component={ OptionsFilterInternal }
+          renderCustomLabel={renderCustomLabel}
           label={ t(label) }
           options={ options }
           terms={ terms }