Attachment 171096 Details for Bug 37094 – Bug 37094: Improve layout of serial claims page

[patch] Bug 37094: Improve layout of serial claims page

Bug-37094-Improve-layout-of-serial-claims-page.patch (text/plain), 26.76 KB, created by Owen Leonard on 2024-09-05 16:17:09 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2024-09-05 16:17:09 UTC

Size: 26.76 KB

patch

obsolete

>From 896e4d16c62238ea375636721d6cf08f3013ead1 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 12 Oct 2023 12:51:32 +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: Michaela Sieber <michaela.sieber@kit.edu>
>---
> .../prog/css/src/staff-global.scss            |  16 +
> .../prog/en/modules/serials/claims.tt         | 309 ++++++++++++------
> 2 files changed, 223 insertions(+), 102 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>index 2bc5c5db27..e40a4cda66 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -385,6 +385,11 @@ aside {
>                 a {
>                     display: block;
>                     flex-grow: 1;
>+
>+                    + input[type="reset"] {
>+                        flex-grow: 0;
>+                        margin-left: .5rem;
>+                    }
>                 }
>             }
>         }
>@@ -1055,6 +1060,17 @@ fieldset {
>         }
>     }
> 
>+    &[disabled] {
>+        legend,
>+        label,
>+        select,
>+        input {
>+            cursor: not-allowed;
>+            filter: alpha( opacity=65 );
>+            opacity: .65;
>+        }
>+    }
>+
>     &.lastchecked {
>         margin-bottom: 0;
>         margin-right: 0;
>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 56c96de354..0e8fb27c6e 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/claims.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/claims.tt
>@@ -71,6 +71,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 %]
>@@ -85,69 +86,16 @@
>                     </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 %]
>-                                [% IF ( suploo.selected ) %]
>-                                    <option value="[% suploo.id | html %]" selected="selected" >
>-                                [% ELSE %]
>-                                    <option value="[% suploo.id | html %]">
>-                                [% END %]
>-                                    [% suploo.name | html %]
>-                                    ([% suploo.count | html %])
>-                                </option>
>-                            [% END %]
>-                        </select>
>-                        <input type="submit" class="btn btn-primary" value="OK" />
>-                    </fieldset>
>-                </form> 
>-
>                 [% 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">
>-                            [% INCLUDE 'csrf-token.inc' %]
>-                            <table id="claimst">
>-                                <thead>
>-                                    <tr>
>-                                        <th><input type="checkbox" id="CheckAll"></th>
>-                                        <th>Vendor</th>
>-                                        <th>Library</th>
>-                                        <th class="anti-the">Title</th>
>-                                        <th>ISSN</th>
>-                                        <th>Issue number</th>
>-                                        <th>Status</th>
>-                                        <th>Since</th>
>-                                        <th>Publication date</th>
>-                                        <th>Claims count</th>
>-                                        <th>Claim date</th>
>-                                        [% FOR field IN additional_fields_for_subscription %]
>-                                        <th>[% field.name | html %]</th>
>-                                        [% END %]
>-                                    </tr>
>-                                </thead>
>-                                <tbody>
>-                                    [% FOREACH missingissue IN missingissues %]
>+                            <div class="page-section">
>+                                [% INCLUDE 'csrf-token.inc' %]
>+                                <table id="claimst">
>+                                    <thead>
>                                         <tr>
>+<<<<<<< HEAD
>                                             <td>
>                                             [% UNLESS missingissue.cannot_claim %]
>                                                 <input type="checkbox" name="serialid" value="[% missingissue.serialid | html %]" />
>@@ -176,56 +124,142 @@
>                                                 [% missingissue.claimdate | $KohaDates %]
>                                             </td>
>                                             [% INCLUDE 'additional-fields-display.inc' available=additional_fields_for_subscription values=missingissue.additional_field_values value_only=1 is_table_cell=1 %]
>+=======
>+                                            <th class="NoSort"><input type="checkbox" id="CheckAll"></th>
>+                                            <th>Vendor</th>
>+                                            <th>Library</th>
>+                                            <th class="anti-the">Title</th>
>+                                            <th>ISSN</th>
>+                                            <th>Issue number</th>
>+                                            <th>Status</th>
>+                                            <th>Since</th>
>+                                            <th>Publication date</th>
>+                                            <th>Claims count</th>
>+                                            <th>Claim date</th>
>+                                            [% FOR field IN additional_fields_for_subscription %]
>+                                            <th>[% field.name | html %]</th>
>+                                            [% END %]
>                                         </tr>
>-                                    [% END # /FOREACH missingissue %]
>-                                </tbody>
>-                                <tfoot>
>-                                    <tr>
>-                                        <td></td>
>-                                        <td><input type="text" class="filter" data-column_num="1" placeholder="Search vendor" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="2" placeholder="Search library" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="3" placeholder="Search title" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="4" placeholder="Search ISSN" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="5" placeholder="Search issue number" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="6" placeholder="Search status" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="7" placeholder="Search since" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="8" placeholder="Search publication date" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="9" placeholder="Search claim count" /></td>
>-                                        <td><input type="text" class="filter" data-column_num="10" placeholder="Search claim date" /></td>
>-                                        [% FOR field IN additional_fields_for_subscription %]
>-                                            <td><input type="text" class="filter" data-column_num="[% loop.count + 10 | html %]" placeholder="Search [% field.name | html %]" /></td>
>-                                        [% END %]
>-                                    </tr>
>-                                </tfoot>
>-                            </table> 
>+                                    </thead>
>+                                    <tbody>
>+                                        [% FOREACH missingissue IN missingissues %]
>+                                            <tr>
>+                                                <td>
>+                                                [% UNLESS missingissue.cannot_claim %]
>+                                                    <input type="checkbox" class="select_serial" name="serialid" value="[% missingissue.serialid | html %]" />
>+                                                [% END %]
>+                                                </td>
>+                                                <td>[% missingissue.name | html %]</td>
>+                                                <td>
>+                                                    <span class="branch-[% missingissue.branchcode | html %]">[% Branches.GetName( missingissue.branchcode ) | html %]</span>
>+                                                </td>
>+                                                <td>
>+                                                    <a href="/cgi-bin/koha/serials/subscription-detail.pl?subscriptionid=[% missingissue.subscriptionid | uri %]">[% missingissue.title | html %]</a>
>+                                                </td>
>+                                                <td>[% missingissue.issn | html %]</td>
>+                                                <td>[% missingissue.serialseq | html %]</td>
>+                                                <td>
>+                                                    [% INCLUDE 'serial-status.inc' serial = missingissue %]
>+                                                </td>
>+                                                <td class="planneddate" data-order="[% missingissue.planneddate | html %]">
>+                                                    [% missingissue.planneddate | $KohaDates %]
>+                                                </td>
>+                                                <td class="publisheddate" data-order="[% missingissue.publisheddate | html %]">
>+                                                    [% missingissue.publisheddate | $KohaDates %]
>+                                                </td>
>+                                                <td>[% missingissue.claims_count | html %]</td>
>+                                                <td data-order="[% missingissue.claimdate | html %]">
>+                                                    [% missingissue.claimdate | $KohaDates %]
>+                                                </td>
>+                                                [% FOR field IN additional_fields_for_subscription %]
>+                                                    [% IF field.authorised_value_category %]
>+                                                        <td>[% AuthorisedValues.GetByCode( field.authorised_value_category, missingissue.additional_fields.${field.name} ) | html %]</td>
>+                                                    [% ELSE %]
>+                                                        <td>[% missingissue.additional_fields.${field.name} | html %]</td>
>+                                                    [% END %]
>+                                                [% END %]
>+                                            </tr>
>+                                        [% END # /FOREACH missingissue %]
>+                                    </tbody>
>+                                    <tfoot>
>+                                        <tr>
>+                                            <td></td>
>+                                            <td><input type="text" class="filter" data-column_num="1" placeholder="Search vendor" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="2" placeholder="Search library" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="3" placeholder="Search title" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="4" placeholder="Search ISSN" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="5" placeholder="Search issue number" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="6" placeholder="Search status" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="7" placeholder="Search since" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="8" placeholder="Search publication date" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="9" placeholder="Search claim count" /></td>
>+                                            <td><input type="text" class="filter" data-column_num="10" placeholder="Search claim date" /></td>
>+                                            [% FOR field IN additional_fields_for_subscription %]
>+                                                <td><input type="text" class="filter" data-column_num="[% loop.count + 10 | html %]" placeholder="Search [% field.name | html %]" /></td>
>+                                            [% END %]
>+>>>>>>> Bug 37094: Improve layout of serial claims page
>+                                        </tr>
>+                                    </tfoot>
>+                                </table> 
>+                            </div> 
>+
>+                            <hr />
>+
>+                            [% IF ( csv_profiles.count && letters ) %]
>+                                <div class="row">
>+                                    <div class="col-sm-6">
>+                            [% ELSIF ( csv_profiles.count || letters ) %]
>+                                <div class="row">
>+                                    <div class="col-sm-12">
>+                            [% END %]
> 
>                             [% 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 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>
>                             [% END %]
> 
>+                            [% IF ( csv_profiles.count && letters ) %]
>+                                </div>
>+                                <div class="col-sm-6">
>+                            [% 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 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>
>                             [% END %]
>+
>+                            [% IF ( csv_profiles.count && letters ) %]
>+                                    </div> 
>+                                </div> 
>+                            [% END %]
>                         </form> 
>-                    </fieldset>
>+
>                 [% END # /missingissues %]
> 
>             </main>
>@@ -233,35 +267,93 @@
> 
>         <div class="col-md-2 order-sm-2 order-md-1">
>             <aside>
>+                [% 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">
>+                            <legend class="sr-only">Filter missing issues</legend>
>+                            <h4>Filter missing issues</h4>
>+                            <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 %]
>+
>                 [% INCLUDE 'serials-menu.inc' %]
>             </aside>
>         </div> 
>      </div> 
> 
>+[% BLOCK select_vendor %]
>+    <form class="select_vendor" name="claims" action="claims.pl" method="get">
>+        [% IF ( context == "main") %]
>+            <fieldset class="rows">
>+        [% ELSE %]
>+            <fieldset class="brief">
>+        [% END %]
>+            <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" >
>+                    [% ELSE %]
>+                        <option value="[% suploo.id | html %]">
>+                    [% END %]
>+                        [% suploo.name | html %]
>+                        ([% suploo.count | html %])
>+                    </option>
>+                [% END %]
>+            </select>
>+        </fieldset>
>+        <fieldset class="action">
>+            <input type="submit" class="btn btn-primary" value="OK" />
>+        </fieldset>
>+    </form> 
>+[% END %]
>+
> [% MACRO jsinclude BLOCK %]
>     [% INCLUDE 'calendar.inc' %]
>     [% INCLUDE 'datatables.inc' %]
>     <script>
>         var sTable;
>         $(document).ready(function() {
>+            enableSelectedActions();
>             sTable = $("#claimst").dataTable($.extend(true, {}, dataTablesDefaults, {
>                 "dom": 't',
>+                "order": [[ 7, "asc" ]],
>                 "columnDefs": [
>-                    { "targets": [ 0 ], "orderable": false, "searchable":  false },
>+                    { 'sortable': false, 'targets': [ 'NoSort' ] },
>                     { "type": "anti-the", "targets":  [ 'anti-the'] }
>                 ],
>                 "paginate": false
>             }));
>             sTable.fnAddFilters("filter", "200");
>-            $('#supplierid').change(function() {
>-                $('#claims').submit();
>-            });
> 
>             // Checkboxes : Select All / None
>             $("span.checkall").html("<input type=\"checkbox\" name=\"CheckAll\"> "+_("Check all")+"</input>");
> 
>             $("#CheckAll").click(function() {
>                 $("#claimst tr:visible :checkbox").prop('checked', $("#CheckAll").is(':checked'));
>+                enableSelectedActions();
>             });
> 
>             // Generates a dynamic link for exporting the selections data as CSV
>@@ -300,8 +392,21 @@
>             $("#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) {
>-- 
>2.39.2

Actions: View | Diff | Splinter Review

Attachments on bug 37094: 167741 | 168037 | 170085 | 171096