Bug 37955: Fix table's 'configure' button to open correct column settings

This patch updates markup and JS code on the table settings page so that
clicking a table's "configure" button will open the right panel and
scroll you to the correct table.

The patch also overrides Bootstrap's default table caption positioning
so that captions are above the table instead of below them.
Unfortunately this property isn't in Bootstrap's _variables.

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_interface).

- Find a table in the staff interface which has a "Configure" button,
  e.g. Administration -> Libraries.
- Click the "Configure" button.
- When you arrive at the table settings page the correct panel should be
  expanded (in this example, Administration), and the page should scroll
  to the correct table (in this example, libraries).
  - The table caption ("Table id: libraries") should appear before the
    table instead of after.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
Owen Leonard 2024-09-18 12:57:40 +00:00 committed by Martin Renvoize
parent 7cd31e98e0
commit fa1b95ebf6
Signed by: martin.renvoize
GPG key ID: 422B469130441A0F
2 changed files with 5 additions and 4 deletions

View file

@ -6,6 +6,7 @@
table {
border-collapse: collapse;
caption-side: top;
thead {
border-bottom: 2px solid $table-border-color;

View file

@ -30,7 +30,7 @@
[% END %]
[% IF tables.$pagename.keys and tables.$pagename.keys.size > 0 %]
[% FOR tablename IN tables.$pagename.keys.sort %]
[% SET table_id = pagename _ '#' _ tablename %]
[% SET table_id = pagename _ '_' _ tablename %]
<div class="datatable_config" id="[% table_id | html %]">
<input type="hidden" name="table_id" value="[% table_id| html %]" />
[% IF pagename == 'additem' AND tablename == 'itemst' %]
@ -380,12 +380,12 @@
[%- IF ( panel.defined ) -%]
<script>
$(document).ready( function() {
$("#[% panel | uri %]Toggle").click();
$("#[% panel | uri %]_panel").collapse("show");
[%- IF page.defined -%]
$("#[% panel | uri %]_panel").on('shown.bs.collapse', function () {
$('html, body').animate({
[%- IF table.defined -%]
scrollTop: ($("#[% page | uri %]#[% table | uri %]").offset().top)
scrollTop: ($("#[% page | uri %]_[% table | uri %]").offset().top)
[%- ELSE -%]
scrollTop: ($("#[% page | uri %]").offset().top)
[%- END -%]