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