81 lines
2.9 KiB
CoffeeScript
81 lines
2.9 KiB
CoffeeScript
context = window
|
|
rest = window.JK.Rest()
|
|
logger = context.JK.logger
|
|
|
|
@TeacherExperienceEditableList = React.createClass({
|
|
componentDidUnmount: () ->
|
|
$root.off("submit", ".teacher-experience-teaching-form")
|
|
|
|
componentDidMount: () ->
|
|
$root = jQuery(this.getDOMNode())
|
|
$root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)
|
|
|
|
formatListItem: (obj) ->
|
|
t = "#{obj.name}/#{obj.organization} (#{obj.start_year}"
|
|
t += "-#{obj.end_year}" if this.props.showEndDate
|
|
t += ")"
|
|
|
|
getInitialProps: () ->
|
|
{listItems: []}
|
|
|
|
sortListItems: () ->
|
|
this.props.listItems ||= []
|
|
this.props.listItems = _.sortBy(this.props.listItems, 'start_year')
|
|
|
|
addExperience: (e) ->
|
|
e.preventDefault()
|
|
logger.debug("addExperience", this.props.listItems, this.props)
|
|
$form = e.target
|
|
this.props.listItems.push {
|
|
name: $("[name='title_input']", $form).val()
|
|
organization: $("[name='organization_input']", $form).val()
|
|
start_year: $("[name='start_year']", $form).val()
|
|
end_year: $("[name='end_year']", $form).val()
|
|
}
|
|
logger.debug("addExperience", this.props.listItems)
|
|
this.props.onItemChanged(this.props.experienceType, this.props.listItems)
|
|
$form.reset()
|
|
false
|
|
|
|
render: () ->
|
|
endDate = []
|
|
if this.props.showEndDate
|
|
endDate.push `<span><label htmlFor="end-year">to</label>
|
|
<YearSelect name="end_year"></YearSelect></span>`
|
|
dtLabel = "Start & End"
|
|
else
|
|
dtLabel = "Date"
|
|
|
|
titleLabel = this.props.titleLabel
|
|
orgLabel = this.props.orgLabel
|
|
|
|
titleLabel ||= "Title"
|
|
orgLabel ||= "School/Org"
|
|
|
|
listItems= _.sortBy(this.props.listItems, 'start_year')
|
|
`<div className="TeacherExperienceEditableList react-component">
|
|
<form className="teacher-experience-teaching-form">
|
|
<table className="form-table">
|
|
<tr className="teacher-field">
|
|
<td><label htmlFor="title-input">{titleLabel}:</label></td>
|
|
<td><input name="title_input" required="required"> </input></td>
|
|
</tr>
|
|
<tr className="teacher-field">
|
|
<td><label htmlFor="organization-input">{orgLabel}:</label></td>
|
|
<td><input name="organization_input" required="required"> </input></td>
|
|
</tr>
|
|
<tr className="teacher-field">
|
|
<td><label htmlFor="start-year">{dtLabel}:</label></td>
|
|
<td>
|
|
<div className="inline-fields">
|
|
<YearSelect name="start_year"> </YearSelect>
|
|
{endDate}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<button className="button-grey right" type="submit">Add</button>
|
|
</form>
|
|
<EditableList objectName='experience' onItemChanged={this.props.onItemChanged} listItems={listItems} formatListItem={this.formatListItem}/>
|
|
</div>`
|
|
}) |