Checkbox in dropdown to select multiple attribute values

[kawishabbas]

Hello,

Please suggest what is the procedure to create a dropdown checkbox to select multiple values from the table. I have created a dropdown list that shows customer status. Users can select the online status to reflect the record of online customer to the map as it is there are multiple statuses that can be select one by one.

Now, I want to create a checkbox with the dropdown list. User want to select multiple status at a time.

Please suggest or help me to find out the solution.

import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem,Dropdown,DropdownToggle,
    DropdownMenu,DropdownItem,UncontrolledDropdown} from 'reactstrap';
import { NavLink } from 'react-router-dom';
import { authenticationService } from '../_services/authentication';


class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
        isNavOpen: false,
        dropdownOpen:false,
        south:null,
        north:null,
        central:null,
        alarminfo:'',
        status:false,
        show:false
      };

    this.toggleNav = this.toggleNav.bind(this);
    this.toggleDrop = this.toggleDrop.bind(this);
   
  }


logout = () => {
    authenticationService.logout();
}
  toggleNav() {
    this.setState({
      isNavOpen: !this.state.isNavOpen // true
    });
}
toggleDrop() {
    this.setState({
      isNavOpen: !this.state.isNavOpen // true
    });
}

 selectLayer = (e) => {
     let _this = this

    if(this.props.loginRole.data.role === 'Admin'){

        let customerQuery = this.props.item.customer.data
        var query = customerQuery.createQuery();
    
        let centerCustomerQuery = this.props.centerItem.centerCustomer.data
        var centerQuery = centerCustomerQuery.createQuery();
    
        let northCustomerQuery = this.props.northItem.northCustomer.data
        var northQuery = northCustomerQuery.createQuery();

        if(e.target.value === "clear"){
            /*  this.props.view.goTo({
                  target:[67.116733,24.898892],
                  zoom:14
              }) */ 

              let clearQuery = "status = 'Active'"
              customerQuery.definitionExpression = clearQuery
              centerCustomerQuery.definitionExpression = clearQuery
              northCustomerQuery.definitionExpression = clearQuery
           
              query.where = clearQuery
              customerQuery.queryFeatures(query)
                .then(function(response){
                   
                    _this.setState({
                        show:true
                    })
                    
                    _this.props.alarmInfo(_this.state)
                });

                centerQuery.where = clearQuery
                centerCustomerQuery.queryFeatures(centerQuery)
                      .then(function(response){
                          _this.setState({
                            show:true
                          })
                          
                          _this.props.alarmInfo(_this.state)
                      });
                northQuery.where = clearQuery
                northCustomerQuery.queryFeatures(northQuery)
                    .then(function(response){
                        _this.setState({
                            show:true
                        })
                      
                        _this.props.alarmInfo(_this.state)
                    });

              query.where = clearQuery
              centerQuery.where = clearQuery
              northQuery.where = clearQuery
           
          }
          else {
              //var queryExpression = `status = '${e.target.value}'`
              var queryExpression = `alarmstate = ${e.target.value} AND status = 'Active'`

              // South
              customerQuery.definitionExpression = queryExpression
              query.where = queryExpression
              customerQuery.queryFeatures(query)
                .then(function(response){
                    if (response.features[0].attributes.alarmstate === 0){
                        _this.setState({
                            alarminfo:'Online',
                            south:response.features.length,
                            status:true,
                            show:false
                        })
                    }else if (response.features[0].attributes.alarmstate === 1){
                        _this.setState({
                            alarminfo:'Powered Off',
                            south:response.features.length,
                            status:true,
                            show:false
                        })
                    }else if (response.features[0].attributes.alarmstate === 2){
                        _this.setState({
                            alarminfo:'Link Down',
                            south:response.features.length,
                            status:true,
                            show:false
                        })
                    }else if (response.features[0].attributes.alarmstate === 3){
                        _this.setState({
                            alarminfo:'GEM Packet Loss',
                            south:response.features.length,
                            status:true,
                            show:false
                        })
                    }else if (response.features[0].attributes.alarmstate === 4){
                        _this.setState({
                            alarminfo:'Low Optical Power',
                            south:response.features.length,
                            status:true,
                            show:false
                        })
                    }else
                    _this.setState({
                        alarminfo:response.features[0].attributes.alarminfo,
                        south:response.features.length,
                        status:true,
                        show:false
                    })
                    
                    _this.props.alarmInfo(_this.state)
                });
                // Central
              centerCustomerQuery.definitionExpression = queryExpression
              centerQuery.where = queryExpression
              centerCustomerQuery.queryFeatures(centerQuery)
                    .then(function(response){
                        _this.setState({
                            central:response.features.length,
                            show:false
                        })
                        
                        _this.props.alarmInfo(_this.state)
                    });
                // North
              northCustomerQuery.definitionExpression = queryExpression
              northQuery.where = queryExpression
              northCustomerQuery.queryFeatures(northQuery)
                    .then(function(response){
                        _this.setState({
                            north:response.features.length,
                            show:false
                        })
                        
                        _this.props.alarmInfo(_this.state)
                    });
                
              query.where = queryExpression
              centerQuery.where = queryExpression
              northQuery.where = queryExpression
      
            

              
          }
    }
    else {

        let customerQuery = this.props.item.customer.data
        var query = customerQuery.createQuery();

        if(e.target.value === "clear"){
              let clearQuery = "1=1"
              customerQuery.definitionExpression = clearQuery  
              
              query.where = clearQuery
          }
          else {
              //var queryExpression = `status = '${e.target.value}'`
              var queryExpression = `alarmstate = ${e.target.value} AND status = 'Active'`
              customerQuery.definitionExpression = queryExpression
      
              query.where = queryExpression
          }
    }
    

}

  render() {
    return(
        <div>
            <Navbar color="dark" dark expand="md">
                    <NavbarToggler onClick={this.toggleNav} />
                    <NavbarBrand style={{color:'#1f91f3'}}>Transworld</NavbarBrand>
                    <Collapse isOpen={this.state.isNavOpen} navbar>

                        <Nav  className="ml-auto" navbar>
                            <UncontrolledDropdown nav inNavbar>
                                <DropdownToggle style={styles.dropToggle} nav caret>
                                    Customer Status
                                </DropdownToggle>
                                <DropdownMenu onClick={(e)=> this.selectLayer(e)} style={{background:"#343a40"}} center>
                                    <DropdownItem value = "clear" style={styles.dropItem}>Clear Selection</DropdownItem>
                                    <DropdownItem value='0' style={styles.dropItem}>Online</DropdownItem>
                                    <DropdownItem value='1' style={styles.dropItem}>Powered Off</DropdownItem>
                                    <DropdownItem value='2' style={styles.dropItem}>Link Down</DropdownItem>
                                    <DropdownItem value='3' style={styles.dropItem}>GEM Packet Loss</DropdownItem>
                                    <DropdownItem value='4' style={styles.dropItem}>Low Optical Power</DropdownItem>
                                </DropdownMenu>
                            </UncontrolledDropdown>
                            <NavItem>
                                <NavLink className="nav-link"  to='/login' onClick={this.logout}><span className="fa fa-sign-in fa-lg"></span> Logout</NavLink>
                            </NavItem>
                        </Nav>
                    </Collapse>
             
            </Navbar>
        </div>
    );
  }
}

const styles = {
    dropToggle:{
        background:"#343a40",
        color:"#1f91f3",
    },
    dropItem:{
        color:"#1f91f3",
    }
}

export default Header;

Regards,

Kawish

[BlakeTerhune]

Maybe checkboxes would work better than a dropdown.

<div class="checkboxContainer">
  <input type="checkbox" id="online" name="online">
  <label for="online">Online</label> <br />
  <input type="checkbox" id="poweredOff" name="poweredOff">
  <label for="poweredOff">Powered Off</label> <br />
  <input type="checkbox" id="linkDown" name="linkDown">
  <label for="linkDown">Link Down</label> <br />
  <input type="checkbox" id="gemPacketLoss" name="gemPacketLoss">
  <label for="gemPacketLoss">GEM Packet Loss</label> <br />
  <input type="checkbox" id="lowOpticalPower" name="lowOpticalPower">
  <label for="lowOpticalPower">Low Optical Power</label> <br />
</div>

If you have a big list of options, you can make it scrollable.

.checkboxContainer {
  border:2px solid #ccc;
  width:200px;
  height: 100px;
  overflow-y: scroll;
}

[kawishabbas]

Thanks, @BlakeTerhune  for your kind reply. 

My question is that when I applied the checkbox instead of the selection tag then how can I change my javascript code, especially queryExpression mentioned in line number 105. 
When the user checked more than two checkboxes, queryExpression should be changed and display data to the map.

Reagrds,

Kawish

[BlakeTerhune · Accepted solution]

Use querySelectorAll() to get the checked inputs by name attribute with "input[name='status']:checked"

Then you can loop over the elements to get the value. I updated my html so they all have the same name attribute for easy identifying.

<div class="checkboxContainer">
  <input type="checkbox" id="online" name="status">
  <label for="online">Online</label> <br />
  <input type="checkbox" id="poweredOff" name="status">
  <label for="poweredOff">Powered Off</label> <br />
  <input type="checkbox" id="linkDown" name="status">
  <label for="linkDown">Link Down</label> <br />
  <input type="checkbox" id="gemPacketLoss" name="status">
  <label for="gemPacketLoss">GEM Packet Loss</label> <br />
  <input type="checkbox" id="lowOpticalPower" name="status">
  <label for="lowOpticalPower">Low Optical Power</label> <br />
</div>

const checkboxes = document.querySelectorAll("input[name='status']:checked");
let values = [];
checkboxes.forEach((checkbox) => {
    values.push(checkbox.value);
});
console.log(values);

You'll need some kind of a submit button to know when the user has finished checking the options, which will be the event trigger for updating your queryExpression. Here's the source for the logic I referenced.

[kawishabbas]

Yeah,

It is working. Thanks, a lot @BlakeTerhune