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
This commit is contained in:
Steven Miers 2015-10-05 15:37:54 -05:00
parent ae854d858f
commit 8f20da7567
1 changed files with 47 additions and 7 deletions

View File

@ -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>