Create TO builder base file and use it to simplify step templates

js/components/forms/base_form.js

@@ -1,4 +1,5 @@
 import ally from 'ally.js'
+import stickybits from 'stickybits'
 
 import DateSelector from '../date_selector'
 import FormMixin from '../../mixins/form'
@@ -8,9 +9,11 @@ import checkboxinput from '../checkbox_input'
 import levelofwarrant from '../levelofwarrant'
 import multicheckboxinput from '../multi_checkbox_input'
 import optionsinput from '../options_input'
+import SemiCollapsibleText from '../semi_collapsible_text'
 import textinput from '../text_input'
-import uploadinput from '../upload_input'
+import ToForm from './to_form.js'
 import toggler from '../toggler'
+import uploadinput from '../upload_input'
 
 export default {
   name: 'base-form',
@@ -22,9 +25,18 @@ export default {
     levelofwarrant,
     multicheckboxinput,
     optionsinput,
+    SemiCollapsibleText,
     textinput,
+    ToForm,
     toggler,
     uploadinput,
   },
   mixins: [FormMixin],
+  directives: {
+    sticky: {
+      inserted: el => {
+        stickybits(el)
+      },
+    },
+  },
 }

js/components/forms/to_form.js

@@ -1,5 +1,3 @@
-import stickybits from 'stickybits'
-
 import ClinFields from '../clin_fields'
 import DateSelector from '../date_selector'
 import FormMixin from '../../mixins/form'
@@ -71,12 +69,4 @@ export default {
       this.obligated = newObligated
     },
   },
-
-  directives: {
-    sticky: {
-      inserted: el => {
-        stickybits(el)
-      },
-    },
-  },
 }

templates/task_orders/builder_base.html

@@ -0,0 +1,40 @@
+{% extends "portfolios/base.html" %}
+
+{% from "components/sticky_cta.html" import StickyCTA %}
+
+{% block portfolio_content %}
+  <base-form inline-template>
+    <form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+      {{ form.csrf_token }}
+
+      {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate )) %}
+        <span class="action-group">
+          {% block next_button %}
+            <input
+              type="submit"
+              tabindex="0"
+              :disabled="!changed"
+              value="{{ next_button_text }}"
+              form="to_form"
+              class="usa-button usa-button-primary">
+          {% endblock %}
+
+          <a class="usa-button usa-button-secondary" href="{{ previous_button_link }}">
+            Previous
+          </a>
+
+          <a
+            href="{{ cancel_url }}"
+            class="action-group__action icon-link">
+            {{ "common.cancel" | translate }}
+          </a>
+        </span>
+      {% endcall %}
+
+      {% include "fragments/flash.html" %}
+
+      {% block to_builder_form_field %}{% endblock %}
+
+    </form>
+  </base-form>
+{% endblock %}

templates/task_orders/step_1.html

@@ -1,56 +1,27 @@
-{% extends "portfolios/base.html" %}
+{% extends "task_orders/builder_base.html" %}
 
 {% from 'components/icon.html' import Icon %}
 {% from "components/sticky_cta.html" import StickyCTA %}
 {% from 'components/upload_input.html' import UploadInput %}
 
-{% block portfolio_content %}
+{% if task_order_id %}
-  {% if task_order_id %}
+  {% set action = url_for("task_orders.upload_pdf", task_order_id=task_order_id) %}
-    {% set action = url_for("task_orders.upload_pdf", task_order_id=task_order_id) %}
+{% else %}
-  {% else %}
+  {% set action = url_for("task_orders.upload_pdf", portfolio_id=portfolio.id) %}
-    {% set action = url_for("task_orders.upload_pdf", portfolio_id=portfolio.id) %}
+{% endif %}
-  {% endif %}
 
-  <base-form inline-template>
+{% set next_button_text = "Next: Add TO Number" %}
-    <form id="upload-to-pdf" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+{% set previous_button_link = cancel_url %}
-      {{ form.csrf_token }}
 
-      {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate )) %}
-        <span class="action-group">
-          <input
-            type="submit"
-            formaction="{{ action }}"
-            tabindex="0"
-            :disabled="!changed"
-            value="Next: Add TO Number"
-            form="upload-to-pdf"
-            class="usa-button usa-button-primary">
-          <input
-            type="button"
-            class="usa-button usa-button-secondary"
-            tabindex="0"
-            value="Previous"
-            form="upload-to-pdf"/>
-          <a
-            href="{{ cancel_url }}"
-            class="action-group__action icon-link">
-            {{ "common.cancel" | translate }}
-          </a>
-        </span>
-      {% endcall %}
 
-      {% include "fragments/flash.html" %}
+{% block to_builder_form_field %}
+  <div class="h3">
+    {{ 'task_orders.form.supporting_docs_header' | translate }}
+  </div>
 
-      <div class="h3">
+  <div class="task-order__pdf-help-text">
-        {{ 'task_orders.form.supporting_docs_header' | translate }}
+    {{ 'task_orders.form.supporting_docs_text' | translate }} {{ Icon('question')}}
-      </div>
+  </div>
 
-      <div class="task-order__pdf-help-text">
+  {{ UploadInput(form.pdf, watch=True) }}
-        {{ 'task_orders.form.supporting_docs_text' | translate }} {{ Icon('question')}}
-      </div>
-
-      {{ UploadInput(form.pdf, watch=True) }}
-
-    </form>
-  </base-form>
 {% endblock %}

templates/task_orders/step_2.html

@@ -1,47 +1,15 @@
-{% extends "portfolios/base.html" %}
+{% extends "task_orders/builder_base.html" %}
 
-{% from "components/sticky_cta.html" import StickyCTA %}
 {% from 'components/text_input.html' import TextInput %}
 
-{% block portfolio_content %}
+{% set action = url_for("task_orders.update_number", task_order_id=task_order_id) %}
-  {% set action = url_for("task_orders.update_number", task_order_id=task_order_id) %}
+{% set next_button_text = "Next: Add Base CLIN" %}
+{% set previous_button_link = url_for("task_orders.add_pdf", task_order_id=task_order_id) %}
 
-  <base-form inline-template>
+{% block to_builder_form_field %}
-    <form id="upload-to-pdf" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+  <div class="h1">
-      {{ form.csrf_token }}
+    {{ 'task_orders.form.add_to_header' | translate }}
+  </div>
 
-      {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate )) %}
+  {{ TextInput(form.number, validation='taskOrderNumber', optional=False) }}
-        <span class="action-group">
-          <input
-            type="submit"
-            formaction="{{ action }}"
-            tabindex="0"
-            :disabled="!changed"
-            value="Next: Add Base CLIN"
-            form="upload-to-pdf"
-            class="usa-button usa-button-primary">
-          <input
-            type="button"
-            class="usa-button usa-button-secondary"
-            tabindex="0"
-            value="Previous"
-            form="upload-to-pdf"/>
-          <a
-            href="{{ cancel_url }}"
-            class="action-group__action icon-link">
-            {{ "common.cancel" | translate }}
-          </a>
-        </span>
-      {% endcall %}
-
-      {% include "fragments/flash.html" %}
-
-      <div class="h1">
-        {{ 'task_orders.form.add_to_header' | translate }}
-      </div>
-
-      {{ TextInput(form.number, validation='taskOrderNumber', optional=False) }}
-
-    </form>
-  </base-form>
 {% endblock %}

templates/task_orders/step_3.html

@@ -1,11 +1,14 @@
-{% extends "portfolios/base.html" %}
+{% extends "task_orders/builder_base.html" %}
 
 {% from 'components/date_picker.html' import DatePicker %}
 {% from 'components/icon.html' import Icon %}
 {% from 'components/options_input.html' import OptionsInput %}
-{% from "components/sticky_cta.html" import StickyCTA %}
 {% from 'components/text_input.html' import TextInput %}
 
+{% set action = url_for("task_orders.update_clins", task_order_id=task_order_id) %}
+{% set next_button_text = "Next: Review Funding" %}
+{% set previous_button_link = url_for("task_orders.add_number", task_order_id=task_order_id) %}
+
 {% macro LOAInput() %}
   <div v-for="loa in loas">
     <textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" :watch='true' inline-template>
@@ -89,41 +92,12 @@
 {% endmacro %}
 
 
-{% block portfolio_content %}
+{% block to_builder_form_field %}
-  {% set action = url_for("task_orders.update_clins", task_order_id=task_order_id) %}
 
   <to-form
     inline-template
     v-bind:initial-clin-count="{{ form.clins.data | length }}">
-    <form id="upload-to-pdf" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+      <div>
-      {{ form.csrf_token }}
-
-      {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate )) %}
-        <span class="action-group">
-          <input
-            type="submit"
-            formaction="{{ action }}"
-            tabindex="0"
-            :disabled="!changed"
-            value="Next: Review Funding"
-            form="upload-to-pdf"
-            class="usa-button usa-button-primary">
-          <input
-            type="button"
-            class="usa-button usa-button-secondary"
-            tabindex="0"
-            value="Previous"
-            form="upload-to-pdf"/>
-          <a
-            href="{{ cancel_url }}"
-            class="action-group__action icon-link">
-            {{ "common.cancel" | translate }}
-          </a>
-        </span>
-      {% endcall %}
-
-      {% include "fragments/flash.html" %}
-
       <div class="h3">
         {{ 'task_orders.form.cloud_funding_header' | translate }}
       </div>
@@ -375,6 +349,6 @@
         {{ Icon('plus') }}
         <span>{{ 'task_orders.form.add_clin' | translate }}</span>
       </button>
-    </form>
+    </div>
   </to-form>
 {% endblock %}

templates/task_orders/step_4.html

@@ -1,119 +1,100 @@
-{% extends "portfolios/base.html" %}
+{% extends "task_orders/builder_base.html" %}
 
 {% from "components/icon.html" import Icon %}
 {% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
-{% from "components/sticky_cta.html" import StickyCTA %}
 {% from "components/totals_box.html" import TotalsBox %}
 
-{% block portfolio_content %}
+{% set action = url_for('task_orders.confirm_signature', task_order_id=task_order_id) %}
-  {% set action = url_for("task_orders.update_number", task_order_id=task_order_id) %}
+{% set previous_button_link = url_for("task_orders.add_clins", task_order_id=task_order_id) %}
 
-  <div id="upload-to-pdf">
+{% block next_button %}
-    {{ form.csrf_token }}
+  <a
+    href="{{ action }}"
+    class="usa-button usa-button-primary">
+    Next: Submit Task Order
+  </a>
+{% endblock %}
 
-    {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate )) %}
+{% block to_builder_form_field %}
-      <span class="action-group">
+  <div class="task-order">
-        <a
-          href="{{ url_for('task_orders.confirm_signature', task_order_id=task_order_id)}}"
-          class="usa-button usa-button-primary">
-          Next: Submit Task Order
-        </a>
-        <input
-          type="button"
-          class="usa-button usa-button-secondary"
-          tabindex="0"
-          value="Previous"
-          form="upload-to-pdf"/>
-        <a
-          href="{{ cancel_url }}"
-          class="action-group__action icon-link">
-          {{ "common.cancel" | translate }}
-        </a>
-      </span>
-    {% endcall %}
 
-    {% include "fragments/flash.html" %}
+    {{ SemiCollapsibleText() }}
 
-    <div class="task-order">
+    <hr>
 
-      {{ SemiCollapsibleText() }}
+    <div class="h1">
-
+      {{ "task_orders.review.review_your_task_order" | translate }}
-      <hr>
+    </div>
-
+    <p>
-      <div class="h1">
+      {{ "task_orders.review.check_paragraph" | translate }}
-        {{ "task_orders.review.review_your_task_order" | translate }}
+    </p>
-      </div>
+    <div class="row">
-      <p>
+      <div class="col task-order__details">
-        {{ "task_orders.review.check_paragraph" | translate }}
+        <div class="h4">
-      </p>
+          {{ "task_orders.review.task_order_number" | translate }}
-      <div class="row">
-        <div class="col task-order__details">
-          <div class="h4">
-            {{ "task_orders.review.task_order_number" | translate }}
-          </div>
-          <div>{{task_order.number}}</div>
-
-          <hr>
-
-          <div class="h3">
-            {{ "task_orders.review.funding_summary" | translate }}
-          </div>
-
-          {% for clin in task_order.clins %}
-            <div>
-              {{ "{}".format(clin.jedi_clin_type) | translate}}
-            </div>
-            <table class="fixed-table-wrapper">
-              <thead>
-                <tr>
-                  <th>{{ "task_orders.review.clins.amount" | translate }}</th>
-                  <th>{{ "task_orders.review.clins.obligated" | translate }}</th>
-                  <th>{{ "task_orders.review.clins.pop_start" | translate }}</th>
-                  <th>{{ "task_orders.review.clins.pop_end" | translate }}</th>
-                  <th>{{ "task_orders.review.clins.loa" | translate }}</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                <tr>
-                  <td>{{ clin.obligated_amount | dollars }}</td>
-                  <td>
-                    {% if clin.is_obligated() %}
-                      {{ "common.yes" | translate }}
-                    {% else %}
-                      {{ "common.no" | translate }}
-                    {% endif %}
-                  </td>
-                  <td>{{ clin.start_date | formattedDate }}</td>
-                  <td>{{ clin.end_date | formattedDate }}</td>
-                  <td>
-                    {% for loa in clin.loas %}
-                      <span title='{{ loa }}'>
-                        {{ loa }}
-                      </span>
-                      <br />
-                    {% endfor %}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          {% endfor %}
-
-          <hr>
-
-          <div class="h3">
-            {{ "task_orders.review.supporting_document.title" | translate }}
-          </div>
-          <div class="h4">
-            <a class="icon-link icon-link--download" href="{{ url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id) }}">
-              {{ Icon('check-circle-solid') }}
-              {{ task_order.pdf.filename }}
-            </a>
-          </div>
         </div>
-      {{ TotalsBox(task_order=task_order) }}
+        <div>{{task_order.number}}</div>
 
+        <hr>
+
+        <div class="h3">
+          {{ "task_orders.review.funding_summary" | translate }}
+        </div>
+
+        {% for clin in task_order.clins %}
+          <div>
+            {{ "{}".format(clin.jedi_clin_type) | translate}}
+          </div>
+          <table class="fixed-table-wrapper">
+            <thead>
+              <tr>
+                <th>{{ "task_orders.review.clins.amount" | translate }}</th>
+                <th>{{ "task_orders.review.clins.obligated" | translate }}</th>
+                <th>{{ "task_orders.review.clins.pop_start" | translate }}</th>
+                <th>{{ "task_orders.review.clins.pop_end" | translate }}</th>
+                <th>{{ "task_orders.review.clins.loa" | translate }}</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>{{ clin.obligated_amount | dollars }}</td>
+                <td>
+                  {% if clin.is_obligated() %}
+                    {{ "common.yes" | translate }}
+                  {% else %}
+                    {{ "common.no" | translate }}
+                  {% endif %}
+                </td>
+                <td>{{ clin.start_date | formattedDate }}</td>
+                <td>{{ clin.end_date | formattedDate }}</td>
+                <td>
+                  {% for loa in clin.loas %}
+                    <span title='{{ loa }}'>
+                      {{ loa }}
+                    </span>
+                    <br />
+                  {% endfor %}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        {% endfor %}
+
+        <hr>
+
+        <div class="h3">
+          {{ "task_orders.review.supporting_document.title" | translate }}
+        </div>
+        <div class="h4">
+          <a class="icon-link icon-link--download" href="{{ url_for('task_orders.download_task_order_pdf', task_order_id=task_order.id) }}">
+            {{ Icon('check-circle-solid') }}
+            {{ task_order.pdf.filename }}
+          </a>
+        </div>
       </div>
+    {{ TotalsBox(task_order=task_order) }}
+
     </div>
   </div>
 {% endblock %}

templates/task_orders/step_5.html

@@ -1,50 +1,21 @@
-{% extends "portfolios/base.html" %}
+{% extends "task_orders/builder_base.html" %}
 
 {% from "components/alert.html" import Alert %}
 {% from "components/checkbox_input.html" import CheckboxInput %}
-{% from "components/sticky_cta.html" import StickyCTA %}
 
-{% block portfolio_content %}
+{% set action = url_for("task_orders.submit_task_order", task_order_id=task_order_id) %}
-  {% set action = url_for("task_orders.submit_task_order", task_order_id=task_order_id) %}
+{% set next_button_text = "Next: Confirm & Submit" %}
+{% set previous_button_link = url_for("task_orders.review", task_order_id=task_order_id) %}
 
-  <base-form inline-template>
+{% block to_builder_form_field %}
-    <form id="upload-to-pdf" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
+  <div>
-      {{ form.csrf_token }}
+    <h1>Signature confirmation: <em>Task Order #{{task_order.number}}</em></h1>
+  </div>
 
-      {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate )) %}
+  {% call Alert('',
-        <span class="action-group">
+    message="All task orders require a Contracting Officer signature."
-          <input
+  ) %}
-            type="submit"
-            formaction="{{ action }}"
-            tabindex="0"
-            :disabled="!changed"
-            value="Next: Confirm & Submit"
-            form="upload-to-pdf"
-            class="usa-button usa-button-primary">
-          <input
-            type="button"
-            class="usa-button usa-button-secondary"
-            tabindex="0"
-            value="Previous"
-            form="upload-to-pdf"/>
-          <a
-            href="{{ cancel_url }}"
-            class="action-group__action icon-link">
-            {{ "common.cancel" | translate }}
-          </a>
-        </span>
-      {% endcall %}
 
-      <div>
+    {{ CheckboxInput(form.signature) }}
-        <h1>Signature confirmation: <em>Task Order #{{task_order.number}}</em></h1>
+  {% endcall %}
-      </div>
-
-      {% call Alert('',
-        message="All task orders require a Contracting Officer signature."
-      ) %}
-
-        {{ CheckboxInput(form.signature) }}
-      {% endcall %}
-    </form>
-  </base-form>
 {% endblock %}