Owen Leonard
5fe1ad8ac6
This patch updates the OPAC and staff interface to use Bootstrap 5. Bootstrap CSS assets are now pulled from node_modules and compiled into staff-global.css and opac.css at build time. This update lays the foundations of some other chnages, especially the addition of a dark mode in the future. Hundreds of templates have been updated, mostly with updates to the grid markup. Most of the responsive behavior is still the same with the exception of improved flexibility of headers and footers in both the OPAC and staff interface. The other most common change is to add a new "namespace" to data attributes used by Bootstrap, e.g. "data-bs-target" or "data-bs-toggle". Modal markup has also been updated everywhere. Other common changes: dropdown button markup, alert markup (we now use Bootstrap's "alert alert-warning" and "alert alert-info" instead of our old "dialog alert" and "dialog info"). Bootstrap 5 now uses CSS variables which we can override in our own '_variables.scss' (in both the OPAC and staff) to accomplish a lot of the style overrides which we previously put in staff-global.scss. Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
233 lines
11 KiB
Text
233 lines
11 KiB
Text
[% USE raw %]
|
|
[% USE Asset %]
|
|
[% USE Koha %]
|
|
[% USE KohaDates %]
|
|
[% USE Branches %]
|
|
[% PROCESS 'i18n.inc' %]
|
|
[% SET footerjs = 1 %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>[% FILTER collapse %]
|
|
[% t("Checkout notes") | html %] ›
|
|
[% t("Circulation") | html %] ›
|
|
[% t("Koha") | html %]
|
|
[% END %]</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
</head>
|
|
|
|
<body id="circ_checkout-notes" class="circ">
|
|
|
|
[% WRAPPER 'header.inc' %]
|
|
[% INCLUDE 'circ-search.inc' %]
|
|
[% END %]
|
|
|
|
[% WRAPPER 'sub-header.inc' %]
|
|
[% WRAPPER breadcrumbs %]
|
|
[% WRAPPER breadcrumb_item %]
|
|
<a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a>
|
|
[% END %]
|
|
[% WRAPPER breadcrumb_item bc_active= 1 %]
|
|
<span>Checkout notes</span>
|
|
[% END %]
|
|
[% END #/ WRAPPER breadcrumbs %]
|
|
[% END #/ WRAPPER sub-header.inc %]
|
|
|
|
<div class="main container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<main>
|
|
<div class="row">
|
|
|
|
[% IF Koha.Preference('CircSidebar') %]
|
|
<div class="col-md-10 order-md-2 order-sm-1">
|
|
[% ELSE %]
|
|
<div class="col-md-12 col-lg-10 col-lg-offset-1">
|
|
[% END %]
|
|
[% INCLUDE 'messages.inc' %]
|
|
|
|
<h1>Checkout notes</h1>
|
|
|
|
<div class="alert alert-warning" id="error" style="display:none;"></div>
|
|
|
|
[% IF ( selected_count ) %]
|
|
<div class="alert alert-info">
|
|
[% IF ( op == 'cud-seen' ) %]
|
|
<span>[% selected_count | html %] note(s) marked as seen.</span>
|
|
[% ELSIF ( op == 'cud-notseen' ) %]
|
|
<span>[% selected_count | html %] note(s) marked as not seen.</span>
|
|
[% ELSE %]
|
|
<span>Failed to change the status of [% selected_count | html %] item(s).</span>
|
|
[% END %]
|
|
</div>
|
|
[% END %]
|
|
|
|
[% IF ( notes.count ) %]
|
|
<form id="mark_selected" method="post" action="/cgi-bin/koha/circ/checkout-notes.pl">
|
|
[% INCLUDE 'csrf-token.inc' %]
|
|
<div id="toolbar" class="btn-toolbar">
|
|
<button type="submit" class="btn btn-default markseen" name="op" value="cud-seen" disabled="disabled"><i class="fa-solid fa-eye"></i> Mark seen</button>
|
|
<button type="submit" class="btn btn-default markseen" name="op" value="cud-notseen" disabled="disabled"><i class="fa-solid fa-eye-slash"></i> Mark not seen</button>
|
|
</div>
|
|
|
|
<div class="btn-toolbar selections-toolbar">
|
|
<a class="SelectAll"><i class="fa fa-check"></i> Select all</a>
|
|
| <a class="ClearAll"><i class="fa fa-times"></i> Clear all</a>
|
|
| <a class="HideSeen"><i class="fa fa-minus-square"></i> Hide seen</a>
|
|
| <a class="ShowAll"><i class="fa fa-bars"></i> Show all</a>
|
|
</div>
|
|
|
|
<div class="page-section">
|
|
<table id="notestable">
|
|
<thead>
|
|
<tr>
|
|
<th class="NoSort"> </th>
|
|
<th class="anti-the">Title</th>
|
|
<th>Note</th>
|
|
<th>Date</th>
|
|
<th>Set by</th>
|
|
<th>Status</th>
|
|
<th class="NoSort noExport">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
[% FOREACH note IN notes %]
|
|
<tr>
|
|
<td><input type="checkbox" name="issue_ids" value="[% note.issue_id | html %]"></td>
|
|
<td>[% note.item.biblio.title | html %] - [% note.item.biblio.author | html %] (<a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% note.item.biblionumber | uri %]">[% note.item.barcode | html %]</a>)</td>
|
|
<td>[% note.note | html %]</td>
|
|
<td data-order="[% note.notedate | html %]">[% note.notedate | $KohaDates %]</td>
|
|
<td>[% INCLUDE 'patron-title.inc' patron => note.patron hide_patron_infos_if_needed=1 %]</td>
|
|
<td class="seen[% note.noteseen | html %]">
|
|
[% IF ( note.noteseen == 0 ) %]
|
|
<span id="status_[% note.issue_id | html %]">Not seen</span>
|
|
[% ELSIF ( note.noteseen == 1 ) %]
|
|
<span id="status_[% note.issue_id | html %]">Seen</span>
|
|
[% END %]
|
|
</td>
|
|
<td class="actions">
|
|
[% IF ( note.noteseen == 1 ) %]
|
|
<button name="seen" data-issue_id="[% note.issue_id | html %]" class="seen btn btn-default btn-xs" disabled="disabled"><i class="fa-solid fa-eye"></i> Mark seen</button> <button name="notseen" data-issue_id="[% note.issue_id | html %]" class="notseen btn btn-default btn-xs"><i class="fa-solid fa-eye-slash"></i> Mark not seen</button>
|
|
[% ELSIF ( note.noteseen == 0 ) %]
|
|
<button name="seen" data-issue_id="[% note.issue_id | html %]" class="seen btn btn-default btn-xs"><i class="fa-solid fa-eye"></i> Mark seen</button> <button name="notseen" data-issue_id="[% note.issue_id | html %]" class="notseen btn btn-default btn-xs" disabled="disabled"><i class="fa-solid fa-eye-slash"></i> Mark not seen</button>
|
|
[% END %]
|
|
</td>
|
|
</tr>
|
|
[% END %]
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</form>
|
|
|
|
[% ELSE %]
|
|
<div class="alert alert-info">There are currently no checkout notes.</div>
|
|
[% END %] <!-- notes -->
|
|
|
|
[% IF Koha.Preference('CircSidebar') %]
|
|
</div> <!-- /.col-md-10.order-md-2 -->
|
|
<div class="col-md-2 order-sm-2 order-md-1">
|
|
<aside>
|
|
[% INCLUDE 'circ-nav.inc' %]
|
|
</aside>
|
|
</div> <!-- /.col-md-2.order-md-1 -->
|
|
[% ELSE %]
|
|
</div> <!-- .col-md-12.col-lg-10.col-lg-offset-1 -->
|
|
[% END %]
|
|
|
|
</div> <!-- /.row -->
|
|
</main>
|
|
</div> <!-- /.col-sm-12 -->
|
|
</div> <!-- /.row -->
|
|
|
|
[% MACRO jsinclude BLOCK %]
|
|
[% INCLUDE 'calendar.inc' %]
|
|
[% INCLUDE 'datatables.inc' %]
|
|
<script>
|
|
$(document).ready(function(){
|
|
$("#notestable").dataTable($.extend(true, {}, dataTablesDefaults, {
|
|
"order": [[ 1, "asc" ]],
|
|
"columnDefs": [
|
|
{ "orderable": false, "searchable": false, 'targets': [ 'NoSort' ] },
|
|
{ "type": "anti-the", "targets": [ "anti-the" ] }
|
|
],
|
|
"pagingType": "full"
|
|
}));
|
|
|
|
$(".SelectAll").on("click", function(){
|
|
$("input[name='issue_ids'][type='checkbox']").prop("checked", true);
|
|
$(".markseen").prop("disabled", false);
|
|
});
|
|
|
|
$(".ClearAll").on("click", function(){
|
|
$("input[name='issue_ids'][type='checkbox']").prop("checked", false);
|
|
$(".markseen").prop("disabled", true);
|
|
});
|
|
|
|
$(".HideSeen").on("click", function(){
|
|
$(".seen1").parent().hide();
|
|
});
|
|
|
|
$(".ShowAll").on("click", function(){
|
|
$("tr").show();
|
|
});
|
|
|
|
$("#error").hide();
|
|
|
|
$("#notestable").on("change", "input[type='checkbox']", function(){
|
|
if ( $("input[type='checkbox']").is(":checked") ) {
|
|
$(".markseen").prop("disabled", false);
|
|
} else {
|
|
$(".markseen").prop("disabled", true);
|
|
}
|
|
});
|
|
|
|
function show_error(){
|
|
// FIXME Can be improved by displaying meaningful error.
|
|
$("#error").text(_("Unable to change status of note.")).show();
|
|
}
|
|
|
|
$("#notestable").on("click", "button.seen, button.notseen", function(event){
|
|
event.preventDefault(); // prevent form submission
|
|
var op = $(this).attr("name");
|
|
var issue_id = $(this).data('issue_id');
|
|
|
|
const client = APIClient.circulation;
|
|
if ( op == 'seen' ) {
|
|
client.checkouts.mark_as_seen(issue_id).then(
|
|
success => {
|
|
if (success.seen){
|
|
$("#status_" + issue_id).text(_("Seen"));
|
|
$(event.target).parent().siblings(".seen0").removeClass("seen0").addClass("seen1");
|
|
$(event.target).siblings(".notseen").prop("disabled", false);
|
|
$(event.target).prop("disabled", true);
|
|
} else {
|
|
show_error();
|
|
}
|
|
},
|
|
error => {
|
|
console.warn("Something wrong happened: %s".format(error));
|
|
show_error();
|
|
}
|
|
);
|
|
} else {
|
|
client.checkouts.mark_as_not_seen(issue_id).then(
|
|
success => {
|
|
if (!success.seen){
|
|
$("#status_" + issue_id).text(_("Not seen"));
|
|
$(event.target).parent().siblings(".seen1").removeClass("seen1").addClass("seen0");
|
|
$(event.target).siblings(".seen").prop("disabled", false);
|
|
$(event.target).prop("disabled", true);
|
|
} else {
|
|
show_error();
|
|
}
|
|
},
|
|
error => {
|
|
console.warn("Something wrong happened: %s".format(error));
|
|
show_error();
|
|
}
|
|
);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
[% END %]
|
|
|
|
[% INCLUDE 'intranet-bottom.inc' %]
|