Create upload macro

templates/components/upload_input.html

@@ -0,0 +1,24 @@
+{% macro UploadInput(field, show_label=False) -%}
+<uploadinput inline-template v-bind:initial-data='{{ field.data | tojson }}' v-bind:upload-errors='{{ field.errors | list }}'>
+  <div>
+    <template v-if="showUpload">
+      <div class="usa-input {% if field.errors %} usa-input--error {% endif %}">
+        {% if show_label %}
+          {{ field.label }}
+        {% endif %}
+        {{ field.description }}
+        {{ field }}
+        {% for error in field.errors %}
+          <span class="usa-input__message">{{error}}</span>
+        {% endfor %}
+      </div>
+    </template>
+    <template v-else>
+      <p>Uploaded {{ field.data.filename }}</p>
+      <div>
+        <button type="button" v-on:click="showUploadInput">Change</button>
+      </div>
+    </template>
+  </div>
+</uploadinput>
+{%- endmacro %}

templates/portfolios/task_orders/review.html

@@ -9,6 +9,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/alert.html" import Alert %}
 {% from "components/review_field.html" import ReviewField %}
+{% from "components/upload_input.html" import UploadInput %}
 
 {% block content %}
 
@@ -63,28 +64,7 @@
         <div class="h2">{{ "task_orders.ko_review.task_order_information"| translate }}</div>
 
         <div class="form__sub-fields">
-
-          <upload inline-template v-bind:initial-data='{{ form.data | tojson }}' v-bind:upload-errors='{{ form.pdf.errors | list }}'>
-            <div>
-              <template v-if="showUpload">
-                <div class="usa-input {% if form.pdf.errors %} usa-input--error {% endif %}">
-                  <div class="usa-input__title">{{ form.pdf.label }}</div>
-                  {{ form.pdf.description }}
-                  {{ form.pdf }}
-                  {% for error in form.pdf.errors %}
-                    <span class="usa-input__message">{{error}}</span>
-                  {% endfor %}
-                </div>
-              </template>
-              <template v-else>
-                <p>Uploaded {{ form.pdf.data.filename }}</p>
-                <div>
-                  <button type="button" v-on:click="showUploadInput">Change</button>
-                </div>
-              </template>
-            </div>
-          </upload>
-
+          {{ UploadInput(form.pdf) }}
           {{ TextInput(form.number) }}
           {{ TextInput(form.loa) }}
           {{ TextInput(form.custom_clauses, paragraph=True) }}

templates/task_orders/new/funding.html

@@ -3,6 +3,7 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/options_input.html" import OptionsInput %}
 {% from "components/date_input.html" import DateInput %}
+{% from "components/upload_input.html" import UploadInput %}
 
 {% from "components/icon.html" import Icon %}
 
@@ -32,22 +33,7 @@
       {{ Icon("link")}} Go to Cloud Service Provider’s estimate calculator
     </a></p>
     <p>{{ "task_orders.new.funding.estimate_usage_paragraph" | translate }}</p>
-    <template v-if="showUpload">
-      <div class="usa-input {% if form.csp_estimate.errors %} usa-input--error {% endif %}">
-        {{ form.csp_estimate.label }}
-        {{ form.csp_estimate.description }}
-        {{ form.csp_estimate }}
-        {% for error in form.csp_estimate.errors %}
-          <span class="usa-input__message">{{error}}</span>
-        {% endfor %}
-      </div>
-    </template>
-    <template v-else>
-      <p>Uploaded {{ form.csp_estimate.data.filename }}</p>
-      <div>
-        <button type="button" v-on:click="showUploadInput">Change</button>
-      </div>
-    </template>
+    {{ UploadInput(form.csp_estimate, show_label=True) }}
 
     <hr>