From f753e11f10f8e310834963eb7976386e4db69b61 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Sat, 14 Aug 2021 13:41:19 +1000
Subject: [PATCH] Improve error notification for modal forms

- Scroll to error
- Add red border and background to the form
---
 InvenTree/InvenTree/static/css/inventree.css |  5 ++++
 InvenTree/templates/js/translated/forms.js   | 29 ++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css
index 74b3b63169..d9f3b4beac 100644
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@@ -640,6 +640,11 @@
   z-index: 9999;
 }
 
+.modal-error {
+    border: 2px #F99 solid;
+    background-color: #faf0f0;
+}
+
 .modal-header {
     border-bottom: 1px solid #ddd;
 }
diff --git a/InvenTree/templates/js/translated/forms.js b/InvenTree/templates/js/translated/forms.js
index a11891ff51..d03819a00f 100644
--- a/InvenTree/templates/js/translated/forms.js
+++ b/InvenTree/templates/js/translated/forms.js
@@ -516,6 +516,9 @@ function constructFormBody(fields, options) {
     });
 
     initializeGroups(fields, options);
+
+    // Scroll to the top
+    $(options.modal).find('.modal-form-content-wrapper').scrollTop(0);
 }
 
 
@@ -867,6 +870,8 @@ function handleFormErrors(errors, fields, options) {
         }
     }
 
+    var first_error_field = null;
+
     for (field_name in errors) {
 
         // Add the 'has-error' class
@@ -876,6 +881,10 @@ function handleFormErrors(errors, fields, options) {
 
         var field_errors = errors[field_name];
 
+        if (field_errors && !first_error_field && isFieldVisible(field_name, options)) {
+            first_error_field = field_name;
+        }
+
         // Add an entry for each returned error message
         for (var idx = field_errors.length-1; idx >= 0; idx--) {
 
@@ -889,6 +898,26 @@ function handleFormErrors(errors, fields, options) {
             field_dom.append(html);
         }
     }
+
+    var offset = 0;
+
+    if (first_error_field) {
+        // Ensure that the field in question is visible
+        document.querySelector(`#div_id_${field_name}`).scrollIntoView({
+            behavior: 'smooth',
+        });
+    } else {
+        // Scroll to the top of the form
+        $(options.modal).find('.modal-form-content-wrapper').scrollTop(offset);
+    }
+
+    $(options.modal).find('.modal-content').addClass('modal-error');
+}
+
+
+function isFieldVisible(field, options) {
+
+    return $(options.modal).find(`#div_id_${field}`).is(':visible');
 }