*/
import './formControls.scss';
import SelectOption from 'widgets/form_controls/selectOption.jsx';
-
+import CircleSVG from '../../../node_modules/open-iconic/svg/media-record.svg'
import React, {Component} from 'react';
export default class Input extends Component {
} else {
displayedValue = value.toString();
}
+ if( props.readonly && props.type == "checkbox" ) {
+ displayedValue = <img src={CircleSVG} />
+ }
let html = (
<label className={className} style={props.style}>
<span> { label } {isRequired}</span>
/*
- *
+ *
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
*/
header.header-app-component {
- padding: 20px 0px;
+ padding: 10px 0px;
+ display:-ms-flexbox;
display:flex;
- flex-direction:column;
+ -ms-flex-direction:column;
+ flex-direction:column;
.header-app-main {
+ display:-ms-flexbox;
display:flex;
- flex-direction:row;
- justify-content:space-between;
- align-items:center;
+ -ms-flex-direction:row;
+ flex-direction:row;
+ -ms-flex-pack:justify;
+ justify-content:space-between;
+ -ms-flex-align:center;
+ align-items:center;
}
h1 {
/*background: url('../../style/img/header-logo.png') no-repeat;*/
font-size: 1.625rem;
font-weight: 400;
position:relative;
- flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
}
ul {
+ display:-ms-flexbox;
display:flex;
}
li {
+ display:-ms-flexbox;
display:flex;
- flex:1 1 auto;
+ -ms-flex:1 1 auto;
+ flex:1 1 auto;
border-right:1px solid #e5e5e5;
padding: 0 1rem;
&:last-child {
}
a {
cursor:pointer;
- // padding: 0.125rem;
- // border-bottom:1px solid black;
+ /* padding: 0.125rem;*/
+ /* border-bottom:1px solid black;*/
text-decoration:underline;
}
}
.header-app-nav {
+ display:-ms-flexbox;
display:flex;
margin-left: 0.25rem;
a,span {
}
}
nav {
+ display:-ms-flexbox;
display:flex;
- flex:0 1 auto;
- align-items:center;
+ -ms-flex:0 1 auto;
+ flex:0 1 auto;
+ -ms-flex-align:center;
+ align-items:center;
}
}
export class PanelWrapper extends Component {
render() {
let wrapperClass = 'skyquakePanelWrapper';
- let {className, ...props} = this.props;
+ let {className, column, style, ...props} = this.props;
if(className) {
wrapperClass = `${wrapperClass} ${className}`
}
+ if(column) {
+ style.flexDirection = 'column';
+ }
return (
- <div className={wrapperClass} {...props}>
+ <div className={wrapperClass} style={style} {...props}>
{this.props.children}
</div>)
}
}
-
+PanelWrapper.defaultProps = {
+ style: {}
+}
export default Panel;
-//import a reset
+/*import a reset*/
@import '../../style/_colors.scss';
html, body {
height:100%;
.skyquakeApp {
+ display: -ms-flexbox;
display: flex;
- flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
height: 100%;
background: $gray-lightest;
h1 {
color: #fff!important
}
.skyquakeNav {
+ display: -ms-flexbox;
display: flex;
color:white;
background:black;
z-index: 10;
font-size:0.75rem;
.secondaryNav {
- flex: 1 1 auto;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ display: -ms-flexbox;
display: flex;
- justify-content: flex-end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
}
.app {
position:relative;
h2 {
font-size:0.75rem;
border-right: 1px solid black;
+ display: -ms-flexbox;
display: flex;
- align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
.oi {
padding-right: 0.5rem;
}
.titleBar {
padding: 1rem 0 0;
h1 {
- // background: url('../../style/img/header-logo.png') no-repeat;
+ /* background: url('../../style/img/header-logo.png') no-repeat;*/
background-size:contain;
height: 51px;
line-height: 51px;
margin-left: 20px;
- // padding-left: 100px;
+ /* padding-left: 100px;*/
left: 0;
font-size: 1.625rem;
font-weight: 400;
text-align:left;
position:relative;
- flex: 1 0 auto;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto;
}
}
.corner-accent {
/*
- *
+ *
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
let nav = <AppHeader nav={navItems} />
if (this.state.showRecordDetails) {
- recordDetails = <RecordDetails isLoading={this.state.detailLoading} data={this.state.rawData} />
+ recordDetails = <RecordDetails isLoading={this.state.detailLoading} data={this.state.rawData} />
}
html = (
<div className="app-body recordView">
"label": "Platform Role Management",
"route": "platform",
"component": "./platformRoleManagement/platformRoleManagement.jsx",
- "type": "external"
+ "type": "internal"
}]
}
import SelectOption from 'widgets/form_controls/selectOption.jsx';
import 'widgets/form_controls/formControls.scss';
import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
-import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
+import imgRemove from '../../node_modules/open-iconic/svg/trash.svg';
class UserManagementDashboard extends React.Component {
constructor(props) {
}
html = (
- <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'flexDirection': 'row'}} >
- <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
- <Panel title="User List" style={{marginBottom: 0}} no-corners>
- <div className="tableRow tableRow--header">
- <div className="userName">
- Username
- </div>
- <div>
- Domain
+ <PanelWrapper column>
+ <AppHeader nav={[{name: 'PLATFORM ROLE MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/platform'})}]}/>
+ <PanelWrapper className={`row userManagement ${!this.state.userOpen ? 'userList-open' : ''}`} style={{'flexDirection': 'row'}} >
+ <PanelWrapper ref={(div) => { this.UserList = div}} className={`column userList expanded ${this.state.userOpen ? 'collapsed ' : ' '} ${this.state.hideColumns ? 'hideColumns ' : ' '}`}>
+ <Panel title="User List" style={{marginBottom: 0}} no-corners>
+ <div className="tableRow tableRow--header">
+ <div className="userName">
+ Username
+ </div>
+ <div>
+ Domain
+ </div>
</div>
- </div>
- {state.users && state.users.map((u, k) => {
- let platformRoles = [];
- for(let role in u.platformRoles) {
- platformRoles.push(<div>{`${role}: ${u.platformRoles[role]}`}</div>)
- }
- return (
- <div ref={(el) => this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}>
- <div
- className={`userName userName-header ${((self.state.activeIndex == k) && self.state.userOpen) ? 'activeUser' : ''}`}
- onClick={self.viewUser.bind(null, u, k)}>
- {u['user-name']}
- </div>
- <div>
- {u['user-domain']}
- </div>
+ {state.users && state.users.map((u, k) => {
+ let platformRoles = [];
+ for(let role in u.platformRoles) {
+ platformRoles.push(<div>{`${role}: ${u.platformRoles[role]}`}</div>)
+ }
+ return (
+ <div ref={(el) => this[`user-ref-${k}`] = el} className={`tableRow tableRow--data ${((self.state.activeIndex == k) && self.state.userOpen) ? 'tableRow--data-active' : ''}`} key={k}>
+ <div
+ className={`userName userName-header ${((self.state.activeIndex == k) && self.state.userOpen) ? 'activeUser' : ''}`}
+ onClick={self.viewUser.bind(null, u, k)}>
+ {u['user-name']}
+ </div>
+ <div>
+ {u['user-domain']}
+ </div>
- </div>
- )
- })}
- </Panel>
- <ButtonGroup className="buttonGroup" style={{margin: '0 0.5rem 0.5rem', background: '#ddd', paddingBottom: '0.5rem'}}>
- <Button label="Add User" onClick={this.addUser} />
- </ButtonGroup>
- </PanelWrapper>
- <PanelWrapper onKeyUp={this.evaluateSubmit}
- className={`userAdmin column`}>
- <Panel
- title={state.isEdit ? state['user-name'] : 'Create User'}
- style={{marginBottom: 0}}
- hasCloseButton={this.closePanel}
- no-corners>
- <FormSection title="USER INFO">
- {
- this.state.isEdit ?
- null
- : <Input readonly={state.isReadOnly} label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
- }
- <Input readonly={true} label="Domain" value={state['user-domain']} onChange={this.updateInput.bind(null, 'user-domain')}></Input>
-
- <Input type="radiogroup" readonly={state.isReadOnly} label="Disabled" value={state.disabled} options={[{value: true, label: 'YES'}, {value: false, label: 'NO'}]} onChange={this.disableChange} />
- </FormSection>
- <FormSection title="PLATFORM ROLES" style={{display:'none'}}>
- <Input label="Super Admin" onChange={this.platformChange.bind(null, 'super_admin')} checked={state.platformRoles.super_admin} type="checkbox" />
- <Input label="Platform Admin" onChange={this.platformChange.bind(null, 'platform_admin')} checked={state.platformRoles.platform_admin} type="checkbox" />
- <Input label="Platform Oper" onChange={this.platformChange.bind(null, 'platform_oper')} checked={state.platformRoles.platform_oper} type="checkbox" />
- </FormSection>
- <FormSection title="PROJECT ROLES" style={{display:'none'}}>
- <InputCollection
- inital={true}
- type='select'
- readonly={state.isReadOnly}
- options={state.projectRolesOptions}
- collection={state.projectRoles}
- onChange={this.updateProjectRole}
- AddItemFn={this.addProjectRole}
- RemoveItemFn={this.removeProjectRole}
- />
- </FormSection>
- {passwordSectionHTML}
+ </div>
+ )
+ })}
+ </Panel>
+ <ButtonGroup className="buttonGroup" style={{margin: '0 0.5rem 0.5rem', background: '#ddd', paddingBottom: '0.5rem'}}>
+ <Button label="Add User" onClick={this.addUser} />
+ </ButtonGroup>
+ </PanelWrapper>
+ <PanelWrapper onKeyUp={this.evaluateSubmit}
+ className={`userAdmin column`}>
+ <Panel
+ title={state.isEdit ? state['user-name'] : 'Create User'}
+ style={{marginBottom: 0}}
+ hasCloseButton={this.closePanel}
+ no-corners>
+ <FormSection title="USER INFO">
+ {
+ this.state.isEdit ?
+ null
+ : <Input readonly={state.isReadOnly} label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+ }
+ <Input readonly={true} label="Domain" value={state['user-domain']} onChange={this.updateInput.bind(null, 'user-domain')}></Input>
- </Panel>
- {formButtonsHTML}
+ <Input type="radiogroup" readonly={state.isReadOnly} label="Disabled" value={state.disabled} options={[{value: true, label: 'YES'}, {value: false, label: 'NO'}]} onChange={this.disableChange} />
+ </FormSection>
+ <FormSection title="PLATFORM ROLES" style={{display:'none'}}>
+ <Input label="Super Admin" onChange={this.platformChange.bind(null, 'super_admin')} checked={state.platformRoles.super_admin} type="checkbox" />
+ <Input label="Platform Admin" onChange={this.platformChange.bind(null, 'platform_admin')} checked={state.platformRoles.platform_admin} type="checkbox" />
+ <Input label="Platform Oper" onChange={this.platformChange.bind(null, 'platform_oper')} checked={state.platformRoles.platform_oper} type="checkbox" />
+ </FormSection>
+ <FormSection title="PROJECT ROLES" style={{display:'none'}}>
+ <InputCollection
+ inital={true}
+ type='select'
+ readonly={state.isReadOnly}
+ options={state.projectRolesOptions}
+ collection={state.projectRoles}
+ onChange={this.updateProjectRole}
+ AddItemFn={this.addProjectRole}
+ RemoveItemFn={this.removeProjectRole}
+ />
+ </FormSection>
+ {passwordSectionHTML}
+ </Panel>
+ {formButtonsHTML}
+ </PanelWrapper>
</PanelWrapper>
-
-
</PanelWrapper>
);
return html;
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
)
: (
<ButtonGroup className="buttonGroup">
- <Button label="Create" type="submit" onClick={this.updatePlatform} />
+ <Button label="Edit" type="submit" onClick={this.updatePlatform} />
</ButtonGroup>
)
)
}
html = (
- <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
- <PanelWrapper onKeyUp={this.evaluateSubmit}
- className={`ProjectAdmin column`}>
- <Panel
- title={state.isEdit ? state['name'] : 'Create Project'}
- style={{marginBottom: 0}}
- hasCloseButton={this.closePanel}
- no-corners>
- <FormSection title="USER ROLES">
+ <PanelWrapper column>
+ <AppHeader nav={[{name: 'USER MANAGEMENT', onClick: this.context.router.push.bind(this, {pathname: '/'})}]}/>
+ <PanelWrapper className={`row projectManagement ${false ? 'projectList-open' : ''}`} style={{'alignContent': 'center', 'flexDirection': 'row'}} >
+ <PanelWrapper onKeyUp={this.evaluateSubmit}
+ className={`ProjectAdmin column`}>
+ <Panel
+ title="Manage Roles"
+ style={{marginBottom: 0}}
+ no-corners>
+ <FormSection title="USER ROLES">
- <table>
- <thead>
- <tr>
- {!state.isReadOnly ? <td></td> : null}
- <td>User Name</td>
- {
- state.roles.map((r,i) => {
- return <td key={i}>{r}</td>
- })
- }
- </tr>
- </thead>
- <tbody>
- {
- state.platformUsers.map((u,i)=> {
- let userRoles = u.role && u.role.map((r) => {
- return r.role;
- }) || [];
- return (
- <tr key={i}>
- {!state.isReadOnly ? <td><span
- className="removeInput"
- onClick={self.removeUserFromProject.bind(self, u)}
- >
- <img src={imgRemove} />
-
- </span></td> : null}
- <td>
- {u['user-name']}
- </td>
+ <table>
+ <thead>
+ <tr>
+ {!state.isReadOnly ? <td></td> : null}
+ <td>User Name</td>
{
- state.roles.map((r,j) => {
- return <td key={j}><Input type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
+ state.roles.map((r,i) => {
+ return <td key={i}>{r}</td>
})
}
</tr>
- )
- })
- }
- </tbody>
- </table>
- {
- !state.isReadOnly ?
- <div className="tableRow tableRow--header">
- <div>
- <div className="addUser">
- <SelectOption
- onChange={this.actions.handleSelectedUser}
- defaultValue={state.selectedUser}
- initial={true}
- options={state.users && state.users.filter((u) => {
- return platformUsers.indexOf(u['user-name']) == -1
- }).map((u) => {
- return {
- label: u['user-name'],
- value: u
- }
- })}
- />
- <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
- Add User
- </span>
- </div>
- </div>
- </div> : null
- }
+ </thead>
+ <tbody>
+ {
+ state.platformUsers.map((u,i)=> {
+ let userRoles = u.role && u.role.map((r) => {
+ return r.role;
+ }) || [];
+ return (
+ <tr key={i}>
+ {!state.isReadOnly ? <td><span
+ className="removeInput"
+ onClick={self.removeUserFromProject.bind(self, u)}
+ >
+ <img src={imgRemove} />
- </FormSection>
+ </span></td> : null}
+ <td>
+ {u['user-name']}
+ </td>
+ {
+ state.roles.map((r,j) => {
+ return <td key={j}><Input readonly={state.isReadOnly} type="checkbox" onChange={self.toggleUserRoleInProject.bind(self, i, j)} checked={(userRoles.indexOf(r) > -1)} /></td>
+ })
+ }
+ </tr>
+ )
+ })
+ }
+ </tbody>
+ </table>
+ {
+ !state.isReadOnly ?
+ <div className="tableRow tableRow--header">
+ <div>
+ <div className="addUser">
+ <SelectOption
+ onChange={this.actions.handleSelectedUser}
+ defaultValue={state.selectedUser}
+ initial={true}
+ options={state.users && state.users.filter((u) => {
+ return platformUsers.indexOf(u['user-name']) == -1
+ }).map((u) => {
+ return {
+ label: u['user-name'],
+ value: u
+ }
+ })}
+ />
+ <span className="addInput" onClick={this.addUserToProject}><img src={imgAdd} />
+ Add User
+ </span>
+ </div>
+ </div>
+ </div> : null
+ }
- </Panel>
+ </FormSection>
+ </Panel>
{formButtonsHTML}
-
+ </PanelWrapper>
</PanelWrapper>
-
-
</PanelWrapper>
);
return html;
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}).fail(function(xhr){
//Authentication and the handling of fail states should be wrapped up into a connection class.
Utils.checkAuthentication(xhr.status);
+ let msg = xhr.responseText;
+ if(xhr.errorMessage) {
+ msg = xhr.errorMessage
+ }
+ reject(msg);
});
});
},
}
getPlatformSuccess(platform) {
this.alt.actions.global.hideScreenLoader.defer();
- let platformUsers = platform.user
+ let platformUsers = platform && platform.user || [];
let state = _.merge({
platform: platform,
projectOpen: true,
projects / osm / UI.git / commitdiff