Improve task order upload validation handling.

- Display validation errors.
- Rerender validated form data correctly.
- Clear error state correctly.
This commit is contained in:
dandds 2019-06-06 13:40:50 -04:00
parent 318257e32c
commit 159360692f
6 changed files with 48 additions and 14 deletions

View File

@ -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"},
)

View File

@ -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

View File

@ -19,17 +19,15 @@ export default {
initialData: {
type: String,
},
uploadErrors: {
type: Array,
default: () => [],
initialErrors: {
type: Boolean,
},
},
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
},
},

View File

@ -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;
}
}
}
}

View File

@ -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>

View File

@ -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.