user roles add in user table with checkbox

 Step 01:  Add this method in constructor

      user_role: {

        student_role: false,

        parent_role: false,

        teacher_role: false,

        class_teacher: false,

      },


Step 02: Bind  HandleRolechange Condition:

    this.handleIsRoleChange = this.handleIsRoleChange.bind(this);


Step 03: Made a Function for HandleRoleChange 

  handleIsRoleChange(event) {

    if (event.target.name == "student_role"){

      if (this.state.user_role.student_role == false){

        this.setState({

          user_role: { student_role: true },

        });

      }

      else if(this.state.user_role.student_role == true){

        this.setState({

          user_role: { student_role: false },

        });

      }

    }


    if (event.target.name == "teacher_role"){

      if (this.state.user_role.teacher_role == false){

        this.setState({

          user_role: { teacher_role: true },

        });

      }

      else if(this.state.user_role.teacher_role == true){

        this.setState({

          user_role: { teacher_role: false },

        });

      }

    }


    if (event.target.name == "parent_role"){

      if (this.state.user_role.parent_role == false){

        this.setState({

          user_role: { parent_role: true },

        });

      }

      else if(this.state.user_role.parent_role == true){

        this.setState({

          user_role: { parent_role: false },

        });

      }

    }


    if (event.target.name == "class_teacher"){

      if (this.state.user_role.class_teacher == false){

        this.setState({

          user_role: { class_teacher: true },

        });

      }

      else if(this.state.user_role.class_teacher == true){

        this.setState({

          user_role: { class_teacher: false },

        });

      }

    }  

  }

Step 04: In Const User define these roles

      const user = {name: this.state.user.name, email: this.state.user.email, password: this.state.user.password, password_confirmation: this.state.user.password_confirmation, student_role: this.state.user_role.student_role, parent_role: this.state.user_role.parent_role, teacher_role: this.state.user_role.teacher_role, class_teacher: this.state.user_role.class_teacher}
      this.props.createUser(user);

    const user_data = {student_role: this.state.student_role, teacher_role: this.state.teacher_role}


Step 05: Add user_role in render
    const { user_role } = this.state;


Step 06: Add user_role in render

                  <FormGroup row>
                    <Label for="userisstudent" sm={1}>
                      Student
                    </Label>
                    <Col sm={2}>
                      <Input
                        type="checkbox"
                        name="student_role"
                        placeholder="User Role Student"
                        value={user_role.student_role}
                        onChange={this.handleIsRoleChange}
                        defaultChecked={false}
                        autoFocus
                      />
                    </Col>
                    <Label for="userisstudent" sm={1}>
                      Teacher
                    </Label>
                    <Col sm={2}>
                      <Input
                        type="checkbox"
                        name="teacher_role"
                        placeholder="User Role Student"
                        value={user_role.teacher_role}
                        onChange={this.handleIsRoleChange}
                        defaultChecked={false}
                        autoFocus
                      />
                    </Col>
                    <Label for="userisstudent" sm={1}>
                      Class Teacher
                    </Label>
                    <Col sm={2}>
                      <Input
                        type="checkbox"
                        name="class_teacher"
                        placeholder="User Role Student"
                        value={user_role.class_teacher}
                        onChange={this.handleIsRoleChange}
                        defaultChecked={false}
                        autoFocus
                      />
                    </Col>
                    <Label for="userisstudent" sm={1}>
                      Parent
                    </Label>
                    <Col sm={2}>
                      <Input
                        type="checkbox"
                        name="parent_role"
                        placeholder="User Role Student"
                        value={user_role.parent_role}
                        onChange={this.handleIsRoleChange}
                        defaultChecked={false}
                        autoFocus
                      />
                    </Col>
                  </FormGroup>


Step 07: At byebug and debugger check these all conditions 

Step 08: At usersController change these and add these roles


 params.require(:user).permit(:image, :name, :role, :email, :description, :password, :password_confirmation, :first_name, :last_name, :teacher_role, :parent_role, :student_role, :class_teacher)










Comments

Popular posts from this blog

Rails 7 Features :: Comparison with Rails 6 and Rails 5