Owen Leonard
049aa2ceea
This patch replaces jQueryUI tabs on the item circulation alerts page as a simple example to start the process of switching how we implement tabbed interfaces. The patch bumps the Bootstrap version from 3.3.7 to 3.4.1 and adds the tabs component. 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 -> Item circulation alerts. - Confirm that the "Checkout" and "Check-in" tabs look correct and work correctly. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
233 lines
8.3 KiB
Text
233 lines
8.3 KiB
Text
[% USE raw %]
|
|
[% USE Asset %]
|
|
[% USE Branches %]
|
|
[% SET footerjs = 1 %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>Item circulation alerts › Administration › Koha</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
[% FILTER collapse %]
|
|
<style>
|
|
table.grid thead th {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
table.grid tbody th {
|
|
text-align: right;
|
|
}
|
|
|
|
table.grid tbody td {
|
|
font-size: xx-small;
|
|
}
|
|
|
|
table.grid tbody td.info {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
table.grid.active tbody td {
|
|
width: 10%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
table.grid tbody td {
|
|
background-color: #cfc !important;
|
|
color: #111;
|
|
}
|
|
|
|
table.grid td.disabled {
|
|
background-color: #fcc !important;
|
|
}
|
|
|
|
table.grid td.default {
|
|
background-color: #f88 !important;
|
|
}
|
|
</style>
|
|
[% END %]
|
|
</head>
|
|
|
|
<body id="admin_item_circulation_alerts" 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">
|
|
Item circulation alerts
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="main container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-10 col-sm-push-2">
|
|
<main>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<h1>Item circulation alerts</h1>
|
|
<h2>Select a library:</h2>
|
|
<form id="branch_selector" method="get" action="/cgi-bin/koha/admin/item_circulation_alerts.pl">
|
|
<select id="branch" name="branch">
|
|
<option value="*">Default</option>
|
|
[% PROCESS options_for_libraries libraries => Branches.all( selected => branch, unfiltered => 1 ) %]
|
|
</select>
|
|
<input type="submit" name="pick" value="Pick" />
|
|
</form>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<table class="grid">
|
|
<caption>Legend</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Color</th>
|
|
<th>Meaning</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td width="100" class="default"> </td>
|
|
<td class="info">These are disabled for ALL libraries. To change these settings, choose the "Default" library.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="disabled"> </td>
|
|
<td class="info">These are disabled for the current library.</td>
|
|
</tr>
|
|
<tr>
|
|
<td> </td>
|
|
<td class="info">These are enabled.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- /.col-sm-6 -->
|
|
</div> <!-- /.row -->
|
|
|
|
<h2>Circulation alerts for [% Branches.GetName( branch ) || 'Default' | html %]</h2>
|
|
<p>Click on the grid to toggle the settings.</p>
|
|
|
|
|
|
<div id="alerttabs" class="toptabs">
|
|
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li role="presentation" class="active"><a href="#checkout" aria-controls="checkout" role="tab" data-toggle="tab">Checkout</a></li>
|
|
<li role="presentation"><a href="#checkin" aria-controls="checkin" role="tab" data-toggle="tab">Check-in</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<div role="tabpanel" class="tab-pane active" id="checkout">
|
|
<h3>Checkout</h3>
|
|
<table class="grid active" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th> </th>
|
|
[% FOREACH item_type IN item_types %]
|
|
<th>[% item_type.description | html %]</th>
|
|
[% END %]
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
[% FOREACH grid_checkou IN grid_checkout %]
|
|
<tr>
|
|
<th>[% grid_checkou.description | html %]</th>
|
|
[% FOREACH item IN grid_checkou.items %]
|
|
<td class="[% item.class | html %]" id="[% item.id | html %]">[% item.text | html %]</td>
|
|
[% END %]
|
|
</tr>
|
|
[% END %]
|
|
</tbody>
|
|
</table> <!-- /.grid.active -->
|
|
</div> <!-- /#checkout -->
|
|
|
|
<div role="tabpanel" class="tab-pane" id="checkin">
|
|
<h3>Check-in</h3>
|
|
<table class="grid active" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th> </th>
|
|
[% FOREACH item_type IN item_types %]
|
|
<th>[% item_type.description | html %]</th>
|
|
[% END %]
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
[% FOREACH grid_checki IN grid_checkin %]
|
|
<tr>
|
|
<th>[% grid_checki.description | html %]</th>
|
|
[% FOREACH item IN grid_checki.items %]
|
|
<td class="[% item.class | html %]" id="[% item.id | html %]">[% item.text | html %]</td>
|
|
[% END %]
|
|
</tr>
|
|
[% END %]
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> <!-- /.tab-content -->
|
|
|
|
</div> <!-- /#alerttabs -->
|
|
|
|
|
|
</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 %]
|
|
<script>
|
|
var $branch = "[% branch | html %]";
|
|
$(function(){
|
|
|
|
var blocked = _("Blocked!");
|
|
var saving = _("Saving...");
|
|
var disabledForAll = _("Disabled for all");
|
|
var disabledForCurrent = _("Disabled for %s").format($branch);
|
|
|
|
$('#branch_selector input:submit').hide();
|
|
$('#branch').change(function(){
|
|
$('#branch_selector').submit();
|
|
});
|
|
|
|
$('table.grid.active tbody td').click(function(ev){
|
|
var id = this.id;
|
|
var td = $(this);
|
|
if (td.hasClass('default') && $branch != '*') {
|
|
td.html(blocked);
|
|
window.setTimeout(
|
|
function(){ td.html(disabledForAll) },
|
|
3000
|
|
);
|
|
} else {
|
|
td.html(saving);
|
|
$.ajax({
|
|
url : '/cgi-bin/koha/admin/item_circulation_alerts.pl',
|
|
type : 'POST',
|
|
dataType : 'json',
|
|
data : { action: 'toggle', id: id, branch: $branch },
|
|
success : function(response){
|
|
if ($branch == '*' && response.classes.match(/default/)) {
|
|
td.html(disabledForAll);
|
|
} else if (response.classes.match(/disabled/)) {
|
|
td.html(disabledForCurrent);
|
|
} else {
|
|
td.html(' ');
|
|
}
|
|
td.attr('class', response.classes);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
[% END %]
|
|
[% INCLUDE 'intranet-bottom.inc' %]
|