From 8ce313f5c78746eaab0b6aee52435201bf1483a5 Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Mon, 31 Aug 2015 23:02:44 -0500 Subject: [PATCH] VRFS-3359 : Teacher pricing Display or hide fields depending on checkboxes. --- .../TeacherSetupNav.js.jsx.coffee | 2 +- .../TeacherSetupPricing.js.jsx.coffee | 105 +++++++++++++++--- .../stylesheets/client/teachers.css.scss | 54 ++++++--- .../clients/teachers/setup/_pricing.html.slim | 2 +- 4 files changed, 134 insertions(+), 29 deletions(-) diff --git a/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee index 5ec195cb7..83f5b39a5 100644 --- a/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee @@ -16,7 +16,7 @@ SessionActions = @SessionActions render: () -> console.log("SetupNav: this.props", this.state, this.ref, this.props.handleNav) - `
+ `
BACK diff --git a/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee index 0714e0396..2069006b4 100644 --- a/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee +++ b/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee @@ -10,14 +10,35 @@ rest = window.JK.Rest() Reflux.listenTo(TeacherStore, "onTeacherStateChanged") ] + componentDidUnmount: () -> + @root.off("change", ".checkbox-enabler") + + componentDidMount: () -> + @root = jQuery(this.getDOMNode()) + @root.off("change", ".checkbox-enabler").on("change", ".checkbox-enabler", @enableCheckBoxTargets) + @enableCheckBoxTargets() + getInitialState: () -> {} + enableCheckBoxTargets: (e) -> + # Do unchecked boxes last since any unchecked target has priority: + checkBoxes = $("input[type='checkbox'].checkbox-enabler:checked", @root) + checkBoxes = $.merge(checkBoxes, $("input[type='checkbox'].checkbox-enabler:not(:checked)", @root)) + checkBoxes.each -> + targetClass = $(this).data("enable-target") + + if ($(this).is(":checked")) + logger.debug("Enabling", targetClass, $(this).is(":checked"), $(".#{targetClass}")) + $(".#{targetClass}").removeClass("hidden") + else + logger.debug("Disabling", targetClass, $(this).is(":checked"), $(".#{targetClass}")) + $(".#{targetClass}").addClass("hidden") + screenName: () -> "pricing" onTeacherStateChanged: (changes) -> - $root = jQuery(this.getDOMNode()) logger.debug("onTeacherPricingStateChanged", changes, changes.errors?, changes.errors) unless this.handleErrors(changes) teacher = changes.teacher @@ -31,12 +52,11 @@ rest = window.JK.Rest() }) captureFormState: (changes) -> - $root = jQuery(this.getDOMNode()) this.setState({ - biography: $root.find(".teacher-biography").val(), - introductory_video: $root.find(".teacher-introductory-video").val(), - years_teaching: $root.find(".years-teaching-experience").val(), - years_playing: $root.find(".years-playing-experience").val() + biography: @root.find(".teacher-biography").val(), + introductory_video: @root.find(".teacher-introductory-video").val(), + years_teaching: @root.find(".years-teaching-experience").val(), + years_playing: @root.find(".years-playing-experience").val() }); logger.debug("capturedFormState", this.state, changes) @@ -61,18 +81,77 @@ rest = window.JK.Rest() render: () -> logger.debug("RENDERING TeacherSetupPricing", this.props, this.state) - instrumentsTaughtCheckboxes = [] + priceRows = [] + for minutes in [30, 45, 60, 90, 120] + logger.debug("RENDERING THIS", minutes) + priceRows.push ` +
+
+
+ + +
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+
` + #instrumentsTaughtCheckboxes.push(``) `
-
-
- -
-
+
+ + +
+ +
+ +
+ + +
+
- + +
+ +
+
+ +
+
+ +
+
+
 
+
+ +
+
+ +
+
+
+
+ + {priceRows} + +
+
` diff --git a/web/app/assets/stylesheets/client/teachers.css.scss b/web/app/assets/stylesheets/client/teachers.css.scss index d57fcc9af..415d7bfbf 100644 --- a/web/app/assets/stylesheets/client/teachers.css.scss +++ b/web/app/assets/stylesheets/client/teachers.css.scss @@ -22,6 +22,16 @@ } } + label.margined { + margin-top: 1em; + margin-bottom: 0.25em; + } + + .inline { + display: inline; + //width: auto !important; + } + .teacher-setup-form { padding: 1em; .error-text { @@ -41,6 +51,10 @@ @extend .w25; } + .teacher-half-column { + @extend .w50; + } + .teacher-third-column { @include border_box_sizing; width: 33%; @@ -67,8 +81,9 @@ } + .teacher-field { - padding: 1em; + padding: 0.25em; @include border_box_sizing; input, select, textarea { @include border_box_sizing; @@ -79,19 +94,6 @@ overflow: hidden; } - em { - font-style: italic; - } - - label { - margin-bottom: 4px; - } - - textarea { - height: auto; - overflow:hidden; - } - input[type="number"] { border-radius: 4px; @@ -100,6 +102,30 @@ height: 24px; //padding: 5px; } + + input[type="checkbox"] { + display: inline; + width: auto; + } + + em { + font-style: italic; + } + + label { + margin-bottom: 4px; + } + + label.checkbox-label { + display: inline; + } + + textarea { + height: auto; + overflow:hidden; + } + + } diff --git a/web/app/views/clients/teachers/setup/_pricing.html.slim b/web/app/views/clients/teachers/setup/_pricing.html.slim index e67b887dc..b32801a19 100644 --- a/web/app/views/clients/teachers/setup/_pricing.html.slim +++ b/web/app/views/clients/teachers/setup/_pricing.html.slim @@ -1,4 +1,4 @@ -#teacher-setup-pricing.screen.secondary layout="screen" layout-id="teachers/setup/pricing" +#teacher-setup-pricing.teacher-setup.screen.secondary layout="screen" layout-id="teachers/setup/pricing" .content-head .content-icon = image_tag "content/icon_bands.png", :size => "19x19"