pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use format mask to stringify dollar amount

Browse Source
This commit is contained in:
Patrick Smith 2018-08-13 08:39:34 -04:00
parent 3e6c4d7f13
commit 95267f6031
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/components/forms/details_of_use.js
View File

@ -1,3 +1,6 @@
import createNumberMask from 'text-mask-addons/dist/createNumberMask'
import { conformToMask } from 'vue-text-mask'
import textinput from '../text_input' import textinput from '../text_input'
import optionsinput from '../options_input' import optionsinput from '../options_input'
@ -39,6 +42,9 @@ export default {
const monthlySpend = this.estimated_monthly_spend || 0 const monthlySpend = this.estimated_monthly_spend || 0
return monthlySpend * 12 return monthlySpend * 12
}, },
annualSpendStr: function () {
return this.formatDollars(this.annualSpend)
},
jediMigrationOptionSelected: function () { jediMigrationOptionSelected: function () {
return this.jedi_migration !== '' return this.jedi_migration !== ''
}, },
@ -51,6 +57,10 @@ export default {
}, },
methods: { methods: {
formatDollars: function (intValue) {
const mask = createNumberMask({ prefix: '$', allowDecimal: true })
return conformToMask(intValue.toString(), mask).conformedValue
},
handleFieldChange: function (event) { handleFieldChange: function (event) {
const { value, name } = event const { value, name } = event
if (typeof this[name] !== undefined) { if (typeof this[name] !== undefined) {

2
templates/requests/screen-1.html
View File

@ -48,7 +48,7 @@
<h2>Financial Usage</h2> <h2>Financial Usage</h2>
{{ TextInput(f.estimated_monthly_spend, validation='dollars') }} {{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
<p>So this means you are spending approximately <b>$!{ annualSpend }</b> annually</p> <p>So this means you are spending approximately <b>!{ annualSpendStr }</b> annually</p>
{{ TextInput(f.dollar_value, validation='dollars') }} {{ TextInput(f.dollar_value, validation='dollars') }}
{{ TextInput(f.number_user_sessions, validation='integer') }} {{ TextInput(f.number_user_sessions, validation='integer') }}
{{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }} {{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}