1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap'; |
4 import { Panel, FormGroup, ControlLabel, FormControl, Collapse } from 'react-bootstrap'; |
5 import GroupForm from './GroupForm'; |
|
6 import '../App.css'; |
5 import '../App.css'; |
7 import * as sessionsActions from '../actions/sessionsActions'; |
6 import * as sessionsActions from '../actions/sessionsActions'; |
8 import * as authActions from '../actions/authActions'; |
7 import * as authActions from '../actions/authActions'; |
9 import _ from 'lodash'; |
8 import _ from 'lodash'; |
|
9 import './SessionForm.css'; |
10 |
10 |
11 class SessionForm extends Component { |
11 class SessionForm extends Component { |
12 |
12 |
13 state = { |
13 state = { |
14 createGroup: false |
14 createGroup: false, |
|
15 protocolOpen: false |
15 } |
16 } |
16 |
17 |
17 onChange = (e) => { |
18 onChange = (e) => { |
18 const { name, value } = e.target; |
19 const { name, value } = e.target; |
19 const changes = { [name]: value } |
20 const changes = { [name]: value } |
34 |
35 |
35 componentWillUpdate = (nextProps, nextState) => { |
36 componentWillUpdate = (nextProps, nextState) => { |
36 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
37 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
37 this.setState({ createGroup: false }) |
38 this.setState({ createGroup: false }) |
38 } |
39 } |
|
40 } |
|
41 |
|
42 toggleProtocol = (e) => { |
|
43 e.preventDefault(); |
|
44 this.setState({ |
|
45 protocolOpen: !this.state.protocolOpen |
|
46 }); |
39 } |
47 } |
40 |
48 |
41 render() { |
49 render() { |
42 |
50 |
43 if (!this.props.currentSession) { |
51 if (!this.props.currentSession) { |
69 placeholder="Enter a description" |
77 placeholder="Enter a description" |
70 /> |
78 /> |
71 </FormGroup> |
79 </FormGroup> |
72 <FormGroup> |
80 <FormGroup> |
73 <ControlLabel>Group</ControlLabel> |
81 <ControlLabel>Group</ControlLabel> |
74 <FormControl |
82 <p>{this.props.currentSession.group}</p> |
75 name="group" |
|
76 componentClass="select" |
|
77 value={ this.props.group ? this.props.group.get('name') : '' } |
|
78 onChange={ this.onGroupChange }> |
|
79 { this.props.groups.map((group, key) => |
|
80 <option key={ key } value={ group.get('name') }>{ group.get('name') }</option> |
|
81 ) } |
|
82 </FormControl> |
|
83 </FormGroup> |
83 </FormGroup> |
84 <FormGroup> |
84 <FormGroup> |
85 <GroupForm session={this.props.session} /> |
85 <ControlLabel onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</ControlLabel> |
|
86 <Collapse in={this.state.protocolOpen}> |
|
87 <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> |
|
88 </Collapse> |
86 </FormGroup> |
89 </FormGroup> |
87 </form> |
90 </form> |
88 </Panel> |
91 </Panel> |
89 ); |
92 ); |
90 } |
93 } |