From b2b9022f50737ef732f04a846f4a952aa9782147 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Sat, 15 Aug 2015 16:36:42 -0500
Subject: [PATCH] VRFS-3359 : Styling and markup for react components,
 incremental.

---
 .../InstrumentSelectorList.js.jsx.coffee      | 20 +++++++++++++
 .../TeacherSetupBasics.js.jsx.coffee          | 25 ++++++++--------
 .../TeacherSetupExperience.js.jsx.coffee      |  4 +--
 web/app/assets/stylesheets/client/client.css  |  1 +
 .../client/react_components.css.scss          | 30 +++++++++++++++++++
 .../stylesheets/client/teachers.css.scss      | 13 --------
 6 files changed, 66 insertions(+), 27 deletions(-)
 create mode 100644 web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee
 create mode 100644 web/app/assets/stylesheets/client/react_components.css.scss

diff --git a/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee b/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee
new file mode 100644
index 000000000..31b976552
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee
@@ -0,0 +1,20 @@
+context = window
+logger = context.JK.logger
+
+@InstrumentSelectorList = React.createClass({
+
+  componentDidMount: () ->
+    logger.debug("InstrumentSelectorList INIT", this.state, this.props, this.ref)
+
+  onItemChecked: (e) ->
+    e.preventDefault()
+    logger.debug("onItemChecked!!!!", this.state, this.props)    
+
+  render: () ->
+    logger.debug("RENDER InstrumentSelectorList: this.props", this.state, this.ref, this.props.handleNav)
+    `<div className="InstrumentSelectorList react-component">
+        <div className="checkbox-scroller left">
+          <input type="checkbox" name="example"></input><label htmlFor="example">Example</label>
+        </div>
+    </div>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee
index 2864c2a97..892b3417a 100644
--- a/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee
@@ -56,37 +56,38 @@ rest = window.JK.Rest()
     instrumentsTaughtCheckboxes = []
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
+    # Render the following:
+    # Instruments
+    # Subjects
+    # Genres
+    # Languages
+    # All lists will take a list of selected keys,
+    # and will otherwise self-render the available
     `<div className="TeacherSetupBasics TeacherSetupComponent">
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Instruments Taught</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
+            <InstrumentSelectorList value={this.state.instruments_taught}/>
+          
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Music Subjects Taught</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Genres Taught</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
         </div>
       </div>
       <div className="teacher-quarter-column left">
         <div className="teacher-field" name="instruments_taught">
           <strong>Languages Spoken</strong>
-          <div className="checkbox-scroller left">
-
-          </div>
+          
         </div>
       </div>
       <TeacherSetupNav handleNav={this.handleNav}></TeacherSetupNav>
diff --git a/web/app/assets/javascripts/react-components/TeacherSetupExperience.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupExperience.js.jsx.coffee
index 031cffa6e..7cfabd7e7 100644
--- a/web/app/assets/javascripts/react-components/TeacherSetupExperience.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/TeacherSetupExperience.js.jsx.coffee
@@ -64,8 +64,8 @@ rest = window.JK.Rest()
     #instrumentsTaughtCheckboxes.push(`<input />`)
 
     `<div className="TeacherSetupExperience TeacherSetupComponent">      
-      
-      <TeacherSetupNav handleNav={this.handleNav}></>
+
+      <TeacherSetupNav handleNav={this.handleNav}/>
     </div>`
 
 
diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css
index 775afcc8f..5d44724fe 100644
--- a/web/app/assets/stylesheets/client/client.css
+++ b/web/app/assets/stylesheets/client/client.css
@@ -15,6 +15,7 @@
  *= require jquery.bt
  *= require easydropdown
  *= require easydropdown_jk
+ *= require ./react_components
  *= require ./jamkazam
  *= require ./content
  *= require ./paginator
diff --git a/web/app/assets/stylesheets/client/react_components.css.scss b/web/app/assets/stylesheets/client/react_components.css.scss
new file mode 100644
index 000000000..047b1994f
--- /dev/null
+++ b/web/app/assets/stylesheets/client/react_components.css.scss
@@ -0,0 +1,30 @@
+@import "client/common.css.scss";
+@import "client/screen_common.css.scss";
+
+.react-component {
+  .checkbox-scroller {
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    min-height: 10em;
+    @include border_box_sizing;
+    text-align:left;
+    border-right: 1px solid #4c4c4c;
+    margin-bottom:10px;
+    margin-top:10px;
+    background-color: #c5c5c5;
+    label {
+      clear: both;
+      color: black;
+      display: inline;
+      float: left;      
+    }
+    input {
+      width: auto;
+      clear: both;
+      text-align: left;
+      float: left;
+      display: inline;
+    }
+  }
+}
diff --git a/web/app/assets/stylesheets/client/teachers.css.scss b/web/app/assets/stylesheets/client/teachers.css.scss
index 2523c0994..c5b471743 100644
--- a/web/app/assets/stylesheets/client/teachers.css.scss
+++ b/web/app/assets/stylesheets/client/teachers.css.scss
@@ -22,19 +22,6 @@
       @extend .w25;
     }
 
-    .checkbox-scroller {
-      overflow-x: hidden;
-      overflow-y: auto;
-      width: 100%;
-      min-height: 10em;
-      @include border_box_sizing;
-      text-align:left;
-      border-right: 1px solid #4c4c4c;
-      margin-bottom:10px;
-      margin-top:10px;
-      background-color: #c5c5c5;
-    }
-
     .teacher-field {
       padding: 1em;
       @include border_box_sizing;