From 07ce32139eccbe9022416044df6d5e31b3a565bb Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Fri, 7 Apr 2023 11:26:39 +0200
Subject: [PATCH] MVC: base_form: allow collapsible headers

---
 .../mvc/app/views/layout_partials/base_form.volt       | 10 ++++++++--
 src/opnsense/mvc/app/views/layouts/default.volt        | 10 ++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/opnsense/mvc/app/views/layout_partials/base_form.volt b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
index 8445a09e5..4bc207eb8 100644
--- a/src/opnsense/mvc/app/views/layout_partials/base_form.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
@@ -85,10 +85,16 @@
         </colgroup>
         <thead>
           <tr {% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
-            <td colspan="3"><div style="padding-bottom: 8px; padding-top: 8px; font-size: 17px;"><b>{{field['label']}}</b></div></td>
+            <td colspan="3">
+                <div style="padding-bottom: 5px; padding-top: 5px; font-size: 16px;">
+                    {% if field['collapsible']|default(false)=='true' %}<i class="fa fa-angle-down" aria-hidden="true"></i>{% else %}<i class="fa fa-angle-right" aria-hidden="true"></i>{% endif %}
+                    &nbsp;
+                    <b>{{field['label']}}</b>
+                </div>
+            </td>
           </tr>
         </thead>
-        <tbody>
+        <tbody {% if field['collapsible']|default(false)=='true' %}class="collapsible"{% endif %}>
 {#- endmacro #}
 
             {% else %}
diff --git a/src/opnsense/mvc/app/views/layouts/default.volt b/src/opnsense/mvc/app/views/layouts/default.volt
index 79765d406..88ef2e2e7 100644
--- a/src/opnsense/mvc/app/views/layouts/default.volt
+++ b/src/opnsense/mvc/app/views/layouts/default.volt
@@ -112,6 +112,16 @@
                     });
                 }, 500);
 
+                $('.table').on('click', 'thead', function(event) {
+                    let collapse = $(event.currentTarget).next();
+                    let id = collapse.attr('class');
+                    if (collapse != undefined && id !== undefined && id === "collapsible") {
+                        let icon = $('> tr > td > div > i', event.currentTarget);
+                        icon.toggleClass("fa-angle-down fa-angle-right");
+                        $('> tr > td', collapse).fadeToggle(150);
+                    }
+                });
+
                 // hook in live menu search
                 $.ajax("/api/core/menu/search/", {
                     type: 'get',