VRFS-3359 : New react components for profile setup. Incremental
This commit is contained in:
Steven Miers
parent
2558c03f3d
commit
6c25907a58
|
|
@ -0,0 +1,47 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@EditableList = React.createClass({
|
||||
objects: []
|
||||
|
||||
listObjects: ->
|
||||
objs=[]
|
||||
@root = jQuery(this.getDOMNode())
|
||||
$(".listItem", @root).each ->
|
||||
objs.push $(this).data("object-id")
|
||||
objs
|
||||
|
||||
deleteItem: (e) ->
|
||||
e.preventDefault()
|
||||
keys = (k for k, v of e.target when typeof v is 'function')
|
||||
|
||||
logger.debug("Delete item", e.target, keys)
|
||||
i = e.target.getAttribute("data-item-index")
|
||||
this.props.listItems.splice(i,1)
|
||||
this.props.onItemChanged(this.props.objectName, this.props.listItems)
|
||||
|
||||
render: () ->
|
||||
object_options = []
|
||||
|
||||
logger.debug("Rendering EditableList", this.props, this.props.listItems)
|
||||
|
||||
if this.props.listItems? && this.props.listItems.length > 0
|
||||
for object,i in this.props.listItems
|
||||
nm = "item_#{i}"
|
||||
displayValue = this.props.formatListItem(object)
|
||||
object_options.push `<div className='listItem'>
|
||||
<div className='display-value left'>{displayValue}</div>
|
||||
<div className='actions'>
|
||||
<a className='deleteListItem right' data-item-index={i} onClick={this.deleteItem} >X</a>
|
||||
</div></div>`
|
||||
else
|
||||
object_options.push `<div className='display-value'><em>None</em></div>`
|
||||
|
||||
`<div className="EditableList react-component">
|
||||
<div className="editable-scroller left">
|
||||
{object_options}
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@GenreCheckBoxList = React.createClass({
|
||||
genres: []
|
||||
componentDidUnmount: () ->
|
||||
@genres = []
|
||||
|
||||
componentDidMount: () ->
|
||||
rest.getGenres().done (genres) =>
|
||||
@genres = genres
|
||||
|
||||
render: () ->
|
||||
`<div className="GenreCheckBoxList react-component">
|
||||
<CheckBoxList objectName='genres' onItemChanged={this.props.onItemChanged} sourceObjects={this.genres} selectedObjects={this.props.selectedGenres}/>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@InstrumentCheckBoxList = React.createClass({
|
||||
instruments: []
|
||||
componentDidUnmount: () ->
|
||||
@instruments = []
|
||||
|
||||
componentDidMount: () ->
|
||||
rest.getInstruments().done (instruments) =>
|
||||
@instruments = instruments
|
||||
|
||||
render: () ->
|
||||
`<div className="InstrumentCheckBoxList react-component">
|
||||
<CheckBoxList objectName='instruments' onItemChanged={this.props.onItemChanged} sourceObjects={this.instruments} selectedObjects={this.props.selectedInstruments}/>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@LanguageCheckBoxList = React.createClass({
|
||||
languages: []
|
||||
componentDidUnmount: () ->
|
||||
@languages = []
|
||||
|
||||
componentDidMount: () ->
|
||||
rest.getLanguages().done (languages) =>
|
||||
@languages = languages
|
||||
|
||||
render: () ->
|
||||
`<div className="LanguageCheckBoxList react-component">
|
||||
<CheckBoxList objectName='languages' onItemChanged={this.props.onItemChanged} sourceObjects={this.languages} selectedObjects={this.props.selectedLanguages}/>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@SubjectCheckBoxList = React.createClass({
|
||||
subjects: []
|
||||
componentDidUnmount: () ->
|
||||
@subjects = []
|
||||
|
||||
componentDidMount: () ->
|
||||
rest.getSubjects().done (subjects) =>
|
||||
@subjects = subjects
|
||||
|
||||
render: () ->
|
||||
`<div className="SubjectCheckBoxList react-component">
|
||||
<CheckBoxList objectName='subjects' onItemChanged={this.props.onItemChanged} sourceObjects={this.subjects} selectedObjects={this.props.selectedSubjects}/>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@TeacherExperienceEditableList = React.createClass({
|
||||
instruments: []
|
||||
componentDidUnmount: () ->
|
||||
@instruments = []
|
||||
|
||||
componentDidMount: () ->
|
||||
$root = jQuery(this.getDOMNode())
|
||||
rest.getInstruments().done (instruments) =>
|
||||
@instruments = instruments
|
||||
|
||||
$root.off("submit", ".teacher-experience-teaching-form").on("submit", ".teacher-experience-teaching-form", @addExperience)
|
||||
|
||||
formatListItem: (obj) ->
|
||||
"#{obj.name}"
|
||||
|
||||
listItems: () ->
|
||||
logger.debug("listItems", this.props.listItems)
|
||||
this.props.listItems
|
||||
|
||||
addExperience: (e) ->
|
||||
e.preventDefault()
|
||||
logger.debug("addExperience", $(this))
|
||||
$form = e.target
|
||||
formValues = $(":input", $form).formToObject()
|
||||
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: () ->
|
||||
`<div className="TeacherExperienceEditableList react-component">
|
||||
<form className="teacher-experience-teaching-form">
|
||||
<table className="form-table">
|
||||
<tr className="teacher-field">
|
||||
<td><label htmlFor="title-input">Title:</label></td>
|
||||
<td><input name="title_input"> </input></td>
|
||||
</tr>
|
||||
<tr className="teacher-field">
|
||||
<td><label htmlFor="organization-input">School/Org:</label></td>
|
||||
<td><input name="organization_input"> </input></td>
|
||||
</tr>
|
||||
<tr className="teacher-field">
|
||||
<td><label htmlFor="start-year">Start & End:</label></td>
|
||||
<td>
|
||||
<div className="inline-fields">
|
||||
<YearSelect name="start_year"> </YearSelect>
|
||||
<label htmlFor="end-year">to</label>
|
||||
<YearSelect name="end_year"> </YearSelect>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button className="button-grey right" type="submit">Add</button>
|
||||
</form>
|
||||
<EditableList objectName='experience' onItemChanged={this.props.onItemChanged} listItems={this.props.listItems} formatListItem={this.formatListItem}/>
|
||||
</div>`
|
||||
})
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
context = window
|
||||
rest = window.JK.Rest()
|
||||
logger = context.JK.logger
|
||||
|
||||
@YearSelect = React.createClass({
|
||||
instruments: []
|
||||
componentDidUnmount: () ->
|
||||
@instruments = []
|
||||
|
||||
componentDidMount: () ->
|
||||
rest.getInstruments().done (instruments) =>
|
||||
@instruments = instruments
|
||||
|
||||
render: () ->
|
||||
options = []
|
||||
|
||||
now = new Date().getFullYear()
|
||||
for yr in [1901..now]
|
||||
options.push `<option value={yr}>{yr}</option>`
|
||||
|
||||
`<select className="YearSelect react-component">
|
||||
{options}
|
||||
</select>`
|
||||
})
|
||||
Loading…
Reference in New Issue