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': 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="Create" type="submit" onClick={this.updatePlatform}  />
 205                                     </ButtonGroup>
 206                                 )
 207                             )
 208         }
 209
 210         html = (
 211             <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
 212                 <PanelWrapper onKeyUp={this.evaluateSubmit}
 213                     className={`ProjectAdmin column`}>
 214                     <Panel
 215                         title={state.isEdit ? state['name'] : 'Create Project'}
 216                         style={{marginBottom: 0}}
 217                         hasCloseButton={this.closePanel}
 218                         no-corners>
 219                         <FormSection title="USER ROLES">
 220
 221                         <table>
 222                             <thead>
 223                                 <tr>
 224                                     {!state.isReadOnly ? <td></td> : null}
 225                                     <td>User Name</td>
 226                                     {
 227                                         state.roles.map((r,i) => {
 228                                             return <td key={i}>{r}</td>
 229                                         })
 230                                     }
 231                                 </tr>
 232                             </thead>
 233                             <tbody>
 234                                 {
 235                             state.platformUsers.map((u,i)=> {
 236                                 let userRoles = u.role && u.role.map((r) => {
 237                                     return r.role;
 238                                 }) || [];
 239                                 return (
 240                                     <tr key={i}>
 241                                         {!state.isReadOnly ? <td><span
 242                                                                     className="removeInput"
 243                                                                     onClick={self.removeUserFromProject.bind(self, u)}
 244                                                                 >
 245                                                                     <img src={imgRemove} />
 246
 247                                                                 </span></td> : null}
 248                                         <td>
 249                                             {u['user-name']}
 250                                         </td>
 251                                         {
 252                                             state.roles.map((r,j) => {
 253                                                 return <td key={j}><Input type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
 254                                             })
 255                                         }
 256                                     </tr>
 257                                 )
 258                             })
 259                         }
 260                             </tbody>
 261                         </table>
 262                             {
 263                                 !state.isReadOnly ?
 264                                     <div className="tableRow tableRow--header">
 265                                         <div>
 266                                             <div className="addUser">
 267                                                 <SelectOption
 268                                                     onChange={this.actions.handleSelectedUser}
 269                                                     defaultValue={state.selectedUser}
 270                                                     initial={true}
 271                                                     options={state.users && state.users.filter((u) => {
 272                                                         return platformUsers.indexOf(u['user-name']) == -1
 273                                                     }).map((u) => {
 274                                                         return {
 275                                                             label: u['user-name'],
 276                                                             value: u
 277                                                         }
 278                                                     })}
 279                                                 />
 280                                                 <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
 281                                                     Add User
 282                                                 </span>
 283                                             </div>
 284                                         </div>
 285                                     </div> : null
 286                             }
 287
 288                         </FormSection>
 289
 290                     </Panel>
 291                         {formButtonsHTML}
 292
 293                 </PanelWrapper>
 294
 295
 296             </PanelWrapper>
 297         );
 298         return html;
 299     }
 300 }
 301 // onClick={this.Store.update.bind(null, Account)}
 302 PlatformRoleManagement.contextTypes = {
 303     router: React.PropTypes.object
 304 };
 305
 306 PlatformRoleManagement.defaultProps = {
 307     projectList: [],
 308     selectedProject: {}
 309 }
 310
 311 export default SkyquakeComponent(PlatformRoleManagement);
 312
 313
 314 function isElementInView(el) {
 315     var rect = el && el.getBoundingClientRect() || {};
 316
 317     return (
 318         rect.top >= 0 &&
 319         rect.left >= 0 &&
 320         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
 321         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
 322     );
 323 }
 324
 325
 326 // isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
 327
 328 class isDisabled extends React.Component {
 329     constructor(props) {
 330         super(props);
 331     }
 332     render() {
 333         let props = this.props;
 334         return (<div/>)
 335     }
 336 }
 337
 338
 339
 340