Update vue and template to add multiple LOAs

js/components/clin_fields.js

@@ -1,4 +1,5 @@
 import DateSelector from './date_selector'
+import optionsinput from './options_input'
 import textinput from './text_input'
 
 export default {
@@ -6,14 +7,36 @@ export default {
 
   components: {
     DateSelector,
+    optionsinput,
     textinput,
   },
 
   props: {
     initialClinIndex: Number,
+    initialLoaCount: {
+      type: Number,
+      default: 0,
+    },
   },
 
   data: function() {
-    return { clinIndex: this.initialClinIndex }
+    const loas = this.initialLoaCount == 0 ? 1 : 0
+    const indexOffset = this.initialLoaCount
+
+    return {
+      clinIndex: this.initialClinIndex,
+      indexOffset: this.initialLoaCount,
+      loas: loas,
+    }
+  },
+
+  methods: {
+    addLoa: function(event) {
+      ++this.loas
+    },
+
+    loaIndex: function(index) {
+      return index + this.indexOffset - 1
+    },
   },
 }

js/components/forms/to_form.js

@@ -34,8 +34,8 @@ export default {
 
   methods: {
     addClin: function(event) {
-      this.clins = this.clins + 1
-      this.clinIndex = this.clinIndex + 1
+      ++this.clins
+      ++this.clinIndex
     },
   },
 }

templates/task_orders/edit.html

@@ -7,15 +7,67 @@
 {% from 'components/text_input.html' import TextInput %}
 {% from 'components/upload_input.html' import UploadInput %}
 
-{% macro CLINFields(fields) %}
-  <div>
-    <hr>
-    {{ OptionsInput(fields.jedi_clin_type) }}
-    {{ TextInput(fields.number) }}
-    {{ DatePicker(fields.start_date) }}
-    {{ DatePicker(fields.end_date) }}
-    {{ TextInput(fields.obligated_amount, validation='dollars') }}
+{% macro LOAInput() %}
+  <div v-for="loa in loas">
+    <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
+      <div>
+        <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">Line of Accounting</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>
+
+  <button v-on:click="addLoa" type="button">
+    Add another line of accounting
+  </button>
+{% endmacro %}
+
+{% macro CLINFields(fields, index) %}
+  <clin-fields
+    v-bind:initial-clin-index='{{ index }}'
+    v-bind:initial-loa-count="{{ fields.loas.data | length }}"
+    inline-template>
+    <div>
+      <hr>
+      {{ OptionsInput(fields.jedi_clin_type) }}
+      {{ TextInput(fields.number) }}
+
+      {% for loa in fields.loas %}
+        {{ TextInput(loa) }}
+      {% endfor %}
+
+      {{ LOAInput() }}
+      {{ DatePicker(fields.start_date) }}
+      {{ DatePicker(fields.end_date) }}
+      {{ TextInput(fields.obligated_amount, validation='dollars') }}
+    </div>
+  </clin-fields>
 {% endmacro %}
 
 {% block portfolio_content %}
@@ -44,7 +96,7 @@
             <hr>
             {{ TextInput(form.number, validation='taskOrderNumber') }}
             {% for clin in form.clins %}
-              {{ CLINFields(clin) }}
+              {{ CLINFields(clin, index=loop.index - 1) }}
             {% endfor %}
             <div v-for="clin in clins">
               <hr>
@@ -98,6 +150,8 @@
                     </div>
                   </textinput>
 
+                  {{ LOAInput() }}
+
                   <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
                     <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
                       <legend>