2 * STANDARD_RIFT_IO_COPYRIGHT
5 import React from 'react';
6 import ReactDOM from 'react-dom';
7 import AppHeader from 'widgets/header/header.jsx';
8 import PlatformRoleManagementStore from './platformRoleManagementStore.js';
9 import SkyquakeComponent from 'widgets/skyquake_container/skyquakeComponent.jsx';
10 import 'style/layout.scss';
11 import './platformRoleManagement.scss';
12 import {Panel, PanelWrapper} from 'widgets/panel/panel';
13 import {InputCollection, FormSection} from 'widgets/form_controls/formControls.jsx';
15 import TextInput from 'widgets/form_controls/textInput.jsx';
16 import Input from 'widgets/form_controls/input.jsx';
17 import Button, {ButtonGroup} from 'widgets/button/sq-button.jsx';
18 import SelectOption from 'widgets/form_controls/selectOption.jsx';
19 import 'widgets/form_controls/formControls.scss';
20 import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
21 import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
22 import _ from 'lodash';
24 class PlatformRoleManagement extends React.Component {
27 this.Store = this.props.flux.stores.hasOwnProperty('PlatformRoleManagementStore') ? this.props.flux.stores.PlatformRoleManagementStore : this.props.flux.createStore(PlatformRoleManagementStore,'PlatformRoleManagementStore');
28 this.state = this.Store.getState();
29 this.actions = this.state.actions;
30 this.Store.getPlatform();
31 this.Store.getUsers();
33 componentDidUpdate() {
36 componentWillMount() {
37 this.Store.listen(this.updateState);
39 componentWillUnmount() {
40 this.Store.unlisten(this.updateState);
42 updateState = (state) => {
45 updateInput = (key, e) => {
47 this.actions.handleUpdateInput({
48 [property]:e.target.value
51 disabledChange = (e) => {
52 this.actions.handleDisabledChange(e.target.checked);
54 platformChange = (platformRole, e) => {
55 this.actions.handlePlatformRoleUpdate(platformRole, e.currentTarget.checked);
58 this.actions.editPlatform(false);
60 cancelEditPlatform = () => {
61 this.actions.editPlatform(true)
64 this.actions.handleCloseProjectPanel();
66 updatePlatform = (e) => {
70 let platformUsers = self.state.platformUsers;
71 let cleanUsers = this.cleanUsers(platformUsers);
72 this.Store.updatePlatform({
73 'user': JSON.stringify(cleanUsers)
77 cleanUsers(platformUsers) {
80 //Remove null values from role
81 platformUsers.map((u) => {
83 u.role && u.role.map((r,i) => {
85 //Platform user can not change role of itself.
87 //removing key for rbac-platform
93 // if (u['user-name'] != self.context.userProfile.userId) {
99 evaluateSubmit = (e) => {
100 if (e.keyCode == 13) {
101 if (this.props.isEdit) {
102 this.updatePlatform(e);
108 updateSelectedUser = (e) => {
113 addUserToProject = (e) => {
114 this.actions.handleAddUser();
116 removeUserFromProject = (userIndex, e) => {
117 this.actions.handleRemoveUserFromProject(userIndex);
119 updateUserRoleInProject = (userIndex, roleIndex, e) => {
120 this.actions.handleUpdateUserRoleInProject({
123 value: JSON.parse(e.target.value)
126 toggleUserRoleInProject = (userIndex, roleIndex, e) => {
127 this.actions.handleToggleUserRoleInProject({
130 checked: JSON.parse(e.currentTarget.checked)
133 removeRoleFromUserInProject = (userIndex, roleIndex, e) => {
134 this.actions.handleRemoveRoleFromUserInProject({
139 addRoleToUserInProject = (userIndex, e) => {
140 this.actions.addRoleToUserInProject(userIndex);
142 onTransitionEnd = (e) => {
143 this.actions.handleHideColumns(e);
144 console.log('transition end')
146 disableChange = (e) => {
147 let value = e.target.value;
148 value = value.toUpperCase();
159 let props = this.props;
160 let state = this.state;
161 let passwordSectionHTML = null;
162 let formButtonsHTML = (
163 <ButtonGroup className="buttonGroup">
164 <Button label="EDIT" type="submit" onClick={this.editProject} />
167 let platformUsers = self.state.platformUsers;
168 let availableDomains = state.domains;
169 let availableUsers = state.users && state.users.filter((u) => {
170 return state.selectedDomain == u['user-domain'] && _.findIndex(platformUsers, (s) => {return (s['user-name'] == u['user-name']) && (u['user-domain'] == s['user-domain'])}) == -1
173 label: `${u['user-name']}`,
179 if(!this.state.isReadOnly) {
183 <ButtonGroup className="buttonGroup">
184 <Button label="Update" type="submit" onClick={this.updatePlatform} />
185 <Button label="Cancel" onClick={this.cancelEditPlatform} />
189 <ButtonGroup className="buttonGroup">
190 <Button label="Edit" type="submit" onClick={this.updatePlatform} />
197 <PanelWrapper column>
198 <AppHeader nav={[{name: 'USER MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/'})}, {name: 'PLATFORM ROLE MANAGEMENT'}]}/>
199 <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
200 <PanelWrapper onKeyUp={this.evaluateSubmit}
201 className={`ProjectAdmin column`}>
204 style={{marginBottom: 0}}
206 <FormSection title="USER ROLES">
214 state.roles.map((r,i) => {
215 return <td key={i}>{r}</td>
222 state.platformUsers.map((u,i)=> {
223 let userRoles = u.role && u.role.map((r) => {
235 state.roles.map((r,j) => {
236 return <td key={j}><Input readonly={state.isReadOnly} type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
239 {!state.isReadOnly ? <td><span
240 className="removeInput"
241 onClick={self.removeUserFromProject.bind(self, i)}
243 <img src={imgRemove} />
254 <div className="tableRow tableRow--header">
256 <div className="addUser">
258 availableDomains.length == 1 ?
261 onChange={this.actions.handleSelectedDomain}
262 defaultValue={state.selectedDomain || availableDomains[0]}
265 options={availableDomains}
266 ref={(el) => self.selectUserList = el}
270 onChange={this.actions.handleSelectedDomain}
271 value={state.selectedDomain || availableDomains[0]}
273 options={availableDomains}
274 ref={(el) => self.selectUserList = el}
278 availableUsers.length ?
281 onChange={this.actions.handleSelectedUser}
282 value={state.selectedUser}
284 options={availableUsers}
285 ref={(el) => self.selectUserList = el}
287 <label className="noUsersAvailable">
288 <span>Username</span>
289 <span style={{display: 'block',
290 marginTop: '0.8rem', color: '#666'}}>No Available Users for this Domain</span></label>
293 availableUsers.length ?
294 <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
315 // onClick={this.Store.update.bind(null, Account)}
316 PlatformRoleManagement.contextTypes = {
317 router: React.PropTypes.object,
318 userProfile: React.PropTypes.object
321 PlatformRoleManagement.defaultProps = {
326 export default SkyquakeComponent(PlatformRoleManagement);
329 function isElementInView(el) {
330 var rect = el && el.getBoundingClientRect() || {};
335 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
336 rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
341 // isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
343 class isDisabled extends React.Component {
348 let props = this.props;