From eaa5c939220669a15aadee7bb68233058913b036 Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Thu, 7 Feb 2019 13:12:30 -0500
Subject: [PATCH] Create upload macro

---
 js/components/forms/funding.js               |  7 ++----
 js/components/{upload.js => upload_input.js} |  7 +++---
 js/index.js                                  |  4 ++--
 templates/components/upload_input.html       | 24 ++++++++++++++++++++
 templates/portfolios/task_orders/review.html | 24 ++------------------
 templates/task_orders/new/funding.html       | 18 ++-------------
 6 files changed, 35 insertions(+), 49 deletions(-)
 rename js/components/{upload.js => upload_input.js} (86%)
 create mode 100644 templates/components/upload_input.html

diff --git a/js/components/forms/funding.js b/js/components/forms/funding.js
index 20b25a2c..8e4497a6 100644
--- a/js/components/forms/funding.js
+++ b/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
     },
diff --git a/js/components/upload.js b/js/components/upload_input.js
similarity index 86%
rename from js/components/upload.js
rename to js/components/upload_input.js
index a53c1bb1..a9b31460 100644
--- a/js/components/upload.js
+++ b/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,
diff --git a/js/index.js b/js/index.js
index 8fb30039..f2f82bc9 100644
--- a/js/index.js
+++ b/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,
   },
diff --git a/templates/components/upload_input.html b/templates/components/upload_input.html
new file mode 100644
index 00000000..b6835484
--- /dev/null
+++ b/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 %}
diff --git a/templates/portfolios/task_orders/review.html b/templates/portfolios/task_orders/review.html
index 2caa0167..e19054d4 100644
--- a/templates/portfolios/task_orders/review.html
+++ b/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) }}
diff --git a/templates/task_orders/new/funding.html b/templates/task_orders/new/funding.html
index cc012474..cced51f7 100644
--- a/templates/task_orders/new/funding.html
+++ b/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>