Bug 28261: Add visual feedback on overridden pickup locations on patron's page
authorTomas Cohen Arazi <tomascohen@theke.io>
Thu, 29 Apr 2021 11:53:43 +0000 (08:53 -0300)
committerJonathan Druart <jonathan.druart@bugs.koha-community.org>
Wed, 4 Aug 2021 12:06:43 +0000 (14:06 +0200)
This patch makes the patron pages in the staff interface use the API and
Select2 to render the pickup locations list. This has the effect of
adding visual feedback on those pickup locations that need an override,
based on the current configuration options.

All the checks are done in the GET /holds/:hold_id/pickup_locations
route, so this is a fairly trivial change.

To test:
1. Have a couple holds for a patron, some overrriden, some not
2. Visit the patrons' detail page, holds tab.
=> SUCCESS: You see the holds, pickup location has a dropdown
3. Repeat in the circulation tab for the patron
=> SUCCESS: You see the holds, pickup location has a dropdown
4. Apply this patch
5. Repeat 2 and 3
=> SUCCESS: Same behavior as before, but the dropdown is rendered with
Select2 and has a search feature. Overridden pickup locations have an
icon telling so
6. Sign off :-D

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt
koha-tmpl/intranet-tmpl/prog/js/holds.js

index 1771a94..6e7aa02 100644 (file)
     [% INCLUDE 'columns_settings.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
     [% INCLUDE 'timepicker.inc' %]
+    [% INCLUDE 'select2.inc' %]
     [% Asset.js("lib/jquery/plugins/rowGroup/dataTables.rowGroup.min.js") | $raw %]
     <script>
         /* Set some variable needed in circulation.js */
index 42cbbe0..39024d6 100644 (file)
     [% INCLUDE 'calendar.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %]
     [% INCLUDE 'timepicker.inc' %]
+    [% INCLUDE 'select2.inc' %]
     <script>
         /* Set some variable needed in circulation.js */
         var logged_in_user_borrowernumber = "[% logged_in_user.borrowernumber | html %]";
index e076fa5..820e0e5 100644 (file)
@@ -78,7 +78,7 @@ $(document).ready(function() {
                     {
                         "mDataProp": function( oObj ) {
                             if( oObj.branches.length > 1 && oObj.found !== 'W' && oObj.found !== 'T' ){
-                                var branchSelect='<select priority='+oObj.priority+' class="hold_location_select" reserve_id="'+oObj.reserve_id+'" name="pick-location">';
+                                var branchSelect='<select priority='+oObj.priority+' class="hold_location_select" data-hold-id="'+oObj.reserve_id+'" reserve_id="'+oObj.reserve_id+'" name="pick-location">';
                                 for ( var i=0; i < oObj.branches.length; i++ ){
                                     var selectedbranch;
                                     var setbranch;
@@ -219,7 +219,60 @@ $(document).ready(function() {
                     });
                 });
 
-                $(".hold_location_select").change(function(){
+                function display_pickup_location (state) {
+                    var $text;
+                    if ( state.needs_override === true ) {
+                        $text = $(
+                            '<span>' + state.text + '</span> <span style="float:right;" title="' +
+                            _("This pickup location is not allowed according to circulation rules") +
+                            '"><i class="fa fa-exclamation-circle" aria-hidden="true"></i></span>'
+                        );
+                    }
+                    else {
+                        $text = $('<span>'+state.text+'</span>');
+                    }
+
+                    return $text;
+                };
+
+                $(".hold_location_select").each( function () {
+                    var this_dropdown = $(this);
+                    var hold_id = $(this).data('hold-id');
+
+                    this_dropdown.select2({
+                        allowClear: false,
+                        ajax: {
+                            url: '/api/v1/holds/' + encodeURIComponent(hold_id) + '/pickup_locations',
+                            delay: 300, // wait 300 milliseconds before triggering the request
+                            dataType: 'json',
+                            cache: true,
+                            data: function (params) {
+                                var search_term = (params.term === undefined) ? '' : params.term;
+                                var query = {
+                                    "q": JSON.stringify({"name":{"-like":search_term+'%'}}),
+                                    "_order_by": "name"
+                                };
+                                return query;
+                            },
+                            processResults: function (data) {
+                                var results = [];
+                                data.forEach( function ( pickup_location ) {
+                                    results.push(
+                                        {
+                                            "id": pickup_location.library_id.escapeHtml(),
+                                            "text": pickup_location.name.escapeHtml(),
+                                            "needs_override": pickup_location.needs_override
+                                        }
+                                    );
+                                });
+                                return { "results": results };
+                            }
+                        },
+                        templateResult: display_pickup_location
+                    });
+                });
+
+                $(".hold_location_select").on("change", function(){
                     $(this).prop("disabled",true);
                     var cur_select = $(this);
                     var res_id = $(this).attr('reserve_id');