Attachment 125822 Details for Bug 28867 – Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists

[patch] Bug 28867: Use Bootstrap button menu and modal for adding patrons to lists

Bug-28867-Use-Bootstrap-button-menu-and-modal-for-.patch (text/plain), 19.56 KB, created by Owen Leonard on 2021-10-06 14:38:05 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2021-10-06 14:38:05 UTC

Size: 19.56 KB

patch

obsolete

>From 3594ef15bf84d7c50734f151d462d94d091c073d Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Thu, 23 Sep 2021 16:09:12 +0000
>Subject: [PATCH] Bug 28867: Use Bootstrap button menu and modal for adding
> patrons to lists
>
>This patch reworks the controls for adding patrons to a list from the
>patron search results page. The <select> is converted to a Bootstrap
>dropdown menu, and the list creation form is moved into a Bootstrap
>modal.
>
>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).
>
>- In the staff interface, perform a patron search that will return
>  multiple results.
>- In the toolbar at the top of the search results you should see two
>  disabled Bootstrap-styled buttons: "Add to patron list" and "Merge
>  selected patrons."
>- The "Select all" and "Clear all" links should work to enable and
>  disable the toolbar buttons.
>- "Clear all" and then check the checkbox next to one of the results.
>  The "Add to patron list" button should be enabled.
>- Check a second checkbox. The "Merge selected patrons" button should be
>  enabled.
>- Test the "Add to patron list" button. It should trigger a dropdown
>  menu listing existing patrons lists and a "New list" link.
>  - Test adding to an exising patron list. It should trigger a message
>    at the top of the page which shows a link to that list.
>  - Test adding to a new list. It should trigger a Bootstrap modal where
>    you can enter the name of the new list.
>    - Submitting the list title form should close the modal and trigger
>      the display of the message showing how many patrons were added to
>      your new list. The link to the new list should be correct.
>- Test the "Merge selected patrons" button. It should send the selected
>  patrons to the patron merge screen.
>---
> .../prog/css/src/staff-global.scss            |  32 +--
> .../prog/en/modules/members/member.tt         | 223 ++++++++++--------
> .../modules/members/tables/members_results.tt |   2 +-
> 3 files changed, 140 insertions(+), 117 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 5889f41d71..0287442123 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -2071,22 +2071,24 @@ li {
> }
> 
> #searchresults {
>-    ul {
>-        li {
>-            clear: left;
>-            font-size: 90%;
>-            list-style: url("../img/item-bullet.svg");
>-            padding: .2em 0;
>-
>-            &.result_itype_image {
>-                list-style: none;
>-                list-style-type: none;
>-            }
>+    td {
>+        ul {
>+            li {
>+                clear: left;
>+                font-size: 90%;
>+                list-style: url("../img/item-bullet.svg");
>+                padding: .2em 0;
>+
>+                &.result_itype_image {
>+                    list-style: none;
>+                    list-style-type: none;
>+                }
> 
>-            img {
>-                float: left;
>-                margin: 3px 5px 3px -5px;
>-                max-width: 25px;
>+                img {
>+                    float: left;
>+                    margin: 3px 5px 3px -5px;
>+                    max-width: 25px;
>+                }
>             }
>         }
>     }
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
>index e20bd380c0..b7e1b9653c 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/member.tt
>@@ -45,7 +45,7 @@
>             <main>
> 
>           [% IF CAN_user_tools_manage_patron_lists %]
>-            <div id="patron_list_dialog" class="dialog alert">
>+            <div id="patron_list_dialog" class="dialog message">
>               Added <span class="patrons-length"></span> patrons to <a></a>.
>             </div>
>           [% END %]
>@@ -72,38 +72,32 @@
>             [% IF CAN_user_tools_manage_patron_lists || CAN_user_borrowers_edit_borrowers %]
>               <div class="searchheader fh-fixedHeader" id="searchheader">
>                   <div>
>-                      <a href="#" id="select_all"><i class="fa fa-check"></i> Select all</a>
>+                      <a href="#" class="btn btn-link" id="select_all"><i class="fa fa-check"></i> Select all</a>
>                       |
>-                      <a href="#" id="clear_all"><i class="fa fa-remove"></i> Clear all</a>
>+                      <a href="#" class="btn btn-link" id="clear_all"><i class="fa fa-remove"></i> Clear all</a>
>                     [% IF CAN_user_tools_manage_patron_lists %]
>-                      |
>-                      <span>
>-                          <label for="add_to_patron_list">Add selected patrons to:</label>
>-                          <select id="add_to_patron_list" name="add_to_patron_list">
>-                              <option value=""></option>
>-                              [% IF patron_lists %]
>-                                  <optgroup label="Patron lists:">
>-                                      [% FOREACH pl IN patron_lists %]
>-                                          <option value="[% pl.patron_list_id | html %]">[% pl.name | html %]</option>
>-                                      [% END %]
>-                                  </optgroup>
>-                              [% END %]
>-
>-                              <option value="new">[ New list ]</option>
>-                          </select>
>-
>-                          <input type="text" id="new_patron_list" name="new_patron_list" id="new_patron_list" />
>-
>-                          <input id="add_to_patron_list_submit" type="submit" class="submit" value="Save">
>-                      </span>
>+
>                     [% END %]
> 
>-                    [% IF CAN_user_tools_manage_patron_lists && CAN_user_borrowers_edit_borrowers %]
>-                        |
>+                    [% IF CAN_user_tools_manage_patron_lists %]
>+                        <div id="patronlist-dropdown" class="btn-group">
>+                            <button id="patronlist-menu" type="button" class="btn btn-sm btn-default dropdown-toggle patron-edits disabled" disabled="disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
>+                                Add to patron list <span class="caret"></span>
>+                            </button>
>+                            <ul class="dropdown-menu">
>+                                [% IF patron_lists %]
>+                                    [% FOREACH pl IN patron_lists %]
>+                                        <li><a href="#" class="patron-list-add" data-listid="[% pl.patron_list_id | html %]">[% pl.name | html %]</a></li>
>+                                    [% END %]
>+                                [% END %]
>+                                <li role="separator" class="divider"></li>
>+                                <li><a href="#" class="patron-list-add" data-listid="new">New list</a></li>
>+                            </ul>
>+                        </div>
>                     [% END %]
> 
>                     [% IF CAN_user_borrowers_edit_borrowers %]
>-                          <button id="merge-patrons" type="submit">Merge selected patrons</button>
>+                          <button id="merge-patrons" class="btn btn-sm btn-default disabled" disabled="disabled" type="submit"><i class="fa fa-compress" aria-hidden="true"></i> Merge selected patrons</button>
>                     [% END %]
>                   </div>
>                 </div>
>@@ -210,6 +204,32 @@
>         </div> 
>     </div> 
> 
>+    
>+    <div class="modal" id="new-patron-list" tabindex="-1" role="dialog" aria-labelledby="new-patron-listLabel">
>+        <div class="modal-dialog" role="document">
>+            <div class="modal-content">
>+                <div class="modal-header">
>+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
>+                    <h4 class="modal-title" id="new-patron-listLabel">Add patrons to a new patron list</h4>
>+                </div>
>+                <form id="new-patron-list_form">
>+                    <div class="modal-body">
>+                        <div class="form-group">
>+                            <label for="new_patron_list" class="required">Patron list name: </label>
>+                            <input class="form-control required" type="text" name="new_patron_list" id="new_patron_list" required="required" />
>+                            <input type="hidden" name="add_to_patron_list" id="add_to_patron_list" />
>+                            <span class="required">Required</span>
>+                        </div>
>+                    </div> 
>+                    <div class="modal-footer">
>+                        <button type="submit" id="add_to_patron_list_submit" class="btn btn-default approve">Submit</button>
>+                        <button type="button" class="btn btn-default deny" data-dismiss="modal">Cancel</button>
>+                    </div> 
>+                </form> 
>+            </div> 
>+        </div> 
>+    </div> 
>+
> [% MACRO jsinclude BLOCK %]
>     [% INCLUDE 'datatables.inc' %]
>     [% INCLUDE 'columns_settings.inc' %]
>@@ -229,101 +249,70 @@
>             $('#merge-patrons').prop('disabled', true);
>             $('#memberresultst').on('change', 'input.selection', function() {
>                 if ( $('.selection:checked').length > 1 ) {
>-                    $('#merge-patrons').prop('disabled', false);
>+                    /* More than one checkbox has been checked */
>+                    $('#merge-patrons').prop('disabled', false).removeClass("disabled");
>+                    $("#patronlist-menu").removeClass("disabled").prop("disabled", false);
>+                } else if ( $('.selection:checked').length == 1 ) {
>+                    /* At least one checkbox has been checked */
>+                    $('#merge-patrons').prop('disabled', true).addClass("disabled");
>+                    $("#patronlist-menu").removeClass("disabled").prop("disabled", false);
>                 } else {
>-                    $('#merge-patrons').prop('disabled', true);
>+                    /* No checkbox has been checked */
>+                    $('#merge-patrons').prop('disabled', true).addClass("disabled");
>+                    $("#patronlist-menu").addClass("disabled").prop("disabled", true);
>                 }
>             });
>+
>             $('#merge-patrons').on('click', function() {
>                 var merge_patrons_url = 'merge-patrons.pl?' + $('.selection:checked')
>                     .map(function() {
>                        return "id=" + $(this).val()
>                     }).get().join('&');
>-
>                 window.location.href = merge_patrons_url;
>             });
> 
>-            $('#add_to_patron_list_submit').prop('disabled', true);
>-            $('#new_patron_list').hide();
>-
>-            $('#add_to_patron_list').change(function() {
>-                var value = $('#add_to_patron_list').val();
>-                if ( value == 'new' ) {
>-                    $('#new_patron_list').val('')
>-                    $('#new_patron_list').show();
>-                    $('#new_patron_list').focus();
>-                } else if ( value ) {
>-                    $('#new_patron_list').hide();
>-                    $('#add_to_patron_list_submit').prop('disabled', false);
>-                } else {
>-                    $('#new_patron_list').hide();
>-                    $('#add_to_patron_list_submit').prop('disabled', true);
>+            $("#patronlist-dropdown").on("click", ".patron-list-add", function(e){
>+                e.preventDefault();
>+
>+                if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
>+                    alert( _("You have not selected any patrons to add to a list!") );
>+                    $(".btn-group").removeClass("open"); /* Close button menu */
>+                    return false;
>                 }
>-            });
> 
>-            $('#new_patron_list').on('input', function() {
>-                if ( $('#new_patron_list').val() ) {
>-                    $('#add_to_patron_list_submit').prop('disabled', false);
>+                var listid = $(this).data("listid");
>+                $("#add_to_patron_list").val( listid );
>+                if( listid == "new" ){
>+                    /* #add_to_patron_list value "new" in the modal form will tell API to create a new list */
>+                    $("#new-patron-list").modal("show");
>                 } else {
>-                    $('#add_to_patron_list_submit').prop('disabled', true);
>-                }
>-            });
>+                    /* Ajax submit the patrons to list */
> 
>-            $("#add_to_patron_list_submit").on('click', function(e){
>-                if ( $('#add_to_patron_list').val() == 'new' ) {
>-                    if ( $('#new_patron_list').val() ) {
>-                        $("#add_to_patron_list option").each(function() {
>-                            if ( $(this).text() == $('#new_patron_list').val() ) {
>-                                alert( _("You already have a list with that name!") );
>-                                return false;
>-                            }
>-                        });
>-                    } else {
>-                        alert( _("You must give your new patron list a name!") );
>-                        return false;
>-                    }
>+                    patronListAdd();
>                 }
>+            })
> 
>-                if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
>-                    alert( _("You have not selected any patrons to add to a list!") );
>+            /* Submit selected patrons to a list via AJAX */
>+            $("#new-patron-list_form").on('submit', function(e){
>+                e.preventDefault();
>+                /* Upon submitting modal patron list add form... */
>+                if ( $('#new_patron_list').val() ) {
>+                    $(".patron-list-add").each(function() {
>+                        /* Check each list name in the menu of patron lists */
>+                        /* If submitted list name matches... */
>+                        if ( $(this).text() == $('#new_patron_list').val() ) {
>+                            alert( _("You already have a list with that name!") );
>+                            return false;
>+                        }
>+                    });
>+                } else {
>+                    alert( _("You must give your new patron list a name!") );
>                     return false;
>                 }
>-
>-                var borrowernumbers = [];
>-                $("#memberresultst").find("input:checkbox:checked").each(function(){
>-                    borrowernumbers.push($(this).val());
>-                });
>-                var data = {
>-                    add_to_patron_list: $("#add_to_patron_list").val(),
>-                    new_patron_list: $("#new_patron_list").val(),
>-                    borrowernumbers: borrowernumbers
>-                };
>-                $.ajax({
>-                    data: data,
>-                    type: 'POST',
>-                    url: '/cgi-bin/koha/svc/members/add_to_list',
>-                    success: function(data) {
>-                        $("#patron_list_dialog").show();
>-                        $("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
>-                        $("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
>-                        $("#patron_list_dialog > a").html(data.patron_list.name);
>-                        if ( $('#add_to_patron_list').val() == 'new' ) {
>-                            var new_patron_list_added = $("<option>", {
>-                                value: data.patron_list.patron_list_id,
>-                                text: data.patron_list.name
>-                            });
>-                            $("#add_to_patron_list optgroup").append(new_patron_list_added);
>-                            $("#add_to_patron_list").val(data.patron_list.patron_list_id);
>-                            $("#new_patron_list").val('');
>-                            $('#add_to_patron_list').change();
>-                        }
>-                    },
>-                    error: function() {
>-                        alert("an error occurred");
>-                    }
>-                });
>-                return true;
>+                $("#new-patron-list").modal("hide");
>+                patronListAdd();
>             });
>+
>             $(".filterByLetter").on("click",function(e){
>                 e.preventDefault();
>                 filterByFirstLetterSurname( $(this).text(), true );
>@@ -510,6 +499,38 @@
> 
>         });
> 
>+        function patronListAdd(){
>+            var borrowernumbers = [];
>+            $("#memberresultst").find("input:checkbox:checked").each(function(){
>+                borrowernumbers.push($(this).val());
>+            });
>+            var data = {
>+                add_to_patron_list: $("#add_to_patron_list").val(),
>+                new_patron_list: $("#new_patron_list").val(),
>+                borrowernumbers: borrowernumbers
>+            };
>+            $.ajax({
>+                data: data,
>+                type: 'POST',
>+                url: '/cgi-bin/koha/svc/members/add_to_list',
>+                success: function(data) {
>+                    $("#patron_list_dialog").show();
>+                    $("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
>+                    $("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
>+                    $("#patron_list_dialog > a").html(data.patron_list.name);
>+
>+                    if ( $('#add_to_patron_list').val() == 'new' ) {
>+                        /* Add a new entry to the menu */
>+                        $("#patronlist-dropdown .divider").before('<li><a class="patron-list-add" href="#" data-listid="' + data.patron_list.patron_list_id + '">' + data.patron_list.name + '</li>');
>+                    }
>+                },
>+                error: function() {
>+                    alert("an error occurred");
>+                }
>+            });
>+            return true;
>+        }
>+
>         function getSearchByLocation( setstate ){
>             /* Check to see if the URL contains a search parameter */
>             if( location.search != ""){
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt
>index fe04778abd..187a70b74b 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/tables/members_results.tt
>@@ -13,7 +13,7 @@
>             {
>                 [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
>                 "dt_borrowernumber":
>-                    "<input type='checkbox' id='check[% data.borrowernumber | html %]' class='selection' name='borrowernumber' value='[% data.borrowernumber | html %]' />",
>+                    "<input type='checkbox' id='check[% data.borrowernumber | html %]' data-cardnumber='[% data.cardnumber | html %]' class='selection' name='borrowernumber' value='[% data.borrowernumber | html %]' />",
>                 [% END %]
>                 "dt_cardnumber":
>                     "<label for='check[% data.borrowernumber | html %]'>[% data.cardnumber | html | $To %]</label>",
>-- 
>2.20.1

Actions: View | Diff | Splinter Review

Attachments on bug 28867: 123858 | 123859 | 125822 | 126445 | 126452 | 126482 | 126550 | 126551