From daec01eba0c187a09cfb92de4d7473ec31d969d5 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 15:58:35 -0400
Subject: [PATCH 1/9] Format LOA fields

---
 styles/sections/_task_order.scss | 19 ++++++++++++++++++
 templates/task_orders/edit.html  | 34 +++++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index e9fcc9b8..9b84e463 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -77,6 +77,25 @@
     .usa-alert {
       margin: 1.5em 0;
     }
+
+    .task-order__loa-fieldset {
+      .usa-input {
+        margin: 0;
+      }
+
+      input {
+        margin: $gap 0;
+        max-width: unset;
+      }
+
+      input:first-child {
+        margin-top: 0;
+      }
+
+      input:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .row.row__form-fields {
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index 6e0c9007..3bcf58f3 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -13,8 +13,7 @@
 {% macro LOAInput() %}
   <div v-for="loa in loas">
     <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
-      <div>
-
+      <div class="usa-input usa-input--validation--anything">
         <masked-input
           v-on:input='onInput'
           v-on:blur='onBlur'
@@ -70,12 +69,21 @@
         </div>
       </div>
 
-      <div>Line of accounting (43 characters)</div>
-      {% for loa in fields.loas %}
-        {{ TextInput(loa, showLabel=False) }}
-      {% endfor %}
+      <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) }}
+          {% endfor %}
+
+          {{ LOAInput() }}
+        </fieldset>
+      </div>
 
-      {{ LOAInput() }}
       {{ DatePicker(fields.start_date) }}
       {{ DatePicker(fields.end_date) }}
       {{ TextInput(fields.obligated_amount, validation='dollars') }}
@@ -190,8 +198,16 @@
                       </div>
                     </div>
 
-                    <div>Line of accounting (43 characters)</div>
-                    {{ LOAInput() }}
+                    <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>
                       <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">

From cd0433d85b8e4e1f248ad053f25bd91dccf0dbcc Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 16:12:59 -0400
Subject: [PATCH 2/9] Reduce space around input fields and add file size info
 to file upload

---
 atst/forms/task_order.py         | 1 +
 styles/sections/_task_order.scss | 8 ++++++++
 templates/task_orders/edit.html  | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index 2585a673..7d02d3a6 100644
--- a/atst/forms/task_order.py
+++ b/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")),
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 9b84e463..2f000ad0 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -78,6 +78,10 @@
       margin: 1.5em 0;
     }
 
+    .usa-input {
+      margin: $gap 0;
+    }
+
     .task-order__loa-fieldset {
       .usa-input {
         margin: 0;
@@ -96,6 +100,10 @@
         margin-bottom: 0;
       }
     }
+
+    .task-order__pdf-help-text {
+      margin-bottom: 4 * $gap;
+    }
   }
 
   .row.row__form-fields {
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index 3bcf58f3..a2961843 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -366,7 +366,7 @@
 
               <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')}}
               </div>
             {{ UploadInput(form.pdf) }}

From 88fe358ced750862b3701f2aae7bbc123ac3fd26 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 16:21:29 -0400
Subject: [PATCH 3/9] Fix spacing

---
 styles/sections/_task_order.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 2f000ad0..a2b72229 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -58,6 +58,10 @@
   }
 
   &.task_order__form {
+    hr {
+      margin-top: 2rem;
+    }
+
     .totals-box {
       margin-top: 0;
     }
@@ -66,7 +70,7 @@
       left: 100%;
     }
 
-    .usa-input--validation--dollars input {
+    input {
       max-width: unset;
     }
 
@@ -89,7 +93,6 @@
 
       input {
         margin: $gap 0;
-        max-width: unset;
       }
 
       input:first-child {
@@ -101,6 +104,10 @@
       }
     }
 
+    button.icon-link {
+      padding: $gap * 3 0 0;
+    }
+
     .task-order__pdf-help-text {
       margin-bottom: 4 * $gap;
     }

From d8f7f7e912a43d53d1ca4f49ce9a657f25902e37 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 16:44:59 -0400
Subject: [PATCH 4/9] Fix spacing on CLIN type and number, use .form-row in
 macro

---
 styles/sections/_task_order.scss | 42 +++++++++++++++++++++++---------
 templates/task_orders/edit.html  | 14 +++++------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index a2b72229..c72f990b 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -83,7 +83,29 @@
     }
 
     .usa-input {
-      margin: $gap 0;
+      margin-top: $gap;
+      margin-bottom: $gap;
+    }
+
+    .form-row {
+      margin-bottom: 0;
+
+      .usa-input {
+        margin-left: $gap;
+        margin-right: $gap;
+      }
+
+      .form-col:first-child {
+        .usa-input {
+          margin-left: 0;
+        }
+      }
+
+      .form-col:last-child {
+        .usa-input {
+          margin-right: 0;
+        }
+      }
     }
 
     .task-order__loa-fieldset {
@@ -105,7 +127,13 @@
     }
 
     button.icon-link {
-      padding: $gap * 3 0 0;
+      margin-top: 0;
+      margin-left: 0;
+      padding-left: 0;
+
+      &.icon-link__add-another-clin {
+        margin-top: $gap * 3;
+      }
     }
 
     .task-order__pdf-help-text {
@@ -113,16 +141,6 @@
     }
   }
 
-  .row.row__form-fields {
-    .col {
-      margin-left: $gap;
-    }
-
-    .col:first-child {
-      margin-left: 0;
-    }
-  }
-
   .panel {
     @include shadow-panel;
   }
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index a2961843..edaae783 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -60,11 +60,11 @@
     v-bind:initial-loa-count="{{ fields.loas.data | length }}"
     inline-template>
     <div>
-      <div class="row row__form-fields">
-        <div class="col">
+      <div class="form-row">
+        <div class="form-col form-col--two-thirds">
           {{ OptionsInput(fields.jedi_clin_type) }}
         </div>
-        <div class="col">
+        <div class="form-col form-col--third">
           {{ TextInput(fields.number) }}
         </div>
       </div>
@@ -144,8 +144,8 @@
                 <hr v-if="clinIndex !== 0">
                 <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
                   <div>
-                    <div class="row row__form-fields">
-                      <div class="col">
+                    <div class="form-row">
+                      <div class="form-col form-col--two-thirds">
                         <div class="usa-input">
                           <fieldset data-ally-disabled="true" class="usa-input__choices">
                               <legend>
@@ -162,7 +162,7 @@
                           </fieldset>
                         </div>
                       </div>
-                      <div class="col">
+                      <div class="form-col form-col--third">
                         <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
                           <div class="usa-input">
                             <label :for="name">
@@ -357,7 +357,7 @@
               </div>
 
               <button
-                class="icon-link"
+                class="icon-link icon-link__add-another-clin"
                 v-on:click="addClin"
                 type="button">
                 {{ Icon('plus') }}

From 4676130d32425af8365c1d94e45d5ab3d5cf2ced Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 20:15:18 -0400
Subject: [PATCH 5/9] Font weight on labels

---
 styles/sections/_task_order.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index c72f990b..fdef6c5a 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -74,6 +74,17 @@
       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;
     }

From ab761d9d88591e91e8d430e5d40296da9179be97 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 20:46:22 -0400
Subject: [PATCH 6/9] Add missing classes

---
 templates/task_orders/edit.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index edaae783..a4e81f2b 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -320,11 +320,11 @@
                     </date-selector>
 
                     <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" 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

From 5be4efb9d988b9978e246a4c76298b80a5d1b689 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Thu, 13 Jun 2019 14:34:55 -0400
Subject: [PATCH 7/9] Reimplement SaveButton disabled until input change

---
 js/components/date_selector.js         |  10 +-
 js/components/forms/to_form.js         |  10 +
 js/components/text_input.js            |   5 +
 js/components/upload_input.js          |  17 +
 styles/sections/_task_order.scss       |   3 +-
 templates/components/date_picker.html  |   4 +-
 templates/components/text_input.html   |   4 +-
 templates/components/upload_input.html |   3 +-
 templates/task_orders/edit.html        | 534 +++++++++++++------------
 9 files changed, 323 insertions(+), 267 deletions(-)

diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index 05809b0b..6603cced 100644
--- a/js/components/date_selector.js
+++ b/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,
+      })
     },
   },
 
diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js
index bf77f3c2..6903ebe4 100644
--- a/js/components/forms/to_form.js
+++ b/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)
+      },
+    },
+  },
 }
diff --git a/js/components/text_input.js b/js/components/text_input.js
index 09367d2d..c49bb075 100644
--- a/js/components/text_input.js
+++ b/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,
       })
     },
 
diff --git a/js/components/upload_input.js b/js/components/upload_input.js
index a94d394a..93c0eb8f 100644
--- a/js/components/upload_input.js
+++ b/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,
+      })
     },
   },
 
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index fdef6c5a..1a52811a 100644
--- a/styles/sections/_task_order.scss
+++ b/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;
     }
 
diff --git a/templates/components/date_picker.html b/templates/components/date_picker.html
index 55b033bf..ee4edbaa 100644
--- a/templates/components/date_picker.html
+++ b/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 }">
diff --git a/templates/components/text_input.html b/templates/components/text_input.html
index e64ed1c0..acbfae80 100644
--- a/templates/components/text_input.html
+++ b/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
diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html
index 8eaa43dd..2463367f 100644
--- a/templates/components/upload_input.html
+++ b/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">
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index a4e81f2b..e8e7fb14 100644
--- a/templates/task_orders/edit.html
+++ b/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.end_date) }}
-      {{ 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 %}
@@ -101,277 +101,287 @@
   {% endif %}
   <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
     {{ form.csrf_token }}
-
-    {% call StickyCTA(text="Add Funding") %}
-      <span class="action-group">
-        <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">
-        <a
-          href="{{ cancel_url }}"
-          class="action-group__action icon-link">
-          {{ "common.cancel" | translate }}
-        </a>
-      </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 }}
-          </p>
+      <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"
+              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">
+              {{ "common.cancel" | translate }}
+            </a>
+          </span>
+        {% endcall %}
 
-          <hr>
+        <div class="task-order task_order__form">
+            <p class="section-description">
+              {{ "task_orders.new.form_help_text" | translate }}
+            </p>
 
-          {% include "fragments/flash.html" %}
+            <hr>
 
-          <div class="row">
-            <div class="col">
-              <div class="h1">Add your task order</div>
-              {{ TextInput(form.number, validation='taskOrderNumber') }}
+            {% include "fragments/flash.html" %}
 
-              <hr>
+            <div class="row">
+              <div class="col">
+                <div class="h1">Add your task order</div>
+                {{ TextInput(form.number, validation='taskOrderNumber') }}
 
-              <div class="h3">Add the summary of cloud funding</div>
-              <div>
-                Data must match with what is in your uploaded document.
-              </div>
+                <hr>
 
-              {% for clin in form.clins %}
-                {{ CLINFields(clin, index=loop.index - 1) }}
-              {% endfor %}
+                <div class="h3">Add the summary of cloud funding</div>
+                <div>
+                  Data must match with what is in your uploaded document.
+                </div>
 
-              <div v-for="clin in clins">
-                <hr v-if="clinIndex !== 0">
-                <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
-                  <div>
-                    <div class="form-row">
-                      <div class="form-col form-col--two-thirds">
-                        <div class="usa-input">
-                          <fieldset data-ally-disabled="true" class="usa-input__choices">
-                              <legend>
-                                <div class="usa-input__title">
-                                  CLIN type
-                                </div>
-                              </legend>
-                              <select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
-                                <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>
-                                <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
-                              </select>
-                          </fieldset>
+                {% for clin in form.clins %}
+                  {{ CLINFields(clin, index=loop.index - 1) }}
+                {% endfor %}
+
+                <div v-for="clin in clins">
+                  <hr v-if="clinIndex !== 0">
+                  <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
+                    <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" v-on:change="onInput">
+                                  <legend>
+                                    <div class="usa-input__title">
+                                      CLIN type
+                                    </div>
+                                  </legend>
+                                  <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>
+                                    <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
+                                  </select>
+                              </fieldset>
+                            </div>
+                          </optionsinput>
+                        </div>
+                        <div class="form-col form-col--third">
+                          <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>
+                                <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                                <div class="usa-input__title">CLIN</div>
+                              </label>
+
+                              <masked-input
+                                v-on:input='onInput'
+                                v-on:blur='onBlur'
+                                v-on:change='onChange'
+                                v-bind:value='value'
+                                v-bind:mask='mask'
+                                v-bind:pipe='pipe'
+                                v-bind:keep-char-positions='keepCharPositions'
+                                v-bind:aria-invalid='showError'
+                                type='text'
+                                :id='name'
+                                ref='input'>
+                              </masked-input>
+
+                              <input type='hidden' v-bind:value='rawValue' :name='name' />
+
+                              <template v-if='showError'>
+                                <span class='usa-input__message' v-html='validationError'></span>
+                              </template>
+                              <template v-else>
+                                <span class='usa-input__message'></span>
+                              </template>
+                            </div>
+                          </textinput>
                         </div>
                       </div>
-                      <div class="form-col form-col--third">
-                        <textinput :name="'clins-' + clinIndex + '-number'" inline-template>
-                          <div class="usa-input">
-                            <label :for="name">
-                              <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">CLIN</div>
-                            </label>
 
-                            <masked-input
-                              v-on:input='onInput'
-                              v-on:blur='onBlur'
-                              v-on:change='onChange'
-                              v-bind:value='value'
-                              v-bind:mask='mask'
-                              v-bind:pipe='pipe'
-                              v-bind:keep-char-positions='keepCharPositions'
-                              v-bind:aria-invalid='showError'
-                              type='text'
-                              :id='name'
-                              ref='input'>
-                            </masked-input>
-
-                            <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-                            <template v-if='showError'>
-                              <span class='usa-input__message' v-html='validationError'></span>
-                            </template>
-                            <template v-else>
-                              <span class='usa-input__message'></span>
-                            </template>
-                          </div>
-                        </textinput>
+                      <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'" :watch='true' inline-template>
+                        <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                          <legend>
+                            <div class="usa-input__title">
+                              Start of period of performance (PoP)
+                            </div>
+                          </legend>
+
+                          <div class="date-picker-component">
+                            <input :name="name" v-bind:value="formattedDate" type="hidden" />
+
+                            <div class="usa-form-group usa-form-group-month">
+                              <label>Month</label>
+                              <input
+                                name="date-month"
+                                max="12"
+                                maxlength="2"
+                                min="1"
+                                type="number"
+                                v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                                v-model="month"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-day">
+                              <label>Day</label>
+                              <input
+                                name="date-day"
+                                maxlength="2"
+                                min="1"
+                                type="number"
+                                v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                                v-bind:max="daysMaxCalculation"
+                                v-model="day"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-year">
+                              <label>Year</label>
+                              <input
+                                name="date-year"
+                                maxlength="4"
+                                type="number"
+                                v-model="year"
+                              />
+
+                            </div>
+
+                            <div class="usa-form-group-date-ok" v-if="isDateValid">
+                              {{ Icon("ok", classes="icon--green") }}
+                            </div>
+                          </div>
+                        </fieldset>
+                      </date-selector>
+
+                      <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">
+                              End of period of performance (PoP)
+                            </div>
+                          </legend>
+
+                          <div class="date-picker-component">
+                            <input :name="name" v-bind:value="formattedDate" type="hidden" />
+
+                            <div class="usa-form-group usa-form-group-month">
+                              <label>Month</label>
+                              <input
+                                name="date-month"
+                                max="12"
+                                maxlength="2"
+                                min="1"
+                                type="number"
+                                v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                                v-model="month"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-day">
+                              <label>Day</label>
+                              <input
+                                name="date-day"
+                                maxlength="2"
+                                min="1"
+                                type="number"
+                                v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                                v-bind:max="daysMaxCalculation"
+                                v-model="day"
+                              />
+                            </div>
+
+                            <div class="usa-form-group usa-form-group-year">
+                              <label>Year</label>
+                              <input
+                                name="date-year"
+                                maxlength="4"
+                                type="number"
+                                v-model="year"
+                              />
+
+                            </div>
+
+                            <div class="usa-form-group-date-ok" v-if="isDateValid">
+                              {{ Icon("ok", classes="icon--green") }}
+                            </div>
+                          </div>
+                        </fieldset>
+                      </date-selector>
+
+                      <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>
+                            <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                            <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                          </label>
+
+                          <masked-input
+                            v-on:input='onInput'
+                            v-on:blur='onBlur'
+                            v-on:change='onChange'
+                            v-bind:value='value'
+                            v-bind:mask='mask'
+                            v-bind:pipe='pipe'
+                            v-bind:keep-char-positions='keepCharPositions'
+                            v-bind:aria-invalid='showError'
+                            v-bind:show-mask='true'
+                            type='text'
+                            :id='name'
+                            ref='input'>
+                          </masked-input>
+
+                          <input type='hidden' v-bind:value='rawValue' :name='name' />
+
+                          <template v-if='showError'>
+                            <span class='usa-input__message' v-html='validationError'></span>
+                          </template>
+                          <template v-else>
+                            <span class='usa-input__message'></span>
+                          </template>
+                        </div>
+                      </textinput>
                     </div>
+                  </clin-fields>
+                </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>
+                <button
+                  class="icon-link icon-link__add-another-clin"
+                  v-on:click="addClin"
+                  type="button">
+                  {{ Icon('plus') }}
+                  <span>Add another CLIN or Sub-CLIN</span>
+                </button>
 
-                    <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
-                      <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                        <legend>
-                          <div class="usa-input__title">
-                            Start of period of performance (PoP)
-                          </div>
-                        </legend>
-
-                        <div class="date-picker-component">
-                          <input :name="name" v-bind:value="formattedDate" type="hidden" />
-
-                          <div class="usa-form-group usa-form-group-month">
-                            <label>Month</label>
-                            <input
-                              name="date-month"
-                              max="12"
-                              maxlength="2"
-                              min="1"
-                              type="number"
-                              v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                              v-model="month"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-day">
-                            <label>Day</label>
-                            <input
-                              name="date-day"
-                              maxlength="2"
-                              min="1"
-                              type="number"
-                              v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                              v-bind:max="daysMaxCalculation"
-                              v-model="day"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-year">
-                            <label>Year</label>
-                            <input
-                              name="date-year"
-                              maxlength="4"
-                              type="number"
-                              v-model="year"
-                            />
-
-                          </div>
-
-                          <div class="usa-form-group-date-ok" v-if="isDateValid">
-                            {{ Icon("ok", classes="icon--green") }}
-                          </div>
-                        </div>
-                      </fieldset>
-                    </date-selector>
-
-                    <date-selector :name-tag="'clins-' + clinIndex + '-end_date'" inline-template>
-                      <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                        <legend>
-                          <div class="usa-input__title">
-                            End of period of performance (PoP)
-                          </div>
-                        </legend>
-
-                        <div class="date-picker-component">
-                          <input :name="name" v-bind:value="formattedDate" type="hidden" />
-
-                          <div class="usa-form-group usa-form-group-month">
-                            <label>Month</label>
-                            <input
-                              name="date-month"
-                              max="12"
-                              maxlength="2"
-                              min="1"
-                              type="number"
-                              v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                              v-model="month"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-day">
-                            <label>Day</label>
-                            <input
-                              name="date-day"
-                              maxlength="2"
-                              min="1"
-                              type="number"
-                              v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                              v-bind:max="daysMaxCalculation"
-                              v-model="day"
-                            />
-                          </div>
-
-                          <div class="usa-form-group usa-form-group-year">
-                            <label>Year</label>
-                            <input
-                              name="date-year"
-                              maxlength="4"
-                              type="number"
-                              v-model="year"
-                            />
-
-                          </div>
-
-                          <div class="usa-form-group-date-ok" v-if="isDateValid">
-                            {{ Icon("ok", classes="icon--green") }}
-                          </div>
-                        </div>
-                      </fieldset>
-                    </date-selector>
-
-                    <textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" inline-template>
-                      <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>
-                        </label>
-
-                        <masked-input
-                          v-on:input='onInput'
-                          v-on:blur='onBlur'
-                          v-on:change='onChange'
-                          v-bind:value='value'
-                          v-bind:mask='mask'
-                          v-bind:pipe='pipe'
-                          v-bind:keep-char-positions='keepCharPositions'
-                          v-bind:aria-invalid='showError'
-                          v-bind:show-mask='true'
-                          type='text'
-                          :id='name'
-                          ref='input'>
-                        </masked-input>
-
-                        <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-                        <template v-if='showError'>
-                          <span class='usa-input__message' v-html='validationError'></span>
-                        </template>
-                        <template v-else>
-                          <span class='usa-input__message'></span>
-                        </template>
-                      </div>
-                    </textinput>
-                  </div>
-                </clin-fields>
-              </div>
-
-              <button
-                class="icon-link icon-link__add-another-clin"
-                v-on:click="addClin"
-                type="button">
-                {{ Icon('plus') }}
-                <span>Add another CLIN or Sub-CLIN</span>
-              </button>
-
-              <hr>
-              <div class="h3">Upload your supporting documentation</div>
-              <div class="task-order__pdf-help-text">
-                Upload a single PDF containing all relevant information. {{ Icon('help')}}
-              </div>
-            {{ UploadInput(form.pdf) }}
+                <hr>
+                <div class="h3">Upload your supporting documentation</div>
+                <div class="task-order__pdf-help-text">
+                  Upload a single PDF containing all relevant information. {{ Icon('help')}}
+                </div>
+              {{ UploadInput(form.pdf, watch=True) }}
+            </div>
+            {{ TotalsBox(task_order=task_order) }}
           </div>
-          {{ TotalsBox(task_order=task_order) }}
         </div>
       </div>
     </to-form>

From 66b0cb7e7585c9f5c2ffcb163da7601df287e1f3 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Fri, 14 Jun 2019 10:56:57 -0400
Subject: [PATCH 8/9] Fix spacing and update icon

---
 static/icons/question.svg        | 1 +
 styles/sections/_task_order.scss | 9 +++++++--
 templates/task_orders/edit.html  | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 static/icons/question.svg

diff --git a/static/icons/question.svg b/static/icons/question.svg
new file mode 100644
index 00000000..33f994c4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 1a52811a..e124cdae 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -59,7 +59,7 @@
 
   &.task_order__form {
     hr {
-      margin-top: 2rem;
+      margin-top: 1.5rem;
     }
 
     .totals-box {
@@ -68,6 +68,9 @@
 
     .icon {
       left: 100%;
+      &.icon--question {
+        @include icon-color($color-blue);
+      }
     }
 
     input {
@@ -142,9 +145,11 @@
       margin-top: 0;
       margin-left: 0;
       padding-left: 0;
+      font-size: $base-font-size;
 
       &.icon-link__add-another-clin {
-        margin-top: $gap * 3;
+        margin-top: 0;
+        margin-bottom: 0;
       }
     }
 
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index e8e7fb14..3df32d82 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -376,7 +376,7 @@
                 <hr>
                 <div class="h3">Upload your supporting documentation</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, watch=True) }}
             </div>

From 09582439eca9cbb9f8ef8f97ae6d4d79add3799d Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Fri, 14 Jun 2019 11:23:01 -0400
Subject: [PATCH 9/9] Notes about updating icons

---
 templates/task_orders/edit.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index 3df32d82..5ee999b1 100644
--- a/templates/task_orders/edit.html
+++ b/templates/task_orders/edit.html
@@ -40,6 +40,7 @@
     </textinput>
   </div>
 
+  <!-- TODO: Update icon to match designs -->
   <button
     class="icon-link"
     v-on:click="addLoa"
@@ -365,6 +366,7 @@
                   </clin-fields>
                 </div>
 
+                <!-- TODO: Update icon to match designs -->
                 <button
                   class="icon-link icon-link__add-another-clin"
                   v-on:click="addClin"