From 8f20da75678cb4483a060fed9d22bf9c5b6af6f2 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Mon, 5 Oct 2015 15:37:54 -0500
Subject: [PATCH] VRFS-3359 : Currency field behavior

* Formats on blur only
* Render pulls currency value from local cache if field has focus
* Save to cache on initial focus, even if not changed
---
 .../TeacherSetupPricing.js.jsx.coffee         | 54 ++++++++++++++++---
 1 file changed, 47 insertions(+), 7 deletions(-)

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 e41318325..4d8524087 100644
--- a/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/TeacherSetupPricing.js.jsx.coffee
@@ -111,8 +111,12 @@ rest = window.JK.Rest()
     navTo = this.navDestination(e)
     teacherActions.change.trigger(this.state, {navTo: navTo})
 
+  handleFocus: (e) ->
+    @pricePerLessonCents=e.target.value
+
   handleTextChange: (e) ->
-    this.setState({"#{e.target.name}": e.target.value})
+    @pricePerLessonCents=e.target.value
+    this.forceUpdate()
 
   handleCheckChange: (e) ->
     this.setState({"#{e.target.name}": e.target.checked})
@@ -122,13 +126,27 @@ rest = window.JK.Rest()
     priceRows = []
     logger.debug("Current State is", this.state)
     for minutes in [30, 45, 60, 90, 120]
-      pricePerLessonCents = context.JK.ProfileUtils.normalizeMoneyForDisplay(this.state["price_per_lesson_"+minutes+"_cents"])
-      pricePerMonthCents = context.JK.ProfileUtils.normalizeMoneyForDisplay(this.state["price_per_month_"+minutes+"_cents"])
       pricePerLessonName = "price_per_lesson_#{minutes}_cents"
       pricePerMonthName = "price_per_month_#{minutes}_cents"
       priceKey = "lesson_duration_#{minutes}"
       inputName = "#{priceKey}_input"
       containerName = "#{priceKey}_container"
+
+      # If we are currently editing, don't format; used cache value:
+      if $("[name='#{pricePerLessonName}']", @root).is(":focus")
+        pricePerLessonCents = @pricePerLessonCents
+      else
+        ppl_fld_name="price_per_lesson_"+minutes+"_cents"
+        pricePerLessonCents = context.JK.ProfileUtils.normalizeMoneyForDisplay(this.state[ppl_fld_name])
+
+
+      # If we are currently editing, don't format; used cache value:
+      if $("[name='#{pricePerMonthName}']", @root).is(":focus")
+        pricePerMonthCents = @pricePerMonthCents
+      else
+        pricePerMonthCents = context.JK.ProfileUtils.normalizeMoneyForDisplay(this.state["price_per_month_"+minutes+"_cents"])
+
+
       priceRows.push `
         <div className="teacher-price-row" key={minutes}>
           <div className="teacher-half-column left pricing-options">
@@ -149,15 +167,37 @@ rest = window.JK.Rest()
           </div>
 
           <div className="teacher-half-column right pricing-amounts">
-            <div className={"teacher-field lesson-"+minutes+"-target"}>
+            <div className={"teacher-field month-"+minutes+"-target"}>
               <div className="teacher-third-column inline">
                 <label>{minutes} Minutes</label>
               </div>
-              <div className="teacher-third-column inline per-lesson">
-                <input key={minutes} name='{pricePerLessonName}' ref='{pricePerLessonName}' className="per-lesson-target" type="text" min="0" max="100000" value={pricePerLessonCents} onBlur={this.captureCurrency} onChange={this.handleTextChange}  />
+              <div className="teacher-third-column inline per-month">
+                <input key={minutes}
+                       name={pricePerMonthName}
+                       ref={pricePerMonthName}
+                       className="per-month-target"
+                       type="text"
+                       min="0"
+                       max="100000"
+                       value={pricePerMonthCents}
+                       onBlur={this.captureCurrency}
+                       onChange={this.handleTextChange}
+                       onFocus={this.handleFocus}>
+                </input>
               </div>
               <div className="teacher-third-column inline per-month">
-                <input key={minutes} name='{pricePerMonthName}' ref='{pricePerMonthName}' className="per-month-target" type="text" min="0" max="100000" value={pricePerMonthCents} onBlur={this.captureCurrency} onChange={this.handleTextChange} />
+                <input key={minutes}
+                       name={pricePerMonthName}
+                       ref={pricePerMonthName}
+                       className="per-month-target"
+                       type="text"
+                       min="0"
+                       max="100000"
+                       value={pricePerMonthCents}
+                       onBlur={this.captureCurrency}
+                       onChange={this.handleTextChange}
+                       onFocus={this.handleFocus}>
+                </input>
               </div>
             </div>
           </div>