+
+ </span></td> : null}
+ <td>
+ {u['user-name']}
+ </td>
+ {
+ state.roles.map((r,j) => {
+ return <td key={j}><Input type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
+ })
+ }
+ </tr>
+ )
+ })
+ }
+ </tbody>
+ </table>
+
+
+ { false ?
+ <div>
+ <div className="tableRow tableRow--header">
+ <div className="projectName">
+ User Name
+ </div>
+ <div>
+ Role
+ </div>
+ </div>
+ {
+ state.projectUsers && state.projectUsers.map((u, k) => {
+ return (
+ <div ref={(el) => this[`project-ref-${k}`] = el} className={`tableRow tableRow--data projectUsers`} key={k}>
+ <div className="userName" style={state.isReadOnly ? {paddingTop: '0.25rem'} : {} }>{u['user-name']}</div>
+ <div>
+ {
+ u.role && u.role.map((r, l) => {
+ return (
+ <div key={l}>
+ <div style={{display: 'flex'}} className="selectRole">
+ <SelectOption
+ readonly={state.isReadOnly}
+ defaultValue={r.role}
+ options={state.roles}
+ onChange={self.updateUserRoleInProject.bind(self, k, l)}
+ />
+ {!state.isReadOnly ?
+ <span
+ className="removeInput"
+ onClick={self.removeRoleFromUserInProject.bind(self, k, l)}
+ >
+ <img src={imgRemove} />
+ Remove Role
+ </span>
+ : null
+ }
+
+ </div>
+ </div>
+ )
+ })
+ }
+ {!state.isReadOnly ?
+ <div className="buttonGroup">
+ <span className="addInput addRole" onClick={self.addRoleToUserInProject.bind(self, k)}><img src={imgAdd} />
+ Add Role
+ </span>
+ {
+ (!(u.role && u.role.length)) ?
+ <span
+ className="removeInput"
+ onClick={self.removeUserFromProject.bind(self, k)}
+ >
+ <img src={imgRemove} />
+ Remove User
+ </span> : null
+ }
+ </div>
+ : null
+ }
+ </div>