Add a progress spinner to modal forms

This commit is contained in:
Oliver 2021-12-04 10:44:48 +11:00
parent 9ba6ac423d
commit e9796676c0
3 changed files with 14 additions and 2 deletions

View File

@ -167,8 +167,13 @@ src="{% static 'img/blank_image.png' %}"
{% if order.shipment_date %} {% if order.shipment_date %}
<tr> <tr>
<td><span class='fas fa-truck'></span></td> <td><span class='fas fa-truck'></span></td>
<td>{% trans "Shipped" %}</td> <td>{% trans "Completed" %}</td>
<td>{{ order.shipment_date }}<span class='badge badge-right rounded-pill bg-dark'>{{ order.shipped_by }}</span></td> <td>
{{ order.shipment_date }}
{% if order.shipped_by %}
<span class='badge badge-right rounded-pill bg-dark'>{{ order.shipped_by }}</span>
{% endif %}
</td>
</tr> </tr>
{% endif %} {% endif %}
{% if order.responsible %} {% if order.responsible %}

View File

@ -730,6 +730,9 @@ function submitFormData(fields, options) {
data = options.processBeforeUpload(data); data = options.processBeforeUpload(data);
} }
// Show the progress spinner
$(options.modal).find('#modal-progress-spinner').show();
// Submit data // Submit data
upload_func( upload_func(
options.url, options.url,
@ -737,10 +740,13 @@ function submitFormData(fields, options) {
{ {
method: options.method, method: options.method,
success: function(response) { success: function(response) {
$(options.modal).find('#modal-progress-spinner').hide();
handleFormSuccess(response, options); handleFormSuccess(response, options);
}, },
error: function(xhr) { error: function(xhr) {
$(options.modal).find('#modal-progress-spinner').hide();
switch (xhr.status) { switch (xhr.status) {
case 400: case 400:
handleFormErrors(xhr.responseJSON, fields, options); handleFormErrors(xhr.responseJSON, fields, options);

View File

@ -72,6 +72,7 @@ function createNewModal(options={}) {
<!-- Extra buttons can be inserted here --> <!-- Extra buttons can be inserted here -->
</div> </div>
<span class='flex-item' style='flex-grow: 1;'></span> <span class='flex-item' style='flex-grow: 1;'></span>
<h4><span id='modal-progress-spinner' class='fas fa-circle-notch fa-spin' style='display: none;'></span></h4>
<button type='button' class='btn btn-secondary' id='modal-form-close' data-bs-dismiss='modal'>{% trans "Cancel" %}</button> <button type='button' class='btn btn-secondary' id='modal-form-close' data-bs-dismiss='modal'>{% trans "Cancel" %}</button>
<button type='button' class='btn btn-primary' id='modal-form-submit'>{% trans "Submit" %}</button> <button type='button' class='btn btn-primary' id='modal-form-submit'>{% trans "Submit" %}</button>
</div> </div>