| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130 | 2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
36×
36×
36×
36×
36×
36×
36×
36×
| var AddPeriodField, BS, CourseGroupingLabel, PeriodActions, PeriodStore, React, TutorInput, _, ref;
React = require('react');
BS = require('react-bootstrap');
_ = require('underscore');
ref = require('../../flux/period'), PeriodActions = ref.PeriodActions, PeriodStore = ref.PeriodStore;
TutorInput = require('../tutor-input').TutorInput;
CourseGroupingLabel = require('../course-grouping-label');
AddPeriodField = React.createClass({
displayName: 'AddPeriodField',
propTypes: {
courseId: React.PropTypes.string,
label: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
"default": React.PropTypes.string,
onChange: React.PropTypes.func.isRequired,
autofocus: React.PropTypes.bool,
validate: React.PropTypes.func.isRequired
},
componentDidMount: function() {
if (this.props.autofocus) {
return this.refs.input.focus();
}
},
onChange: function(value) {
return this.props.onChange(value);
},
render: function() {
return React.createElement(TutorInput, {
"ref": "input",
"label": this.props.label,
"default": this.props["default"],
"required": true,
"onChange": this.onChange,
"validate": this.props.validate
});
}
});
module.exports = React.createClass({
displayName: 'AddPeriodLink',
propTypes: {
courseId: React.PropTypes.string.isRequired,
periods: React.PropTypes.array.isRequired
},
getInitialState: function() {
return {
period_name: ''
};
},
validate: function(name) {
var error;
error = PeriodStore.validatePeriodName(name, this.props.periods);
this.setState({
invalid: error != null
});
return error;
},
performUpdate: function() {
if (!this.state.invalid) {
PeriodActions.create(this.props.courseId, {
period: {
name: this.state.period_name
}
});
return this.refs.overlay.hide();
}
},
renderForm: function() {
var disabled, formClasses, label, ref1, title;
formClasses = ['modal-body', 'teacher-edit-period-form'];
Iif ((ref1 = this.state) != null ? ref1.invalid : void 0) {
formClasses.push('is-invalid-form');
disabled = true;
}
title = React.createElement("h4", null, "Add ", React.createElement(CourseGroupingLabel, {
"courseId": this.props.courseId
}));
label = React.createElement("span", null, React.createElement(CourseGroupingLabel, {
"courseId": this.props.courseId
}), " Name");
return React.createElement(BS.Modal, React.__spread({}, this.props, {
"title": title,
"className": 'teacher-edit-period-modal'
}), React.createElement("div", {
"className": formClasses.join(' ')
}, React.createElement(AddPeriodField, {
"label": label,
"name": 'period-name',
"onChange": ((function(_this) {
return function(val) {
return _this.setState({
period_name: val
});
};
})(this)),
"validate": this.validate,
"autofocus": true
})), React.createElement("div", {
"className": 'modal-footer'
}, React.createElement(BS.Button, {
"className": '-edit-period-confirm',
"onClick": this.performUpdate,
"disabled": disabled
}, "Add")));
},
render: function() {
return React.createElement(BS.OverlayTrigger, {
"ref": 'overlay',
"rootClose": true,
"trigger": 'click',
"overlay": this.renderForm()
}, React.createElement(BS.Button, {
"bsStyle": 'link',
"className": 'edit-period'
}, React.createElement("i", {
"className": 'fa fa-plus'
}), "Add ", React.createElement(CourseGroupingLabel, {
"courseId": this.props.courseId
})));
}
});
|