9 |
9 |
10 class SessionForm extends Component { |
10 class SessionForm extends Component { |
11 |
11 |
12 state = { |
12 state = { |
13 createGroup: false, |
13 createGroup: false, |
14 protocolOpen: false |
14 protocolOpen: false, |
15 } |
15 titleEditMode: false, |
16 |
16 descriptionEditMode: false, |
17 onChange = (e) => { |
17 enterKeyValue: false, |
18 const { name, value } = e.target; |
18 } |
19 const changes = { [name]: value } |
19 |
20 this.onChangeThrottle(changes); |
20 onChange = (e) => { |
21 } |
21 const { name, value } = e.target; |
22 |
22 const changes = { [name]: value } |
23 onChangeThrottle = _.debounce((changes) => { |
23 this.onChangeThrottle(changes); |
24 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
24 } |
25 }, 750) |
25 |
26 |
26 onChangeThrottle = _.debounce((changes) => { |
27 onGroupChange = (e) => { |
27 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
28 const groupName = e.target.value; |
28 }, 750) |
29 |
29 |
30 const group = this.props.groups.find((g) => g.get('name') === groupName); |
30 onGroupChange = (e) => { |
31 |
31 const groupName = e.target.value; |
32 this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' }); |
32 |
33 } |
33 const group = this.props.groups.find((g) => g.get('name') === groupName); |
|
34 |
|
35 this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' }); |
|
36 } |
|
37 |
|
38 componentDidMount() { |
|
39 document.addEventListener('mousedown', this.handleClickOutside); |
|
40 } |
|
41 |
|
42 componentWillUnmount() { |
|
43 document.removeEventListener('mousedown', this.handleClickOutside); |
|
44 } |
34 |
45 |
35 componentWillUpdate = (nextProps, nextState) => { |
46 componentWillUpdate = (nextProps, nextState) => { |
36 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
47 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
37 this.setState({ createGroup: false }) |
48 this.setState({ createGroup: false }) |
38 } |
49 } |
42 e.preventDefault(); |
53 e.preventDefault(); |
43 this.setState({ |
54 this.setState({ |
44 protocolOpen: !this.state.protocolOpen |
55 protocolOpen: !this.state.protocolOpen |
45 }); |
56 }); |
46 } |
57 } |
|
58 |
|
59 toggleOnTitleEditMode = (e) => { |
|
60 e.preventDefault(); |
|
61 this.setState({ |
|
62 titleEditMode: true, |
|
63 }); |
|
64 } |
|
65 |
|
66 toggleOnDescriptionEditMode = (e) => { |
|
67 e.preventDefault(); |
|
68 this.setState({ |
|
69 descriptionEditMode: true, |
|
70 }); |
|
71 } |
|
72 |
|
73 toggleOffTitleEditMode = (e) => { |
|
74 e.preventDefault(); |
|
75 this.setState({ |
|
76 titleEditMode: false, |
|
77 }); |
|
78 } |
|
79 |
|
80 toggleOffDescriptionEditMode = (e) => { |
|
81 e.preventDefault(); |
|
82 this.setState({ |
|
83 descriptionEditMode: false, |
|
84 }); |
|
85 } |
|
86 |
|
87 handleClickOutside = (e) => { |
|
88 if (this.title && !this.title.contains(e.target)) { |
|
89 this.toggleOffTitleEditMode(e) |
|
90 } |
|
91 |
|
92 if (this.desc && !this.desc.contains(e.target)) { |
|
93 this.toggleOffDescriptionEditMode(e) |
|
94 } |
|
95 } |
|
96 |
|
97 saveEdit = (e) => { |
|
98 |
|
99 e.preventDefault(); |
|
100 |
|
101 if (e.key === 'Enter') { |
|
102 this.setState({enterKeyValue: true}) |
|
103 } |
|
104 |
|
105 if (e.key !== 'Enter') { |
|
106 this.setState({enterKeyValue: false}) |
|
107 } |
|
108 |
|
109 if (e.key === 'Enter' && this.state.enterKeyValue === true) { |
|
110 |
|
111 e.preventDefault(); |
|
112 this.setState({ |
|
113 enterKeyValue: false, |
|
114 titleEditMode: false, |
|
115 descriptionEditMode: false, |
|
116 }) |
|
117 } |
|
118 } |
|
119 |
|
120 titleEditMode = () => { |
|
121 |
|
122 if (this.state.titleEditMode === false) { |
|
123 return ( |
|
124 <div |
|
125 onClick={this.toggleOnTitleEditMode} |
|
126 className='session-page-title border-0 bg-success text-muted ml-3' |
|
127 > |
|
128 { this.props.currentSession.title || 'Espace titre' } |
|
129 </div> |
|
130 ); |
|
131 } |
|
132 |
|
133 if (this.state.titleEditMode === true) { |
|
134 return ( |
|
135 <div className="form-group pr-5"> |
|
136 <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3' |
|
137 onKeyDown={ this.saveEdit } |
|
138 onChange={ this.onChange } |
|
139 type="textarea" |
|
140 name="title" |
|
141 defaultValue={ this.props.currentSession.title || 'Espace titre' } |
|
142 placeholder="Espace titre" |
|
143 ref={title => this.title = title} |
|
144 > |
|
145 </textarea> |
|
146 </div> |
|
147 ); |
|
148 } |
|
149 } |
|
150 |
|
151 descriptionEditMode = () => { |
|
152 |
|
153 if (this.state.descriptionEditMode === false) { |
|
154 return ( |
|
155 <div |
|
156 onClick={this.toggleOnDescriptionEditMode} |
|
157 className="session-page-description border-0 bg-success text-muted ml-3" |
|
158 > |
|
159 { this.props.currentSession.description || 'Espace description' } |
|
160 </div> |
|
161 ); |
|
162 } |
|
163 |
|
164 if (this.state.descriptionEditMode === true) { |
|
165 return ( |
|
166 <div className="form-group mt-2 pb-2"> |
|
167 <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3" |
|
168 onKeyDown={ this.saveEdit } |
|
169 onChange={ this.onChange } |
|
170 type="textarea" |
|
171 name="description" |
|
172 defaultValue={ this.props.currentSession.description || 'Espace description' } |
|
173 placeholder="Espace description" |
|
174 ref={desc => this.desc = desc} |
|
175 > |
|
176 </textarea> |
|
177 </div> |
|
178 ); |
|
179 } |
|
180 } |
47 |
181 |
48 render() { |
182 render() { |
49 |
183 |
50 if (!this.props.currentSession) { |
184 if (!this.props.currentSession) { |
51 return ( |
185 return ( |
52 <form></form> |
186 <form></form> |
53 ) |
187 ) |
54 } |
188 } |
55 |
189 |
56 return ( |
190 return ( |
57 <div className="panel-default"> |
191 <div className="session-page-panel panel-default sticky-top"> |
58 <div className="card-body"> |
192 <div className="session-page-card card-body bg-secondary pr-5"> |
59 <form onSubmit={ e => { e.preventDefault() } }> |
193 <form onSubmit={ e => { e.preventDefault() } }> |
60 <div className="form-group"> |
194 {this.titleEditMode()} |
61 <label className="col-form-label text-primary">Titre</label> |
195 {this.descriptionEditMode()} |
62 <input className="form-control" |
196 {/* <div className="form-group"> |
63 name="title" |
|
64 defaultValue={ this.props.currentSession.title } |
|
65 onChange={ this.onChange } |
|
66 type="text" |
|
67 placeholder="Entrez un titre" |
|
68 /> |
|
69 </div> |
|
70 <div className="form-group"> |
|
71 <label className="col-form-label text-primary">Description</label> |
|
72 <input className="form-control" |
|
73 type="textarea" |
|
74 name="description" |
|
75 defaultValue={ this.props.currentSession.description } |
|
76 onChange={ this.onChange } |
|
77 placeholder="Entrez une description" |
|
78 /> |
|
79 </div> |
|
80 <div className="form-group"> |
|
81 <label className="col-form-label">Group</label> |
197 <label className="col-form-label">Group</label> |
82 <p>{this.props.currentSession.group}</p> |
198 <p>{this.props.currentSession.group}</p> |
83 </div> |
199 </div> */} |
84 <div className="form-group"> |
200 {/* <div className="form-group"> |
85 <label className="col-form-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label> |
201 <label className="col-form-label" onClick={this.toggleProtocol}>Protocol {this.state.protocolOpen?<span className="material-icons protocol-toggle"></span>:<span className="material-icons protocol-toggle"></span>}</label> |
86 <div className={ `collapse ${this.state.protocolOpen?'in':''}`} > |
202 <div className={ "collapse" + (this.state.protocolOpen?'in':'')} > |
87 <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> |
203 <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> |
88 </div> |
204 </div> |
89 </div> |
205 </div> */} |
90 </form> |
206 </form> |
91 </div> |
207 </div> |
92 </div> |
208 </div> |
93 ); |
209 ); |
94 } |
210 } |