From 949bf6ec2583764f367ab14df03c3f8c4145755f Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Thu, 20 Aug 2015 14:15:51 -0500 Subject: [PATCH] VRFS-3359 : Teacher Profile Instrument Selector List * Instrument Selector List Component * Necessary backend api tweaks so only necessary instrument information is returned (array of ids only) * Refactor styles and add common checkbox scroller styles. --- .../InstrumentSelectorList.js.jsx.coffee | 39 ++++++++++++++++--- .../TeacherSetupBasics.js.jsx.coffee | 37 ++++++++++-------- .../mixins/TeacherSetupMixin.js.coffee | 19 +++------ web/app/assets/stylesheets/client/client.css | 1 - .../Profile.css.scss} | 24 ++++++------ web/app/views/api_teachers/detail.rabl | 16 ++++---- 6 files changed, 81 insertions(+), 55 deletions(-) rename web/app/assets/stylesheets/client/{react_components.css.scss => react-components/Profile.css.scss} (61%) diff --git a/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee b/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee index 31b976552..d05f7bee9 100644 --- a/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/InstrumentSelectorList.js.jsx.coffee @@ -1,20 +1,49 @@ context = window +rest = window.JK.Rest() logger = context.JK.logger @InstrumentSelectorList = React.createClass({ + instruments: [] + componentDidUnmount: () -> + @instruments = [] + @root.off("change", ".checkItem.checkItemInstrument input[type=checkbox]") componentDidMount: () -> - logger.debug("InstrumentSelectorList INIT", this.state, this.props, this.ref) + @root = jQuery(this.getDOMNode()) + @root.off("change", ".checkItem.checkItemInstrument input[type=checkbox]").on("change", ".checkItem.checkItemInstrument input[type=checkbox]", @onItemChanged) - onItemChecked: (e) -> + rest.getInstruments().done (instruments) => + @instruments = instruments + + onItemChanged: (e) -> e.preventDefault() - logger.debug("onItemChecked!!!!", this.state, this.props) + this.props.onInstrumentsChanged("instruments", @selectedItems()) + + + selectedItems: -> + selected=[] + @root = jQuery(this.getDOMNode()) + $(".checkItem.checkItemInstrument input[type=checkbox]:checked", @root).each -> + selected.push $(this).data("instrument-id") + selected render: () -> - logger.debug("RENDER InstrumentSelectorList: this.props", this.state, this.ref, this.props.handleNav) + instrument_options = [] + + for instrument in @instruments + nm = "check_#{instrument.id}" + + checkedStr = if @isChecked(instrument.id) then "checked" else "" + instrument_options.push `
` + `
- + {instrument_options}
` + + isChecked: (id) -> + this.props.selectedItems? && id in this.props.selectedItems + #!!(_.find this.props.selectedItems, (item) -> item.id is id) + }) \ 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 892b3417a..18974792a 100644 --- a/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee @@ -17,26 +17,31 @@ rest = window.JK.Rest() "basics" onTeacherStateChanged: (changes) -> - $root = jQuery(this.getDOMNode()) - logger.debug("onTeacherBasicsStateChanged", changes, changes.errors?, changes.errors) + $root = jQuery(this.getDOMNode()) unless this.handleErrors(changes) - teacher = changes.teacher - logger.debug("@teacher", teacher) + teacher = changes.teacher this.setState({ - # validate_basics: true + #validate_basics: true, + instruments: teacher.instruments }) captureFormState: (changes) -> $root = jQuery(this.getDOMNode()) this.setState({ + }); + + handleListChange: (listName, selectedItems)-> + "#{listName}": selectedItems + }) + this.setState({ + "#{listName}": selectedItems }); - logger.debug("capturedFormState", this.state, changes) + navDestination: (instructions) -> navTo=null - if instructions? - logger.debug("handling instructions", instructions) + if instructions? if instructions.direction=="cancel" navTo = @teacherSetupSource() else if instructions.direction=="back" @@ -46,13 +51,11 @@ rest = window.JK.Rest() navTo - handleNav: (e) -> - logger.debug("handleNav #{this.screenName()}: ", this.state, this, e) + handleNav: (e) -> navTo = this.navDestination(e) teacherActions.change.trigger(this.state, {navTo: navTo}) - render: () -> - logger.debug("RENDERING TeacherSetupBasics", this.props, this.state) + render: () -> instrumentsTaughtCheckboxes = [] #instrumentsTaughtCheckboxes.push(``) @@ -65,27 +68,27 @@ rest = window.JK.Rest() # and will otherwise self-render the available `
-
+
Instruments Taught - +
-
+
Music Subjects Taught
-
+
Genres Taught
-
+
Languages Spoken
diff --git a/web/app/assets/javascripts/react-components/mixins/TeacherSetupMixin.js.coffee b/web/app/assets/javascripts/react-components/mixins/TeacherSetupMixin.js.coffee index 8acae1054..351207adc 100644 --- a/web/app/assets/javascripts/react-components/mixins/TeacherSetupMixin.js.coffee +++ b/web/app/assets/javascripts/react-components/mixins/TeacherSetupMixin.js.coffee @@ -3,17 +3,14 @@ teacherActions = window.JK.Actions.Teacher @TeacherSetupMixin = { onAppInit: (app) -> - @app=app - logger.debug("TeacherSetupIntroduction onAppInit", @app, document.referrer) + @app=app screenBindings = { 'beforeShow': @beforeShow } - - logger.debug("Binding to: teachers/setup/#{@screenName()}") + @app.bindScreen("teachers/setup/#{@screenName()}", screenBindings) - beforeShow: (data) -> - logger.debug("TeacherSetupIntroduction beforeShow", data, data.d, window.location.search, window.location, document, document.referrer) + beforeShow: (data) -> if data? && data.d? @teacherId = data.d teacherActions.load.trigger({teacher_id: @teacherId}) @@ -26,17 +23,13 @@ teacherActions = window.JK.Actions.Teacher # a default location: @postmark = null # params = this.getParams() - # @postmark = params.p - # logger.debug("Postmark: ", @postmark) - + # @postmark = params.p handleErrors: (changes) -> - $root = jQuery(this.getDOMNode()) - + $root = jQuery(this.getDOMNode()) $(".error-text", $root).remove() if changes.errors? - for k,v of changes.errors - logger.debug("error", k, v) + for k,v of changes.errors teacherField = $root.find(".teacher-field[name='#{k}']") teacherField.append("
#{v.join()}
") $("input", teacherField).addClass("input-error") diff --git a/web/app/assets/stylesheets/client/client.css b/web/app/assets/stylesheets/client/client.css index 5d44724fe..775afcc8f 100644 --- a/web/app/assets/stylesheets/client/client.css +++ b/web/app/assets/stylesheets/client/client.css @@ -15,7 +15,6 @@ *= 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/Profile.css.scss similarity index 61% rename from web/app/assets/stylesheets/client/react_components.css.scss rename to web/app/assets/stylesheets/client/react-components/Profile.css.scss index 047b1994f..03be6b408 100644 --- a/web/app/assets/stylesheets/client/react_components.css.scss +++ b/web/app/assets/stylesheets/client/react-components/Profile.css.scss @@ -13,18 +13,20 @@ margin-bottom:10px; margin-top:10px; background-color: #c5c5c5; - label { + .checkItem { clear: both; - color: black; - display: inline; - float: left; - } - input { - width: auto; - clear: both; - text-align: left; - float: left; - display: inline; + label { + color: black; + display: inline; + float: left; + font-size: 1em; + } + input { + width: auto; + text-align: left; + float: left; + display: inline; + } } } } diff --git a/web/app/views/api_teachers/detail.rabl b/web/app/views/api_teachers/detail.rabl index 3bd2e82a9..0cb9af753 100644 --- a/web/app/views/api_teachers/detail.rabl +++ b/web/app/views/api_teachers/detail.rabl @@ -32,19 +32,19 @@ attributes :id, :errors -child :instruments => :instruments do - attributes :id, :description +node :instruments do + @teacher.instruments.collect{|o|o.id} end -child :subjects => :subjects do - attributes :id, :description +node :subjects do + @teacher.subjects.collect{|o|o.id} end -child :genres => :genres do - attributes :id, :description +node :genres do + @teacher.genres.collect{|o|o.id} end -child :languages => :languages do - attributes :id, :description +node :languages do + @teacher.languages.collect{|o|o.id} end