skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagement.jsx

   1 /*
   2  * STANDARD_RIFT_IO_COPYRIGHT
   3  */
   4
   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';
  14
  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
  23 class PlatformRoleManagement extends React.Component {
  24     constructor(props) {
  25         super(props);
  26         this.Store = this.props.flux.stores.hasOwnProperty('PlatformRoleManagementStore') ? this.props.flux.stores.PlatformRoleManagementStore : this.props.flux.createStore(PlatformRoleManagementStore);
  27         this.state = this.Store.getState();
  28         this.actions = this.state.actions;
  29         this.Store.getPlatform();
  30         this.Store.getUsers();
  31     }
  32     componentDidUpdate() {
  33
  34     }
  35     componentWillMount() {
  36         this.Store.listen(this.updateState);
  37     }
  38     componentWillUnmount() {
  39         this.Store.unlisten(this.updateState);
  40     }
  41     updateState = (state) => {
  42         this.setState(state);
  43     }
  44     updateInput = (key, e) => {
  45         let property = key;
  46         this.actions.handleUpdateInput({
  47             [property]:e.target.value
  48         })
  49     }
  50     disabledChange = (e) => {
  51         this.actions.handleDisabledChange(e.target.checked);
  52     }
  53     platformChange = (platformRole, e) => {
  54         this.actions.handlePlatformRoleUpdate(platformRole, e.currentTarget.checked);
  55     }
  56     editProject = () => {
  57         this.actions.editPlatform(false);
  58     }
  59     cancelEditPlatform = () => {
  60         this.actions.editPlatform(true)
  61     }
  62     closePanel = () => {
  63         this.actions.handleCloseProjectPanel();
  64     }
  65     updatePlatform = (e) => {
  66         let self = this;
  67         e.preventDefault();
  68         e.stopPropagation();
  69         let platformUsers = self.state.platformUsers;
  70         let cleanUsers = this.cleanUsers(platformUsers);
  71         this.Store.updatePlatform({
  72                 'user': JSON.stringify(cleanUsers)
  73             }
  74         );
  75     }
  76      cleanUsers(platformUsers) {
  77         let self = this;
  78         let cleanUsers = [];
  79         //Remove null values from role
  80         platformUsers.map((u) => {
  81             let cleanRoles = [];
  82             u.role && u.role.map((r,i) => {
  83                 let role = {};
  84                 //Platform user can not change role of itself.
  85                 if(r.role){
  86                     //removing key for rbac-platform
  87                     delete r.keys;
  88                     cleanRoles.push(r)
  89                 }
  90             });
  91            u.role = cleanRoles;
  92            if (u['user-name'] != self.context.userProfile.userId) {
  93                 cleanUsers.push(u);
  94            }
  95         });
  96         return cleanUsers;
  97     }
  98      evaluateSubmit = (e) => {
  99         if (e.keyCode == 13) {
 100             if (this.props.isEdit) {
 101                 this.updatePlatform(e);
 102             }
 103             e.preventDefault();
 104             e.stopPropagation();
 105         }
 106     }
 107     updateSelectedUser = (e) => {
 108         this.setState({
 109             selected
 110         })
 111     }
 112     addUserToProject = (e) => {
 113         this.actions.handleAddUser();
 114     }
 115     removeUserFromProject = (userIndex, e) => {
 116         this.actions.handleRemoveUserFromProject(userIndex);
 117     }
 118     updateUserRoleInProject = (userIndex, roleIndex, e) => {
 119         this.actions.handleUpdateUserRoleInProject({
 120             userIndex,
 121             roleIndex,
 122             value: JSON.parse(e.target.value)
 123         })
 124     }
 125     toggleUserRoleInProject = (userIndex, roleIndex, e) => {
 126         this.actions.handleToggleUserRoleInProject({
 127             userIndex,
 128             roleIndex,
 129             checked: JSON.parse(e.currentTarget.checked)
 130         })
 131     }
 132     removeRoleFromUserInProject = (userIndex, roleIndex, e) => {
 133         this.actions.handleRemoveRoleFromUserInProject({
 134             userIndex,
 135             roleIndex
 136         })
 137     }
 138     addRoleToUserInProject = (userIndex, e) => {
 139         this.actions.addRoleToUserInProject(userIndex);
 140     }
 141     onTransitionEnd = (e) => {
 142         this.actions.handleHideColumns(e);
 143         console.log('transition end')
 144     }
 145     disableChange = (e) => {
 146         let value = e.target.value;
 147         value = value.toUpperCase();
 148         if (value=="TRUE") {
 149             value = true;
 150         } else {
 151             value = false;
 152         }
 153         console.log(value)
 154     }
 155     render() {
 156         let self = this;
 157         let html;
 158         let props = this.props;
 159         let state = this.state;
 160         let passwordSectionHTML = null;
 161         let formButtonsHTML = (
 162             <ButtonGroup className="buttonGroup">
 163                 <Button label="EDIT" type="submit" onClick={this.editProject} />
 164             </ButtonGroup>
 165         );
 166         let platformUsers = [];
 167         self.state.platformUsers.map((u) => {
 168             platformUsers.push(u['user-name']);
 169         });
 170
 171         if(!this.state.isReadOnly) {
 172             formButtonsHTML = (
 173                                 state.isEdit ?
 174                                 (
 175                                     <ButtonGroup className="buttonGroup">
 176                                         <Button label="Update" type="submit" onClick={this.updatePlatform} />
 177                                         <Button label="Cancel" onClick={this.cancelEditPlatform} />
 178                                     </ButtonGroup>
 179                                 )
 180                                 : (
 181                                     <ButtonGroup className="buttonGroup">
 182                                         <Button label="Edit" type="submit" onClick={this.updatePlatform}  />
 183                                     </ButtonGroup>
 184                                 )
 185                             )
 186         }
 187
 188         html = (
 189             <PanelWrapper column>
 190                 <AppHeader nav={[{name: 'USER MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/'})}]}/>
 191                 <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
 192                     <PanelWrapper onKeyUp={this.evaluateSubmit}
 193                         className={`ProjectAdmin column`}>
 194                         <Panel
 195                             title="Manage Roles"
 196                             style={{marginBottom: 0}}
 197                             no-corners>
 198                             <FormSection title="USER ROLES">
 199
 200                             <table>
 201                                 <thead>
 202                                     <tr>
 203                                         {!state.isReadOnly ? <td></td> : null}
 204                                         <td>User Name</td>
 205                                         {
 206                                             state.roles.map((r,i) => {
 207                                                 return <td key={i}>{r}</td>
 208                                             })
 209                                         }
 210                                     </tr>
 211                                 </thead>
 212                                 <tbody>
 213                                     {
 214                                 state.platformUsers.map((u,i)=> {
 215                                     let userRoles = u.role && u.role.map((r) => {
 216                                         return r.role;
 217                                     }) || [];
 218                                     return (
 219                                         <tr key={i}>
 220                                             {!state.isReadOnly ? <td><span
 221                                                                         className="removeInput"
 222                                                                         onClick={self.removeUserFromProject.bind(self, u)}
 223                                                                     >
 224                                                                         <img src={imgRemove} />
 225
 226                                                                     </span></td> : null}
 227                                             <td>
 228                                                 {u['user-name']}
 229                                             </td>
 230                                             {
 231                                                 state.roles.map((r,j) => {
 232                                                     return <td key={j}><Input readonly={state.isReadOnly} type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
 233                                                 })
 234                                             }
 235                                         </tr>
 236                                     )
 237                                 })
 238                             }
 239                                 </tbody>
 240                             </table>
 241                                 {
 242                                     !state.isReadOnly ?
 243                                         <div className="tableRow tableRow--header">
 244                                             <div>
 245                                                 <div className="addUser">
 246                                                     <SelectOption
 247                                                         onChange={this.actions.handleSelectedUser}
 248                                                         defaultValue={state.selectedUser}
 249                                                         initial={true}
 250                                                         options={state.users && state.users.filter((u) => {
 251                                                             return platformUsers.indexOf(u['user-name']) == -1
 252                                                         }).map((u) => {
 253                                                             return {
 254                                                                 label: u['user-name'],
 255                                                                 value: u
 256                                                             }
 257                                                         })}
 258                                                     />
 259                                                     <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
 260                                                         Add User
 261                                                     </span>
 262                                                 </div>
 263                                             </div>
 264                                         </div> : null
 265                                 }
 266
 267                             </FormSection>
 268                         </Panel>
 269                         {formButtonsHTML}
 270                     </PanelWrapper>
 271                 </PanelWrapper>
 272             </PanelWrapper>
 273         );
 274         return html;
 275     }
 276 }
 277 // onClick={this.Store.update.bind(null, Account)}
 278 PlatformRoleManagement.contextTypes = {
 279     router: React.PropTypes.object,
 280     userProfile: React.PropTypes.object
 281 };
 282
 283 PlatformRoleManagement.defaultProps = {
 284     projectList: [],
 285     selectedProject: {}
 286 }
 287
 288 export default SkyquakeComponent(PlatformRoleManagement);
 289
 290
 291 function isElementInView(el) {
 292     var rect = el && el.getBoundingClientRect() || {};
 293
 294     return (
 295         rect.top >= 0 &&
 296         rect.left >= 0 &&
 297         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
 298         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
 299     );
 300 }
 301
 302
 303 // isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
 304
 305 class isDisabled extends React.Component {
 306     constructor(props) {
 307         super(props);
 308     }
 309     render() {
 310         let props = this.props;
 311         return (<div/>)
 312     }
 313 }
 314
 315
 316
 317