Improve task order upload validation handling.
- Display validation errors. - Rerender validated form data correctly. - Clear error state correctly.
This commit is contained in:
parent
318257e32c
commit
159360692f
@ -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"},
|
||||
)
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
},
|
||||
},
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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.
|
||||
|
Loading…
x
Reference in New Issue
Block a user