From 9f5618a51fabf78257fbbddaf31c18ff39e15638 Mon Sep 17 00:00:00 2001 From: Oliver Date: Mon, 28 Feb 2022 23:57:28 +1100 Subject: [PATCH 1/3] Adds option to reload a form after success, rather than dismissing it --- InvenTree/templates/js/translated/forms.js | 53 +++++++++++++++------- 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/InvenTree/templates/js/translated/forms.js b/InvenTree/templates/js/translated/forms.js index 9ee3dcace3..d5be70e4fe 100644 --- a/InvenTree/templates/js/translated/forms.js +++ b/InvenTree/templates/js/translated/forms.js @@ -934,16 +934,14 @@ function getFormFieldValue(name, field={}, options={}) { */ function handleFormSuccess(response, options) { - // Close the modal - if (!options.preventClose) { - // Note: The modal will be deleted automatically after closing - $(options.modal).modal('hide'); - } - // Display any required messages // Should we show alerts immediately or cache them? var cache = (options.follow && response.url) || options.redirect || options.reload; + if (options.reloadFormAfterSuccess) { + cache = false; + } + // Display any messages if (response && (response.success || options.successMessage)) { showAlertOrCache(response.success || options.successMessage, cache, {style: 'success'}); @@ -960,21 +958,42 @@ function handleFormSuccess(response, options) { if (response && response.danger) { showAlertOrCache(response.danger, cache, {style: 'danger'}); } - + if (options.onSuccess) { // Callback function options.onSuccess(response, options); } - if (options.follow && response.url) { - // Follow the returned URL - window.location.href = response.url; - } else if (options.reload) { - // Reload the current page - location.reload(); - } else if (options.redirect) { - // Redirect to a specified URL - window.location.href = options.redirect; + if (options.reloadFormAfterSuccess) { + // Instead of closing the form and going somewhere else, + // reload (empty) the form so the user can input more data + + // Reset the status of the "submit" button + if (options.modal) { + $(options.modal).find('#modal-form-submit').prop('disabled', false); + } + + // Remove any error flags from the form + clearFormErrors(options); + + } else { + + // Close the modal + if (!options.preventClose) { + // Note: The modal will be deleted automatically after closing + $(options.modal).modal('hide'); + } + + if (options.follow && response.url) { + // Follow the returned URL + window.location.href = response.url; + } else if (options.reload) { + // Reload the current page + location.reload(); + } else if (options.redirect) { + // Redirect to a specified URL + window.location.href = options.redirect; + } } } @@ -988,6 +1007,8 @@ function clearFormErrors(options={}) { if (options && options.modal) { // Remove the individual error messages $(options.modal).find('.form-error-message').remove(); + + $(options.modal).find('.modal-content').removeClass('modal-error'); // Remove the "has error" class $(options.modal).find('.form-field-error').removeClass('form-field-error'); From 7170e16ae7a3e948228e588ecd9a9fa9c062131e Mon Sep 17 00:00:00 2001 From: Oliver Date: Tue, 1 Mar 2022 00:05:30 +1100 Subject: [PATCH 2/3] Adds ability to display "success" messages inside a persistant modal dialog --- .../static/script/inventree/notification.js | 5 +++-- InvenTree/templates/js/translated/forms.js | 15 ++++++++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/InvenTree/InvenTree/static/script/inventree/notification.js b/InvenTree/InvenTree/static/script/inventree/notification.js index f6bdf3bc57..c4816d4b5c 100644 --- a/InvenTree/InvenTree/static/script/inventree/notification.js +++ b/InvenTree/InvenTree/static/script/inventree/notification.js @@ -37,7 +37,6 @@ function showAlertOrCache(message, cache, options={}) { if (cache) { addCachedAlert(message, options); } else { - showMessage(message, options); } } @@ -82,6 +81,8 @@ function showMessage(message, options={}) { var timeout = options.timeout || 5000; + var target = options.target || $('#alerts'); + var details = ''; if (options.details) { @@ -111,7 +112,7 @@ function showMessage(message, options={}) { `; - $('#alerts').append(html); + target.append(html); // Remove the alert automatically after a specified period of time $(`#alert-${id}`).delay(timeout).slideUp(200, function() { diff --git a/InvenTree/templates/js/translated/forms.js b/InvenTree/templates/js/translated/forms.js index d5be70e4fe..c288ada27f 100644 --- a/InvenTree/templates/js/translated/forms.js +++ b/InvenTree/templates/js/translated/forms.js @@ -942,9 +942,22 @@ function handleFormSuccess(response, options) { cache = false; } + var msg_target = null; + + if (options.modal && options.reloadFormAfterSuccess) { + // If the modal is persistant, the target for any messages should be the modal! + msg_target = $(options.modal).find('#pre-form-content'); + } + // Display any messages if (response && (response.success || options.successMessage)) { - showAlertOrCache(response.success || options.successMessage, cache, {style: 'success'}); + showAlertOrCache( + response.success || options.successMessage, + cache, + { + style: 'success', + target: msg_target, + }); } if (response && response.info) { From 42a75863fe2c4b214f4aebf365442f9d0c83596b Mon Sep 17 00:00:00 2001 From: Oliver Date: Tue, 1 Mar 2022 00:25:14 +1100 Subject: [PATCH 3/3] Adds a "persist" option for modal forms --- InvenTree/part/templates/part/category.html | 4 ++ InvenTree/templates/js/translated/forms.js | 47 +++++++++++++++++---- 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/InvenTree/part/templates/part/category.html b/InvenTree/part/templates/part/category.html index 4de0005672..e02c77509d 100644 --- a/InvenTree/part/templates/part/category.html +++ b/InvenTree/part/templates/part/category.html @@ -313,6 +313,10 @@ fields: fields, groups: partGroups(), title: '{% trans "Create Part" %}', + reloadFormAfterSuccess: true, + persist: true, + persistMessage: '{% trans "Create another part after this one" %}', + successMessage: '{% trans "Part created successfully" %}', onSuccess: function(data) { // Follow the new part location.href = `/part/${data.pk}/`; diff --git a/InvenTree/templates/js/translated/forms.js b/InvenTree/templates/js/translated/forms.js index c288ada27f..2946b77e4e 100644 --- a/InvenTree/templates/js/translated/forms.js +++ b/InvenTree/templates/js/translated/forms.js @@ -542,6 +542,11 @@ function constructFormBody(fields, options) { insertConfirmButton(options); } + // Insert "persist" button (if required) + if (options.persist) { + insertPersistButton(options); + } + // Display the modal $(modal).modal('show'); @@ -616,6 +621,22 @@ function insertConfirmButton(options) { } +/* Add a checkbox to select if the modal will stay open after success */ +function insertPersistButton(options) { + + var message = options.persistMessage || '{% trans "Keep this form open" %}'; + + var html = ` +
+ + +
+ `; + + $(options.modal).find('#modal-footer-buttons').append(html); +} + + /* * Extract all specified form values as a single object */ @@ -938,13 +959,23 @@ function handleFormSuccess(response, options) { // Should we show alerts immediately or cache them? var cache = (options.follow && response.url) || options.redirect || options.reload; - if (options.reloadFormAfterSuccess) { + // Should the form "persist"? + var persist = false; + + if (options.persist && options.modal) { + // Determine if this form should "persist", or be dismissed? + var chk = $(options.modal).find('#modal-persist'); + + persist = chk.exists() && chk.prop('checked'); + } + + if (persist) { cache = false; } var msg_target = null; - if (options.modal && options.reloadFormAfterSuccess) { + if (persist) { // If the modal is persistant, the target for any messages should be the modal! msg_target = $(options.modal).find('#pre-form-content'); } @@ -971,13 +1002,8 @@ function handleFormSuccess(response, options) { if (response && response.danger) { showAlertOrCache(response.danger, cache, {style: 'danger'}); } - - if (options.onSuccess) { - // Callback function - options.onSuccess(response, options); - } - if (options.reloadFormAfterSuccess) { + if (persist) { // Instead of closing the form and going somewhere else, // reload (empty) the form so the user can input more data @@ -997,6 +1023,11 @@ function handleFormSuccess(response, options) { $(options.modal).modal('hide'); } + if (options.onSuccess) { + // Callback function + options.onSuccess(response, options); + } + if (options.follow && response.url) { // Follow the returned URL window.location.href = response.url;