Merge pull request #906 from dod-ccpo/style-to-form-2

Style to form 2

atst/forms/task_order.py

@@ -41,6 +41,7 @@ class TaskOrderForm(BaseForm):
     )
     pdf = FileField(
         None,
+        description="Your file may not exceed 50MB",
         validators=[
             FileAllowed(["pdf"], translate("forms.task_order.file_format_not_allowed")),
             FileLength(message=translate("forms.validators.file_length")),

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,
+      })
     },
   },
 

static/icons/question.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>

styles/sections/_task_order.scss

@@ -58,18 +58,37 @@
   }
 
   &.task_order__form {
+    hr {
+      margin-top: 1.5rem;
+    }
+
     .totals-box {
       margin-top: 0;
     }
 
     .icon {
       left: 100%;
+      &.icon--question {
+        @include icon-color($color-blue);
+      }
     }
 
-    .usa-input--validation--dollars input {
+    input {
       max-width: unset;
     }
 
+    .usa-input__title,
+    .usa-input__title-inline {
+      font-weight: $font-normal;
+    }
+
+    .date-picker {
+      .usa-input__title {
+        font-weight: $font-bold;
+        margin-bottom: $gap;
+      }
+    }
+
     .usa-form-group-year {
       margin-right: 0.4rem;
     }
@@ -77,18 +96,68 @@
     .usa-alert {
       margin: 1.5em 0;
     }
+
+    .usa-input {
+      margin-top: $gap;
+      margin-bottom: $gap;
     }
 
-  .row.row__form-fields {
+    .form-row {
-    .col {
+      margin-bottom: 0;
+
+      .usa-input {
         margin-left: $gap;
+        margin-right: $gap;
       }
 
-    .col:first-child {
+      .form-col:first-child {
+        .usa-input {
           margin-left: 0;
         }
       }
 
+      .form-col:last-child {
+        .usa-input {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .task-order__loa-fieldset {
+      .usa-input {
+        margin: 0;
+      }
+
+      input {
+        margin: $gap 0;
+      }
+
+      input:first-child {
+        margin-top: 0;
+      }
+
+      input:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    button.icon-link {
+      margin-top: 0;
+      margin-left: 0;
+      padding-left: 0;
+      font-size: $base-font-size;
+
+      &.icon-link__add-another-clin {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    .task-order__pdf-help-text {
+      margin-bottom: 4 * $gap;
+    }
+  }
+
   .panel {
     @include shadow-panel;
   }

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,9 +12,8 @@
 
 {% 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>
+      <div class="usa-input usa-input--validation--anything">
-
         <masked-input
           v-on:input='onInput'
           v-on:blur='onBlur'
@@ -41,6 +40,7 @@
     </textinput>
   </div>
 
+  <!-- TODO: Update icon to match designs -->
   <button
     class="icon-link"
     v-on:click="addLoa"
@@ -61,24 +61,33 @@
     v-bind:initial-loa-count="{{ fields.loas.data | length }}"
     inline-template>
     <div>
-      <div class="row row__form-fields">
+      <div class="form-row">
-        <div class="col">
+        <div class="form-col form-col--two-thirds">
-          {{ OptionsInput(fields.jedi_clin_type) }}
+          {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
         </div>
-        <div class="col">
+        <div class="form-col form-col--third">
-          {{ TextInput(fields.number) }}
+          {{ TextInput(fields.number, watch=True) }}
         </div>
       </div>
 
-      <div>Line of accounting (43 characters)</div>
+      <div class="usa-input">
+        <fieldset class="usa-input__choices task-order__loa-fieldset">
+          <legend>
+            <div class="usa-input__title">
+              Line of accounting (43 characters)
+            </div>
+          </legend>
           {% for loa in fields.loas %}
-        {{ TextInput(loa, showLabel=False) }}
+            {{ TextInput(loa, showLabel=False, watch=True) }}
           {% endfor %}
 
           {{ LOAInput() }}
-      {{ DatePicker(fields.start_date) }}
+        </fieldset>
-      {{ DatePicker(fields.end_date) }}
+      </div>
-      {{ TextInput(fields.obligated_amount, validation='dollars') }}
+
+      {{ DatePicker(fields.start_date, watch=True) }}
+      {{ DatePicker(fields.end_date, watch=True) }}
+      {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
     </div>
   </clin-fields>
 {% endmacro %}
@@ -93,11 +102,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">
@@ -106,7 +123,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 }}
@@ -136,16 +152,17 @@
                   <hr v-if="clinIndex !== 0">
                   <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
                     <div>
-                    <div class="row row__form-fields">
+                      <div class="form-row">
-                      <div class="col">
+                        <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>
@@ -153,9 +170,10 @@
                                   </select>
                               </fieldset>
                             </div>
+                          </optionsinput>
                         </div>
-                      <div class="col">
+                        <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>
@@ -190,10 +208,18 @@
                         </div>
                       </div>
 
-                    <div>Line of accounting (43 characters)</div>
+                      <div class="usa-input">
+                        <fieldset class="usa-input__choices task-order__loa-fieldset">
+                          <legend>
+                            <div class="usa-input__title">
+                              Line of accounting (43 characters)
+                            </div>
+                          </legend>
                           {{ LOAInput() }}
+                        </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">
@@ -248,7 +274,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">
@@ -303,12 +329,12 @@
                         </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>
+                        <div class="usa-input usa-input--validation--dollars noMaxWidth">
                           <label :for="name">
+                            <div class="usa-input__title">Funds obligated for cloud</div>
                             <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
                             <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                          <div class="usa-input__title">Funds obligated for cloud</div>
                           </label>
 
                           <masked-input
@@ -340,8 +366,9 @@
                   </clin-fields>
                 </div>
 
+                <!-- TODO: Update icon to match designs -->
                 <button
-                class="icon-link"
+                  class="icon-link icon-link__add-another-clin"
                   v-on:click="addClin"
                   type="button">
                   {{ Icon('plus') }}
@@ -350,14 +377,15 @@
 
                 <hr>
                 <div class="h3">Upload your supporting documentation</div>
-              <div>
+                <div class="task-order__pdf-help-text">
-                Upload a single PDF containing all relevant information. {{ Icon('help')}}
+                  Upload a single PDF containing all relevant information. {{ Icon('question')}}
                 </div>
-            {{ UploadInput(form.pdf) }}
+              {{ UploadInput(form.pdf, watch=True) }}
             </div>
             {{ TotalsBox(task_order=task_order) }}
           </div>
         </div>
+      </div>
     </to-form>
   </form>