From b2d877b07c2a2bf963c76fe6f022d5b7537b8b3d Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 7 Apr 2022 16:02:37 +0000
Subject: [PATCH] Bug 30494: Replace the use of jQueryUI Accordion on the table
 settings page

This page updates the table settings page so that it uses Bootstrap's
"Collapse" feature instead of jQueryUI's Accordion.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Table settings.
- You should see a list of table settings which looks much the same as
  it did before, with arrow icons prefixing each section header. All
  panels should be collapsed.
- Test expanding and collapsing panels to confirm it's working
  correctly.
- When you expand a section the heading arrow should change from
  right-pointing to down.
- Make a change to one of the table configurations. After clicking
  "Save" the page should reload with the same panel expanded.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 admin/columns_settings.pl                     |   2 +-
 .../prog/css/src/staff-global.scss            |  71 +++++
 .../prog/en/modules/admin/columns_settings.tt | 275 +++++++++++++-----
 3 files changed, 276 insertions(+), 72 deletions(-)

diff --git a/admin/columns_settings.pl b/admin/columns_settings.pl
index d5b0df9dca..4d040e96a1 100755
--- a/admin/columns_settings.pl
+++ b/admin/columns_settings.pl
@@ -74,7 +74,7 @@ if ( $action eq 'save' ) {
 if ( $action eq 'list' ) {
     my $modules = C4::Utils::DataTables::TablesSettings::get_modules;
     $template->param(
-        panel   => ( $input->param('panel') || 0 ),
+        panel   => defined $input->param('panel') ? $input->param('panel') : undef,
         modules => $modules,
     );
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index 2f84696730..3e06728f5c 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -3315,6 +3315,77 @@ button,
     padding: 3px 5px;
 }
 
+/* Bootstrap Collapse */
+
+.panel {
+    background: #F4F8F9 none;
+    box-shadow: none;
+}
+
+.panel-collapse {
+    background: #FFF none;
+}
+
+.panel-title {
+    a {
+        border-radius: 3px;
+        display: block;
+        padding: 10px 15px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &::before {
+            content: "\f0d7";
+            display: inline-block;
+            font-family: FontAwesome;
+            width: 1em;
+        }
+
+        &:hover {
+            background: #e6f0f2 none;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &.collapsed {
+            &::before {
+                content: "\f0da";
+                display: inline-block;
+                font-family: FontAwesome;
+                width: 1em;
+            }
+
+            &:hover {
+                background: #e6f0f2 none;
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+            }
+        }
+    }
+}
+
+.panel-default {
+    border: 1px solid #B9D8D9;
+    > .panel-heading {
+        background: transparent none;
+        padding: 0;
+
+        + .panel-collapse {
+            > .panel-body {
+                border-top-color: #B9D8D9;
+            }
+        }
+    }
+}
+
+.panel-group {
+    .panel {
+        + .panel {
+            margin-top: 3px;
+        }
+    }
+}
+
 #toolbar {
     .dropdown-menu {
         border-top-width: 1px;
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt
index 1885e780db..0b4d54ecaa 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt
@@ -201,89 +201,229 @@
                         <main>
 
                             <h1>Table settings</h1>
-                            <div id="modules">
-                                <div class="panel_header"><a href="#acqui">Acquisition</a></div>
-                                <div id="acqui">
-                                    <h3>Acquisition tables</h3>
-                                    [% PROCESS pagelist module=modules.acqui modulename="acqui" %]
+                            <div class="panel-group" id="modules" role="tablist" aria-multiselectable="true">
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="acquiHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#acqui" aria-expanded="false" aria-controls="collapseOne">
+                                                Acquisition
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="acqui" class="panel-collapse collapse" role="tabpanel" aria-labelledby="acquiHeading">
+                                        <div class="panel-body">
+                                            <h3>Acquisition tables</h3>
+                                            [% PROCESS pagelist module=modules.acqui modulename="acqui" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#admin">Administration</a></div>
-                                <div id="admin">
-                                    <h3>Administration tables</h3>
-                                    [% PROCESS pagelist module=modules.admin modulename="admin" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="adminHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#admin" aria-expanded="false" aria-controls="collapseOne">
+                                                Administration
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="admin" class="panel-collapse collapse" role="tabpanel" aria-labelledby="adminHeading">
+                                        <div class="panel-body">
+                                            <h3>Administration tables</h3>
+                                            [% PROCESS pagelist module=modules.admin modulename="admin" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#authorities">Authorities</a></div>
-                                <div id="authorities">
-                                    <h3>Authorities tables</h3>
-                                    [% PROCESS pagelist module=modules.authorities modulename="authorities" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="authoritiesHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#authorities" aria-expanded="false" aria-controls="collapseOne">
+                                                Authorities
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="authorities" class="panel-collapse collapse" role="tabpanel" aria-labelledby="authoritiesHeading">
+                                        <div class="panel-body">
+                                            <h3>Authorities tables</h3>
+                                            [% PROCESS pagelist module=modules.authorities modulename="authorities" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#catalog">Catalog</a></div>
-                                <div id="catalogue">
-                                    <h3>Catalogue tables</h3>
-                                    [% PROCESS pagelist module=modules.catalogue modulename="catalogue" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="catalogueHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#catalogue" aria-expanded="false" aria-controls="collapseOne">
+                                                Catalog
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="catalogue" class="panel-collapse collapse" role="tabpanel" aria-labelledby="catalogueHeading">
+                                        <div class="panel-body">
+                                            <h3>Catalogue tables</h3>
+                                            [% PROCESS pagelist module=modules.catalogue modulename="catalogue" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#cataloguing">Cataloging</a></div>
-                                <div id="cataloguing">
-                                    <h3>Cataloguing tables</h3>
-                                    [% PROCESS pagelist module=modules.cataloguing modulename="cataloguing" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="cataloguingHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#cataloguing" aria-expanded="false" aria-controls="collapseOne">
+                                                Cataloging
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="cataloguing" class="panel-collapse collapse" role="tabpanel" aria-labelledby="cataloguingHeading">
+                                        <div class="panel-body">
+                                            <h3>Cataloguing tables</h3>
+                                            [% PROCESS pagelist module=modules.cataloguing modulename="cataloguing" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#circulation">Circulation</a></div>
-                                <div id="circulation">
-                                    <h3>Circulation tables</h3>
-                                    [% PROCESS pagelist module=modules.circ modulename="circ" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="circulationHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#circulation" aria-expanded="false" aria-controls="collapseOne">
+                                                Circulation
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="circulation" class="panel-collapse collapse" role="tabpanel" aria-labelledby="circulationHeading">
+                                        <div class="panel-body">
+                                            <h3>Circulation tables</h3>
+                                            [% PROCESS pagelist module=modules.circ modulename="circ" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#coursereserves">Course reserves</a></div>
-                                <div id="coursereserves">
-                                    <h3>Course reserves tables</h3>
-                                    [% PROCESS pagelist module=modules.coursereserves modulename="coursereserves" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="coursereservesHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#coursereserves" aria-expanded="false" aria-controls="collapseOne">
+                                                Course reserves
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="coursereserves" class="panel-collapse collapse" role="tabpanel" aria-labelledby="coursereservesHeading">
+                                        <div class="panel-body">
+                                            <h3>Course reserves tables</h3>
+                                            [% PROCESS pagelist module=modules.coursereserves modulename="coursereserves" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#ill">Interlibrary loans</a></div>
-                                <div id="ill">
-                                    <h3>Interlibrary loans tables</h3>
-                                    [% PROCESS pagelist module=modules.illrequests modulename="illrequests" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="illHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#ill" aria-expanded="false" aria-controls="collapseOne">
+                                                Interlibrary loans
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="ill" class="panel-collapse collapse" role="tabpanel" aria-labelledby="illHeading">
+                                        <div class="panel-body">
+                                            <h3>Interlibrary loans tables</h3>
+                                            [% PROCESS pagelist module=modules.illrequests modulename="illrequests" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#members">Patrons</a></div>
-                                <div id="members">
-                                    <h3>Patrons tables</h3>
-                                    [% PROCESS pagelist module=modules.members modulename="members" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="membersHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#members" aria-expanded="false" aria-controls="collapseOne">
+                                                Patrons
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="members" class="panel-collapse collapse" role="tabpanel" aria-labelledby="membersHeading">
+                                        <div class="panel-body">
+                                            <h3>Patrons tables</h3>
+                                            [% PROCESS pagelist module=modules.members modulename="members" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#pos">Point of sale</a></div>
-                                <div id="pos">
-                                    <h3>Point of sale tables</h3>
-                                    [% PROCESS pagelist module=modules.pos modulename="pos" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="posHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#pos" aria-expanded="false" aria-controls="collapseOne">
+                                                Point of sale
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="pos" class="panel-collapse collapse" role="tabpanel" aria-labelledby="posHeading">
+                                        <div class="panel-body">
+                                            <h3>Point of sale tables</h3>
+                                            [% PROCESS pagelist module=modules.pos modulename="pos" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#tools">Tools</a></div>
-                                <div id="tools">
-                                    <h3>Tools tables</h3>
-                                    [% PROCESS pagelist module=modules.tools modulename="tools" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="toolsHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#tools" aria-expanded="false" aria-controls="collapseOne">
+                                                Tools
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="tools" class="panel-collapse collapse" role="tabpanel" aria-labelledby="toolsHeading">
+                                        <div class="panel-body">
+                                            <h3>Tools tables</h3>
+                                            [% PROCESS pagelist module=modules.tools modulename="tools" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#opac">OPAC</a></div>
-                                <div id="opac">
-                                    <h3>OPAC tables</h3>
-                                    [% PROCESS pagelist module=modules.opac modulename="opac" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="opacHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#opac" aria-expanded="false" aria-controls="collapseOne">
+                                                OPAC
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="opac" class="panel-collapse collapse" role="tabpanel" aria-labelledby="opacHeading">
+                                        <div class="panel-body">
+                                            <h3>OPAC tables</h3>
+                                            [% PROCESS pagelist module=modules.opac modulename="opac" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#reports">Reports</a></div>
-                                <div id="reports">
-                                    <h3>Reports tables</h3>
-                                    [% PROCESS pagelist module=modules.reports modulename="reports" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="reportsHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#reports" aria-expanded="false" aria-controls="collapseOne">
+                                                Reports
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="reports" class="panel-collapse collapse" role="tabpanel" aria-labelledby="reportsHeading">
+                                        <div class="panel-body">
+                                            <h3>Reports tables</h3>
+                                            [% PROCESS pagelist module=modules.reports modulename="reports" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
-                                <div class="panel_header"><a href="#serials">Serials</a></div>
-                                <div id="serials">
-                                    <h3>Serials tables</h3>
-                                    [% PROCESS pagelist module=modules.serials modulename="serials" %]
+                                <div class="panel panel-default">
+                                    <div class="panel-heading" role="tab" id="serialsHeading">
+                                        <h2 class="panel-title">
+                                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#serials" aria-expanded="false" aria-controls="collapseOne">
+                                                Serials
+                                            </a>
+                                        </h2>
+                                    </div> <!-- /.panel-heading -->
+                                    <div id="serials" class="panel-collapse collapse" role="tabpanel" aria-labelledby="serialsHeading">
+                                        <div class="panel-body">
+                                            <h3>Serials tables</h3>
+                                            [% PROCESS pagelist module=modules.serials modulename="serials" %]
+                                        </div> <!-- /.panel-body -->
+                                    </div> <!-- /.panel-collapse -->
                                 </div>
 
                             </div>
@@ -299,20 +439,13 @@
 
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("js/admin-menu.js") | $raw %]
-    <script>
-        $(document).ready( function() {
-            var accordion = $( "#modules" ).accordion({
-                    collapsible: true,
-                    heightStyle: "content",
-                    header: ".panel_header",
-                [%- IF panel -%]
-                    [%# we were asked to show a specific panel, usually on update %]
-                    active: [%- panel | html -%]
-                [%- ELSE -%]
-                    active: false
-                [%- END -%]
+
+    [%- IF ( panel.defined && panel >= 0 ) -%]
+        <script>
+            $(document).ready( function() {
+                $("#modules a.collapsed:eq(" + Number( [% panel | html %] ) + ")").click();
             });
-        });
-    </script>
+        </script>
+    [%- END -%]
 [% END %]
 [% INCLUDE 'intranet-bottom.inc' %]
-- 
2.39.2