roles_permissions.js

const permissionElements = (permissions) => {
    return AvailablePermissions.map( (p) => {
	if(permissions[p]) {
	    return <td key={p}>Y</td>;
	} else {
	    return <td key={p}>N</td>;
	}
    });
};

const RoleRow = (props) => {
    return(
	<tr>
	  <td>{ props.name }</td>
	  <td className='is-superuser'>
	    { props.superuser ? '#' : '$' }
	  </td>
	  { permissionElements(props.permissions) }
	</tr>
    );
};

function permissionFormElements(rowName) {
    return AvailablePermissions.map( p => {
	return (
	    <td key={p}>
	      <Form.Field name={`${rowName}.permissions.${p}`} />
	    </td>
	);
    });
}

const RoleFormRow = (props) => {
    const rowName = `roles[${props._index}]`;
    
    return(
	<tr>
	  <td>
	    <Form.Field name={`${rowName}.name`} />
	  </td>
	  <td>
	    <Form.Field name={`${rowName}.superuser`} />
	  </td>
	  { permissionFormElements(rowName) }
	</tr>
    );
};

class RolesPermissions extends React.Component {
    constructor (props) {
	super(props);
    }

    roleChildren() {
	return this.props.roles.map((r, i) => {
	    if (r._isNew || r._isEdited) {
		return <RoleFormRow {...r} key={r._key} _index={i} />;
	    }
	    return <RoleRow {...r} key={r._key} _index={i} />;
	});
    }

    updateRole(val) {
	console.log(val);
	let [i, data] = Object.entries(val)[0];
	let role = this.props.roles[Number(i)];
	if (data.permissions) {
	    let [permName, permVal] = Object.entries(data.permissions)[0];
	    let permissions = Object.entries(role.permissions || {})
		.filter(([_, v]) => v).map(([k, _]) => k);
	    if(permVal) {
		permissions.push(permName);
	    } else {
		pull(permissions, permName);
	    }
	    data.permissions = permissions;
	}
	this.props.updateRole(role._key, data);
    }

    render() {
	return(
	    <div>
	      <Form
		schema={modelSchema}
		onChange={ val => this.updateRole.bind(this)(val.roles) }
		>
		<table>
		  <thead>
		    <tr>
		      <th>Name</th>
		      <th>SU?</th>
		      <th colSpan={AvailablePermissions.length}>Permissions</th>
		    </tr>
		  </thead>
		  <tbody>
		    { this.roleChildren() }
		  </tbody>
		</table>
	      </Form>
	      <div>
		<button onClick={ this.props.newRole }>New role</button>
	      </div>
	    </div>
	);
    }
};