Bugzilla – Attachment 178760 Details for
Bug 37094
Improve layout of serial claims page
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 37094: Improve layout of serial claims page
Bug-37094-Improve-layout-of-serial-claims-page.patch (text/plain), 18.22 KB, created by
Owen Leonard
on 2025-02-26 17:05:55 UTC
(
hide
)
Description:
Bug 37094: Improve layout of serial claims page
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2025-02-26 17:05:55 UTC
Size:
18.22 KB
patch
obsolete
>From 36e54eed1dc427ca0a350868e24c85082e1366f1 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Tue, 3 Dec 2024 19:00:42 +0000 >Subject: [PATCH] Bug 37094: Improve layout of serial claims page > >This patch updates the serial claims interface to hopefully make it more >usable: > >- Vendor selection and filter issues forms are in the sidebar >- The "Download selected" and "Send notification" forms are now in their > own columns at the bottom of the table of issues. >- NEW: The "Download selected" and "Send notification" forms are > disabled unless one or more issues are selected. > >To test you'll need more than one vendor with subscriptions that have >late issues. > >- Go to Serials -> Claims. >- You should see a "Choose vendor" form in the main part of the page. > - Choose a vendor. > - After selecting a vendor you should see the vendor selection form in > the sidebar along with a "Filter missing issues" form. > - Confirm that both forms work correctly. >- In the main body of the page you should see the table of missing > issues. > ** Previously this table was sorted by default on the checkbox column. > Since that doesn't make sense I moved the default sort to the > "Since" column. >- Below the table of issues should should see the "Download selected" > form. If you have a claim notice defined, you'll also see a "Send > notification" form, each in their own column. > - These forms should initially be disabled. > - When you check a checkbox or click the "Select all" control at the > top of the checkbox column the forms should become active. > - Confirm that both forms work correctly. > >Sponsored-by: Athens County Public Libraries >Signed-off-by: David Nind <david@davidnind.com> >--- > .../prog/en/includes/serials-filters.inc | 29 +++ > .../prog/en/includes/serials-menu.inc | 1 + > .../prog/en/modules/serials/claims.tt | 193 ++++++++++-------- > 3 files changed, 143 insertions(+), 80 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/serials-filters.inc > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-filters.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-filters.inc >new file mode 100644 >index 00000000000..aa17e093cc8 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-filters.inc >@@ -0,0 +1,29 @@ >+[% IF letters %] >+ [% IF ( missingissues && supplierid ) %] >+ [% PROCESS select_vendor context => "sidebar" %] >+ [% END %] >+[% END %] >+ >+[% IF ( missingissues ) %] >+ <form action="claims.pl" id="filter_claims_form"> >+ <fieldset class="brief"> >+ <h4>Filter missing issues</h4> >+ <legend class="sr-only">Filter missing issues</legend> >+ <ol> >+ <li> >+ <label for="from">From:</label> >+ <input type="text" name="begindate" id="from" value="[% begindate | html %]" size="10" maxlength="10" class="flatpickr" data-date_to="to" /> >+ </li> >+ <li> >+ <label for="to">To:</label> >+ <input type="text" name="enddate" id="to" value="[% enddate | html %]" size="10" maxlength="10" class="flatpickr" /> >+ <span class="hint">[% INCLUDE 'date-format.inc' %]</span> >+ </li> >+ </ol> >+ </fieldset> >+ <fieldset class="action"> >+ <input id="filterByDate" class="btn btn-primary" type="button" value="OK" /> >+ <input type="reset" class="btn btn-default" value="Clear" id="clearfilter" /> >+ </fieldset> >+ </form> >+[% END %] >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-menu.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-menu.inc >index 0fb23fdb8cd..53cb2e5414a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-menu.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-menu.inc >@@ -1,4 +1,5 @@ > <div id="serials-menu" class="sidebar_menu"> >+ [% INCLUDE "serials-filters.inc" %] > <h5>Serials</h5> > <ul> > [% IF ( subscriptionid ) %] >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/claims.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/claims.tt >index d16381bfb93..24c730e303a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/claims.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/claims.tt >@@ -67,6 +67,7 @@ > <div class="alert alert-warning">No missing issues found.</div> > [% ELSE %] > <div class="alert alert-info">Please choose a vendor.</div> >+ [% PROCESS select_vendor context => "main" %] > [% END %] > [% END %] > [% END %] >@@ -79,45 +80,16 @@ > <div class="alert alert-warning"> No claims notice defined. <a href="/cgi-bin/koha/tools/letter.pl">Please define one</a>. </div> > [% END %] > >- <form id="claims" name="claims" action="claims.pl" method="get"> >- <fieldset> >- <label for="supplierid">Vendor: </label> >- <select id="supplierid" name="supplierid"> >- [% FOREACH suploo IN suploop %] >- <option value="[% suploo.id | html %]" [% IF suploo.selected %]selected="selected"[% END %]> [% suploo.name | html %] ([% suploo.count | html %]) </option> >- [% END %] >- </select> >- <input type="submit" class="btn btn-primary" value="OK" /> >- </fieldset> >- </form> >- <!-- /#claims --> >- > [% IF ( missingissues ) %] > <h3>Missing issues</h3> >- <form method="get" action="claims.pl" id="filter_claims_form"> >- <fieldset class="rows"> >- <legend>Filters:</legend> >- <ol> >- <li> >- <label for="from">From:</label> >- <input type="text" name="begindate" id="from" value="[% begindate | html %]" size="10" maxlength="10" class="flatpickr" data-date_to="to" /> >- <label for="to" style="float:none;">To:</label> >- <input type="text" name="enddate" id="to" value="[% enddate | html %]" size="10" maxlength="10" class="flatpickr" /> >- <span class="hint">[% INCLUDE 'date-format.inc' %]</span> >- <input id="filterByDate" type="button" value="OK" /> >- <a href="#" id="clearfilter"><i class="fa fa-times"></i> Clear filter</a> >- </li> >- </ol> >- </fieldset> >- </form> > >- <fieldset> >- <form action="claims.pl" method="post" id="claims_form"> >+ <form action="claims.pl" method="post" id="claims_form"> >+ <div class="page-section"> > [% INCLUDE 'csrf-token.inc' %] > <table id="claimst"> > <thead> > <tr> >- <th><input type="checkbox" id="CheckAll" /></th> >+ <th class="NoSort"><input type="checkbox" id="CheckAll" /></th> > <th>Vendor</th> > <th>Library</th> > <th class="anti-the">Title</th> >@@ -138,7 +110,7 @@ > <tr> > <td> > [% UNLESS missingissue.cannot_claim %] >- <input type="checkbox" name="serialid" value="[% missingissue.serialid | html %]" /> >+ <input type="checkbox" class="select_serial" name="serialid" value="[% missingissue.serialid | html %]" /> > [% END %] > </td> > <td>[% missingissue.name | html %]</td> >@@ -179,65 +151,111 @@ > </tfoot> > </table> > <!-- /#claimst --> >+ </div> >+ <!-- /.page-section --> > >+ <hr /> >+ >+ <div class="row"> > [% IF csv_profiles.count %] >- <fieldset class="action"> >- <label for="csv_code">Select CSV profile:</label> >- <select id="csv_profile_for_export"> >- [% FOR csv IN csv_profiles %] >- <option value="[% csv.export_format_id | html %]">[% csv.profile | html %]</option> >- [% END %] >- </select> >- <span class="exportSelected"><a id="ExportSelected" href="/cgi-bin/koha/serials/claims.pl">Download selected claims</a></span> >- </fieldset> >+ <div class="col"> >+ <fieldset class="serial_batch_op" disabled="disabled"> >+ <fieldset class="brief"> >+ <legend>Download selected claims</legend> >+ <label for="csv_profile_for_export">Select CSV profile:</label> >+ <select id="csv_profile_for_export"> >+ [% FOR csv IN csv_profiles %] >+ <option value="[% csv.export_format_id | html %]">[% csv.profile | html %]</option> >+ [% END %] >+ </select> >+ <fieldset class="action"> >+ <button class="btn btn-primary" id="ExportSelected" type="button">Download selected claims</button> >+ </fieldset> >+ </fieldset> >+ </fieldset> >+ </div> > [% END %] > > [% IF letters %] >- <fieldset class="action"> >- <label for="letter_code">Select notice:</label> >- <select name="letter_code" id="letter_code"> >- [% FOREACH letter IN letters %] >- <option value="[% letter.code | html %]">[% letter.name | html %]</option> >- [% END %] >- </select> >- <input type="hidden" name="op" value="cud-send_alert" /> >- <input type="hidden" name="supplierid" value="[% supplierid | html %]" /> >- <input type="submit" name="submit" class="btn btn-primary" value="Send notification" /> >- </fieldset> >+ <div class="col"> >+ <fieldset class="serial_batch_op" disabled="disabled"> >+ <fieldset class="brief"> >+ <legend>Send claim notification</legend> >+ <label for="letter_code">Select notice:</label> >+ <select name="letter_code" id="letter_code"> >+ [% FOREACH letter IN letters %] >+ <option value="[% letter.code | html %]">[% letter.name | html %]</option> >+ [% END %] >+ </select> >+ <fieldset class="action"> >+ <input type="hidden" name="op" value="cud-send_alert" /> >+ <input type="hidden" name="supplierid" value="[% supplierid | html %]" /> >+ <input type="submit" name="submit" class="btn btn-primary" value="Send notification" /> >+ </fieldset> >+ </fieldset> >+ </fieldset> >+ </div> > [% END %] >- </form> >- <!-- /#claims_form --> >- </fieldset> >+ </div> >+ </form> >+ <!-- /#claims_form --> > [% END # /missingissues %] > [% END %] > >+[% BLOCK select_vendor %] >+ <form class="select_vendor" name="claims" action="claims.pl" method="get"> >+ [% IF ( context == "main") %] >+ [% SET form_class = "rows" %] >+ [% ELSE %] >+ [% SET form_class = "brief" %] >+ [% END %] >+ <fieldset class="[% form_class | html %]"> >+ <h4>Choose vendor</h4> >+ <label class="sr-only" for="supplierid">Choose vendor: </label> >+ <select id="supplierid" name="supplierid"> >+ [% FOREACH suploo IN suploop %] >+ [% IF ( suploo.selected ) %] >+ <option value="[% suploo.id | html %]" selected="selected"> [% suploo.name | html %] ([% suploo.count | html %]) </option> >+ [% ELSE %] >+ <option value="[% suploo.id | html %]"> [% suploo.name | html %] ([% suploo.count | html %]) </option> >+ [% END %] >+ [% END %] >+ </select> >+ </fieldset> >+ <fieldset class="action"> >+ <input type="submit" class="btn btn-primary" value="OK" /> >+ </fieldset> >+ </form> >+ <!-- /#claims --> >+[% END %] >+ > [% MACRO jsinclude BLOCK %] > [% INCLUDE 'calendar.inc' %] > [% INCLUDE 'datatables.inc' %] > <script> > var sTable; >- $(document).ready(function () { >+ $(document).ready(function() { >+ enableSelectedActions(); > sTable = $("#claimst").kohaTable({ >- dom: "t", >- columnDefs: [ >- { targets: [0], orderable: false, searchable: false }, >- { type: "anti-the", targets: ["anti-the"] }, >+ "dom": 't', >+ "order": [[ 7, "asc" ]], >+ "columnDefs": [ >+ { 'sortable': false, 'targets': [ 'NoSort' ] }, >+ { "type": "anti-the", "targets": [ 'anti-the'] } > ], >- paginate: false, >- }); >- $("#supplierid").change(function () { >- $("#claims").submit(); >- }); >+ "paging": false >+ })); > > // Checkboxes : Select All / None >- $("span.checkall").html('<input type="checkbox" name="CheckAll"> ' + _("Check all") + "</input>"); >+ $("span.checkall").html("<input type=\"checkbox\" name=\"CheckAll\"> "+_("Check all")+"</input>"); > >- $("#CheckAll").click(function () { >- $("#claimst tr:visible :checkbox").prop("checked", $("#CheckAll").is(":checked")); >+ $("#CheckAll").click(function() { >+ $("#claimst tr:visible :checkbox").prop('checked', $("#CheckAll").is(':checked')); >+ enableSelectedActions(); > }); > > // Generates a dynamic link for exporting the selections data as CSV >- $("#ExportSelected").click(function () { >+ $("#ExportSelected").click(function() { > // We need to use "input[name=serialid]:checked" instead of "input:checked". Otherwise, the "check all" box will pass the value of "on" as a serialid, which produces a SQL error. > var selected = $("input[name=serialid]:checked"); > >@@ -247,33 +265,46 @@ > } > > // Building the url from currently checked boxes >- var url = "/cgi-bin/koha/serials/lateissues-export.pl?supplierid=&op=claims"; >+ var url = '/cgi-bin/koha/serials/lateissues-export.pl?supplierid=&op=claims'; > for (var i = 0; i < selected.length; i++) { >- url += "&serialid=" + selected[i].value; >+ url += '&serialid=' + selected[i].value; > } >- url += "&csv_profile=" + $("#csv_profile_for_export option:selected").val(); >+ url += '&csv_profile=' + $("#csv_profile_for_export option:selected").val(); > // And redirecting to the CSV page > location.href = url; > return false; > }); >- $("#filterByDate").on("click", function (e) { >+ $("#filterByDate").on("click",function(e){ > e.preventDefault(); > filterByDate(); > }); >- $("#clearfilter").on("click", function (e) { >+ $("#clearfilter").on("click",function(e){ > e.preventDefault(); > $("#from").flatpickr().clear(); > $("#to").flatpickr().clear(); > $("table#claimst tbody tr").show(); > }); >- $("#claims_form").on("submit", function () { >+ $("#claims_form").on("submit",function(){ > return checkForm(); > }); >- $("#filter_claims_form").on("submit", function () { >+ $("#filter_claims_form").on("submit",function(){ > return false; > }); >+ >+ $(".select_serial").on("change", function(){ >+ enableSelectedActions(); >+ }); > }); > >+ function enableSelectedActions() { >+ var checkedBoxes = $(".select_serial:checked"); >+ if ( checkedBoxes.length ) { >+ $(".serial_batch_op").prop( "disabled", false ); >+ } else { >+ $(".serial_batch_op").prop( "disabled", true ); >+ } >+ } >+ > // Checks if the form can be sent (at least one checkbox must be checked) > function checkForm() { > if ($("input:checked").length == 0) { >@@ -285,7 +316,7 @@ > // Filter by date > function filterByDate() { > var beginDate = new Date($("#from").val()).getTime(); >- var endDate = new Date($("#to").val()).getTime(); >+ var endDate = new Date($("#to").val()).getTime(); > > // Checks if the beginning date is valid > if (!parseInt(beginDate)) { >@@ -311,12 +342,14 @@ > $("table#claimst tbody tr").hide(); > > // For each date in the table >- $(".planneddate").each(function () { >+ $(".planneddate").each(function() { >+ > // We make a JS Date Object, according to the locale > var pdate = Date_from_syspref($(this).text()).getTime(); > > // And checks if the date is between the beginning and ending dates >- if (pdate > beginDate && pdate < endDate) { >+ if (pdate > beginDate && >+ pdate < endDate) { > // If so, we can show the row > $(this).parent().show(); > } >-- >2.39.5
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 37094
:
167741
|
168037
|
170085
|
171096
|
175094
|
176289
|
177993
|
178760
|
178761
|
178806