User info row striping
Added status colum to user table
Edit mode shows only editable things
Update button moved to right hand side
Added cancel button to create user
Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
function buildRadioButtons(props) {
let className = 'sqCheckBox';
function buildRadioButtons(props) {
let className = 'sqCheckBox';
- if (props.className) {
- className = `${className} ${props.className}`;
- }
return(
<div className={className}>
{
return(
<div className={className}>
{
state.isEdit ?
(
<ButtonGroup className="buttonGroup">
state.isEdit ?
(
<ButtonGroup className="buttonGroup">
- <Button label="Update" type="submit" onClick={this.updateUser} />
<Button label="Delete" onClick={this.deleteUser} />
<Button label="Cancel" onClick={this.cancelEditUser} />
<Button label="Delete" onClick={this.deleteUser} />
<Button label="Cancel" onClick={this.cancelEditUser} />
+ <Button label="Update" type="submit" onClick={this.updateUser} />
</ButtonGroup>
)
: (
<ButtonGroup className="buttonGroup">
</ButtonGroup>
)
: (
<ButtonGroup className="buttonGroup">
+ <Button label="Cancel" onClick={this.closePanel} />
<Button label="Create" type="submit" onClick={this.createUser} />
</ButtonGroup>
)
<Button label="Create" type="submit" onClick={this.createUser} />
</ButtonGroup>
)
+ <div>
+ Status
+ </div>
</div>
{state.users && state.users.map((u, k) => {
let platformRoles = [];
</div>
{state.users && state.users.map((u, k) => {
let platformRoles = [];
<div>
{u['user-domain']}
</div>
<div>
{u['user-domain']}
</div>
+ <div>
+ {u['disabled'] ? "DISABLED" : "ENABLED"}
+ </div>
style={{marginBottom: 0}}
hasCloseButton={this.closePanel}
no-corners>
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
+ <FormSection title="USER INFO" className="userInfo">
+ {
+ (!state.isEditUser || state.isReadOnly) ?
+ <Input className="userInfo-section" readonly={state.isReadOnly || this.state.isEdit} label="Username" value={state['user-name']} onChange={this.updateInput.bind(null, 'user-name')} />
+ : null
+ }
+ {
+ (!state.isEditUser || state.isReadOnly) ?
+ <Input className="userInfo-section" readonly={true} label="Domain" value={state['user-domain']} onChange={this.updateInput.bind(null, 'user-domain')}></Input>
+ : null
+ }
+ <Input className="userInfo-section"
type="radiogroup"
onChange={this.disableChange}
label="STATUS"
type="radiogroup"
onChange={this.disableChange}
label="STATUS"
+ .userInfo {
+ &-section {
+ padding: 0.5rem;
+ margin-bottom: 0;
+ &:nth-child(even) {
+ background:$neutral-dark-0;
+ }
+ }
+ }
.userAdmin {
-ms-flex: 1 1;
flex: 1 1;
.userAdmin {
-ms-flex: 1 1;
flex: 1 1;
this.isReadOnly = true;
this.userOpen = false;
this.hideColumns = false;
this.isReadOnly = true;
this.userOpen = false;
this.hideColumns = false;
+ //There is probably a better way of handling the view/edit/readonly matrix conditions for some of these inputs. Should definitely revist
+ this.isEditUser = false;
// this.exportPublicMethods({})
}
/**
// this.exportPublicMethods({})
}
/**
}
editUser(isEdit) {
this.setState({
}
editUser(isEdit) {
this.setState({