components/MenuItems/Admin/RoleMenuModal.js

import React, { Component } from 'react';
import { ROLE_STATUS } from '../../../constants';
/**
 * @module MI-Admin/RoleMenuModal
 */
/**
 * @typedef {object} props
 * @property {object} role
 * @property {object} hasPermissionTo
 * @property {Function} closeMoreModal
 * @property {Function} refreshGrid
 * @property {Function} openEditRole
 * @property {Function} changeRoleStatus
 * @property {Function} openConfirmationModal
 */
export default class RoleMenuModal extends Component {
  /**
   * Open confirmation modal before removing role
   *
   * @function
   * @returns {void}
   */
  openConfirmationModal = () => {
    this.props.openConfirmationModal();
  };

  /**
   * Change status of role
   *
   * @function
   * @param {object} role Role
   * @returns {void}
   */
  changeStatus = (role) => {
    this.props.closeMoreModal();
    this.props.changeRoleStatus({ roleId: role.roleId });
  };

  /**
   * Edit role
   *
   * @function
   * @param {object} role Role
   * @returns {void}
   */
  editRole = (role) => {
    this.props.closeMoreModal();
    this.props.openEditRole(role);
  };

  /**
   * Render
   *
   * @function
   * @returns {view}
   */
  render() {
    return (
      <div className="Table-style-option">
        <div className="table-style-option">
          {this.props.hasPermissionTo.enableDisable && this.props.role.status === ROLE_STATUS.ENABLED && (
            <div
              className="table-style-option-item active"
              onClick={this.changeStatus.bind(this, this.props.role, 'enable')}
            >
              Disable
            </div>
          )}
          {this.props.hasPermissionTo.enableDisable && this.props.role.status === ROLE_STATUS.DISABLED && (
            <div
              className="table-style-option-item active"
              onClick={this.changeStatus.bind(this, this.props.role, 'disable')}
            >
              Enabled
            </div>
          )}
          {this.props.hasPermissionTo.edit && (
            <div className="table-style-option-item" onClick={this.editRole.bind(this, this.props.role)}>
              Edit role
            </div>
          )}
          {this.props.hasPermissionTo.remove && (
            <div className="table-style-option-item" onClick={this.openConfirmationModal}>
              Remove
            </div>
          )}
        </div>
      </div>
    );
  }
}