gistfile1.txt

class ScopeModal extends React.Component {
	
	constructor(props) {
		super(props);
		this._onChange = this._onChange.bind(this);
		this.handleClose = this.handleClose.bind(this);
		this.state = { show: false, scope: null, form: {name : null, description: null, enabled : null, id: null, grants : []} };
	}
	componentWillMount () {
		scopeModalStore.addChangeListener(this._onChange);
	}
	componentWillUnmount () {
		scopeModalStore.removeChangeListener(this._onChange);
	}
    handleClose() {
    		scopeAction.modal({}, false);
	}
	_onChange () {
		let data = scopeModalStore.getLastData();
		this.setState({show : data.show});
		this.setState({scope : data.scope});
	}
    render () {
        return (
        		<div className="static-modal">
        		  <Modal show={this.state.show} onHide={this.handleClose}>
        		    <Modal.Header>
        		      <Modal.Title>Create/Edit Scopes</Modal.Title>
        		    </Modal.Header>
        		    <Modal.Body>
	        		    <form onSubmit={this.handleSubmit}>
	        		    		<input type='hidden' value={this.state.scope.id} />
	        		    		<input type='text' value={this.state.scope.name} />
	        		    		<textarea rows="4" cols="20" value={this.state.scope.description} />
	        		    		<Select2 defaultValue={this.state.scope.grants.map(grant => grant.id )}
	        		    		  multiple
	        		    		  data={this.props.grants.map(grant => { return {id : grant.id, text: grant.name}})}
	        		    		  options={
	        		    		    {
	        		    		      placeholder: 'Select Grants',
	        		    		    }
	        		    		  }
	        		    		/>
	                </form>
        		    </Modal.Body>
        		    <Modal.Footer>
        		      <Button>Close</Button>
        		      <Button bsStyle="primary">Save changes</Button>
        		    </Modal.Footer>
        		  </Modal>
        		</div>
) } };

module.exports = createFragmentContainer(ScopeModal, graphql `
		fragment ScopeModal_grants on Query {
			grants {
			    id
			    name
			    description
			}
		}
`);