Improve task order upload validation handling.

- Display validation errors.
- Rerender validated form data correctly.
- Clear error state correctly.

atst/forms/task_order.py

@@ -18,7 +18,7 @@ class TaskOrderForm(BaseForm):
         None,
         validators=[
             FileAllowed(["pdf"], translate("forms.task_order.file_format_not_allowed")),
-            FileLength(),
+            FileLength(message=translate("forms.validators.file_length")),
         ],
         render_kw={"accept": ".pdf,application/pdf"},
     )

atst/routes/task_orders/new.py

@@ -8,17 +8,17 @@ from atst.models.permissions import Permissions
 from atst.utils.flash import formatted_flash as flash
 
 
-def render_task_orders_edit(portfolio_id, task_order_id=None):
+def render_task_orders_edit(portfolio_id, task_order_id=None, form=None):
     render_args = {}
 
     if task_order_id:
         task_order = TaskOrders.get(task_order_id)
-        render_args["form"] = TaskOrderForm(
+        render_args["form"] = form or TaskOrderForm(
             number=task_order.number, pdf=task_order.pdf
         )
         render_args["task_order_id"] = task_order_id
     else:
-        render_args["form"] = TaskOrderForm()
+        render_args["form"] = form or TaskOrderForm()
 
     render_args["cancel_url"] = (
         http_request.referrer
@@ -64,4 +64,4 @@ def update(portfolio_id, task_order_id=None):
         )
     else:
         flash("form_errors")
-        return render_task_orders_edit(portfolio_id, task_order_id), 400
+        return render_task_orders_edit(portfolio_id, task_order_id, form), 400

js/components/upload_input.js

@@ -19,17 +19,15 @@ export default {
     initialData: {
       type: String,
     },
-    uploadErrors: {
+    initialErrors: {
-      type: Array,
+      type: Boolean,
-      default: () => [],
     },
   },
 
   data: function() {
-    const pdf = this.initialData
-
     return {
-      attachment: pdf || null,
+      attachment: this.initialData || null,
+      showErrors: this.initialErrors,
     }
   },
 
@@ -39,11 +37,13 @@ export default {
     },
     addAttachment: function(e) {
       this.attachment = e.target.value
+      this.showErrors = false
     },
     removeAttachment: function(e) {
       e.preventDefault()
       this.attachment = null
       this.$refs.attachmentInput.value = null
+      this.showErrors = false
     },
   },
 

styles/elements/_uploader.scss

@@ -1,4 +1,6 @@
 .upload-widget {
+  position: relative;
+
   label.upload-label {
     text-align: right;
     border: 1px solid black;
@@ -21,6 +23,8 @@
 
   input {
     opacity: 0;
+    position: absolute;
+    top: 0;
   }
 }
 
@@ -46,3 +50,22 @@
     font-size: $small-font-size;
   }
 }
+
+.usa-input--error {
+  .upload-widget {
+    label.upload-label {
+      border: 1px solid $color-red;
+      box-shadow: inset 0 0 0 2px $color-red;
+      position: relative;
+
+      .upload-button {
+        margin-left: -3px;
+        border-left: 3px solid $color-red;
+      }
+
+      .icon {
+        top: 0;
+      }
+    }
+  }
+}

templates/components/upload_input.html

@@ -1,14 +1,21 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro UploadInput(field, show_label=False) -%}
-<uploadinput inline-template v-bind:initial-data='{{ field.data | tojson }}' v-bind:upload-errors='{{ field.errors | list }}'>
+<uploadinput
+  inline-template
+  {% if not field.errors %}
+    v-bind:initial-data='{{ field.data | tojson }}'
+  {% else %}
+    v-bind:initial-errors='true'
+  {% endif %}
+  >
   <div>
     <div v-show="hasAttachment" class="uploaded-file">
       {{ Icon("check-circle-solid") }}
       <span class="uploaded-file__name" v-html="baseName"></span>
       <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
     </div>
-    <div v-show="hasAttachment === false" class="usa-input {% if field.errors %} usa-input--error {% endif %}">
+    <div v-show="hasAttachment === false" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
       {% if show_label %}
         {{ field.label }}
       {% endif %}
@@ -18,6 +25,9 @@
           <span class="upload-button">
             Browse
           </span>
+          {% if field.errors %}
+            <span v-show="showErrors">{{ Icon('alert',classes="icon-validation") }}</span>
+          {% endif %}
         </label>
         <input
           v-on:change="addAttachment"
@@ -29,7 +39,7 @@
           type="file">
       </div>
       {% for error in field.errors %}
-        <span class="usa-input__message">{{error}}</span>
+        <span v-show="showErrors" class="usa-input__message">{{error}}</span>
       {% endfor %}
     </div>
   </div>

translations.yaml

@@ -336,6 +336,7 @@ forms:
     list_items_unique_message: Items must be unique
     name_message: 'This field accepts letters, numbers, commas, apostrophes, hyphens, and periods.'
     phone_number_message: Please enter a valid 5 or 10 digit phone number.
+    file_length: Your file may not exceed 50 MB.
 fragments:
   edit_application_form:
     explain: AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.