From 6c25907a58afa316e2f4fd1875d96d9847ede38d Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Thu, 27 Aug 2015 11:25:48 -0500
Subject: [PATCH] VRFS-3359 : New react components for profile setup. 
 Incremental

---
 .../EditableList.js.jsx.coffee                | 47 +++++++++++++
 .../GenreCheckBoxList.js.jsx.coffee           | 18 +++++
 .../InstrumentCheckBoxList.js.jsx.coffee      | 18 +++++
 .../LanguageCheckBoxList.js.jsx.coffee        | 18 +++++
 .../SubjectCheckBoxList.js.jsx.coffee         | 18 +++++
 ...eacherExperienceEditableList.js.jsx.coffee | 67 +++++++++++++++++++
 .../react-components/YearSelect.js.jsx.coffee | 24 +++++++
 7 files changed, 210 insertions(+)
 create mode 100644 web/app/assets/javascripts/react-components/EditableList.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/GenreCheckBoxList.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/InstrumentCheckBoxList.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/LanguageCheckBoxList.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/SubjectCheckBoxList.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/TeacherExperienceEditableList.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/YearSelect.js.jsx.coffee

diff --git a/web/app/assets/javascripts/react-components/EditableList.js.jsx.coffee b/web/app/assets/javascripts/react-components/EditableList.js.jsx.coffee
new file mode 100644
index 000000000..e3ff051db
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/EditableList.js.jsx.coffee
@@ -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>`
+
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/GenreCheckBoxList.js.jsx.coffee b/web/app/assets/javascripts/react-components/GenreCheckBoxList.js.jsx.coffee
new file mode 100644
index 000000000..a080f7b21
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/GenreCheckBoxList.js.jsx.coffee
@@ -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>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/InstrumentCheckBoxList.js.jsx.coffee b/web/app/assets/javascripts/react-components/InstrumentCheckBoxList.js.jsx.coffee
new file mode 100644
index 000000000..2be186366
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/InstrumentCheckBoxList.js.jsx.coffee
@@ -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>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/LanguageCheckBoxList.js.jsx.coffee b/web/app/assets/javascripts/react-components/LanguageCheckBoxList.js.jsx.coffee
new file mode 100644
index 000000000..71592d822
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/LanguageCheckBoxList.js.jsx.coffee
@@ -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>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/SubjectCheckBoxList.js.jsx.coffee b/web/app/assets/javascripts/react-components/SubjectCheckBoxList.js.jsx.coffee
new file mode 100644
index 000000000..e3cf1fbe9
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/SubjectCheckBoxList.js.jsx.coffee
@@ -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>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/TeacherExperienceEditableList.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherExperienceEditableList.js.jsx.coffee
new file mode 100644
index 000000000..5ed8aca0e
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/TeacherExperienceEditableList.js.jsx.coffee
@@ -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>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/YearSelect.js.jsx.coffee b/web/app/assets/javascripts/react-components/YearSelect.js.jsx.coffee
new file mode 100644
index 000000000..10993eafd
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/YearSelect.js.jsx.coffee
@@ -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>`
+})
\ No newline at end of file