[js] Highlight tab button with errors. #287

Author: fabiocaccamo

admin_interface/static/admin_interface/css/tabbed-changeform.css

@@ -52,6 +52,10 @@
     color: var(--admin-interface-generic-link-active-color);
 }
 
+.admin-interface .tabbed-changeform-tabs .tabbed-changeform-tablink.error {
+    color: var(--error-fg) !important;
+}
+
 .admin-interface .tabbed-changeform-tabs-remaining-space {
     flex: 1;
     border-bottom: 1px solid var(--border-color);

admin_interface/static/admin_interface/tabbed-changeform/tabbed-changeform.js

@@ -4,6 +4,19 @@
 
     scope.tabbedChangeForm = {
 
+        hightlightTabsWithErrors: function() {
+            document.querySelectorAll(".errorlist").forEach((el) => {
+                const tabContent = el.closest(".tabbed-changeform-tabcontent");
+                if (tabContent) {
+                    const tabName = tabContent.id.replace("tabcontent-", "");
+                    const tabEl = document.getElementById("tablink-" + tabName);
+                    if (tabEl) {
+                        tabEl.classList.add("error");
+                    }
+                }
+            });
+        },
+
         openTab: function (event, tabName) {
             this.openTabByName(tabName);
         },
@@ -67,6 +80,7 @@
 
     // scope.tabbedChangeForm.openTabByLocationHash();
     document.addEventListener('DOMContentLoaded', function() {
+        scope.tabbedChangeForm.hightlightTabsWithErrors();
         scope.tabbedChangeForm.openTabByLocationHash();
     }, false);
 

admin_interface/templates/admin/change_form.html

@@ -5,9 +5,9 @@
 
     {% get_admin_interface_setting "show_fieldsets_as_tabs" as show_fieldsets_as_tabs %}
     {% get_admin_interface_setting "show_inlines_as_tabs" as show_inlines_as_tabs %}
-    {% admin_interface_use_changeform_tabs adminform inline_admin_formsets as admin_interface_use_changeform_tabs %}
+    {% admin_interface_use_changeform_tabs adminform inline_admin_formsets as use_changeform_tabs %}
 
-    {% if not admin_interface_use_changeform_tabs %}
+    {% if not use_changeform_tabs %}
 
         {{ block.super }}