Reimplement SaveButton disabled until input change

js/components/date_selector.js

@@ -20,6 +20,10 @@ export default {
     mindate: { type: String },
     maxdate: { type: String },
     nameTag: { type: String },
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -138,7 +142,11 @@ export default {
 
   methods: {
     _emitChange: function(name, value, valid) {
-      emitEvent('field-change', this, { value, name })
+      emitEvent('field-change', this, {
+        value: value,
+        name: name,
+        watch: this.watch,
+      })
     },
   },
 

js/components/forms/to_form.js

@@ -1,3 +1,5 @@
+import stickybits from 'stickybits'
+
 import ClinFields from '../clin_fields'
 import DateSelector from '../date_selector'
 import FormMixin from '../../mixins/form'
@@ -40,4 +42,12 @@ export default {
       ++this.clinIndex
     },
   },
+
+  directives: {
+    sticky: {
+      inserted: el => {
+        stickybits(el)
+      },
+    },
+  },
 }

js/components/text_input.js

@@ -27,6 +27,10 @@ export default {
     paragraph: String,
     noMaxWidth: String,
     optional: Boolean,
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -122,6 +126,7 @@ export default {
         value: this._rawValue(value),
         valid,
         name: this.name,
+        watch: this.watch,
       })
     },
 

js/components/upload_input.js

@@ -1,6 +1,7 @@
 import createNumberMask from 'text-mask-addons/dist/createNumberMask'
 import { conformToMask } from 'vue-text-mask'
 
+import { emitEvent } from '../lib/emitters'
 import FormMixin from '../mixins/form'
 import textinput from './text_input'
 import optionsinput from './options_input'
@@ -22,6 +23,10 @@ export default {
     initialErrors: {
       type: Boolean,
     },
+    watch: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data: function() {
@@ -38,6 +43,12 @@ export default {
       this.attachment = e.target.value
       this.showErrors = false
       this.changed = true
+
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        name: this.name,
+        watch: this.watch,
+      })
     },
     removeAttachment: function(e) {
       e.preventDefault()
@@ -47,6 +58,12 @@ export default {
       }
       this.showErrors = false
       this.changed = true
+
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        name: this.name,
+        watch: this.watch,
+      })
     },
   },
 

styles/sections/_task_order.scss

@@ -74,7 +74,8 @@
       max-width: unset;
     }
 
-    .usa-input__title, .usa-input__title-inline {
+    .usa-input__title,
+    .usa-input__title-inline {
       font-weight: $font-normal;
     }
 

templates/components/date_picker.html

@@ -5,7 +5,8 @@
   label=field.label | striptags,
   description=field.description,
   mindate=None,
-  maxdate=None) -%}
+  maxdate=None,
+  watch=False) -%}
 
 <date-selector
   {% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
@@ -13,6 +14,7 @@
   initialmonth="{{ field.data.month }}"
   initialday="{{ field.data.day }}"
   initialyear="{{ field.data.year }}"
+  v-bind:watch='{{ watch | string | lower }}'
   inline-template>
 
     <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">

templates/components/text_input.html

@@ -15,7 +15,8 @@
   classes='',
   noMaxWidth=False,
   optional=False,
-  showLabel=True) -%}
+  showLabel=True,
+  watch=False) -%}
 
   <textinput
     v-cloak
@@ -27,6 +28,7 @@
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     v-bind:optional={{ optional|lower }}
     key='{{ field.name }}'
+    :watch='{{ watch | string | lower }}'
     inline-template>
 
     <div

templates/components/upload_input.html

@@ -1,6 +1,6 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro UploadInput(field, show_label=False) -%}
+{% macro UploadInput(field, show_label=False, watch=False) -%}
 <uploadinput
   inline-template
   {% if not field.errors %}
@@ -8,6 +8,7 @@
   {% else %}
     v-bind:initial-errors='true'
   {% endif %}
+  v-bind:watch='{{ watch | string | lower }}'
   >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">

templates/task_orders/edit.html

@@ -12,7 +12,7 @@
 
 {% macro LOAInput() %}
   <div v-for="loa in loas">
-    <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
+    <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" :watch='true' inline-template>
       <div class="usa-input usa-input--validation--anything">
         <masked-input
           v-on:input='onInput'
@@ -62,10 +62,10 @@
     <div>
       <div class="form-row">
         <div class="form-col form-col--two-thirds">
-          {{ OptionsInput(fields.jedi_clin_type) }}
+          {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
         </div>
         <div class="form-col form-col--third">
-          {{ TextInput(fields.number) }}
+          {{ TextInput(fields.number, watch=True) }}
         </div>
       </div>
 
@@ -77,16 +77,16 @@
             </div>
           </legend>
           {% for loa in fields.loas %}
-            {{ TextInput(loa, showLabel=False) }}
+            {{ TextInput(loa, showLabel=False, watch=True) }}
           {% endfor %}
 
           {{ LOAInput() }}
         </fieldset>
       </div>
 
-      {{ DatePicker(fields.start_date) }}
+      {{ DatePicker(fields.start_date, watch=True) }}
-      {{ DatePicker(fields.end_date) }}
+      {{ DatePicker(fields.end_date, watch=True) }}
-      {{ TextInput(fields.obligated_amount, validation='dollars') }}
+      {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
     </div>
   </clin-fields>
 {% endmacro %}
@@ -101,11 +101,19 @@
   {% endif %}
   <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
     {{ form.csrf_token }}
-
+    <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
+      <div>
         {% 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" tabindex="0" value="Save" form="new-task-order" class="usa-button usa-button-secondary">
+            <input
+              type="submit"
+              class="usa-button usa-button-secondary"
+              tabindex="0"
+              :disabled="!changed"
+              value="{{ 'common.save' | translate }}"
+              form="new-task-order"/>
             <a
               href="{{ cancel_url }}"
               class="action-group__action icon-link">
@@ -114,7 +122,6 @@
           </span>
         {% endcall %}
 
-    <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
         <div class="task-order task_order__form">
             <p class="section-description">
               {{ "task_orders.new.form_help_text" | translate }}
@@ -146,14 +153,15 @@
                     <div>
                       <div class="form-row">
                         <div class="form-col form-col--two-thirds">
+                          <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' inline-template>
                             <div class="usa-input">
-                          <fieldset data-ally-disabled="true" class="usa-input__choices">
+                              <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
                                   <legend>
                                     <div class="usa-input__title">
                                       CLIN type
                                     </div>
                                   </legend>
-                              <select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
+                                  <select :id='name' :name='name'>
                                     <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
                                     <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
                                     <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
@@ -161,9 +169,10 @@
                                   </select>
                               </fieldset>
                             </div>
+                          </optionsinput>
                         </div>
                         <div class="form-col form-col--third">
-                        <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
+                          <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
                             <div class="usa-input">
                               <label :for="name">
                                 <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
@@ -209,7 +218,7 @@
                         </fieldset>
                       </div>
 
-                    <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
+                      <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' inline-template>
                         <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                           <legend>
                             <div class="usa-input__title">
@@ -264,7 +273,7 @@
                         </fieldset>
                       </date-selector>
 
-                    <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" inline-template>
+                      <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' inline-template>
                         <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                           <legend>
                             <div class="usa-input__title">
@@ -319,7 +328,7 @@
                         </fieldset>
                       </date-selector>
 
-                    <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" inline-template>
+                      <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" :watch='true' inline-template>
                         <div class="usa-input usa-input--validation--dollars noMaxWidth">
                           <label :for="name">
                             <div class="usa-input__title">Funds obligated for cloud</div>
@@ -369,11 +378,12 @@
                 <div class="task-order__pdf-help-text">
                   Upload a single PDF containing all relevant information. {{ Icon('help')}}
                 </div>
-            {{ UploadInput(form.pdf) }}
+              {{ UploadInput(form.pdf, watch=True) }}
             </div>
             {{ TotalsBox(task_order=task_order) }}
           </div>
         </div>
+      </div>
     </to-form>
   </form>