Bug 22015: Move DataTables CSS to global include
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / common / patron_search.tt
index 494d154..54f9899 100644 (file)
+[% USE raw %]
+[% USE Asset %]
 [% USE Koha %]
+[% USE Branches %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Patron search</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
-[% INCLUDE 'datatables.inc' %]
-
-<script type="text/javascript">
-//<![CDATA[
-
-var search = 1;
-$(document).ready(function(){
-    $("#info").hide();
-    $("#error").hide();
-
-    [% IF view != "show_results" %]
-        $("#searchresults").hide();
-        search = 0;
-    [% END %]
-
-    $("#searchmember_filter").on('keyup', function(){
-        filter();
-    });
-    // Apply DataTables on the results table
-    dtMemberResults = $("#memberresultst").dataTable($.extend(true, {}, dataTablesDefaults, {
-        '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': 'name_sorton',
-                'value': 'borrowers.surname borrowers.firstname'
-            },{
-                'name': 'category_sorton',
-                'value': 'categories.description',
-            },{
-                'name': 'branch_sorton',
-                'value': 'branches.branchname'
-            },{
-                'name': 'template_path',
-                'value': '[% json_template %]',
-            },{
-                'name': 'selection_type',
-                'value': '[% selection_type %]',
-            }
-            [% IF patrons_with_acq_perm_only %]
-            ,{
-                'name': 'has_permission',
-                'value': 'acquisition.order_manage',
-            }
-            [% END %]
-            );
-            $.ajax({
-                'dataType': 'json',
-                'type': 'POST',
-                'url': sSource,
-                'data': aoData,
-                'success': function(json){
-                    fnCallback(json);
-                }
-            });
-        },
-        'aoColumns':[
-            [% FOR column IN columns %]
-                [% IF column == 'action' %]
-                    { 'mDataProp': 'dt_action', 'bSortable': false }
-                [% ELSIF column == 'address' %]
-                    { 'mDataProp': 'dt_address', 'bSortable': false }
-                [% ELSE %]
-                    { 'mDataProp': 'dt_[% column %]' }
-                [% END %]
-                [% UNLESS loop.last %],[% END %]
-            [% END %]
-        ],
-        'bAutoWidth': false,
-        [% IF patrons_with_acq_perm_only %]
-            'bPaginate': false,
-        [% ELSE %]
-            'sPaginationType': 'full_numbers',
-            "iDisplayLength": [% Koha.Preference('PatronsPerPage') %],
-        [% END %]
-        'bFilter': false,
-        'bProcessing': true,
-    }));
-    dtMemberResults.fnAddFilters("filter", 750);
-});
-
-var delay = (function(){
-  var timer = 0;
-  return function(callback, ms){
-    clearTimeout (timer);
-    timer = setTimeout(callback, ms);
-  };
-})();
-
-function filter() {
-    search = 1;
-
-    $("#searchresults").show();
-
-    if ( $("#searchmember_filter").val().length > 0 ) {
-        delay(function(){
-            dtMemberResults.fnDraw();
-        }, 1000);
-    }
-
-    return false;
-}
-
-    // modify parent window owner element
-    [% IF selection_type == 'add' %]
-        [%# Note that add_user could sent data instead of borrowername too %]
-        function add_user(borrowernumber, borrowername) {
-            var p = window.opener;
-            $("#info").hide();
-            $("#error").hide();
-            if ( p.add_user(borrowernumber, borrowername) < 0 ) {
-                $("#error").html(_("Borrower '%s' is already in the list.").format(borrowername));
-                $("#error").show();
-            } else {
-                $("#info").html(_("Borrower '%s' added.").format(borrowername));
-                $("#info").show();
-            }
-        }
-    [% ELSIF selection_type == 'select' %]
-        function select_user(borrowernumber, data) {
-            var p = window.opener;
-            p.select_user(borrowernumber, data);
-            window.close();
-        }
-    [% END %]
-//]]>
-</script>
-
+<style> .modal-body .close { display: none; } </style>
 </head>
-<body>
-<div id="patron_search" class="yui-t7">
-  <div id="bd">
-    <div class="yui-g">
 
-        <h3>Search for patron</h3>
+<body id="common_patron_search" class="common">
+<div id="patron_search" class="yui-t7">
+    <div class="container-fluid">
 
-          <label for="searchmember_filter">Search:</label>
-          <input type="text" id="searchmember_filter" value="[% searchmember %]"/>
+        <form id="searchform">
+            <fieldset class="brief">
+                <h3>Search for patron</h3>
+                <ol>
+                    <li>
+                        <label for="searchmember_filter">Search:</label>
+                        <input type="text" id="searchmember_filter" value="[% searchmember | html %]"/>
+                    </li>
+                    <li>
+                        <label for="categorycode_filter">Category:</label>
+                        <select id="categorycode_filter">
+                            <option value="">Any</option>
+                            [% FOREACH category IN categories %]
+                                <option value="[% category.categorycode | html %]">[% category.description | html %]</option>
+                            [% END %]
+                        </select>
+                    </li>
+                    <li>
+                        <label for="branchcode_filter">Library:</label>
+                        <select id="branchcode_filter">
+                            [% SET libraries = Branches.all( only_from_group => 1 ) %]
+                            [% IF libraries.size != 1 %]
+                                <option value="">Any</option>
+                            [% END %]
+                            [% FOREACH l IN libraries %]
+                                <option value="[% l.branchcode | html %]">[% l.branchname | html %]</option>
+                            [% END %]
+                        </select>
+                    </li>
+                </ol>
+                <fieldset class="action">
+                    <input type="submit" value="Search" />
+                </fieldset>
+            </fieldset>
+        </form>
 
         [% IF patrons_with_acq_perm_only %]
             <div class="hint">Only staff with superlibrarian or acquisitions permissions (or order_manage permission if granular permissions are enabled) are returned in the search results</div>
         [% END %]
 
+        <div class="browse">
+            Browse by last name:
+            [% FOREACH letter IN alphabet.split(' ') %]
+                <a href="#" class="filterByLetter">[% letter | html %]</a>
+            [% END %]
+        </div>
+
         <div id="info" class="dialog message"></div>
         <div id="error" class="dialog alert"></div>
 
+        <input type="hidden" id="firstletter_filter" value="" />
         <div id="searchresults">
             <table id="memberresultst">
                 <thead>
@@ -167,6 +76,8 @@ function filter() {
                                 [% CASE 'name' %]<th>Name</th>
                                 [% CASE 'branch' %]<th>Library</th>
                                 [% CASE 'category' %]<th>Category</th>
+                                [% CASE 'dateexpiry' %]<th>Expires on</td>
+                                [% CASE 'borrowernotes' %]<th>Notes</th>
                                 [% CASE 'action' %]<th>&nbsp;</th>
                             [% END %]
                         [% END %]
@@ -176,7 +87,205 @@ function filter() {
             </table>
         </div>
 
-<div id="closewindow"><a href="#" class="close">Close</a></div>
+<div id="closewindow"><a href="#" class="btn btn-default btn-default close">Close</a></div>
+
+<!-- Patron preview modal -->
+<div class="modal" id="patronPreview" tabindex="-1" role="dialog" aria-labelledby="patronPreviewLabel">
+    <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="patronPreviewLabel"></h4>
+            </div>
+            <div class="modal-body">
+                <div id="loading">
+                    <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 </div>
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    [% INCLUDE 'datatables.inc' %]
+
+    <script type="text/javascript">
+        var search = 1;
+        $(document).ready(function(){
+            $("#info").hide();
+            $("#error").hide();
+
+            [% IF view != "show_results" %]
+                $("#searchresults").hide();
+                search = 0;
+            [% END %]
+
+            // Apply DataTables on the results table
+            dtMemberResults = $("#memberresultst").dataTable($.extend(true, {}, dataTablesDefaults, {
+                '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': 'categorycode',
+                        'value': $("#categorycode_filter").val()
+                    },{
+                        'name': 'branchcode',
+                        'value': $("#branchcode_filter").val()
+                    },{
+                        'name': 'name_sorton',
+                        'value': 'borrowers.surname borrowers.firstname'
+                    },{
+                        'name': 'category_sorton',
+                        'value': 'categories.description',
+                    },{
+                        'name': 'branch_sorton',
+                        'value': 'branches.branchname'
+                    },{
+                        'name': 'template_path',
+                        'value': '[% json_template | html %]',
+                    },{
+                        'name': 'selection_type',
+                        'value': '[% selection_type | html %]',
+                    }
+                    [% IF patrons_with_acq_perm_only %]
+                    ,{
+                        'name': 'has_permission',
+                        'value': 'acquisition.order_manage',
+                    }
+                    [% END %]
+                    );
+                    $.ajax({
+                        'dataType': 'json',
+                        'type': 'POST',
+                        'url': sSource,
+                        'data': aoData,
+                        'success': function(json){
+                            fnCallback(json);
+                        }
+                    });
+                },
+                'aoColumns':[
+                    [% FOR column IN columns %]
+                        [% IF column == 'action' %]
+                            { 'mDataProp': 'dt_action', 'bSortable': false, 'sClass': 'actions' }
+                        [% ELSIF column == 'address' %]
+                            { 'mDataProp': 'dt_address', 'bSortable': false }
+                        [% ELSE %]
+                            { 'mDataProp': 'dt_[% column | html %]' }
+                        [% END %]
+                        [% UNLESS loop.last %],[% END %]
+                    [% END %]
+                ],
+                'bAutoWidth': false,
+                [% IF patrons_with_acq_perm_only %]
+                    'bPaginate': false,
+                [% ELSE %]
+                    'sPaginationType': 'full_numbers',
+                    "iDisplayLength": [% Koha.Preference('PatronsPerPage') | html %],
+                [% END %]
+                'aaSorting': [[[% aaSorting || 0 | html %], 'asc']],
+                'bFilter': false,
+                'bProcessing': true,
+            }));
+
+            $("#searchform").on('submit', filter);
+            $(".filterByLetter").on("click",function(e){
+                e.preventDefault();
+                filterByFirstLetterSurname($(this).text());
+            });
+            $("body").on("click",".add_user",function(e){
+                e.preventDefault();
+                var borrowernumber = $(this).data("borrowernumber");
+                var firstname = $(this).data("firstname");
+                var surname = $(this).data("surname");
+                add_user( borrowernumber, firstname + " " + surname );
+            });
+
+            $("body").on("click",".select_user",function(e){
+                e.preventDefault();
+                var borrowernumber = $(this).data("borrowernumber");
+                var borrower_data = $("#borrower_data"+borrowernumber).val();
+                select_user( borrowernumber, JSON.parse(borrower_data) );
+            });
+
+            $("body").on("click",".patron_preview", function( e ){
+                e.preventDefault();
+                var borrowernumber = $(this).data("borrowernumber");
+                var page = "/cgi-bin/koha/members/moremember.pl?print=brief&borrowernumber=" + borrowernumber;
+                $("#patronPreview .modal-body").load( page + " div.container-fluid" );
+                $('#patronPreview').modal({show:true});
+            });
+
+            $("#patronPreview").on('hidden.bs.modal', function (e) {
+                $("#patronPreview .modal-body").html("<img src=\"[% interface | html %]/[% theme | html %]/img/spinner-small.gif\" alt=\"\" /> Loading");
+            });
+
+        });
+
+        function filter() {
+            search = 1;
+            $("#firstletter_filter").val('');
+            $("#searchresults").show();
+            dtMemberResults.fnDraw();
+            return false;
+        }
+
+        // User has clicked on a letter
+        function filterByFirstLetterSurname(letter) {
+            $("#firstletter_filter").val(letter);
+            search = 1;
+            $("#searchresults").show();
+            dtMemberResults.fnDraw();
+        }
+
+        // modify parent window owner element
+        [% IF selection_type == 'add' %]
+            function add_user(borrowernumber, borrowername) {
+                var p = window.opener;
+                // In one place (serials/routing.tt), the page is reload on every add
+                // We have to wait for the page to be there
+                function wait_for_opener () {
+                    if ( ! $(opener.document).find('body').size() ) {
+                        setTimeout(wait_for_opener, 500);
+                    } else {
+                        [%# Note that add_user could sent data instead of borrowername too %]
+                        $("#info").hide();
+                        $("#error").hide();
+                        if ( p.add_user(borrowernumber, borrowername) < 0 ) {
+                            $("#error").html(_("Patron '%s' is already in the list.").format(borrowername));
+                            $("#error").show();
+                        } else {
+                            $("#info").html(_("Patron '%s' added.").format(borrowername));
+                            $("#info").show();
+                        }
+                    }
+                }
+                wait_for_opener();
+            }
+        [% ELSIF selection_type == 'select' %]
+            function select_user(borrowernumber, data) {
+                var p = window.opener;
+                p.select_user(borrowernumber, data);
+                window.close();
+            }
+        [% END %]
+    </script>
+[% END %]
+
+[% SET popup_window = 1 %]
 [% INCLUDE 'intranet-bottom.inc' %]