refactor(search-engine): improve the organization of the groups

Signed-off-by: Gianfranco Manganiello <[email protected]>

src/containers/SearchEngine/components/QueryBuilder/Group.1.js

@@ -0,0 +1,128 @@
+/*
+ * Copyright © 2018 Teclib. All rights reserved.
+ *
+ * This file is part of web-mdm-dashboard
+ *
+ * web-mdm-dashboard is a subproject of Flyve MDM. Flyve MDM is a mobile
+ * device management software.
+ *
+ * Flyve MDM is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 3
+ * of the License, or (at your option) any later version.
+ *
+ * Flyve MDM is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ * ------------------------------------------------------------------------------
+ * @author Gianfranco Manganiello ([email protected])
+ * @author Hector Rondon ([email protected])
+ * @copyright Copyright © 2018 Teclib. All rights reserved.
+ * @license GPLv3 https://www.gnu.org/licenses/gpl-3.0.html
+ * @link https://github.com/flyve-mdm/web-mdm-dashboard
+ * @link http://flyve.org/web-mdm-dashboard
+ * @link https://flyve-mdm.com
+ * ------------------------------------------------------------------------------
+ */
+
+import React, {
+ PureComponent,
+} from 'react'
+import PropTypes from 'prop-types'
+import I18n from 'shared/i18n'
+import Rule from './Rule'
+import SubGroup from './SubGroup'
+
+class Group extends PureComponent {
+ getRules(rules) {
+ const render = []
+ rules.forEach((rule, index) => {
+ if (!rule.criteria && !rule.metacriteria) {
+ if (!rule.itemtype) {
+ render.push(this.selectRule('criteria', rule, index))
+ } else {
+ render.push(this.selectRule('metacriteria', rule, index))
+ }
+ } else {
+ render.push(
+ <SubGroup
+ key={`group-${index.toString()}`}
+ index={[index]}
+ rule={rule}
+ changeRule={this.props.changeRule}
+ fieldList={this.props.fieldList}
+ addGroup={this.props.addGroup}
+ />,
+ )
+ }
+ })
+
+ return render
+ }
+
+ selectRule(type, rule, index) {
+ if (type === 'criteria') {
+ return (
+ <Rule
+ key={`criteria-${index.toString()}`}
+ id={[index]}
+ type="criteria"
+ changeRule={this.props.changeRule}
+ fieldList={this.props.fieldList}
+ {...rule}
+ />
+ )
+ }
+
+ return (
+ <Rule
+ key={`metacriteria-${index.toString()}`}
+ id={[index]}
+ type="metacriteria"
+ changeRule={this.props.changeRule}
+ {...rule}
+ />
+ )
+ }
+
+ render() {
+ return (
+ <>
+ <div className="search-engine__group">
+ {this.getRules(this.props.criteria)}
+ <button
+ className="btn btn--secondary"
+ type="button"
+ onClick={() => this.props.addGroup()}
+ >
+ +
+ {' '}
+ {I18n.t('search_engine.group')}
+ </button>
+ </div>
+
+ <div className="search-engine__group">
+ {this.getRules(this.props.metacriteria)}
+ </div>
+ </>
+ )
+ }
+}
+
+Group.defaultProps = {
+ criteria: [],
+ metacriteria: [],
+ index: [],
+}
+
+Group.propTypes = {
+ index: PropTypes.array,
+ criteria: PropTypes.array,
+ metacriteria: PropTypes.array,
+ changeRule: PropTypes.func.isRequired,
+ fieldList: PropTypes.array.isRequired,
+ addGroup: PropTypes.func.isRequired,
+}
+
+export default Group

src/containers/SearchEngine/components/QueryBuilder/Group.js

@@ -52,6 +52,7 @@ class Group extends PureComponent {
  rule={rule}
  changeRule={this.props.changeRule}
  fieldList={this.props.fieldList}
+ addGroup={this.props.addGroup}
  />,
  )
  }
@@ -87,40 +88,33 @@ class Group extends PureComponent {
 
  render() {
  return (
- <>
- <div className="search-engine__group">
- {this.getRules(this.props.criteria)}
- <button
- className="btn btn--primary"
- type="button"
- onClick={() => console.log('test')}
- >
- +
- {' '}
- {I18n.t('search_engine.group')}
- </button>
- </div>
-
- <div className="search-engine__group">
- {this.getRules(this.props.metacriteria)}
- </div>
- </>
+ <div className="search-engine__group">
+ {this.getRules(this.props.rules)}
+ <button
+ className="btn btn--secondary"
+ type="button"
+ onClick={() => this.props.addGroup()}
+ >
+ +
+ {' '}
+ {I18n.t('search_engine.group')}
+ </button>
+ </div>
  )
  }
 }
 
 Group.defaultProps = {
- criteria: [],
- metacriteria: [],
+ rules: [],
  index: [],
 }
 
 Group.propTypes = {
  index: PropTypes.array,
- criteria: PropTypes.array,
- metacriteria: PropTypes.array,
+ rules: PropTypes.array,
  changeRule: PropTypes.func.isRequired,
  fieldList: PropTypes.array.isRequired,
+ addGroup: PropTypes.func.isRequired,
 }
 
 export default Group

src/containers/SearchEngine/components/QueryBuilder/SubGroup.js

@@ -30,6 +30,7 @@ import React, {
  PureComponent,
 } from 'react'
 import PropTypes from 'prop-types'
+import I18n from 'shared/i18n'
 import Rule from './Rule'
 
 class SubGroup extends PureComponent {
@@ -101,6 +102,15 @@ class SubGroup extends PureComponent {
  return (
  <div className="search-engine__group">
  { render }
+ <button
+ className="btn btn--secondary"
+ type="button"
+ onClick={() => this.props.addGroup()}
+ >
+ +
+ {' '}
+ {I18n.t('search_engine.group')}
+ </button>
  </div>
  )
  }
@@ -115,6 +125,7 @@ SubGroup.propTypes = {
  rule: PropTypes.object.isRequired,
  changeRule: PropTypes.func.isRequired,
  fieldList: PropTypes.array.isRequired,
+ addGroup: PropTypes.func.isRequired,
 }
 
 export default SubGroup

src/containers/SearchEngine/components/QueryBuilder/index.js

@@ -207,6 +207,10 @@ class QueryBuilder extends PureComponent {
  })
  }
 
+ addGroup = () => {
+ console.log('test')
+ }
+
  /**
  * Render component
  * @function render
@@ -235,12 +239,30 @@ class QueryBuilder extends PureComponent {
  </button>
  </div>
 
- <Group
- criteria={this.state.criteria}
- metacriteria={this.state.metacriteria}
- changeRule={this.changeRule}
- fieldList={this.state.fieldList}
- />
+
+ {
+ this.state.criteria.length > 0
+ && (
+ <Group
+ rules={this.state.criteria}
+ changeRule={this.changeRule}
+ fieldList={this.state.fieldList}
+ addGroup={this.addGroup}
+ />
+ )
+ }
+
+ {
+ this.state.metacriteria.length > 0
+ && (
+ <Group
+ rules={this.state.metacriteria}
+ changeRule={this.changeRule}
+ fieldList={this.state.fieldList}
+ addGroup={this.addGroup}
+ />
+ )
+ }
  </div>
  )
  }