diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index b0805229..7c9ffdea 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -5,6 +5,8 @@ import textinput from './text_input' const JEDI_CLIN_TYPE = 'jedi_clin_type' const OBLIGATED_AMOUNT = 'obligated_amount' +const START_DATE = 'start_date' +const END_DATE = 'end_date' export default { name: 'clin-fields', @@ -26,11 +28,22 @@ export default { type: Number, default: 0, }, + initialStartDate: { + type: String, + default: null, + }, + initialEndDate: { + type: String, + default: null, + }, }, data: function() { const loas = this.initialLoaCount == 0 ? 1 : 0 const indexOffset = this.initialLoaCount + const start = new Date(this.initialStartDate) + const end = new Date(this.initialEndDate) + const popValidation = !this.initialStartDate ? false : start < end return { clinIndex: this.initialClinIndex, @@ -38,6 +51,10 @@ export default { loas: loas, clinType: this.initialClinType, amount: this.initialAmount || 0, + startDate: start, + endDate: end, + popValid: popValidation, + showPopError: !popValidation, } }, @@ -70,6 +87,10 @@ export default { }) }, + checkPopValid: function() { + return this.startDate < this.endDate + }, + handleFieldChange: function(event) { if (this._uid === event.parent_uid) { if (event.name.includes(JEDI_CLIN_TYPE)) { @@ -78,6 +99,14 @@ export default { } else if (event.name.includes(OBLIGATED_AMOUNT)) { this.amount = parseFloat(event.value) this.clinChangeEvent() + } else if (event.name.includes(START_DATE)) { + this.startDate = new Date(event.value) + this.popValid = this.checkPopValid() + this.showPopError = !this.popValid + } else if (event.name.includes(END_DATE)) { + this.endDate = new Date(event.value) + this.popValid = this.checkPopValid() + this.showPopError = !this.popValid } } }, diff --git a/js/components/date_selector.js b/js/components/date_selector.js index 02466fb6..8e8f5327 100644 --- a/js/components/date_selector.js +++ b/js/components/date_selector.js @@ -51,18 +51,24 @@ export default { month(newMonth, oldMonth) { if (!!newMonth && newMonth.length > 2) { this.month = oldMonth + } else { + this.month = newMonth } }, day(newDay, oldDay) { if (!!newDay && newDay.length > 2) { this.day = oldDay + } else { + this.day = newDay } }, year(newYear, oldYear) { if (!!newYear && newYear.length > 4) { this.year = oldYear + } else { + this.year = newYear } }, }, @@ -96,7 +102,7 @@ export default { isYearValid: function() { // Emit a change event var valid = parseInt(this.year) >= 1 - // this._emitChange('year', this.year, valid) + this._emitChange('year', this.year, valid) return valid }, @@ -154,9 +160,8 @@ export default { methods: { onInput: function(e) { - console.log('emitting event') emitEvent('field-change', this, { - value: e.target.value, + value: this.formattedDate, name: this.name, watch: this.watch, valid: this.isDateValid, diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html index c41db3d0..61c1889f 100644 --- a/templates/components/date_picker.html +++ b/templates/components/date_picker.html @@ -44,6 +44,7 @@ type="number" v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }" v-model="month" + v-on:change="onInput" /> @@ -79,12 +80,6 @@ {{ Icon("ok", classes="icon--green") }} - -

- {% if field.errors %} - {{ field.errors[0] }} - {% endif %} -

diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html index ddead4f6..76e6b6a6 100644 --- a/templates/task_orders/step_3.html +++ b/templates/task_orders/step_3.html @@ -50,6 +50,8 @@ v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}" v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'" v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}' + v-bind:initial-start-date="'{{ fields.start_date.data | string }}'" + v-bind:initial-end-date="'{{ fields.end_date.data | string }}'" {% else %} v-bind:initial-clin-index='clinIndex' v-bind:initial-clin-type="'JEDI_CLIN_1'" @@ -201,11 +203,6 @@ {{ Icon("ok", classes="icon--green") }} -

- {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %} - {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %} - {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %} -

@@ -265,16 +262,22 @@ {{ Icon("ok", classes="icon--green") }} -

- {% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %} - {% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %} - {% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %} -

{% endif %} +
+

+ +

+
{% if fields %} {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}