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