diff options
Diffstat (limited to 'ui/app/components/wizard/provider_select_stage.js')
-rw-r--r-- | ui/app/components/wizard/provider_select_stage.js | 168 |
1 files changed, 130 insertions, 38 deletions
diff --git a/ui/app/components/wizard/provider_select_stage.js b/ui/app/components/wizard/provider_select_stage.js index 20674be..19799f8 100644 --- a/ui/app/components/wizard/provider_select_stage.js +++ b/ui/app/components/wizard/provider_select_stage.js @@ -2,7 +2,11 @@ import React from 'react' import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap' import App from 'app' -import ListEdit from 'components/list_edit' +import Provider from 'models/provider' + +import ListEditor from 'components/list_editor' +import {HorizontalLayout, Column} from 'components/layout' + import StageLayout from './stage_layout' import AddProviderModal from './add_provider_modal' @@ -10,75 +14,163 @@ export default class ProviderSelectStage extends React.Component { static get defaultProps() {return{ title: "Choose a provider", - subtitle: "This doesn't work yet" + initialProvider: null }} constructor(props) { super(props) - let domains = this.currentDomains() this.state = { - domains: domains, - showModal: false + domains: [], // array of domains, as strings + showModal: false, + selected: null, // domain of selected item + provider: null, // Provider object, if selected + error: null // error message } - this.add = this.add.bind(this) - this.remove = this.remove.bind(this) - this.close = this.close.bind(this) - this.previous = this.previous.bind(this) + this.add = this.add.bind(this) + this.remove = this.remove.bind(this) + this.select = this.select.bind(this) + this.close = this.close.bind(this) + this.cancel = this.cancel.bind(this) + this.next = this.next.bind(this) + } + + componentWillMount() { + this.refreshList({ + provider: this.props.initialProvider, + selected: (this.props.initialProvider ? this.props.initialProvider.domain : null) + }) } - currentDomains() { - // return(App.providers.domains().slice() || []) - return ['domain1', 'domain2', 'domain3'] + // + // newState is the state to apply after + // domains are refreshed + // + refreshList(newState=null) { + Provider.list(true).then(domains => { + this.setState(Object.assign({domains: domains}, newState)) + if (domains.length > 0) { + let domain = this.state.selected + if (domains.includes(domain)) { + this.select(domain) + } else { + this.select(domains[0]) + } + } else { + this.select(null) + } + }) } add() { this.setState({showModal: true}) } - remove(provider) { - // App.providers.remove(provider) - this.setState({domains: this.currentDomains()}) + remove(domain, newactive) { + Provider.delete(domain).then( + response => { + this.refreshList({selected: newactive}) + }, + error => { + console.log(error) + } + ) } - close() { - let domains = this.currentDomains() - if (domains.length != this.state.domains.length) { - // this is ugly, but i could not get selection working - // by passing it as a property - this.refs.list.setSelected(0) - } + select(domain) { this.setState({ - domains: domains, - showModal: false + selected: domain }) + if (domain) { + Provider.get(domain).then( + provider => { + this.setState({ + provider: provider + }) + }, + error => { + this.setState({ + provider: null, + error: error + }) + } + ) + } else { + this.setState({ + provider: null, + error: null + }) + } + } + + close(provider=null) { + if (provider) { + this.refreshList({ + showModal: false, + provider: provider, + selected: provider.domain + }) + } else { + this.setState({ + showModal: false + }) + } } - previous() { + cancel() { App.start() } + next() { + App.show('wizard', { + stage: 'register', + provider: this.state.provider + }) + } + render() { let modal = null + let info = null + if (this.state.provider) { + info = ( + <div> + <h1 className="first">{this.state.provider.name}</h1> + <h3>{this.state.provider.domain}</h3> + <p>{this.state.provider.description}</p> + <p><b>Enrollment Policy:</b> {this.state.provider.enrollment_policy}</p> + <p><b>Services</b>: {this.state.provider.services}</p> + <p><b>Languages</b>: {this.state.provider.languages.join(', ')}</p> + </div> + ) + } else if (this.state.error) { + info = <div>{this.state.error}</div> + } if (this.state.showModal) { modal = <AddProviderModal onClose={this.close} /> } let buttons = ( - <ButtonToolbar className="pull-right"> - <Button onClick={this.previous}> - <Glyphicon glyph="chevron-left" /> - Previous - </Button> - <Button> - Next - <Glyphicon glyph="chevron-right" /> - </Button> - </ButtonToolbar> + <div> + <ButtonToolbar className="pull-left"> + <Button onClick={this.cancel}> + Cancel + </Button> + </ButtonToolbar> + <ButtonToolbar className="pull-right"> + <Button onClick={this.next}> + Next + <Glyphicon glyph="chevron-right" /> + </Button> + </ButtonToolbar> + </div> ) - let select = <ListEdit ref="list" items={this.state.domains} - onRemove={this.remove} onAdd={this.add} /> + let editlist = <ListEditor ref="list" items={this.state.domains} + selected={this.state.selected} onRemove={this.remove} onAdd={this.add} + onSelect={this.select} /> return( <StageLayout title={this.props.title} subtitle={this.props.subtitle} buttons={buttons}> - {select} + <HorizontalLayout equalWidths={true}> + <Column>{editlist}</Column> + <Column>{info}</Column> + </HorizontalLayout> {modal} </StageLayout> ) |