update components to emit valid on field-change and use in TO form

js/components/date_selector.js

@@ -24,6 +24,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data: function() {
@@ -35,6 +39,14 @@ export default {
     }
   },
 
+  created: function() {
+    emitEvent('field-mount', this, {
+      optional: this.optional,
+      name: this.name,
+      valid: this.isDateValid,
+    })
+  },
+
   watch: {
     month(newMonth, oldMonth) {
       if (!!newMonth && newMonth.length > 2) {
@@ -84,7 +96,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
     },
 
@@ -106,9 +118,9 @@ export default {
 
     isDateValid: function() {
       return (
-        this.day &&
+        !!this.day &&
-        this.month &&
+        !!this.month &&
-        this.year &&
+        !!this.year &&
         this.isDayValid &&
         this.isMonthValid &&
         this.isYearValid &&
@@ -141,13 +153,19 @@ export default {
   },
 
   methods: {
-    _emitChange: function(name, value, valid) {
+    onInput: function(e) {
+      console.log('emitting event')
       emitEvent('field-change', this, {
-        value: value,
+        value: e.target.value,
-        name: name,
+        name: this.name,
         watch: this.watch,
+        valid: this.isDateValid,
       })
     },
+
+    _emitChange: function(name, value, valid) {
+      emitEvent('field-change', this, { value, name })
+    },
   },
 
   render: function(createElement) {

js/components/text_input.js

@@ -31,6 +31,7 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: Boolean,
   },
 
   data: function() {
@@ -124,7 +125,7 @@ export default {
       // Emit a change event
       emitEvent('field-change', this, {
         value: this._rawValue(value),
-        valid,
+        valid: this._isValid(value),
         name: this.name,
         watch: this.watch,
       })

js/components/upload_input.js

@@ -17,6 +17,7 @@ export default {
   },
 
   props: {
+    name: String,
     initialData: {
       type: String,
     },
@@ -27,6 +28,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data: function() {
@@ -38,6 +43,14 @@ export default {
     }
   },
 
+  created: function() {
+    emitEvent('field-mount', this, {
+      optional: this.optional,
+      name: this.name,
+      valid: this.hasAttachment,
+    })
+  },
+
   methods: {
     addAttachment: function(e) {
       this.attachment = e.target.value
@@ -48,6 +61,7 @@ export default {
         value: e.target.value,
         name: this.name,
         watch: this.watch,
+        valid: this.hasAttachment,
       })
     },
     removeAttachment: function(e) {

js/mixins/form.js

@@ -27,6 +27,8 @@ export default {
     handleFieldMount: function(event) {
       const { name, optional, valid } = event
       this.fields[name] = optional || valid
+      const formValid = this.validateForm()
+      this.invalid = !formValid
     },
 
     validateForm: function() {

templates/components/date_picker.html

@@ -6,15 +6,18 @@
   description=field.description,
   mindate=None,
   maxdate=None,
-  watch=False) -%}
+  watch=False,
+  optional=True) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
   {% if mindate %}mindate="{{ mindate.strftime("%Y-%m-%d") }}"{% endif %}
+  name-tag='{{ field.name }}'
   initialmonth="{{ field.data.month }}"
   initialday="{{ field.data.day }}"
   initialyear="{{ field.data.year }}"
   v-bind:watch='{{ watch | string | lower }}'
+  :optional='{{ optional | string | lower }}'
   inline-template>
 
     <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
@@ -29,7 +32,7 @@
       </legend>
 
       <div class="date-picker-component">
-        <input name="{{ field.name }}" v-bind:value="formattedDate" type="hidden" />
+        <input name="{{ field.name }}" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
 
         <div class="usa-form-group usa-form-group-month">
           <label>Month</label>
@@ -54,6 +57,7 @@
             v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
             v-bind:max="daysMaxCalculation"
             v-model="day"
+            v-on:change="onInput"
           />
         </div>
 
@@ -66,6 +70,7 @@
             v-model="year"
             {% if maxdate %}max="{{ maxdate.year }}"{% endif %}
             {% if mindate %}min="{{ mindate.year }}"{% endif %}
+            v-on:change="onInput"
           />
 
         </div>

templates/components/text_input.html

@@ -14,7 +14,7 @@
   initial_value='',
   classes='',
   noMaxWidth=False,
-  optional=False,
+  optional=True,
   showLabel=True,
   watch=False) -%}
 

templates/components/upload_input.html

@@ -9,6 +9,8 @@
     v-bind:initial-errors='true'
   {% endif %}
   v-bind:watch='{{ watch | string | lower }}'
+  name='{{ field.name }}'
+  :optional='false'
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">

templates/task_orders/edit.html

@@ -87,8 +87,8 @@
         </fieldset>
       </div>
 
-      {{ DatePicker(fields.start_date, watch=True) }}
+      {{ DatePicker(fields.start_date, watch=True, optional=False) }}
-      {{ DatePicker(fields.end_date, watch=True) }}
+      {{ DatePicker(fields.end_date, watch=True, optional=False) }}
       {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
     </div>
   </clin-fields>
@@ -117,7 +117,14 @@
         {% call StickyCTA(text="Add Funding") %}
           <span class="action-group">
             <!-- todo: implement the review button -->
-            <input type="submit" formaction="{{ review_action }}" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
+            <input
+              type="submit"
+              formaction="{{ review_action }}"
+              tabindex="0"
+              :disabled="invalid"
+              value="Review task order"
+              form="new-task-order"
+              class="usa-button usa-button-primary">
             <input
               type="submit"
               class="usa-button usa-button-secondary"
@@ -145,7 +152,7 @@
             <div class="row">
               <div class="col">
                 <div class="h1">Add your task order</div>
-                {{ TextInput(form.number, validation='taskOrderNumber') }}
+                {{ TextInput(form.number, validation='taskOrderNumber', optional=False) }}
 
                 <hr>
 
@@ -167,7 +174,7 @@
                     <div>
                       <div class="form-row">
                         <div class="form-col form-col--two-thirds">
-                          <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' inline-template>
+                          <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
                             <div class="usa-input">
                               <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
                                   <legend>
@@ -233,7 +240,7 @@
                         </fieldset>
                       </div>
 
-                      <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' inline-template>
+                      <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
                         <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                           <legend>
                             <div class="usa-input__title">
@@ -242,7 +249,7 @@
                           </legend>
 
                           <div class="date-picker-component">
-                            <input :name="name" v-bind:value="formattedDate" type="hidden" />
+                            <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
 
                             <div class="usa-form-group usa-form-group-month">
                               <label>Month</label>
@@ -254,6 +261,7 @@
                                 type="number"
                                 v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
                                 v-model="month"
+                                v-on:change="onInput"
                               />
                             </div>
 
@@ -267,6 +275,7 @@
                                 v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
                                 v-bind:max="daysMaxCalculation"
                                 v-model="day"
+                                v-on:change="onInput"
                               />
                             </div>
 
@@ -277,6 +286,7 @@
                                 maxlength="4"
                                 type="number"
                                 v-model="year"
+                                v-on:change="onInput"
                               />
 
                             </div>
@@ -288,7 +298,7 @@
                         </fieldset>
                       </date-selector>
 
-                      <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' inline-template>
+                      <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' :optional='false' inline-template>
                         <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                           <legend>
                             <div class="usa-input__title">
@@ -297,7 +307,7 @@
                           </legend>
 
                           <div class="date-picker-component">
-                            <input :name="name" v-bind:value="formattedDate" type="hidden" />
+                            <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
 
                             <div class="usa-form-group usa-form-group-month">
                               <label>Month</label>
@@ -309,6 +319,7 @@
                                 type="number"
                                 v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
                                 v-model="month"
+                                v-on:change="onInput"
                               />
                             </div>
 
@@ -322,6 +333,7 @@
                                 v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
                                 v-bind:max="daysMaxCalculation"
                                 v-model="day"
+                                v-on:change="onInput"
                               />
                             </div>
 
@@ -332,6 +344,7 @@
                                 maxlength="4"
                                 type="number"
                                 v-model="year"
+                                v-on:change="onInput"
                               />
 
                             </div>