Commit 101f3e9e authored by Oleksii Savran's avatar Oleksii Savran

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

Resolve "Checkbox for NOT filter"

Closes #573

See merge request genesys-pgr/genesys-ui!603
parents 62d85612 7b51fa0b
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 }
/>
);
}
......
......@@ -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 }
......
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