Suggested filters without applied filters

- Fixed "NOT" items removing from StringArrField

src/ui/common/filter/PrettyFilters.tsx

@@ -202,7 +202,7 @@ function getLabelName(path, value, lookups, prefix, t, labels) {
   }
 
   const translatedPrettyPath = translatePath(t, prefix, prettyPath);
-  console.log(`${prettyPath} = ${translatedPrettyPath}`);
+  // console.log(`${prettyPath} = ${translatedPrettyPath}`);
 
   if (labels && !_.isEmpty(labels) && prettyPath.includes('uuid')) {
     name = labels.get(name);

src/ui/common/filter/StringArrFilter.tsx

@@ -15,14 +15,14 @@ import IconButton from '@material-ui/core/IconButton';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 import InputAdornment from '@material-ui/core/InputAdornment';
-import PlusOne from '@material-ui/icons/PlusOne';
+import { AddCircle as Add, RemoveCircle as Remove, PlusOne, HighlightOff as Clear} from '@material-ui/icons';
 import Number from 'ui/common/Number';
 import { Properties, PropertiesItem } from 'ui/common/Properties';
 
 interface IStringListProps extends React.ClassAttributes<any> {
   input: any;
   notInput: any;
-  removeByIndex: (index: number, isNot: boolean) => void;
+  removeByValue: (index: number, isNot: boolean) => void;
 }
 
 
@@ -94,19 +94,21 @@ class StringList extends React.Component<IStringListProps> {
     }
 
     public render() {
-        const {removeByIndex} = this.props;
+        const {removeByValue} = this.props;
         const {renderList} = this.state;
         return (
             <div>
                 { renderList.map((renderItem, index) => (
-                    <div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } } key={ renderItem.value }>
-                        { renderItem.state ?
-                            <span className="font-bold float-Left mr-5" onClick={ () => this.addToNotList(renderItem, index) }>+</span>
-                            :
-                            <span className="font-bold float-Left mr-5" onClick={ () => this.removeFromNotList(renderItem, index) }>-</span>
-                        }
-                        { renderItem.value }
-                        <div className="font-bold float-right" onClick={ () => removeByIndex(index, !renderItem.state) }>X</div>
+                    <div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } } key={ renderItem.value }>
+                        <span style={ {display: 'flex', alignItems: 'center'} }>
+                            { renderItem.state ?
+                                <span className="font-bold float-left mr-5" onClick={ () => this.addToNotList(renderItem, index) }><Add style={ {cursor: 'pointer', color: '#6f6f6f', fontSize: '18px'} }/></span>
+                                :
+                                <span className="font-bold float-left mr-5" onClick={ () => this.removeFromNotList(renderItem, index) }><Remove style={ {cursor: 'pointer', color: '#6f6f6f', fontSize: '18px'} }/></span>
+                            }
+                            { renderItem.value }
+                        </span>
+                        <div className="font-bold float-right" onClick={ () => removeByValue(renderItem.value, !renderItem.state) }><Clear style={ {cursor: 'pointer', color: '#6f6f6f', fontSize: '20px'} }/></div>
                     </div>
                 )) }
             </div>
@@ -136,6 +138,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
         const values = _.get(props, `${props.names[1]}.input.value`);
 
         this.state = {
+            excludedValues: null,
             values,
             notValues,
             text: '',
@@ -148,6 +151,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
         const notValue = _.get(this.props, `${this.props.names[1]}.input.value`);
 
         this.setState({
+            excludedValues: null,
             values: [ ...value ],
             notValues: [ ...notValue ],
             text: '',
@@ -160,6 +164,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
         const notValue = _.get(nextProps, `${nextProps.names[1]}.input.value`);
 
         this.setState({
+            excludedValues: [...value, ...notValue],
             values: [ ...value ],
             notValues: [...notValue],
             text: '',
@@ -168,12 +173,16 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
 
     private maybeAdd = (...newValues: string[]) => {
       const values = [ ...this.state.values ];
+      const excludedValues = [ ...this.state.excludedValues ];
 
       newValues.forEach((text) => {
         if (text && text.length > 0) {
           if (values.indexOf(text) < 0) {
             values.push(text);
           }
+          if (excludedValues.indexOf(text) < 0) {
+            excludedValues.push(text);
+          }
         }
       });
 
@@ -181,13 +190,15 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
         this.setState({
           text: '',
           values,
+          excludedValues,
         });
       }
       return values;
     }
 
-    private maybeRemove = (...newValues: string[]) => {
-      const values = [ ...this.state.values ];
+    private maybeRemove = (isNot?: boolean, ...newValues: string[]) => {
+      const values = isNot ? [ ...this.state.notValues ] : [ ...this.state.values ];
+      const excludedValues = this.state.excludedValues;
 
       newValues.forEach((text) => {
         if (text && text.length > 0) {
@@ -195,13 +206,19 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
           if (index >= 0) {
             values.splice(index, 1);
           }
+          const indexExcluded: number = excludedValues.indexOf(text);
+          if (indexExcluded >= 0) {
+            excludedValues.splice(indexExcluded, 1);
+          }
         }
       });
 
-      if (!_.isEqual(values, this.state.values)) {
+      if (!_.isEqual(values, isNot ? this.state.notValues : this.state.values)) {
         this.setState({
           text: '',
-          values,
+          values: isNot ? this.state.values : values,
+          notValues: !isNot ? this.state.notValues : values,
+          excludedValues,
         });
       }
       return values;
@@ -223,10 +240,10 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
         }
     }
 
-    private removeByIndex = (index, isNot) => {
+    private removeByValue = (value, isNot) => {
         const { input } = _.get(this.props, this.props.names[isNot ? 1 : 0]);
 
-        const newValues = this.maybeRemove(this.state.values[index]);
+        const newValues = this.maybeRemove(isNot, value);
         input.onChange(newValues);
     }
 
@@ -250,10 +267,10 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
 
       if (this.props.indented) {
         const subCategories = this.getSubcategories(value);
-        const values = event.target.checked ? this.maybeAdd(value, ...subCategories) : this.maybeRemove(value);
+        const values = event.target.checked ? this.maybeAdd(value, ...subCategories) : this.maybeRemove(false, value);
         input.onChange(values);
       } else {
-        const values = event.target.checked ? this.maybeAdd(value) : this.maybeRemove(value);
+        const values = event.target.checked ? this.maybeAdd(value) : this.maybeRemove(false, value);
         input.onChange(values);
       }
     }
@@ -310,7 +327,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
         const { input } = _.get(this.props, names[0]);
         const { input: notInput } = _.get(this.props, names[1]);
 
-        const { text, values, notValues } = this.state;
+        const { text, values, notValues, excludedValues } = this.state;
 
         const withOptions: boolean = options !== undefined && typeof options === 'object';
         const filteredOptions = this.getFilteredOptions();
@@ -381,12 +398,12 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
                   </FormControl>
                 }
                 { (! withOptions && ((values && values.length > 0) || (notValues && notValues.length > 0))) &&
-                <StringList input={ input } notInput={ notInput } removeByIndex={ this.removeByIndex } />
+                <StringList input={ input } notInput={ notInput } removeByValue={ this.removeByValue } />
                 }
                 { !withOptions && terms &&
                 <Properties>
                     <h5 className="pl-10 pt-1rem mb-10">{ t('common:f.suggestedFilters') }</h5>
-                    { terms && Array.from(terms).slice(0, 10).map(([key, value]) => (
+                    { terms && Array.from(terms).slice(0, 10).filter(([key, value]) => !excludedValues || !excludedValues.includes(key)).map(([key, value]) => (
                         <PropertiesItem key={ key } title={ key }  onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
                             <span className="float-right">
                                 <Number value={ value }/>

styles/app.styles.scss

@@ -787,10 +787,31 @@ h4 {
 	margin: 0 !important;
 }
 
+.mt-5 {
+	margin-top: 5px !important;
+}
+.mr-5 {
+	html[dir="ltr"] & {
+		margin-right: 5px !important;
+	}
+	html[dir="rtl"] & {
+		margin-left: 5px !important;
+	}
+}
+
 .mb-5 {
 	margin-bottom: 5px !important;
 }
 
+.ml-5 {
+	html[dir="ltr"] & {
+		margin-left: 5px !important;
+	}
+	html[dir="rtl"] & {
+		margin-right: 5px !important;
+	}
+}
+
 .ml-20 {
 	html[dir="ltr"] & {
 		margin-left: 20px !important;