Create upload macro

js/components/forms/funding.js

@@ -4,6 +4,7 @@ import { conformToMask } from 'vue-text-mask'
 import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
+import uploadinput from '../upload_input'
 
 export default {
   name: 'funding',
@@ -13,6 +14,7 @@ export default {
   components: {
     textinput,
     optionsinput,
+    uploadinput,
   },
 
   props: {
@@ -32,7 +34,6 @@ export default {
       clin_02 = 0,
       clin_03 = 0,
       clin_04 = 0,
-      csp_estimate,
     } = this.initialData
 
     return {
@@ -40,7 +41,6 @@ export default {
       clin_02,
       clin_03,
       clin_04,
-      showUpload: !csp_estimate || this.uploadErrors.length > 0,
     }
   },
 
@@ -63,9 +63,6 @@ export default {
   },
 
   methods: {
-    showUploadInput: function() {
-      this.showUpload = true
-    },
     updateBudget: function() {
       document.querySelector('#to-target').innerText = this.totalBudgetStr
     },

js/components/upload_input.js

@@ -6,7 +6,7 @@ import textinput from './text_input'
 import optionsinput from './options_input'
 
 export default {
-  name: 'upload',
+  name: 'uploadinput',
 
   mixins: [FormMixin],
 
@@ -17,8 +17,7 @@ export default {
 
   props: {
     initialData: {
-      type: Object,
-      default: () => ({}),
+      type: String,
     },
     uploadErrors: {
       type: Array,
@@ -27,7 +26,7 @@ export default {
   },
 
   data: function() {
-    const { pdf } = this.initialData
+    const pdf = this.initialData
 
     return {
       showUpload: !pdf || this.uploadErrors.length > 0,

js/index.js

@@ -20,7 +20,7 @@ import NewApplication from './components/forms/new_application'
 import EditEnvironmentRole from './components/forms/edit_environment_role'
 import EditApplicationRoles from './components/forms/edit_application_roles'
 import funding from './components/forms/funding'
-import upload from './components/upload'
+import uploadinput from './components/upload_input'
 import Modal from './mixins/modal'
 import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
@@ -65,7 +65,7 @@ const app = new Vue({
     RequestsList,
     ConfirmationPopover,
     funding,
-    upload,
+    uploadinput,
     DateSelector,
     EditOfficerForm,
   },

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>