Bug 22015: Move DataTables CSS to global include
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / members / member.tt
index bea3ba6..369acb2 100644 (file)
+[% USE raw %]
+[% USE Asset %]
 [% USE Koha %]
 [% USE ColumnsSettings %]
 [% USE Branches %]
 [% USE Categories %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Patrons [% IF ( searching ) %]&rsaquo; Search results[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
-[% INCLUDE 'datatables.inc' %]
-[% INCLUDE 'columns_settings.inc' %]
-<script type="text/javascript">
-//<![CDATA[
-$(document).ready(function() {
-    $('#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);
-        }
-    });
-
-    $('#new_patron_list').on('input', function() {
-        if ( $('#new_patron_list').val() ) {
-            $('#add_to_patron_list_submit').prop('disabled', false);
-        } else {
-            $('#add_to_patron_list_submit').prop('disabled', true);
-        }
-    });
-
-    $("#patron_list_dialog").hide();
-    $("#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;
-            }
-        }
-
-        if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
-            alert( _("You have not selected any patrons to add to a list!") );
-            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;
-    });
-    $(".filterByLetter").on("click",function(e){
-        e.preventDefault();
-        filterByFirstLetterSurname($(this).text());
-    });
-    $("#select_all").on("click",function(e){
-        e.preventDefault();
-        $(".selection").prop("checked", true);
-    });
-    $("#clear_all").on("click",function(e){
-        e.preventDefault();
-        $(".selection").prop("checked", false);
-    });
-    $("#clear_search").on("click",function(e){
-        e.preventDefault();
-        clearFilters(true);
-    });
-    $("#searchform").on("submit", filter);
-});
-
-var dtMemberResults;
-var search = 1;
-$(document).ready(function() {
-    [% IF searchmember %]
-        $("#searchmember_filter").val("[% searchmember %]");
-    [% END %]
-    [% IF searchfieldstype %]
-        $("searchfieldstype_filter").val("[% searchfieldstype %]");
-    [% END %]
-    [% IF searchtype %]
-        $("#searchtype_filter").val("[% searchtype %]");
-    [% END %]
-    [% IF categorycode %]
-        $("#categorycode_filter").val("[% categorycode_filter %]");
-    [% END %]
-    [% IF branchcode %]
-        $("#branchcode_filter").val("[% branchcode_filter %]");
-    [% END %]
-
-    [% IF view != "show_results" %]
-        $("#searchresults").hide();
-        search = 0;
-    [% END %]
-
-    // Build the aLengthMenu
-    var aLengthMenu = [
-        [%PatronsPerPage %], 10, 20, 50, 100, -1
-    ];
-    jQuery.unique(aLengthMenu);
-    aLengthMenu.sort(function( a, b ){
-        // Put "All" at the end
-        if ( a == -1 ) {
-            return 1;
-        } else if ( b == -1 ) {
-            return -1;
-        }
-        return parseInt(a) < parseInt(b) ? -1 : 1;}
-    );
-    var aLengthMenuLabel = [];
-    $(aLengthMenu).each(function(){
-        if ( this == -1 ) {
-            // Label for -1 is "All"
-            aLengthMenuLabel.push("All");
-        } else {
-            aLengthMenuLabel.push(this);
-        }
-    });
-
-    // Apply DataTables on the results table
-    var columns_settings = [% ColumnsSettings.GetColumns( 'members', 'member', 'memberresultst', 'json' ) %];
-    dtMemberResults = KohaTable("#memberresultst", {
-        'bServerSide': true,
-        'sAjaxSource': "/cgi-bin/koha/svc/members/search",
-        'fnServerData': function(sSource, aoData, fnCallback) {
-            if ( ! search ) {
-                return;
-            }
-            aoData.push({
-                'name': 'searchmember',
-                'value': $("#searchmember_filter").val()
-            },{
-                'name': 'firstletter',
-                'value': $("#firstletter_filter").val()
-            },{
-                'name': 'searchfieldstype',
-                'value': $("#searchfieldstype_filter").val()
-            },{
-                'name': 'searchtype',
-                'value': $("#searchtype_filter").val()
-            },{
-                'name': 'categorycode',
-                'value': $("#categorycode_filter").val()
-            },{
-                'name': 'branchcode',
-                'value': $("#branchcode_filter").val()
-            },{
-                'name': 'name_sorton',
-                'value': 'borrowers.surname borrowers.firstname'
-            },{
-                'name': 'dateofbirth',
-                'value': 'borrowers.dateofbirth',
-            },{
-                'name': 'category_sorton',
-                'value': 'categories.description',
-            },{
-                'name': 'branch_sorton',
-                'value': 'branches.branchname'
-            },{
-                'name': 'template_path',
-                'value': 'members/tables/members_results.tt',
-            });
-            $.ajax({
-                'dataType': 'json',
-                'type': 'POST',
-                'url': sSource,
-                'data': aoData,
-                'success': function(json){
-                    // redirect if there is only 1 result.
-                    if ( json.aaData.length == 1 ) {
-                        var borrowernumber = json.aaData[0].borrowernumber;
-                        document.location.href="/cgi-bin/koha/members/moremember.pl?borrowernumber="+borrowernumber;
-                        return false;
-                    }
-                    fnCallback(json);
-                }
-            });
-        },
-        'aoColumns':[
-            [% IF CAN_user_tools_manage_patron_lists %]
-              { 'mDataProp': 'dt_borrowernumber', 'bSortable': false },
-            [% END %]
-            { 'mDataProp': 'dt_cardnumber' },
-            { 'mDataProp': 'dt_name' },
-            { 'mDataProp': 'dt_dateofbirth' },
-            { 'mDataProp': 'dt_category' },
-            { 'mDataProp': 'dt_branch' },
-            { 'mDataProp': 'dt_dateexpiry' },
-            { 'mDataProp': 'dt_od_checkouts', 'bSortable': false },
-            { 'mDataProp': 'dt_fines', 'bSortable': false },
-            { 'mDataProp': 'dt_borrowernotes' },
-            { 'mDataProp': 'dt_action', 'bSortable': false, 'sClass': 'actions' }
-        ],
-        'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
-            /* Center text for 6th column */
-            $("td:eq(5)", nRow).css("text-align", "center");
-
-            return nRow;
-        },
-        'bFilter': false,
-        'bAutoWidth': false,
-        [% IF CAN_user_tools_manage_patron_lists %]
-            'aaSorting': [[2, 'asc']],
-        [% ELSE %]
-            'aaSorting': [[1, 'asc']],
-        [% END %]
-        "aLengthMenu": [aLengthMenu, aLengthMenuLabel],
-        'sPaginationType': 'full_numbers',
-        "iDisplayLength": [% PatronsPerPage %],
-        "bProcessing": true,
-    }, columns_settings);
-    update_searched();
-});
-
-// Update the string "Results found ..."
-function update_searched(){
-    var searched = $("#searchfieldstype_filter").find("option:selected").text();
-    if ( $("#searchmember_filter").val() ) {
-        if ( $("#searchtype_filter").val() == 'start_with' ) {
-            searched += _(" starting with ");
-        } else {
-            searched += _(" containing ");
-        }
-        searched += "'" + $("#searchmember_filter").val() + "'";
-    }
-    if ( $("#firstletter_filter").val() ) {
-        searched += _(" begins with ") + "'" + $("#firstletter_filter").val() +"'";
-    }
-    if ( $("#categorycode_filter").val() ) {
-        searched += _(" with category ") + "'" + $("#categorycode_filter").find("option:selected").text() + "'";
-    }
-    if ( $("#branchcode_filter").val() ) {
-        searched += _(" in library ") + $("#branchcode_filter").find("option:selected").text();
-    }
-    $("#searchpattern").text(searched);
-}
-
-// Redraw the table
-function filter() {
-    $("#firstletter_filter").val('');
-    update_searched();
-    search = 1;
-    $("#searchresults").show();
-    dtMemberResults.fnDraw();
-    return false;
-}
-
-// User has clicked on the Clear button
-function clearFilters(redraw) {
-    $("#searchform select").val('');
-    $("#firstletter_filter").val('');
-    $("#searchmember_filter").val('');
-    if(redraw) {
-        search = 1;
-        $("#searchresults").show();
-        dtMemberResults.fnDraw();
-    }
-}
-
-// User has clicked on a letter
-function filterByFirstLetterSurname(letter) {
-    clearFilters(false);
-    $("#firstletter_filter").val(letter);
-    update_searched();
-    search = 1;
-    $("#searchresults").show();
-    dtMemberResults.fnDraw();
-}
-//]]>
-</script>
 </head>
+
 <body id="pat_member" class="pat">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'patron-search.inc' %]
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; [% IF ( searching ) %]<a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>  &rsaquo; Search results[% ELSE %]Patrons[% END %]</div>
 
-<div id="doc3" class="yui-t2">
-  <div id="bd">
-    <div id="yui-main">
-      <div class="yui-b">
-        <div class="yui-g">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
+
           [% IF CAN_user_tools_manage_patron_lists %]
             <div id="patron_list_dialog" class="dialog alert">
               Added <span class="patrons-length"></span> patrons to <a></a>.
             </div>
           [% END %]
 
-          [% IF Koha.Preference( 'NorwegianPatronDBEnable' ) == 1 %]
-            [% SET nl_search_form_title='Search the Norwegian national patron database' %]
-            [% INCLUDE 'nl-search-form.tt' %]
-          [% END %]
-
           [% INCLUDE 'patron-toolbar.inc' %]
           [% INCLUDE 'noadd-warnings.inc' %]
 
           <div class="browse">
             Browse by last name:
             [% FOREACH letter IN alphabet.split(' ') %]
-                <a href="#" class="filterByLetter">[% letter %]</a>
+                <a href="#" class="filterByLetter">[% letter | html %]</a>
             [% END %]
           </div>
 
-          [% IF ( CAN_user_borrowers && pending_borrower_modifications ) %]
+          [% IF CAN_user_borrowers_edit_borrowers && pending_borrower_modifications %]
             <div class="pending-info" id="patron_updates_pending">
               <a href="/cgi-bin/koha/members/members-update.pl">Patrons requesting modifications</a>:
-              <span class="number_box"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications %]</a></span>
+              <span class="number_box"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications | html %]</a></span>
             </div>
           [% END %]
 
           <div id="searchresults">
             <div id="searchheader">
-              <h3>Patrons found for: <span id="searchpattern">[% IF searchmember %] for '[% searchmember %]'[% END %]</span></h3>
+              <h3>Patrons found for: <span id="searchpattern">[% IF searchmember %] for '[% searchmember | html %]'[% END %]</span></h3>
             </div>
-            [% IF CAN_user_tools_manage_patron_lists %]
+            [% IF CAN_user_tools_manage_patron_lists || CAN_user_borrowers_edit_borrowers %]
               <div id="searchheader">
                   <div>
                       <a href="#" 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>
+                    [% IF CAN_user_tools_manage_patron_lists %]
                       |
                       <span>
                           <label for="add_to_patron_list">Add selected patrons to:</label>
@@ -369,7 +63,7 @@ function filterByFirstLetterSurname(letter) {
                               [% IF patron_lists %]
                                   <optgroup label="Patron lists:">
                                       [% FOREACH pl IN patron_lists %]
-                                          <option value="[% pl.patron_list_id %]">[% pl.name %]</option>
+                                          <option value="[% pl.patron_list_id | html %]">[% pl.name | html %]</option>
                                       [% END %]
                                   </optgroup>
                               [% END %]
@@ -381,14 +75,23 @@ function filterByFirstLetterSurname(letter) {
 
                           <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 %]
+                        |
+                    [% END %]
+
+                    [% IF CAN_user_borrowers_edit_borrowers %]
+                          <button id="merge-patrons" type="submit">Merge selected patrons</button>
+                    [% END %]
                   </div>
-              </div>
+                </div>
             [% END %]
 
             <table id="memberresultst">
               <thead>
                 <tr>
-                [% IF CAN_user_tools_manage_patron_lists %]
+                [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
                   <th>&nbsp;</th>
                 [% END %]
                   <th>Card</th>
@@ -406,121 +109,451 @@ function filterByFirstLetterSurname(letter) {
               <tbody></tbody>
             </table>
           </div>
-        </div>
-      </div>
-    </div>
-    <div class="yui-b">
-      <form method="get" id="searchform">
-        <input type="hidden" id="firstletter_filter" value="" />
-        <fieldset class="brief">
-          <h3>Filters</h3>
-          <ol>
-            <li>
-              <label for="searchmember_filter">Search:</label>
-              <input type="text" id="searchmember_filter" value="[% searchmember %]"/>
-            </li>
-            <li>
-              <label for="searchfieldstype_filter">Search fields:</label>
-              <select name="searchfieldstype" id="searchfieldstype_filter">
-                [% IF searchfieldstype == "standard" %]
-                  <option selected="selected" value='standard'>Standard</option>
-                [% ELSE %]
-                  <option value='standard'>Standard</option>
-                [% END %]
-                [% IF searchfieldstype == "surname" %]
-                  <option selected="selected" value='surname'>Surname</option>
-                [% ELSE %]
-                  <option value='surname'>Surname</option>
-                [% END %]
-                [% IF searchfieldstype == "email" %]
-                  <option selected="selected" value='email'>Email</option>
-                [% ELSE %]
-                  <option value='email'>Email</option>
-                [% END %]
-                [% IF searchfieldstype == "borrowernumber" %]
-                  <option selected="selected" value='borrowernumber'>Borrower number</option>
-                [% ELSE %]
-                  <option value='borrowernumber'>Borrower number</option>
-                [% END %]
-                [% IF searchfieldstype == "userid" %]
-                  <option selected="selected" value='userid'>Username</option>
-                [% ELSE %]
-                  <option value='userid'>Username</option>
-                [% END %]
-                [% IF searchfieldstype == "phone" %]
-                  <option selected="selected" value='phone'>Phone number</option>
-                [% ELSE %]
-                  <option value='phone'>Phone number</option>
-                [% END %]
-                [% IF searchfieldstype == "address" %]
-                  <option selected="selected" value='address'>Street address</option>
-                [% ELSE %]
-                  <option value='address'>Street address</option>
-                [% END %]
-                [% IF searchfieldstype == "dateofbirth" %]
-                  <option selected="selected" value='dateofbirth'>Date of birth</option>
-                [% ELSE %]
-                  <option value='dateofbirth'>Date of birth</option>
-                [% END %]
-                [% IF searchfieldstype == "sort1" %]
-                  <option selected="selected" value='sort1'>Sort field 1</option>
-                [% ELSE %]
-                  <option value='sort1'>Sort field 1</option>
-                [% END %]
-                [% IF searchfieldstype == "sort2" %]
-                  <option selected="selected" value='sort2'>Sort field 2</option>
-                [% ELSE %]
-                  <option value='sort2'>Sort field 2</option>
-                [% END %]
-              </select>
-            </li>
-            <li>
-              <label for="searchtype_filter">Search type:</label>
-              <select name="searchtype" id="searchtype_filter">
-                [% IF searchtype == "start_with" %]
-                  <option value='start_with' selected="selected">Starts with</option>
-                  <option value="contain">Contains</option>
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                <form method="get" id="searchform">
+                  <input type="hidden" id="firstletter_filter" value="" />
+                  <fieldset class="brief">
+                    <h3>Filters</h3>
+                    <ol>
+                      <li>
+                        <label for="searchmember_filter">Search:</label>
+                        <input type="text" id="searchmember_filter" value="[% searchmember | html %]"/>
+                      </li>
+                      <li>
+                        <label for="searchfieldstype_filter">Search fields:</label>
+                        <select name="searchfieldstype" id="searchfieldstype_filter">
+                          [% IF searchfieldstype == "standard" %]
+                            <option selected="selected" value='standard'>Standard</option>
+                          [% ELSE %]
+                            <option value='standard'>Standard</option>
+                          [% END %]
+                          [% IF searchfieldstype == "surname" %]
+                            <option selected="selected" value='surname'>Surname</option>
+                          [% ELSE %]
+                            <option value='surname'>Surname</option>
+                          [% END %]
+                          [% IF searchfieldstype == "email" %]
+                            <option selected="selected" value='email'>Email</option>
+                          [% ELSE %]
+                            <option value='email'>Email</option>
+                          [% END %]
+                          [% IF searchfieldstype == "borrowernumber" %]
+                            <option selected="selected" value='borrowernumber'>Borrower number</option>
+                          [% ELSE %]
+                            <option value='borrowernumber'>Borrower number</option>
+                          [% END %]
+                          [% IF searchfieldstype == "userid" %]
+                            <option selected="selected" value='userid'>Username</option>
+                          [% ELSE %]
+                            <option value='userid'>Username</option>
+                          [% END %]
+                          [% IF searchfieldstype == "phone" %]
+                            <option selected="selected" value='phone'>Phone number</option>
+                          [% ELSE %]
+                            <option value='phone'>Phone number</option>
+                          [% END %]
+                          [% IF searchfieldstype == "address" %]
+                            <option selected="selected" value='address'>Street address</option>
+                          [% ELSE %]
+                            <option value='address'>Street address</option>
+                          [% END %]
+                          [% IF searchfieldstype == "dateofbirth" %]
+                            <option selected="selected" value='dateofbirth'>Date of birth</option>
+                          [% ELSE %]
+                            <option value='dateofbirth'>Date of birth</option>
+                          [% END %]
+                          [% IF searchfieldstype == "sort1" %]
+                            <option selected="selected" value='sort1'>Sort field 1</option>
+                          [% ELSE %]
+                            <option value='sort1'>Sort field 1</option>
+                          [% END %]
+                          [% IF searchfieldstype == "sort2" %]
+                            <option selected="selected" value='sort2'>Sort field 2</option>
+                          [% ELSE %]
+                            <option value='sort2'>Sort field 2</option>
+                          [% END %]
+                        </select>
+                      </li>
+                      <li>
+                        <label for="searchtype_filter">Search type:</label>
+                        <select name="searchtype" id="searchtype_filter">
+                          [% IF searchtype == "start_with" %]
+                            <option value='start_with' selected="selected">Starts with</option>
+                            <option value="contain">Contains</option>
+                          [% ELSE %]
+                            <option value='start_with'>Starts with</option>
+                            <option value="contain" selected="selected">Contains</option>
+                          [% END %]
+                        </select>
+                      </li>
+                      <li>
+                        <label for="categorycode_filter">Category:</label>
+                        [% SET categories = Categories.all() %]
+                        <select id="categorycode_filter">
+                          <option value="">Any</option>
+                          [% FOREACH cat IN categories %]
+                            [% IF cat.categorycode == categorycode_filter %]
+                    <option selected="selected" value="[% cat.categorycode | html %]">[% cat.description | html %]</option>
+                            [% ELSE %]
+                    <option value="[% cat.categorycode | html %]">[% cat.description | html %]</option>
+
+                            [% END %]
+                          [% END %]
+                        </select>
+                      </li>
+                      <li>
+                        <label for="branchcode_filter">Library:</label>
+                        [% SET branches = Branches.all( selected => branchcode_filter, only_from_group => 1 ) %]
+                        <select id="branchcode_filter">
+                          [% IF branches.size != 1 %]
+                            <option value="">Any</option>
+                          [% END %]
+                          [% PROCESS options_for_libraries libraries => branches %]
+                        </select>
+                      </li>
+                    </ol>
+                    <fieldset class="action">
+                      <input type="submit" value="Search" />
+                      <input type="button" value="Clear" id="clear_search" />
+                    </fieldset>
+                  </fieldset>
+                </form>
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+    </div> <!-- /.row -->
+
+[% MACRO jsinclude BLOCK %]
+    [% INCLUDE 'datatables.inc' %]
+    [% INCLUDE 'columns_settings.inc' %]
+    [% INCLUDE 'str/members-menu.inc' %]
+    [% Asset.js("js/members-menu.js") | $raw %]
+    <script>
+        $(document).ready(function() {
+            $('#merge-patrons').prop('disabled', true);
+            $('#memberresultst').on('change', 'input.selection', function() {
+                if ( $('.selection:checked').length > 1 ) {
+                    $('#merge-patrons').prop('disabled', false);
+                } else {
+                    $('#merge-patrons').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);
+                }
+            });
+
+            $('#new_patron_list').on('input', function() {
+                if ( $('#new_patron_list').val() ) {
+                    $('#add_to_patron_list_submit').prop('disabled', false);
+                } else {
+                    $('#add_to_patron_list_submit').prop('disabled', true);
+                }
+            });
+
+            $("#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;
+                    }
+                }
+
+                if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
+                    alert( _("You have not selected any patrons to add to a list!") );
+                    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;
+            });
+            $(".filterByLetter").on("click",function(e){
+                e.preventDefault();
+                filterByFirstLetterSurname($(this).text());
+            });
+            $("#select_all").on("click",function(e){
+                e.preventDefault();
+                $(".selection").prop("checked", true).change();
+            });
+            $("#clear_all").on("click",function(e){
+                e.preventDefault();
+                $(".selection").prop("checked", false).change();
+            });
+            $("#clear_search").on("click",function(e){
+                e.preventDefault();
+                clearFilters(true);
+            });
+            $("#searchform").on("submit", filter);
+        });
+
+        var dtMemberResults;
+        var search = 1;
+        $(document).ready(function() {
+            [% IF searchmember %]
+                $("#searchmember_filter").val("[% searchmember | html %]");
+            [% END %]
+            [% IF searchfieldstype %]
+                $("searchfieldstype_filter").val("[% searchfieldstype | html %]");
+            [% END %]
+            [% IF searchtype %]
+                $("#searchtype_filter").val("[% searchtype | html %]");
+            [% END %]
+            [% IF categorycode %]
+                $("#categorycode_filter").val("[% categorycode_filter | html %]");
+            [% END %]
+            [% IF branchcode %]
+                $("#branchcode_filter").val("[% branchcode_filter | html %]");
+            [% END %]
+
+            [% IF view != "show_results" %]
+                search = 0;
+            [% ELSE %]
+                $("#searchresults").show();
+            [% END %]
+
+            // Build the aLengthMenu
+            var aLengthMenu = [
+                [% PatronsPerPage | html %], 10, 20, 50, 100, -1
+            ];
+            jQuery.unique(aLengthMenu);
+            aLengthMenu.sort(function( a, b ){
+                // Put "All" at the end
+                if ( a == -1 ) {
+                    return 1;
+                } else if ( b == -1 ) {
+                    return -1;
+                }
+                return parseInt(a) < parseInt(b) ? -1 : 1;}
+            );
+            var aLengthMenuLabel = [];
+            $(aLengthMenu).each(function(){
+                if ( this == -1 ) {
+                    // Label for -1 is "All"
+                    aLengthMenuLabel.push(_("All"));
+                } else {
+                    aLengthMenuLabel.push(this);
+                }
+            });
+
+            // Apply DataTables on the results table
+            var columns_settings = [% ColumnsSettings.GetColumns( 'members', 'member', 'memberresultst', 'json' ) | $raw %];
+            [% UNLESS CAN_user_borrowers_edit_borrowers OR CAN_user_tools_manage_patron_lists %]
+                [%# Remove the first column if we do not display the checkbox %]
+                columns_settings.splice(0, 1);
+            [% END %]
+            dtMemberResults = KohaTable("memberresultst", {
+                'bServerSide': true,
+                'sAjaxSource': "/cgi-bin/koha/svc/members/search",
+                'fnServerData': function(sSource, aoData, fnCallback) {
+                    if ( ! search ) {
+                        return;
+                    }
+                    aoData.push({
+                        'name': 'searchmember',
+                        'value': $("#searchmember_filter").val()
+                    },{
+                        'name': 'firstletter',
+                        'value': $("#firstletter_filter").val()
+                    },{
+                        'name': 'searchfieldstype',
+                        'value': $("#searchfieldstype_filter").val()
+                    },{
+                        'name': 'searchtype',
+                        'value': $("#searchtype_filter").val()
+                    },{
+                        'name': 'categorycode',
+                        'value': $("#categorycode_filter").val()
+                    },{
+                        'name': 'branchcode',
+                        'value': $("#branchcode_filter").val()
+                    },{
+                        'name': 'name_sorton',
+                        'value': 'borrowers.surname borrowers.firstname'
+                    },{
+                        'name': 'dateofbirth',
+                        'value': 'borrowers.dateofbirth',
+                    },{
+                        'name': 'category_sorton',
+                        'value': 'categories.description',
+                    },{
+                        'name': 'branch_sorton',
+                        'value': 'branches.branchname'
+                    },{
+                        'name': 'template_path',
+                        'value': 'members/tables/members_results.tt',
+                    });
+                    $.ajax({
+                        'dataType': 'json',
+                        'type': 'POST',
+                        'url': sSource,
+                        'data': aoData,
+                        'success': function(json){
+                            // redirect if there is only 1 result.
+                            if ( json.aaData.length == 1 ) {
+                                var borrowernumber = json.aaData[0].borrowernumber;
+                                document.location.href="/cgi-bin/koha/members/moremember.pl?borrowernumber="+borrowernumber;
+                                return false;
+                            }
+                            fnCallback(json);
+                        }
+                    });
+                },
+                'aoColumns':[
+                    [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
+                      { 'mDataProp': 'dt_borrowernumber', 'bSortable': false },
+                    [% END %]
+                    { 'mDataProp': 'dt_cardnumber' },
+                    { 'mDataProp': 'dt_name' },
+                    { 'mDataProp': 'dt_dateofbirth' },
+                    { 'mDataProp': 'dt_category' },
+                    { 'mDataProp': 'dt_branch' },
+                    { 'mDataProp': 'dt_dateexpiry' },
+                    { 'mDataProp': 'dt_od_checkouts', 'bSortable': false },
+                    { 'mDataProp': 'dt_fines', 'bSortable': false },
+                    { 'mDataProp': 'dt_borrowernotes' },
+                    { 'mDataProp': 'dt_action', 'bSortable': false, 'sClass': 'actions' }
+                ],
+                'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+                    /* Center text for 6th column */
+                    $("td:eq(5)", nRow).css("text-align", "center");
+
+                    return nRow;
+                },
+                'bFilter': false,
+                'bAutoWidth': false,
+                [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
+                    'aaSorting': [[2, 'asc']],
                 [% ELSE %]
-                  <option value='start_with'>Starts with</option>
-                  <option value="contain" selected="selected">Contains</option>
-                [% END %]
-              </select>
-            </li>
-            <li>
-              <label for="categorycode_filter">Category:</label>
-              [% SET categories = Categories.all() %]
-              <select id="categorycode_filter">
-                <option value="">Any</option>
-                [% FOREACH cat IN categories %]
-                  [% IF cat.categorycode == categorycode_filter %]
-                    <option selected="selected" value="[% cat.categorycode %]">[% cat.description %]</option>
-                  [% ELSE %]
-                    <option value="[% cat.categorycode %]">[% cat.description %]</option>
-                  [% END %]
+                    'aaSorting': [[1, 'asc']],
                 [% END %]
-              </select>
-            </li>
-            <li>
-              <label for="branchcode_filter">Library:</label>
-              [% SET branches = Branches.all( selected => branchcode_filter ) %]
-              <select id="branchcode_filter">
-                [% IF branches.size != 1 %]
-                  <option value="">Any</option>
-                [% END %]
-                [% PROCESS options_for_libraries libraries => branches %]
-              </select>
-            </li>
-          </ol>
-          <fieldset class="action">
-            <input type="submit" value="Search" />
-            <input type="button" value="Clear" id="clear_search" />
-          </fieldset>
-        </fieldset>
-      </form>
-    </div>
-  </div>
-  <div class="yui-g">
-    [% INCLUDE 'members-menu.inc' %]
-  </div>
-</div>
+                "aLengthMenu": [aLengthMenu, aLengthMenuLabel],
+                'sPaginationType': 'full_numbers',
+                "iDisplayLength": [% PatronsPerPage | html %],
+                "bProcessing": true,
+            }, columns_settings);
+            update_searched();
+        });
+
+        // Update the string "Results found ..."
+        function update_searched(){
+            var searched = $("#searchfieldstype_filter").find("option:selected").text();
+            if ( $("#searchmember_filter").val() ) {
+                if ( $("#searchtype_filter").val() == 'start_with' ) {
+                    searched += _(" starting with ");
+                } else {
+                    searched += _(" containing ");
+                }
+                searched += "'" + $("#searchmember_filter").val() + "'";
+            }
+            if ( $("#firstletter_filter").val() ) {
+                searched += _(" begins with ") + "'" + $("#firstletter_filter").val() +"'";
+            }
+            if ( $("#categorycode_filter").val() ) {
+                searched += _(" with category ") + "'" + $("#categorycode_filter").find("option:selected").text() + "'";
+            }
+            if ( $("#branchcode_filter").val() ) {
+                searched += _(" in library ") + $("#branchcode_filter").find("option:selected").text();
+            }
+            $("#searchpattern").text(searched);
+        }
+
+        // Redraw the table
+        function filter() {
+            $("#firstletter_filter").val('');
+            update_searched();
+            search = 1;
+            $("#searchresults").show();
+            dtMemberResults.fnDraw();
+            return false;
+        }
+
+        // User has clicked on the Clear button
+        function clearFilters(redraw) {
+            $("#searchform select").val('');
+            $("#firstletter_filter").val('');
+            $("#searchmember_filter").val('');
+            if(redraw) {
+                search = 1;
+                $("#searchresults").show();
+                dtMemberResults.fnDraw();
+            }
+        }
+
+        // User has clicked on a letter
+        function filterByFirstLetterSurname(letter) {
+            clearFilters(false);
+            $("#firstletter_filter").val(letter);
+            update_searched();
+            search = 1;
+            $("#searchresults").show();
+            dtMemberResults.fnDraw();
+        }
+    </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]