React Multi Column Select Checkbox

Question

I'm implementing a worker shift scheduler. See screenshot below:

I receive an array of object from the backend. The first one is for employee list

[{
    "employeeId": "id",
    "name": "bob"
},{
    "employeeId": "id",
    "name": "steve",
}]

The second one is available shifts:

[{"shiftStart":"00:00","shiftEnd":"08:00"},{"shiftStart":"08:00","shiftEnd":"15:00"},{"shiftStart":"15:00","shiftEnd":"00:00"}]

This is the React component that I created:

    class PlanningShiftManagement extends Component {
    render() {
        const availableShifts = this.props.shifts.map((shift) => {
            return (
                <th>
                    {shift.shiftStart} - {shift.shiftEnd}
                </th>
            )
        })

        const employees = this.props.employeeList.map((employee) => {
            let employeecheckbox = this.props.shifts.map((shift) => {
                return(
                    <td>
                        <input type="checkbox" />
                    </td>
                )
            });
            return(
                <tr className="table-row">
                    <td>{employee.title}</td>
                    {employeecheckbox}
                </tr>
            )
        })
        return(
            <div>
                <table className="scheduler-table">
                    <thead className="table-head">
                        <tr>
                            <th>Employee Name</th>
                            {availableShifts}
                        </tr>
                    </thead>
                    <tbody className="table-body">
                        {employees}
                    </tbody>
                </table>
            </div>
        );
     }
   }

Now, my question is, how can I create the state containing the employee and the shift selected. So I want to create an object that I could send to the backend.

 [{
"shiftStart": "20170313 10:00",
"shiftEnd": "20170313 17:00",
"employeeId": "id"
}]

Could you be more specific. You already have the shift data and the employee data in the backend, but you want your React component to change the "shape" of the data and re-submit to the backend? Do you have control over how the data is saved in the backend? — radiovisual
– radiovisual, Commented Mar 20, 2017 at 6:40
you just need to check all checkbox value for each employee that way you will get all selected shift by employee — Vinod Louis
– Vinod Louis, Commented Mar 20, 2017 at 6:43

Mayank Shukla · Accepted Answer · 2017-03-20 06:59:25Z

You need to use onChange event with input element and pass the employee id and each shift object to that event, define an array in state variable that will store the employee list.

Check this snippet, how to store the selected users in state object (did't added code to remove the selected checkbox in onChange method, that part you need to do):

let employee = [{
    "employeeId": "1",
    "name": "bob"
},{
    "employeeId": "2",
    "name": "steve",
}];

let shift = [{"shiftStart":"00:00","shiftEnd":"08:00"},{"shiftStart":"08:00","shiftEnd":"15:00"},{"shiftStart":"15:00","shiftEnd":"00:00"}];

class PlanningShiftManagement extends React.Component {
        constructor(){
            super();
            this.state = {users: []}
        }
    
        _populateTableData(){
            return this.props.employeeList.map((employee) => {
                let employeecheckbox = this.props.shifts.map((shift) => {
                    return(
                        <td>
                            <input type="checkbox" onChange={this._inputChange.bind(this, shift, employee.employeeId)}/>
                        </td>
                    )
                });
                return(
                    <tr className="table-row">
                        <td>{employee.name}</td>
                        {employeecheckbox}
                    </tr>
                )
            })
        }
    
        _inputChange(shift, employeeId){
            let users = JSON.parse(JSON.stringify(this.state.users));
            users.push({
                start: shift.shiftStart,
                end: shift.shiftEnd,
                id: employeeId
            });
            this.setState({users});
            console.log(users);
        }
    
        render() {
            const availableShifts = this.props.shifts.map((shift) => {
                return (
                    <th>
                        {shift.shiftStart} - {shift.shiftEnd}
                    </th>
                )
            })
    
            return(
                <div>
                    <table className="scheduler-table">
                        <thead className="table-head">
                            <tr>
                                <th>Employee Name</th>
                                {availableShifts}
                            </tr>
                        </thead>
                        <tbody className="table-body">
                            {this._populateTableData()}
                        </tbody>
                    </table>
                </div>
            );
         }
    }
    
    ReactDOM.render(<PlanningShiftManagement employeeList = {employee} shifts={shift}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Thanks for this. However, I'm having trouble setting the state for the checked state. Right now when you check one checkbox, it is not showing the checkbox as ticked because I don't know how to set the state for checked.

Collectives™ on Stack Overflow

React Multi Column Select Checkbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related