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 ProjectManagementStore 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('ProjectManagementStore') ? this.props.flux.stores.ProjectManagementStore : this.props.flux.createStore(ProjectManagementStore);
  27         this.Store.getProjects();
  28         this.Store.getUsers();
  29         this.state = this.Store.getState();
  30         this.actions = this.state.actions;
  31     }
  32     componentDidUpdate() {
  33         let self = this;
  34         ReactDOM.findDOMNode(this.projectList).addEventListener('transitionend', this.onTransitionEnd, false);
  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     addProjectRole = (e) => {
  58         this.actions.handleAddProjectItem();
  59     }
  60     removeProjectRole = (i, e) => {
  61         this.actions.handleRemoveProjectItem(i);
  62     }
  63     updateProjectRole = (i, e) => {
  64         this.actions.handleUpdateProjectRole(i, e)
  65     }
  66     addProject = () => {
  67         this.actions.handleAddProject();
  68     }
  69     viewProject = (un, index) => {
  70         this.actions.viewProject(un, index);
  71     }
  72     editProject = () => {
  73         this.actions.editProject(false);
  74     }
  75     cancelEditProject = () => {
  76         this.actions.editProject(true)
  77     }
  78     closePanel = () => {
  79         this.actions.handleCloseProjectPanel();
  80     }
  81
  82     deleteProject = (e) => {
  83         e.preventDefault();
  84         e.stopPropagation();
  85         this.Store.deleteProject({
  86                 'name': this.state['name']
  87             });
  88     }
  89     createProject = (e) => {
  90         let self = this;
  91         e.preventDefault();
  92         e.stopPropagation();
  93         let projectUsers = self.state.projectUsers;
  94         let selectedUsers = [];
  95         //Remove null values from role
  96         projectUsers.map((u) => {
  97            u.role && u.role.map((r,i) => {
  98              let role = {};
  99              //you may add a user without a role or a keys, but if one is present then the other must be as well.
 100             if(!r || ((r.role || r['keys']) && (!r.role || !r['keys']))) {
 101                 projectUsers.splice(i, 1);
 102             } else {
 103                 return u;
 104             }
 105            })
 106         })
 107         this.Store.createProject({
 108             'name': self.state['name'],
 109             'description': self.state.description,
 110             'project-config' : {
 111                 'user': projectUsers
 112             }
 113         });
 114     }
 115     updateProject = (e) => {
 116         let self = this;
 117         e.preventDefault();
 118         e.stopPropagation();
 119         let projectUsers = self.state.projectUsers;
 120
 121         //Remove null values from role
 122         projectUsers.map((u) => {
 123            u.role && u.role.map((r,i) => {
 124              let role = {};
 125              //you may add a user without a role or a keys, but if one is present then the other must be as well.
 126             if(!r || ((r.role || r['keys']) && (!r.role || !r['keys']))) {
 127                 projectUsers.splice(i, 1);
 128             } else {
 129                 return u;
 130             }
 131            })
 132         })
 133
 134         this.Store.updateProject(_.merge({
 135             'name': self.state['name'],
 136             'description': self.state.description,
 137             'project-config' : {
 138                 'user': projectUsers
 139             }
 140         }));
 141     }
 142      evaluateSubmit = (e) => {
 143         if (e.keyCode == 13) {
 144             if (this.props.isEdit) {
 145                 this.updateProject(e);
 146             } else {
 147                 this.createProject(e);
 148             }
 149             e.preventDefault();
 150             e.stopPropagation();
 151         }
 152     }
 153     updateSelectedUser = (e) => {
 154         this.setState({
 155             selected
 156         })
 157     }
 158     addUserToProject = (e) => {
 159         this.actions.handleAddUser();
 160     }
 161     removeUserFromProject = (userIndex, e) => {
 162         this.actions.handleRemoveUserFromProject(userIndex);
 163     }
 164     updateUserRoleInProject = (userIndex, roleIndex, e) => {
 165         this.actions.handleUpdateUserRoleInProject({
 166             userIndex,
 167             roleIndex,
 168             value: JSON.parse(e.target.value)
 169         })
 170     }
 171     toggleUserRoleInProject = (userIndex, roleIndex, e) => {
 172         this.actions.handleToggleUserRoleInProject({
 173             userIndex,
 174             roleIndex,
 175             checked: JSON.parse(e.currentTarget.checked)
 176         })
 177     }
 178     removeRoleFromUserInProject = (userIndex, roleIndex, e) => {
 179         this.actions.handleRemoveRoleFromUserInProject({
 180             userIndex,
 181             roleIndex
 182         })
 183     }
 184     addRoleToUserInProject = (userIndex, e) => {
 185         this.actions.addRoleToUserInProject(userIndex);
 186     }
 187     onTransitionEnd = (e) => {
 188         this.actions.handleHideColumns(e);
 189         console.log('transition end')
 190     }
 191     disableChange = (e) => {
 192         let value = e.target.value;
 193         value = value.toUpperCase();
 194         if (value=="TRUE") {
 195             value = true;
 196         } else {
 197             value = false;
 198         }
 199         console.log(value)
 200     }
 201     render() {
 202         let self = this;
 203         let html;
 204         let props = this.props;
 205         let state = this.state;
 206         let passwordSectionHTML = null;
 207         let formButtonsHTML = (
 208             <ButtonGroup className="buttonGroup">
 209                 <Button label="EDIT" type="submit" onClick={this.editProject} />
 210             </ButtonGroup>
 211         );
 212         let projectUsers = [];
 213         self.state.projectUsers.map((u) => {
 214             projectUsers.push(u['user-name']);
 215         });
 216
 217         if(!this.state.isReadOnly) {
 218             formButtonsHTML = (
 219                                 state.isEdit ?
 220                                 (
 221                                     <ButtonGroup className="buttonGroup">
 222                                         <Button label="Update" type="submit" onClick={this.updateProject} />
 223                                         <Button label="Delete" onClick={this.deleteProject} />
 224                                         <Button label="Cancel" onClick={this.cancelEditProject} />
 225                                     </ButtonGroup>
 226                                 )
 227                                 : (
 228                                     <ButtonGroup className="buttonGroup">
 229                                         <Button label="Create" type="submit" onClick={this.createProject}  />
 230                                     </ButtonGroup>
 231                                 )
 232                             )
 233         }
 234
 235         html = (
 236             <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
 237                 <PanelWrapper onKeyUp={this.evaluateSubmit}
 238                     className={`ProjectAdmin column`}>
 239                     <Panel
 240                         title={state.isEdit ? state['name'] : 'Create Project'}
 241                         style={{marginBottom: 0}}
 242                         hasCloseButton={this.closePanel}
 243                         no-corners>
 244                         <FormSection title="USER ROLES">
 245
 246                         <table>
 247                             <thead>
 248                                 <tr>
 249                                     {!state.isReadOnly ? <td></td> : null}
 250                                     <td>User Name</td>
 251                                     {
 252                                         state.roles.map((r,i) => {
 253                                             return <td key={i}>{r}</td>
 254                                         })
 255                                     }
 256                                 </tr>
 257                             </thead>
 258                             <tbody>
 259                                 {
 260                             state.projectUsers.map((u,i)=> {
 261                                 let userRoles = u.role.map((r) => {
 262                                     return r.role;
 263                                 })
 264                                 return (
 265                                     <tr key={i}>
 266                                         {!state.isReadOnly ? <td><span
 267                                                                     className="removeInput"
 268                                                                     onClick={self.removeUserFromProject.bind(self, u)}
 269                                                                 >
 270                                                                     <img src={imgRemove} />
 271
 272                                                                 </span></td> : null}
 273                                         <td>
 274                                             {u['user-name']}
 275                                         </td>
 276                                         {
 277                                             state.roles.map((r,j) => {
 278                                                 return <td key={j}><Input type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
 279                                             })
 280                                         }
 281                                     </tr>
 282                                 )
 283                             })
 284                         }
 285                             </tbody>
 286                         </table>
 287
 288
 289                         { false ?
 290                             <div>
 291                                 <div className="tableRow tableRow--header">
 292                                     <div className="projectName">
 293                                         User Name
 294                                     </div>
 295                                     <div>
 296                                         Role
 297                                     </div>
 298                                 </div>
 299                                 {
 300                                     state.projectUsers && state.projectUsers.map((u, k) => {
 301                                         return (
 302                                             <div ref={(el) => this[`project-ref-${k}`] = el} className={`tableRow tableRow--data projectUsers`} key={k}>
 303                                                 <div className="userName" style={state.isReadOnly ? {paddingTop: '0.25rem'} : {} }>{u['user-name']}</div>
 304                                                 <div>
 305                                                     {
 306                                                         u.role && u.role.map((r, l) => {
 307                                                             return (
 308                                                                 <div key={l}>
 309                                                                     <div style={{display: 'flex'}} className="selectRole">
 310                                                                         <SelectOption
 311                                                                             readonly={state.isReadOnly}
 312                                                                             defaultValue={r.role}
 313                                                                             options={state.roles}
 314                                                                             onChange={self.updateUserRoleInProject.bind(self, k, l)}
 315                                                                         />
 316                                                                         {!state.isReadOnly ?
 317                                                                             <span
 318                                                                             className="removeInput"
 319                                                                             onClick={self.removeRoleFromUserInProject.bind(self, k, l)}
 320                                                                             >
 321                                                                                 <img src={imgRemove} />
 322                                                                                 Remove Role
 323                                                                             </span>
 324                                                                             : null
 325                                                                         }
 326
 327                                                                     </div>
 328                                                                 </div>
 329                                                             )
 330                                                         })
 331                                                     }
 332                                                     {!state.isReadOnly ?
 333                                                         <div className="buttonGroup">
 334                                                             <span className="addInput addRole" onClick={self.addRoleToUserInProject.bind(self, k)}><img src={imgAdd} />
 335                                                                 Add Role
 336                                                             </span>
 337                                                             {
 338                                                                 (!(u.role && u.role.length)) ?
 339                                                                     <span
 340                                                                         className="removeInput"
 341                                                                         onClick={self.removeUserFromProject.bind(self, k)}
 342                                                                     >
 343                                                                         <img src={imgRemove} />
 344                                                                         Remove User
 345                                                                     </span> : null
 346                                                             }
 347                                                         </div>
 348                                                         : null
 349                                                     }
 350                                                 </div>
 351                                             </div>
 352                                         )
 353                                     })
 354                                 }
 355                                 </div>
 356                                  : null
 357                              }
 358                             {
 359                                 !state.isReadOnly ?
 360                                     <div className="tableRow tableRow--header">
 361                                         <div>
 362                                             <div className="addUser">
 363                                                 <SelectOption
 364                                                     onChange={this.actions.handleSelectedUser}
 365                                                     defaultValue={state.selectedUser}
 366                                                     initial={true}
 367                                                     options={state.users && state.users.filter((u) => {
 368                                                         return projectUsers.indexOf(u['user-name']) == -1
 369                                                     }).map((u) => {
 370                                                         return {
 371                                                             label: u['user-name'],
 372                                                             value: u
 373                                                         }
 374                                                     })}
 375                                                 />
 376                                                 <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
 377                                                     Add User
 378                                                 </span>
 379                                             </div>
 380                                         </div>
 381                                     </div> : null
 382                             }
 383
 384                         </FormSection>
 385
 386                     </Panel>
 387                         {formButtonsHTML}
 388
 389                 </PanelWrapper>
 390
 391
 392             </PanelWrapper>
 393         );
 394         return html;
 395     }
 396 }
 397 // onClick={this.Store.update.bind(null, Account)}
 398 PlatformRoleManagement.contextTypes = {
 399     router: React.PropTypes.object
 400 };
 401
 402 PlatformRoleManagement.defaultProps = {
 403     projectList: [],
 404     selectedProject: {}
 405 }
 406
 407 export default SkyquakeComponent(PlatformRoleManagement);
 408
 409
 410 function isElementInView(el) {
 411     var rect = el && el.getBoundingClientRect() || {};
 412
 413     return (
 414         rect.top >= 0 &&
 415         rect.left >= 0 &&
 416         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
 417         rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
 418     );
 419 }
 420
 421
 422 // isReadOnly={state.isReadOnly} disabled={state.disabled} onChange={this.disableChange}
 423
 424 class isDisabled extends React.Component {
 425     constructor(props) {
 426         super(props);
 427     }
 428     render() {
 429         let props = this.props;
 430         return (<div/>)
 431     }
 432 }
 433
 434
 435
 436