Commit 734e0bdb authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '271-suggested-filters-without-applied-filters' into 'master'

Suggested filters without applied filters

Closes #271

See merge request genesys-pgr/genesys-ui!283
parents fe3fce16 295d97d7
...@@ -202,7 +202,7 @@ function getLabelName(path, value, lookups, prefix, t, labels) { ...@@ -202,7 +202,7 @@ function getLabelName(path, value, lookups, prefix, t, labels) {
} }
const translatedPrettyPath = translatePath(t, prefix, prettyPath); const translatedPrettyPath = translatePath(t, prefix, prettyPath);
console.log(`${prettyPath} = ${translatedPrettyPath}`); // console.log(`${prettyPath} = ${translatedPrettyPath}`);
if (labels && !_.isEmpty(labels) && prettyPath.includes('uuid')) { if (labels && !_.isEmpty(labels) && prettyPath.includes('uuid')) {
name = labels.get(name); name = labels.get(name);
......
...@@ -15,14 +15,14 @@ import IconButton from '@material-ui/core/IconButton'; ...@@ -15,14 +15,14 @@ import IconButton from '@material-ui/core/IconButton';
import Input from '@material-ui/core/Input'; import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from '@material-ui/core/InputLabel';
import InputAdornment from '@material-ui/core/InputAdornment'; 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 Number from 'ui/common/Number';
import { Properties, PropertiesItem } from 'ui/common/Properties'; import { Properties, PropertiesItem } from 'ui/common/Properties';
interface IStringListProps extends React.ClassAttributes<any> { interface IStringListProps extends React.ClassAttributes<any> {
input: any; input: any;
notInput: 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> { ...@@ -94,19 +94,21 @@ class StringList extends React.Component<IStringListProps> {
} }
public render() { public render() {
const {removeByIndex} = this.props; const {removeByValue} = this.props;
const {renderList} = this.state; const {renderList} = this.state;
return ( return (
<div> <div>
{ renderList.map((renderItem, index) => ( { renderList.map((renderItem, index) => (
<div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } } key={ renderItem.value }> <div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } } key={ renderItem.value }>
{ renderItem.state ? <span style={ {display: 'flex', alignItems: 'center'} }>
<span className="font-bold float-Left mr-5" onClick={ () => this.addToNotList(renderItem, index) }>+</span> { 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) }>-</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 } }
<div className="font-bold float-right" onClick={ () => removeByIndex(index, !renderItem.state) }>X</div> { 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>
)) } )) }
</div> </div>
...@@ -136,6 +138,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -136,6 +138,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
const values = _.get(props, `${props.names[1]}.input.value`); const values = _.get(props, `${props.names[1]}.input.value`);
this.state = { this.state = {
excludedValues: null,
values, values,
notValues, notValues,
text: '', text: '',
...@@ -148,6 +151,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -148,6 +151,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
const notValue = _.get(this.props, `${this.props.names[1]}.input.value`); const notValue = _.get(this.props, `${this.props.names[1]}.input.value`);
this.setState({ this.setState({
excludedValues: null,
values: [ ...value ], values: [ ...value ],
notValues: [ ...notValue ], notValues: [ ...notValue ],
text: '', text: '',
...@@ -160,6 +164,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -160,6 +164,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
const notValue = _.get(nextProps, `${nextProps.names[1]}.input.value`); const notValue = _.get(nextProps, `${nextProps.names[1]}.input.value`);
this.setState({ this.setState({
excludedValues: [...value, ...notValue],
values: [ ...value ], values: [ ...value ],
notValues: [...notValue], notValues: [...notValue],
text: '', text: '',
...@@ -168,12 +173,16 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -168,12 +173,16 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
private maybeAdd = (...newValues: string[]) => { private maybeAdd = (...newValues: string[]) => {
const values = [ ...this.state.values ]; const values = [ ...this.state.values ];
const excludedValues = [ ...this.state.excludedValues ];
newValues.forEach((text) => { newValues.forEach((text) => {
if (text && text.length > 0) { if (text && text.length > 0) {
if (values.indexOf(text) < 0) { if (values.indexOf(text) < 0) {
values.push(text); values.push(text);
} }
if (excludedValues.indexOf(text) < 0) {
excludedValues.push(text);
}
} }
}); });
...@@ -181,13 +190,15 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -181,13 +190,15 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
this.setState({ this.setState({
text: '', text: '',
values, values,
excludedValues,
}); });
} }
return values; return values;
} }
private maybeRemove = (...newValues: string[]) => { private maybeRemove = (isNot?: boolean, ...newValues: string[]) => {
const values = [ ...this.state.values ]; const values = isNot ? [ ...this.state.notValues ] : [ ...this.state.values ];
const excludedValues = this.state.excludedValues;
newValues.forEach((text) => { newValues.forEach((text) => {
if (text && text.length > 0) { if (text && text.length > 0) {
...@@ -195,13 +206,19 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -195,13 +206,19 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
if (index >= 0) { if (index >= 0) {
values.splice(index, 1); 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({ this.setState({
text: '', text: '',
values, values: isNot ? this.state.values : values,
notValues: !isNot ? this.state.notValues : values,
excludedValues,
}); });
} }
return values; return values;
...@@ -223,10 +240,10 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -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 { 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); input.onChange(newValues);
} }
...@@ -250,10 +267,10 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -250,10 +267,10 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
if (this.props.indented) { if (this.props.indented) {
const subCategories = this.getSubcategories(value); 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); input.onChange(values);
} else { } 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); input.onChange(values);
} }
} }
...@@ -310,7 +327,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -310,7 +327,7 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
const { input } = _.get(this.props, names[0]); const { input } = _.get(this.props, names[0]);
const { input: notInput } = _.get(this.props, names[1]); 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 withOptions: boolean = options !== undefined && typeof options === 'object';
const filteredOptions = this.getFilteredOptions(); const filteredOptions = this.getFilteredOptions();
...@@ -381,12 +398,12 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal & ...@@ -381,12 +398,12 @@ class InternalStringArrField extends React.Component<IStringArrFilterInternal &
</FormControl> </FormControl>
} }
{ (! withOptions && ((values && values.length > 0) || (notValues && notValues.length > 0))) && { (! 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 && { !withOptions && terms &&
<Properties> <Properties>
<h5 className="pl-10 pt-1rem mb-10">{ t('common:f.suggestedFilters') }</h5> <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'} }> <PropertiesItem key={ key } title={ key } onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
<span className="float-right"> <span className="float-right">
<Number value={ value }/> <Number value={ value }/>
......
...@@ -787,10 +787,31 @@ h4 { ...@@ -787,10 +787,31 @@ h4 {
margin: 0 !important; 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 { .mb-5 {
margin-bottom: 5px !important; margin-bottom: 5px !important;
} }
.ml-5 {
html[dir="ltr"] & {
margin-left: 5px !important;
}
html[dir="rtl"] & {
margin-right: 5px !important;
}
}
.ml-20 { .ml-20 {
html[dir="ltr"] & { html[dir="ltr"] & {
margin-left: 20px !important; margin-left: 20px !important;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment