Koha/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt
Owen Leonard b2d877b07c 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>
2022-05-02 11:22:57 -10:00

451 lines
29 KiB
Text

[% USE raw %]
[% USE Asset %]
[% USE TablesSettings %]
[% SET footerjs = 1 %]
[% SET panel_id = 0 %]
[% BLOCK pagelist %]
[% IF module.keys and module.keys.size > 0 %]
Jump to:
[% FOR pagename IN module.keys.sort %]
<a href="#[% pagename | url %]">[% pagename | html %]</a>
[% UNLESS loop.last %]<span class="separator"> | </span>[% END %]
[% END %]
[% END %]
<div class="pagelist">
<form method="post" action="/cgi-bin/koha/admin/columns_settings.pl">
<input type="hidden" name="action" value="save" />
<input type="hidden" name="module" value="[% modulename | html %]" />
<input type="hidden" name="panel" value="[% panel_id | html %]" />
[% SET panel_id = panel_id + 1 %]
[% IF module.keys and module.keys.size > 0 %]
[% FOR pagename IN module.keys.sort %]
<h4 class="page_name" id="[% pagename | html %]">Page: [% pagename | html %]</h4>
[% SET tables = module %]
[% IF tables.$pagename.keys and tables.$pagename.keys.size > 0 %]
[% FOR tablename IN tables.$pagename.keys.sort %]
[% 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' %]
<div class="alert">Changes made below will only apply to item subfields that are mapped to the 'items' table. <a href="/cgi-bin/koha/admin/koha2marclinks.pl?tablename=items">Go to Koha to MARC mapping</a></div>
[% END %]
<table>
<caption>
[% IF tablename == 'currencies-table' %]
Currency
[% ELSIF pagename == 'additem' AND tablename == 'itemst' %]
Items editor
[% ELSE %]
Table id: [% tablename | html %]
[% END %]
</caption>
<thead>
<tr>
<th>Column name</th>
<th>Is hidden by default</th>
<th>Cannot be toggled</th>
</tr>
</thead>
<tbody>
[% FOR column IN tables.$pagename.$tablename.columns %]
[% SET value = pagename _ '#' _ tablename _ '#' _ column.columnname %]
<tr>
<td>
[% column.columnname | html %]
<input type="hidden" name="columnid" value="[% value | html %]" />
</td>
<td>
[% IF column.is_hidden %]
[% IF column.cannot_be_modified %]
<input type="checkbox" name="[% value | html %]_hidden" value="1" checked="checked" disabled="disabled" />
<input type="hidden" name="[% value | html %]_hidden" value="1" />
[% ELSE %]
<input type="checkbox" name="[% value | html %]_hidden" value="1" checked="checked" />
[% END %]
[% ELSE %]
[% IF column.cannot_be_modified %]
<input type="checkbox" name="[% value | html %]_hidden" value="1" disabled="disabled" />
<input type="hidden" name="[% value | html %]_hidden" value="0" />
[% ELSE %]
<input type="checkbox" name="[% value | html %]_hidden" value="1" />
[% END %]
[% END %]
</td>
<td>
[% IF column.cannot_be_toggled %]
[% IF column.cannot_be_modified %]
<input type="checkbox" name="[% value | html %]_cannot_be_toggled" value="1" checked="checked" disabled="disabled" />
<input type="hidden" name="[% value | html %]_cannot_be_toggled" value="1" />
[% ELSE %]
<input type="checkbox" name="[% value | html %]_cannot_be_toggled" value="1" checked="checked" />
[% END %]
[% ELSE %]
[% IF column.cannot_be_modified %]
<input type="checkbox" name="[% value | html %]_cannot_be_toggled" value="1" disabled="disabled" />
<input type="hidden" name="[% value | html %]_cannot_be_toggled" value="0" />
[% ELSE %]
<input type="checkbox" name="[% value | html %]_cannot_be_toggled" value="1" />
[% END %]
[% END %]
</td>
</tr>
[% END %]
</tbody>
</table>
[% SET table_settings = TablesSettings.GetTableSettings( modulename, pagename, tablename ) %]
[% IF table_settings.default_display_length %]
<p>
Default display length:
<select name="[% table_id | html %]_default_display_length">
[% IF table_settings.default_display_length == 10 %]
<option value="10" selected="selected">10</option>
[% ELSE %]
<option value="10">10</option>
[% END %]
[% IF table_settings.default_display_length == 20 %]
<option value="20" selected="selected">20</option>
[% ELSE %]
<option value="20">20</option>
[% END %]
[% IF table_settings.default_display_length == 50 %]
<option value="50" selected="selected">50</option>
[% ELSE %]
<option value="50">50</option>
[% END %]
[% IF table_settings.default_display_length == 100 %]
<option value="100" selected="selected">100</option>
[% ELSE %]
<option value="100">100</option>
[% END %]
[% IF table_settings.default_display_length == -1 %]
<option value="-1" selected="selected">All</option>
[% ELSE %]
<option value="-1">All</option>
[% END %]
</select>
</p>
[% END %]
[% IF table_settings.default_sort_order.defined %]
<p>
Default sort order:
<select name="[% pagename | html %]#[% tablename | html %]_default_sort_order">
[% FOR column IN tables.$pagename.$tablename.columns %]
[% IF table_settings.default_sort_order == loop.count - 1 %]
<option value="[% loop.count - 1 %]" selected="selected">[% column.columnname | html %]</option>
[% ELSE %]
<option value="[% loop.count - 1 %]">[% column.columnname | html %]</option>
[% END %]
[% END %]
</select>
</p>
[% END %]
</div>
[% END %]
<fieldset class="action">
<input type="submit" value="Save" />
</fieldset>
[% ELSE %]
There is no table to configure for this module.
[% END %]
[% END %]
[% ELSE %]
There is no page using the table configuration in this module.
[% END %]
</form>
</div>
[% END %]
[% INCLUDE 'doc-head-open.inc' %]
<title>Table settings &rsaquo; Administration &rsaquo; Koha</title>
[% INCLUDE 'doc-head-close.inc' %]
<style>
caption {
font-size: 115%;
}
.datatable_config {
margin-left: 1em;
}
.page_name {
border-top: 1px solid #b9d8d9;
margin-top: 1em;
padding-top: 1em;
}
</style>
</head>
<body id="admin_tables" class="admin">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'prefs-admin-search.inc' %]
<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="/cgi-bin/koha/mainpage.pl">Home</a>
</li>
<li>
<a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a>
</li>
<li>
<a href="#" aria-current="page">
Table settings
</a>
</li>
</ol>
</nav>
<div class="main container-fluid">
<div class="row">
<div class="col-sm-10 col-sm-push-2">
<main>
<h1>Table settings</h1>
<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 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 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 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 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 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 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 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 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 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 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 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 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 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>
</main>
</div> <!-- /.col-sm-10.col-sm-push-2 -->
<div class="col-sm-2 col-sm-pull-10">
<aside>
[% INCLUDE 'admin-menu.inc' %]
</aside>
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
</div> <!-- /.row -->
[% MACRO jsinclude BLOCK %]
[% Asset.js("js/admin-menu.js") | $raw %]
[%- IF ( panel.defined && panel >= 0 ) -%]
<script>
$(document).ready( function() {
$("#modules a.collapsed:eq(" + Number( [% panel | html %] ) + ")").click();
});
</script>
[%- END -%]
[% END %]
[% INCLUDE 'intranet-bottom.inc' %]