From c4651332a2ef97d2dc5d4a1388e9b5fbefe5fda3 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 24 Jul 2019 10:36:00 -0400
Subject: [PATCH] Move clin fields into macro

---
 templates/task_orders/step_3.html | 475 +++++++++++++++---------------
 1 file changed, 232 insertions(+), 243 deletions(-)

diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index 433ae7a5..bfb29b54 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -50,20 +50,80 @@
   </button>
 {% endmacro %}
 
-{% macro CLINFields(fields, index) %}
+{% macro CLINFields(fields=None, index=None) %}
   <clin-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 }}'
+    {% 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 }}'
+    {% else %}
+      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">
-          {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
+          {% 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">
+                    <legend>
+                      <div class="usa-input__title">
+                        {{ 'task_orders.form.clin_type_label' | translate }}
+                      </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>
+          {% endif %}
         </div>
         <div class="form-col form-col--third">
-          {{ TextInput(fields.number, watch=True) }}
+          {% if fields %}
+            {{ TextInput(fields.number, watch=True) }}
+          {% else %}
+            <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">{{ 'task_orders.form.clin_number_label' | translate }}</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>
+          {% endif %}
         </div>
       </div>
 
@@ -82,253 +142,182 @@
         </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) }}
+      {% 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>
+              <div class="usa-input__title">
+                {{ 'task_orders.form.pop_start' | translate }}
+              </div>
+            </legend>
+
+            <div class="date-picker-component">
+              <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+
+              <div class="usa-form-group usa-form-group-month">
+                <label>{{ 'components.date_selector.month' | translate }}</label>
+                <input
+                  name="date-month"
+                  max="12"
+                  maxlength="2"
+                  min="1"
+                  type="number"
+                  v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                  v-model="month"
+                  v-on:change="onInput"
+                  />
+              </div>
+
+              <div class="usa-form-group usa-form-group-day">
+                <label>{{ 'components.date_selector.day' | translate }}</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"
+                  v-on:change="onInput"
+                  />
+              </div>
+
+              <div class="usa-form-group usa-form-group-year">
+                <label>{{ 'components.date_selector.year' | translate }}</label>
+                <input
+                  name="date-year"
+                  maxlength="4"
+                  type="number"
+                  v-model="year"
+                  v-on:change="onInput"
+                  />
+              </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' :optional='false' inline-template>
+          <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+            <legend>
+              <div class="usa-input__title">
+                {{ 'task_orders.form.pop_end' | translate }}
+              </div>
+            </legend>
+
+            <div class="date-picker-component">
+              <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+
+                <div class="usa-form-group usa-form-group-month">
+                  <label>{{ 'components.date_selector.month' | translate }}</label>
+                  <input
+                    name="date-month"
+                    max="12"
+                    maxlength="2"
+                    min="1"
+                    type="number"
+                    v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                    v-model="month"
+                    v-on:change="onInput"
+                    />
+                </div>
+
+                <div class="usa-form-group usa-form-group-day">
+                  <label>{{ 'components.date_selector.day' | translate }}</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"
+                    v-on:change="onInput"
+                    />
+                </div>
+
+                <div class="usa-form-group usa-form-group-year">
+                  <label>{{ 'components.date_selector.year' | translate }}</label>
+                  <input
+                    name="date-year"
+                    maxlength="4"
+                    type="number"
+                    v-model="year"
+                    v-on:change="onInput"
+                    />
+                </div>
+
+              <div class="usa-form-group-date-ok" v-if="isDateValid">
+                {{ Icon("ok", classes="icon--green") }}
+              </div>
+            </div>
+          </fieldset>
+        </date-selector>
+
+        <textinput
+          v-cloak
+          inline-template
+          :name="'clins-' + clinIndex + '-obligated_amount'"
+          validation="dollars"
+          :watch='true'>
+          <div class="usa-input usa-input--validation--dollars noMaxWidth">
+            <label :for="name">
+              <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</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='false'
+              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>
+      {% 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) }}
+    <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 %}
+      {% 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'"
-            inline-template>
-            <div class="card">
-              <div class="form-row">
-                <div class="form-col form-col--two-thirds">
-                  <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">
-                          <legend>
-                            <div class="usa-input__title">
-                              {{ 'task_orders.form.clin_type_label' | translate }}
-                            </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">{{ 'task_orders.form.clin_number_label' | translate }}</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="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>
-                  {{ LOAInput() }}
-                </fieldset>
-              </div>
-
-              <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>
-                    <div class="usa-input__title">
-                      {{ 'task_orders.form.pop_start' | translate }}
-                    </div>
-                  </legend>
-
-                  <div class="date-picker-component">
-                    <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                    <div class="usa-form-group usa-form-group-month">
-                      <label>{{ 'components.date_selector.month' | translate }}</label>
-                      <input
-                        name="date-month"
-                        max="12"
-                        maxlength="2"
-                        min="1"
-                        type="number"
-                        v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                        v-model="month"
-                        v-on:change="onInput"
-                        />
-                    </div>
-
-                    <div class="usa-form-group usa-form-group-day">
-                      <label>{{ 'components.date_selector.day' | translate }}</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"
-                        v-on:change="onInput"
-                        />
-                    </div>
-
-                    <div class="usa-form-group usa-form-group-year">
-                      <label>{{ 'components.date_selector.year' | translate }}</label>
-                      <input
-                        name="date-year"
-                        maxlength="4"
-                        type="number"
-                        v-model="year"
-                        v-on:change="onInput"
-                        />
-                    </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' :optional='false' inline-template>
-              <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                <legend>
-                  <div class="usa-input__title">
-                    {{ 'task_orders.form.pop_end' | translate }}
-                  </div>
-                </legend>
-
-                <div class="date-picker-component">
-                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
-
-                    <div class="usa-form-group usa-form-group-month">
-                      <label>{{ 'components.date_selector.month' | translate }}</label>
-                      <input
-                        name="date-month"
-                        max="12"
-                        maxlength="2"
-                        min="1"
-                        type="number"
-                        v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                        v-model="month"
-                        v-on:change="onInput"
-                        />
-                    </div>
-
-                    <div class="usa-form-group usa-form-group-day">
-                      <label>{{ 'components.date_selector.day' | translate }}</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"
-                        v-on:change="onInput"
-                        />
-                    </div>
-
-                    <div class="usa-form-group usa-form-group-year">
-                      <label>{{ 'components.date_selector.year' | translate }}</label>
-                      <input
-                        name="date-year"
-                        maxlength="4"
-                        type="number"
-                        v-model="year"
-                        v-on:change="onInput"
-                        />
-                    </div>
-
-                  <div class="usa-form-group-date-ok" v-if="isDateValid">
-                    {{ Icon("ok", classes="icon--green") }}
-                  </div>
-                </div>
-              </fieldset>
-            </date-selector>
-
-            <textinput
-              v-cloak
-              inline-template
-              :name="'clins-' + clinIndex + '-obligated_amount'"
-              validation="dollars"
-              :watch='true'>
-              <div class="usa-input usa-input--validation--dollars noMaxWidth">
-                <label :for="name">
-                  <div class="usa-input__title">{{ 'task_orders.form.obligated_funds_label' | translate }}</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='false'
-                  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 v-for="clin in clins">
+        {{ CLINFields() }}
       </div>
 
       <button