15 titleEditMode: false, |
15 titleEditMode: false, |
16 descriptionEditMode: false, |
16 descriptionEditMode: false, |
17 enterKeyValue: false, |
17 enterKeyValue: false, |
18 } |
18 } |
19 |
19 |
20 onChange = (e) => { |
20 onChange = (e) => { |
21 const { name, value } = e.target; |
21 const { name, value } = e.target; |
22 const changes = { [name]: value } |
22 const changes = { [name]: value } |
23 this.onChangeThrottle(changes); |
23 this.onChangeThrottle(changes); |
24 } |
24 } |
25 |
25 |
26 onChangeThrottle = _.debounce((changes) => { |
26 onChangeThrottle = _.debounce((changes) => { |
27 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
27 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
28 }, 750) |
28 }, 750) |
29 |
29 |
30 onGroupChange = (e) => { |
30 onGroupChange = (e) => { |
31 const groupName = e.target.value; |
31 const groupName = e.target.value; |
32 |
32 |
33 const group = this.props.groups.find((g) => g.get('name') === groupName); |
33 const group = this.props.groups.find((g) => g.get('name') === groupName); |
34 |
34 |
35 this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' }); |
35 this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' }); |
36 } |
36 } |
37 |
37 |
38 componentDidMount() { |
38 componentDidMount() { |
39 document.addEventListener('mousedown', this.handleClickOutside); |
39 document.addEventListener('mousedown', this.handleClickOutside); |
40 } |
40 } |
41 |
41 |
42 componentWillUnmount() { |
42 componentWillUnmount() { |
43 document.removeEventListener('mousedown', this.handleClickOutside); |
43 document.removeEventListener('mousedown', this.handleClickOutside); |
44 } |
44 } |
45 |
45 |
46 componentWillUpdate = (nextProps, nextState) => { |
46 componentWillUpdate = (nextProps, nextState) => { |
47 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
47 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
48 this.setState({ createGroup: false }) |
48 this.setState({ createGroup: false }) |
49 } |
49 } |
54 this.setState({ |
54 this.setState({ |
55 protocolOpen: !this.state.protocolOpen |
55 protocolOpen: !this.state.protocolOpen |
56 }); |
56 }); |
57 } |
57 } |
58 |
58 |
59 toggleOnTitleEditMode = (e) => { |
59 toggleOnTitleEditMode = () => { |
60 e.preventDefault(); |
|
61 this.setState({ |
60 this.setState({ |
62 titleEditMode: true, |
61 titleEditMode: true, |
63 }); |
62 }); |
64 } |
63 } |
65 |
64 |
66 toggleOnDescriptionEditMode = (e) => { |
65 toggleOnDescriptionEditMode = () => { |
67 e.preventDefault(); |
|
68 this.setState({ |
66 this.setState({ |
69 descriptionEditMode: true, |
67 descriptionEditMode: true, |
70 }); |
68 }); |
71 } |
69 } |
72 |
70 |
73 toggleOffTitleEditMode = (e) => { |
71 toggleOffTitleEditMode = () => { |
74 e.preventDefault(); |
|
75 this.setState({ |
72 this.setState({ |
76 titleEditMode: false, |
73 titleEditMode: false, |
77 }); |
74 }); |
78 } |
75 } |
79 |
76 |
80 toggleOffDescriptionEditMode = (e) => { |
77 toggleOffDescriptionEditMode = () => { |
81 e.preventDefault(); |
|
82 this.setState({ |
78 this.setState({ |
83 descriptionEditMode: false, |
79 descriptionEditMode: false, |
84 }); |
80 }); |
85 } |
81 } |
86 |
82 |
87 handleClickOutside = (e) => { |
83 handleClickOutside = (e) => { |
88 if (this.title && !this.title.contains(e.target)) { |
84 if (this.title && !this.title.contains(e.target)) { |
89 this.toggleOffTitleEditMode(e) |
85 this.toggleOffTitleEditMode() |
90 } |
86 } |
91 |
87 |
92 if (this.desc && !this.desc.contains(e.target)) { |
88 if (this.desc && !this.desc.contains(e.target)) { |
93 this.toggleOffDescriptionEditMode(e) |
89 this.toggleOffDescriptionEditMode() |
94 } |
90 } |
95 } |
91 } |
96 |
92 |
97 saveEdit = (e) => { |
93 saveEdit = (e) => { |
98 |
94 |
99 e.preventDefault(); |
|
100 |
95 |
101 if (e.key === 'Enter') { |
96 if (e.key === 'Enter') { |
102 this.setState({enterKeyValue: true}) |
97 this.setState({enterKeyValue: true}) |
103 } |
98 } |
104 |
99 |
105 if (e.key !== 'Enter') { |
100 if (e.key !== 'Enter') { |
106 this.setState({enterKeyValue: false}) |
101 this.setState({enterKeyValue: false}) |
107 } |
102 } |
108 |
103 |
109 if (e.key === 'Enter' && this.state.enterKeyValue === true) { |
104 if (e.key === 'Enter' && this.state.enterKeyValue === true) { |
110 |
|
111 e.preventDefault(); |
|
112 this.setState({ |
105 this.setState({ |
113 enterKeyValue: false, |
106 enterKeyValue: false, |
114 titleEditMode: false, |
107 titleEditMode: false, |
115 descriptionEditMode: false, |
108 descriptionEditMode: false, |
116 }) |
109 }) |