Move clin fields into macro

templates/task_orders/step_3.html

@@ -50,66 +50,24 @@
   </button>
 {% endmacro %}
 
-{% macro CLINFields(fields, index) %}
+{% macro CLINFields(fields=None, index=None) %}
   <clin-fields
+    {% if fields %}
       v-bind:initial-clin-index='{{ index }}'
       v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
       v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
       v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
-    inline-template>
+    {% else %}
-    <div class="card">
-      <div class="form-row">
-        <div class="form-col form-col--two-thirds">
-          {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
-        </div>
-        <div class="form-col form-col--third">
-          {{ TextInput(fields.number, watch=True) }}
-        </div>
-      </div>
-
-      <div class="usa-input">
-        <fieldset class="usa-input__choices task-order__loa-fieldset">
-          <legend>
-            <div class="usa-input__title">
-              {{ 'task_orders.form.loa_label' | translate }}
-            </div>
-          </legend>
-          {% for loa in fields.loas %}
-            {{ TextInput(loa, showLabel=False, watch=True) }}
-          {% endfor %}
-
-          {{ LOAInput() }}
-        </fieldset>
-      </div>
-
-      {{ DatePicker(fields.start_date, watch=True, optional=False) }}
-      {{ DatePicker(fields.end_date, watch=True, optional=False) }}
-      {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
-    </div>
-  </clin-fields>
-{% endmacro %}
-
-
-{% block to_builder_form_field %}
-
-  <to-form
-    inline-template
-    v-bind:initial-clin-count="{{ form.clins.data | length }}">
-      <div>
-        {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }}
-
-        {% for clin in form.clins %}
-          {{ CLINFields(clin, index=loop.index - 1) }}
-        {% endfor %}
-
-        <div v-for="clin in clins">
-          <clin-fields
       v-bind:initial-clin-index='clinIndex'
       v-bind:initial-clin-type="'JEDI_CLIN_1'"
+    {% endif %}
     inline-template>
     <div class="card">
       <div class="form-row">
         <div class="form-col form-col--two-thirds">
+          {% if fields %}
+            {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
+          {% else %}
             <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">
@@ -127,8 +85,12 @@
                 </fieldset>
               </div>
             </optionsinput>
+          {% endif %}
         </div>
         <div class="form-col form-col--third">
+          {% if fields %}
+            {{ TextInput(fields.number, watch=True) }}
+          {% else %}
             <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
               <div class="usa-input">
                 <label :for="name">
@@ -161,6 +123,7 @@
                 </template>
               </div>
             </textinput>
+          {% endif %}
         </div>
       </div>
 
@@ -171,10 +134,19 @@
               {{ 'task_orders.form.loa_label' | translate }}
             </div>
           </legend>
+          {% for loa in fields.loas %}
+            {{ TextInput(loa, showLabel=False, watch=True) }}
+          {% endfor %}
+
           {{ LOAInput() }}
         </fieldset>
       </div>
 
+      {% if fields %}
+        {{ DatePicker(fields.start_date, watch=True, optional=False) }}
+        {{ DatePicker(fields.end_date, watch=True, optional=False) }}
+        {{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
+      {% else %}
         <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>
@@ -327,8 +299,25 @@
             </template>
           </div>
         </textinput>
+      {% endif %}
     </div>
   </clin-fields>
+{% endmacro %}
+
+
+{% block to_builder_form_field %}
+  <to-form
+    inline-template
+    v-bind:initial-clin-count="{{ form.clins.data | length }}">
+    <div>
+      {{ TOFormStepHeader('task_orders.form.base_clin_title' | translate, 'task_orders.form.base_clin_description' | translate, task_order.number) }}
+
+      {% for clin in form.clins %}
+        {{ CLINFields(clin, index=loop.index - 1) }}
+      {% endfor %}
+
+      <div v-for="clin in clins">
+        {{ CLINFields() }}
       </div>
 
       <button