geosolutions-it#9510: enhance rule manager grid by adding checkbox fi…

…lter mode

web/client/components/manager/rulesmanager/rulesgrid/filterRenderers/LayersFilter.jsx

@@ -21,7 +21,8 @@ const parentFiltersSel = createSelector(workspaceSelector, (workspace) => ({
 }));
 const selector = createSelector([filterSelector, parentFiltersSel], (filter, parentsFilter) => ({
  selected: filter.layer,
- parentsFilter
+ parentsFilter,
+ anyFieldVal: filter.layerAny
 }));
 
 export default compose(
@@ -37,7 +38,8 @@ export default compose(
  loadingErrorMsg: {
  title: "rulesmanager.errorTitle",
  message: "rulesmanager.errorLoadingLayers"
- }
+ },
+ anyFilterRuleMode: 'layerAny'
  }),
  withHandlers({
  onValueSelected: ({column = {}, onFilterChange = () => {}}) => filterTerm => {

web/client/components/manager/rulesmanager/rulesgrid/filterRenderers/RequestsFilter.jsx

@@ -22,7 +22,8 @@ const selector = createSelector([filterSelector, parentFiltersSel, servicesConfi
  disabled: !filter.service,
  service: filter.service,
  parentsFilter,
- services
+ services,
+ anyFieldVal: filter.requestAny
 }));
 
 
@@ -52,7 +53,8 @@ export default compose(
  "GetMap",
  "GetStyles"
  ]
- }
+ },
+ anyFilterRuleMode: 'requestAny'
  }),
  withPropsOnChange(["service", "services"], ({services = {}, service}) => {
  return {

web/client/components/manager/rulesmanager/rulesgrid/filterRenderers/RolesFilter.jsx

@@ -16,7 +16,8 @@ import { createSelector } from 'reselect';
 import { error } from '../../../../../actions/notifications';
 import { filterSelector } from '../../../../../selectors/rulesmanager';
 const selector = createSelector(filterSelector, (filter) => ({
- selected: filter.rolename
+ selected: filter.rolename,
+ anyFieldVal: filter.groupAny
 }));
 
 export default compose(
@@ -32,7 +33,8 @@ export default compose(
  loadingErrorMsg: {
  title: "rulesmanager.errorTitle",
  message: "rulesmanager.errorLoadingRoles"
- }
+ },
+ anyFilterRuleMode: 'groupAny'
  }),
  withHandlers({
  onValueSelected: ({column = {}, onFilterChange = () => {}}) => filterTerm => {

web/client/components/manager/rulesmanager/rulesgrid/filterRenderers/ServicesFilter.jsx

@@ -16,7 +16,8 @@ import { filterSelector, servicesSelector } from '../../../../../selectors/rules
 
 const selector = createSelector(filterSelector, servicesSelector, (filter, services) => ({
  selected: filter.service,
- services
+ services,
+ anyFieldVal: filter.serviceAny
 }));
 
 export default compose(
@@ -32,7 +33,8 @@ export default compose(
  {value: "WMS", label: "WMS"},
  {value: "WFS", label: "WFS"},
  {value: "WCS", label: "WCS"}
- ]
+ ],
+ anyFilterRuleMode: 'serviceAny'
  }),
  withPropsOnChange(["services"], ({services, data}) => ({data: services || data})),
  withHandlers({

web/client/components/manager/rulesmanager/rulesgrid/filterRenderers/UsersFilter.jsx

@@ -16,7 +16,8 @@ import { createSelector } from 'reselect';
 import { filterSelector } from '../../../../../selectors/rulesmanager';
 import { error } from '../../../../../actions/notifications';
 const selector = createSelector(filterSelector, (filter) => ({
- selected: filter.username
+ selected: filter.username,
+ anyFieldVal: filter.anyUser
 }));
 
 export default compose(
@@ -32,7 +33,8 @@ export default compose(
  loadingErrorMsg: {
  title: "rulesmanager.errorTitle",
  message: "rulesmanager.errorLoadingUsers"
- }
+ },
+ anyFilterRuleMode: 'userAny'
  }),
  withHandlers({
  onValueSelected: ({column = {}, onFilterChange = () => {}}) => filterTerm => {

web/client/components/manager/rulesmanager/rulesgrid/filterRenderers/WorkspacesFilter.jsx

@@ -17,7 +17,8 @@ import { createSelector } from 'reselect';
 import { filterSelector } from '../../../../../selectors/rulesmanager';
 
 const selector = createSelector(filterSelector, (filter) => ({
- selected: filter.workspace
+ selected: filter.workspace,
+ anyFieldVal: filter.workspaceAny
 }));
 
 
@@ -35,7 +36,8 @@ export default compose(
  loadingErrorMsg: {
  title: "rulesmanager.errorTitle",
  message: "rulesmanager.errorLoadingWorkspaces"
- }
+ },
+ anyFilterRuleMode: 'workspaceAny'
  }),
  withHandlers({
  onValueSelected: ({column = {}, onFilterChange = () => {}}) => filterTerm => {

web/client/components/misc/__tests__/PagedCombobox-test.jsx

@@ -159,4 +159,34 @@ describe("This test for PagedCombobox component", () => {
  done();
  }, 50);
  });
+ it('tests PagedCombobox anyFilter Mode', (done) => {
+ const actions = {
+ onSelect: () => {}
+ };
+ const spy = expect.spyOn(actions, "onSelect");
+ const data = [{
+ label: "label", value: "value"
+ }];
+ const comp = ReactDOM.render(<PagedCombobox onSelect={actions.onSelect} anyFieldVal={false} anyFilterRuleMode={"userAny"} data={data}/>, document.getElementById("container"));
+ expect(comp).toExist();
+ const domNode = ReactDOM.findDOMNode(comp);
+ expect(domNode).toExist();
+ const checkbox = domNode.getElementsByTagName("input");
+ expect(checkbox.length).toEqual(2);
+ expect(checkbox[0].checked).toEqual(true);
+ expect(checkbox[0].name).toEqual('userAny');
+
+ const tool = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "rw-i rw-i-caret-down")[0]);
+ tool.click();
+ // this tests if the option list is opened
+ const firstOption = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(comp, "rw-list-option")[0]);
+ expect(firstOption).toExist();
+ const valueOption = firstOption.getElementsByTagName("span")[0];
+ expect(valueOption).toExist();
+ TestUtils.Simulate.click(firstOption);
+ setTimeout(() => {
+ expect(spy.calls.length).toEqual(1);
+ done();
+ }, 50);
+ });
 });

web/client/components/misc/combobox/PagedCombobox.jsx

@@ -55,7 +55,10 @@ class PagedCombobox extends React.Component {
  stopPropagation: PropTypes.bool,
  clearable: PropTypes.bool,
  onReset: PropTypes.func,
- attribute: PropTypes.string
+ attribute: PropTypes.string,
+ anyFilterRuleMode: PropTypes.bool,
+ onFilterChange: PropTypes.func,
+ anyFieldVal: PropTypes.bool
  };
 
  static contextTypes = {
@@ -94,7 +97,9 @@ class PagedCombobox extends React.Component {
  placement: "top"
  },
  valueField: "value",
- clearable: false
+ clearable: false,
+ anyFilterRuleMode: false,
+ onFilterChange: ()=>{}
  };
 
  componentDidUpdate(prevProps) {
@@ -182,16 +187,21 @@ class PagedCombobox extends React.Component {
  return this.props.tooltip && this.props.tooltip.enabled ? this.renderWithTooltip(field) : field;
  }
  render() {
- const {selectedValue: v, disabled, onReset, label: l, clearable} = this.props;
+ const {selectedValue: v, disabled, onReset, label: l, clearable, onFilterChange, anyFieldVal } = this.props;
  let label = l ? (<label>{l}</label>) : (<span/>); // TODO change "the else case" value with null ?
  return (
- <div className="autocompleteField">
- {label}
+ <div className={`autocompleteField ${this.props.anyFilterRuleMode ? 'd-flex' : ''}`}>
+ <div className="d-flex"> {label} { this.props.anyFilterRuleMode &&
+ <input onChange={(evt)=>{
+ onFilterChange({column: {key: evt.target.name}, filterTerm: !evt.target.checked});
+ }} type="checkbox" disabled={v ? false : true} checked={typeof anyFieldVal === 'boolean' && !anyFieldVal ? true : false} title={'filter-mode'} name={this.props.anyFilterRuleMode} />}
+ </div>
  {clearable ? (
  <div className={`rw-combo-clearable ${disabled && 'disabled' || ''}`}>
  {this.renderField()}
  <span className={`rw-combo-clear ${!v && 'hidden' || ''}`} onClick={onReset}>x</span>
- </div>) : this.renderField()
+ </div>) :
+ this.renderField()
  }
  </div>);
  }

web/client/reducers/rulesmanager.js

@@ -106,7 +106,7 @@ function rulesmanager(state = defaultState, action) {
  return assign({}, state, {loading: action.loading});
  case SET_FILTER: {
  const {key, value} = action;
- if (value) {
+ if (value || key?.includes('Any')) {
  return assign({}, state, {filters: {...state.filters, [key]: value}});
  }
  const {[key]: omit, ...newFilters} = state.filters;

web/client/selectors/rulesmanager.js

@@ -21,11 +21,17 @@ export const rulesSelector = (state) => {
  assign(formattedRule, {'id': rule.id});
  assign(formattedRule, {'priority': rule.priority});
  assign(formattedRule, {'roleName': rule.roleName ? rule.roleName : '*'});
+ assign(formattedRule, {'groupAny': rule.groupAny ? rule.groupAny : '*'});
  assign(formattedRule, {'userName': rule.userName ? rule.userName : '*'});
+ assign(formattedRule, {'userAny': rule.userAny ? rule.userAny : '*'});
  assign(formattedRule, {'service': rule.service ? rule.service : '*'});
+ assign(formattedRule, {'serviceAny': rule.serviceAny ? rule.serviceAny : '*'});
  assign(formattedRule, {'request': rule.request ? rule.request : '*'});
+ assign(formattedRule, {'requestAny': rule.requestAny ? rule.requestAny : '*'});
  assign(formattedRule, {'workspace': rule.workspace ? rule.workspace : '*'});
+ assign(formattedRule, {'workspaceAny': rule.workspaceAny ? rule.workspaceAny : '*'});
  assign(formattedRule, {'layer': rule.layer ? rule.layer : '*'});
+ assign(formattedRule, {'layerAny': rule.layerAny ? rule.layerAny : '*'});
  assign(formattedRule, {'access': rule.access});
  return formattedRule;
  });

web/client/themes/default/less/autocomplete.less

@@ -38,3 +38,6 @@
 .rw-combobox .rw-btn {
  overflow: hidden;
 }
+.d-flex{
+ display: flex;
+}

web/client/themes/default/less/react-data-grid.less

@@ -301,3 +301,12 @@
  }
  }
 }
+#page-rulesmanager{
+ .ms2-border-layout-body{
+ .rules-data-gird {
+ .react-grid-HeaderCell{
+ display: flex !important;
+ }
+ }
+ }
+}