Bug 30063: Fix sticky
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / includes / patron-search.inc
1 [% USE Koha %]
2 [% USE I18N %]
3 [% USE Branches %]
4 [% USE raw %]
5 [% USE Asset %]
6 [% USE To %]
7
8 [%# Display a simple form %]
9 [% BLOCK patron_search_filters_simple  %]
10     <form id="patron_search_form">
11         <div class="hint">Enter patron card number or partial name:</div>
12         <input type="text" size="40" id="search_patron_filter" class="focus" autocomplete="off" />
13         <input type="submit" value="Search" />
14     </form>
15 [% END %]
16
17 [%# Display a complex patron search form %]
18 [%# - Search: <input> %]
19 [%# You can then pass a list of filters %]
20 [%# - branch: <select library list> %]
21 [%# - category: <select patron category list> %]
22 [%# - search_field: <select patron field list> %]
23 [%# - search_type: <select "contain" or "start with"> %]
24 [% BLOCK patron_search_filters %]
25     <form id="patron_search_form">
26         <fieldset class="brief">
27             <h3>Search for patron</h3>
28             <ol>
29                 <li>
30                     <label for="search_patron_filter">Search:</label>
31                     <input type="text" id="search_patron_filter" value="[% search_filter | html %]" class="focus" />
32                 </li>
33
34                 [% FOR f IN filters %]
35                     [% SWITCH f %]
36                     [% CASE 'branch' %]
37                         <li>
38                             <label for="branchcode_filter">Library:</label>
39                             <select id="branchcode_filter">
40                                 [% SET libraries = Branches.all( only_from_group => 1 ) %]
41                                 [% IF libraries.size != 1 %]
42                                     <option value="">Any</option>
43                                 [% END %]
44                                 [% FOREACH l IN libraries %]
45                                     <option value="[% l.branchcode | html %]">[% l.branchname | html %]</option>
46                                 [% END %]
47                             </select>
48                         </li>
49                     [% CASE 'category' %]
50                         <li>
51                             <label for="categorycode_filter">Category:</label>
52                             <select id="categorycode_filter">
53                                 <option value="">Any</option>
54                                 [% FOREACH category IN categories %]
55                                     <option value="[% category.categorycode | html %]">[% category.description | html %]</option>
56                                 [% END %]
57                             </select>
58                         </li>
59                     [% CASE 'search_field' %]
60                         <li>
61                             <label for="searchfieldstype_filter">Search field:</label>
62                             <select name="searchfieldstype" id="searchfieldstype_filter">
63                                 [% pref_fields = Koha.Preference('DefaultPatronSearchFields').split(',') %]
64                                 [% default_fields = [ 'surname,firstname,othernames,cardnumber,userid', 'surname', 'cardnumber', 'email', 'borrowernumber', 'userid', 'phone', 'address', 'dateofbirth', 'sort1', 'sort2' ] %]
65                                 [% search_options = default_fields.merge(pref_fields).unique %]
66                                 [% FOREACH s_o IN search_options %]
67                                     [% display_name = PROCESS patron_fields name=s_o %]
68                                     [% NEXT IF !display_name %]
69                                     [% IF searchfieldstype == s_o %]
70                                         <option selected="selected" value=[% s_o | html %]>[% display_name | $raw %]</option>
71                                     [% ELSE %]
72                                         <option value=[% s_o | html %]>[% display_name | $raw %]</option>
73                                     [% END %]
74                                 [% END %]
75                             </select>
76                         </li>
77                     [% CASE 'search_type' %]
78                         <li>
79                             <label for="searchtype_filter">Search type:</label>
80                             <select name="searchtype" id="searchtype_filter">
81                               [% IF searchtype == "start_with" %]
82                                 <option value='start_with' selected="selected">Starts with</option>
83                                 <option value="contain">Contains</option>
84                               [% ELSE %]
85                                 <option value='start_with'>Starts with</option>
86                                 <option value="contain" selected="selected">Contains</option>
87                               [% END %]
88                             </select>
89                         </li>
90                     [% END %]
91                 [% END %]
92             </ol>
93             <fieldset class="action">
94                 <input type="submit" value="Search" />
95                 <input type="button" value="Clear" id="clear_search" />
96             </fieldset>
97         </fieldset>
98     </form>
99 [% END %]
100
101 [%# Display the table with: %]
102 [%# - At the top a hint about a possible filter %]
103 [%# - Browse by last name %]
104 [%# - The table %]
105 [%# Get the following parameters: %]
106 [%# - filter: can be 'suggestions_managers', 'orders_managers', 'funds_owners' or 'funds_users' to filter patrons on their permissions %]
107 [%# - table_id: the ID of the table %]
108 [%# open_on_row_click: See patron_search_js %]
109 [%# columns: See patron_search_js %]
110 [% BLOCK patron_search_table %]
111
112     [% IF filter == 'suggestions_managers' %]
113         <div class="hint">Only staff with superlibrarian or suggestions_manage permissions are returned in the search results</div>
114     [% ELSIF filter == 'orders_managers' %]
115         <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>
116     [% ELSIF filter == 'funds_owners' OR filter == 'funds_users' %]
117         <div class="hint">Only staff with superlibrarian or acquisitions permissions (or budget_modify permission if granular permissions are enabled) are returned in the search results</div>
118     [% END %]
119
120     <div class="browse">
121         Browse by last name:
122         [% SET alphabet = Koha.Preference('alphabet').split(' ') %]
123         [% UNLESS alphabet.size %]
124             [% alphabet = ['A' .. 'Z'] %]
125         [% END %]
126         [% FOREACH letter IN alphabet %]
127             <a href="#" class="filterByLetter">[% letter | html %]</a>
128         [% END %]
129     </div>
130
131
132     <h3 style="display: none;">Patrons found for: <span id="searchpattern"></span></h3>
133
134     <div id="[% table_id | html %]_search_results" style="display:none;">
135
136         <div id="info" class="dialog message" style="display: none;"></div>
137         <div id="error" class="dialog alert" style="display: none;"></div>
138
139         <input type="hidden" id="firstletter_filter" value="" />
140         [% IF open_on_row_click %]
141         <table id="[% table_id | html %]" class="selections-table">
142         [% ELSE %]
143         <table id="[% table_id | html %]">
144         [% END %]
145             <thead>
146                 <tr>
147                     [% FOR column IN columns %]
148                         [% SWITCH column %]
149                             [% CASE 'checkbox' %]<th class="noExport"></th>
150                             [% CASE 'cardnumber' %]<th>Card</th>
151                             [% CASE 'dateofbirth' %]<th>Date of birth</th>
152                             [% CASE 'name' %]<th>Name</th>
153                             [% CASE 'name-address' %]<th>Name</th>
154                             [% CASE 'address' %]<th>Address</th>
155                             [% CASE 'address-library' %]<th>Address</th>
156                             [% CASE 'branch' %]<th data-filter="libraries">Library</th>
157                             [% CASE 'category' %]<th data-filter="categories">Category</th>
158                             [% CASE 'dateexpiry' %]<th>Expires on</td>
159                             [% CASE 'borrowernotes' %]<th>Notes</th>
160                             [% CASE 'phone' %]<th>Phone</th>
161                             [% CASE 'checkouts' %]<th>Checkouts</th>
162                             [% CASE 'account_balance' %]<th>Fines</th>
163                             [% CASE 'action' %]<th>&nbsp;</th>
164                         [% END %]
165                     [% END %]
166                 </tr>
167               </thead>
168             <tbody></tbody>
169         </table>
170     </div>
171
172 <!-- Patron preview modal -->
173 <div class="modal" id="patronPreview" tabindex="-1" role="dialog" aria-labelledby="patronPreviewLabel">
174     <div class="modal-dialog" role="document">
175         <div class="modal-content">
176             <div class="modal-header">
177                 <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
178                 <h4 class="modal-title" id="patronPreviewLabel"></h4>
179             </div>
180             <div class="modal-body">
181                 <div id="loading">
182                     <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading
183                 </div>
184             </div>
185             <div class="modal-footer">
186                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
187             </div>
188         </div>
189     </div>
190 </div>
191
192 [% END %]
193
194 [%# Integrate all the JS code, outside of a script tag %]
195 [%# Get the following parameters: %]
196 [%# - redirect_if_one_result: Redirect to the patron if the search returns only one result, note that it will not redirect if filters of the DT are used (this is a feature) %]
197 [%# - redirect_url: The URL to use, the borrowernumber parameter will be added %]
198 [%# filter: Same as patron_search_table %]
199 [%# open_on_row_click: boolean, default off. Will allow to select a patron by clicking on the whole tr element %]
200 [%# columns: list of columns that will be displayed. Possible values are: 'checkbox', 'cardnumber', 'dateofbirth', 'address', 'name', 'name-address', 'branch', 'category', 'dateexpiry', 'borrowernotes, 'phone', 'checkouts', 'account_balance', 'action' %]
201 [%# preview_on_name_click: Open a modal window with patron's info when the name is clicked %]
202 [%# actions: list of buttons to display in the action column. Possible values are: 'select', 'add', 'edit', 'checkout' %]
203 [%# sticky_header and sticky_to: If we need a sticky header %]
204 [%# callback: name of the JS function that will be called when a patron is selected. Only work with action=select %]
205 [%# display_search_description: boolean, default off. Display the description of the search %]
206 [% BLOCK patron_search_js %]
207
208     [% IF redirect_if_one_result && !redirect_url %]
209         <script>console.log("Wrong call of patron_searh_js - missing redirect_url");</script>
210     [% END %]
211     <script>
212         let categories = [% To.json(categories) | $raw %];
213         let categories_map = categories.reduce((map, c) => {
214             map[c.categorycode] = c;
215             return map;
216         }, {});
217         let libraries  = [% To.json(libraries) | $raw %];
218         let libraries_map = libraries.reduce((map, l) => {
219             map[l.branchcode] = l;
220             return map;
221         }, {});
222
223         [% IF Koha.Preference('ExtendedPatronAttributes') && extended_attribute_types %]
224             let extended_attribute_types = [% To.json(extended_attribute_types || []) | $raw %];
225         [% END %]
226
227     </script>
228
229     [% INCLUDE 'datatables.inc' %]
230     [% INCLUDE 'js-date-format.inc' %]
231     [% INCLUDE 'js-patron-get-age.inc' %]
232     [% INCLUDE 'js-patron-format.inc' %]
233     [% INCLUDE 'js-patron-format-address.inc' %]
234     [% IF sticky_header %]
235         [% Asset.js("lib/hc-sticky.js") | $raw %]
236     [% END %]
237
238     <script>
239         var first_draw = 0;
240         let patrons_table;
241         var Sticky;
242         var singleBranchMode = '[% singleBranchMode | html %]';
243         let logged_in_library_id = "[% Branches.GetLoggedInBranchcode | html %]";
244
245         /* popstate event triggered by forward and back button. Need to refresh search */
246         window.addEventListener('popstate', (event) => {
247             getSearchByLocation( false );
248         });
249
250         $(document).ready(function(){
251
252             $("#info").hide();
253             $("#error").hide();
254
255             // Build the aLengthMenu
256             var aLengthMenu = [
257                 [% Koha.Preference('PatronsPerPage') | html %], 10, 20, 50, 100, -1
258             ];
259             jQuery.unique(aLengthMenu);
260             aLengthMenu.sort(function( a, b ){
261                 // Put "All" at the end
262                 if ( a == -1 ) {
263                     return 1;
264                 } else if ( b == -1 ) {
265                     return -1;
266                 }
267                 return parseInt(a) < parseInt(b) ? -1 : 1;}
268             );
269             var aLengthMenuLabel = [];
270             $(aLengthMenu).each(function(){
271                 if ( this == -1 ) {
272                     // Label for -1 is "All"
273                     aLengthMenuLabel.push(_("All"));
274                 } else {
275                     aLengthMenuLabel.push(this);
276                 }
277             });
278
279             let additional_filters = {
280                 surname: function(){
281                     let start_with = $("#firstletter_filter").val()
282                     if (!start_with) return "";
283                     return { "like": start_with + "%" }
284                 },
285                 "-and": function(){
286                     let filter = $("#search_patron_filter").val();
287                     if (!filter) return "";
288
289                     let filters = [];
290                     let search_type = $("#searchtype_filter").val() || "contain";
291                     let search_fields = $("#searchfieldstype_filter").val();
292                     if ( !search_fields ) {
293                         search_fields = "[% Koha.Preference('DefaultPatronSearchFields') || 'surname,firstname,othernames,cardnumber,userid' | html %]";
294                     }
295                     search_fields.split(',').forEach(function(e,i){
296                         filters.push({["me."+e]:{"like":"%"+filter+(search_type == "contain" ? "%" : "" )}});
297                     });
298                     [% IF Koha.Preference('ExtendedPatronAttributes') && extended_attribute_types %]
299                         filters.push({
300                             "extended_attributes.value": { "like": "%" + filter + (search_type == "contain" ? "%" : "" )},
301                             "extended_attributes.code": extended_attribute_types
302                         });
303                     [% END %]
304                     return filters;
305                 }
306             };
307             [% UNLESS default_sort_column %]
308                 [% default_sort_column = "name" %]
309             [% END %]
310             [% SET order_column_index = 0 %]
311             [% SET embed = ['extended_attributes'] %]
312             patrons_table = $("#[% table_id | html %]").kohaTable({
313                 "ajax": {
314                     [% SWITCH filter %]
315                     [% CASE 'suggestions_managers' %]
316                         "url": '/api/v1/suggestions/managers',
317                     [% CASE 'baskets_managers' %]
318                         "url": '/api/v1/acquisitions/baskets/managers',
319                     [% CASE 'funds_owners' %]
320                         "url": '/api/v1/acquisitions/funds/owners',
321                     [% CASE 'funds_users' %]
322                         "url": '/api/v1/acquisitions/funds/users',
323                     [% CASE %]
324                         "url": '/api/v1/patrons',
325                     [% END %]
326                     "dataSrc": function ( json ) {
327                         [% IF redirect_if_one_result %]
328                             // redirect if there is only 1 result.
329                             if ( first_draw && json.recordsFiltered == 1 ) {
330                                 let url = '[% redirect_url | url %]'.indexOf("?") != -1
331                                     ? '[% redirect_url | url %]&borrowernumber=' + json.data[0].patron_id
332                                     : '[% redirect_url | url %]?borrowernumber=' + json.data[0].patron_id;
333                                 document.location.href = url;
334                                 return false;
335                             }
336                             first_draw = 0;
337                         [% END %]
338                         return json.data;
339                     }
340                 },
341                 [% IF open_on_row_click OR preview_on_name_click %]
342                 "drawCallback": function( settings ) {
343                     var api = this.api();
344                     var data = api.data();
345                     if ( data.length == 0 ) return;
346
347                     [% IF open_on_row_click %]
348                     $.each($(this).find("tbody tr"), function(index, tr) {
349                         let url = "[% on_click_url | url %]&borrowernumber=" + data[index].patron_id;
350                         $(tr).off('click').on('click', function() {
351                             document.location.href = url;
352                         }).addClass('clickable');
353                         $(tr).find("a.patron_name").attr('href', url);
354                     });
355                     [% END %]
356                     [% IF preview_on_name_click %]
357                     $.each($(this).find("tbody tr"), function(index, tr) {
358                         $(tr).find("a.patron_name").addClass("patron_preview");
359                     });
360                     [% END %]
361                 },
362                 [% END %]
363                 "iDeferLoading": 0,
364                 "columns": [
365                     [% FOR column IN columns %]
366                         [% IF default_sort_column == column %]
367                             [% order_column_index = loop.count - 1%]
368                         [% END %]
369                         [% SWITCH column %]
370                             [% CASE 'checkbox' %]
371                             {
372                                 "data": "patron_id",
373                                 "searchable": false,
374                                 "orderable": false,
375                                 "render": function( data, type, row, meta ) {
376                                     return "<label for='check" + data + "' class='content_hidden'>" + _("Select patron") + "</label><input type='checkbox' id='check" + data + "' class='selection' name='borrowernumber' value='" + data + "' />";
377                                 }
378                             }
379                             [% CASE 'cardnumber' %]
380                             {
381                                 "data": "cardnumber",
382                                 "searchable": true,
383                                 "orderable": true,
384                                 "render": function( data, type, row, meta ) {
385                                     let patron_id = encodeURIComponent(row.patron_id);
386                                     [% IF !open_on_row_click AND CAN_user_circulate_circulate_remaining_permissions %]
387                                         return "<a href=\"/cgi-bin/koha/circ/circulation.pl?borrowernumber=" + patron_id + "\" title=\"[% I18N.t("Check out") | html %]\" class=\"patron_name\" data-borrowernumber=\"" + patron_id + "\" style=\"white-space:nowrap\">" + escape_str(data) + "</a>";
388                                     [% ELSE %]
389                                         return escape_str(data);
390                                     [% END %]
391                                 }
392
393                             }
394                             [% CASE 'dateofbirth' %]
395                             {
396                                 "data": "date_of_birth",
397                                 "searchable": true,
398                                 "orderable": true,
399                                 "render": function( data, type, row, meta ) {
400                                     return data ? escape_str($date(data) + " (" + _("%s years").format($get_age(data)) + ")") : "";
401                                 }
402                             }
403                             [% CASE 'address' %]
404                             {
405                                 "data": "me.street_number:me.address:me.address2:me.city:me.state:me.postal_code:me.country",
406                                 "searchable": true,
407                                 "orderable": true,
408                                  "render": function( data, type, row, meta ) {
409                                     let r = '<div class="address"><ul>';
410                                     r += $format_address(row, { no_line_break: 1 });
411                                     r += '</div></ul>';
412                                     return r;
413                                 }
414                             }
415                             [% CASE 'address-library' %]
416                             {
417                                 "data": "me.street_number:me.address:me.address2:me.city:me.state:me.postal_code:me.country",
418                                 "searchable": true,
419                                 "orderable": true,
420                                 "render": function( data, type, row, meta ) {
421                                     let r = '<div class="address"><ul>';
422                                     r += $format_address(row, { no_line_break: 1 });
423                                     r += '</div></ul>';
424                                     r += " " + escape_str(libraries_map[row.library_id].branchname);
425                                     return r;
426                                 }
427                             }
428                             [% CASE 'name-address' %]
429                             {
430                                 "data": "me.firstname:me.surname:me.othernames:me.street_number:me.address:me.address2:me.city:me.state:me.postal_code:me.country",
431                                 "searchable": true,
432                                 "orderable": true,
433                                 "render": function( data, type, row, meta ) {
434                                     let patron_id = encodeURIComponent(row.patron_id);
435                                     let r = '';
436                                     [% IF ! open_on_row_click %]
437                                     r += "<a href=\"/cgi-bin/koha/members/moremember.pl?borrowernumber=" + patron_id + "\" class=\"patron_name\" data-borrowernumber=\"" + patron_id + "\" style=\"white-space:nowrap\">" + $patron_to_html(row, { invert_name: 1 }) + "</a>";
438                                     [% ELSE %]
439                                     r += $patron_to_html(row, { invert_name: 1 });
440                                     [% END %]
441                                     r += '<br/>';
442                                     r += '<div class="address"><ul>';
443                                     r += $format_address(row, { no_line_break: 1 });
444
445                                     if ( row.email ) {
446                                         r += "<li>" + _("Email: ") + "<a href='mailto:" + encodeURIComponent(row.email) + "'>" + escape_str(row.email) + "</a></li>";
447                                     }
448                                     r += '</ul></div>'
449
450                                     return r;
451                                 }
452                             }
453                             [% CASE 'name-address' %]
454                             {
455                                 "data": "me.firstname:me.surname:me.othernames:me.street_number:me.address:me.address2:me.city:me.state:me.postal_code:me.country",
456                                 "searchable": true,
457                                 "orderable": true,
458                                 "render": function( data, type, row, meta ) {
459                                     let patron_id = encodeURIComponent(row.patron_id);
460                                     let r = '';
461                                     [% IF ! open_on_row_click %]
462                                     r += "<a href=\"/cgi-bin/koha/members/moremember.pl?borrowernumber=" + patron_id + "\" class=\"patron_name\" data-borrowernumber=\"" + patron_id + "\" style=\"white-space:nowrap\">" + $patron_to_html(row, { invert_name: 1 }) + "</a>";
463                                     [% ELSE %]
464                                     r += $patron_to_html(row, { invert_name: 1 });
465                                     [% END %]
466                                     r += '<br/>';
467                                     r += '<div class="address"><ul>';
468                                     r += $format_address(row, { no_line_break: 1 });
469
470                                     if ( row.email ) {
471                                         r += "<li>" + _("Email: ") + "<a href='mailto:" + encodeURIComponent(row.email) + "'>" + escape_str(row.email) + "</a></li>";
472                                     }
473                                     r += '</ul></div>'
474
475                                     return r;
476                                 }
477                             }
478                             [% CASE 'name' %]
479                             {
480                                 "data": "me.firstname:me.surname:me.othernames",
481                                 "searchable": true,
482                                 "orderable": true,
483                                 "render": function( data, type, row, meta ) {
484                                     let patron_id = encodeURIComponent(row.patron_id);
485                                     [% IF ! open_on_row_click %]
486                                     return "<a href=\"/cgi-bin/koha/members/moremember.pl?borrowernumber=" + patron_id + "\" class=\"patron_name\" data-borrowernumber=\"" + patron_id + "\" style=\"white-space:nowrap\">" + $patron_to_html(row, { invert_name: 1 }) + "</a>";
487                                     [% ELSE %]
488                                     return $patron_to_html(row, { invert_name: 1 });
489                                     [% END %]
490                                 }
491                             }
492                             [% CASE 'branch' %]
493                             {
494                                 "data": "library_id",
495                                 "searchable": true,
496                                 "orderable": true,
497                                 "render": function( data, type, row, meta ) {
498                                     let library_name = libraries_map[data].branchname
499                                     if( !singleBranchMode && data == logged_in_library_id ) {
500                                         return "<span class=\"currentlibrary\">" + escape_str(library_name) + "</span>";
501                                     } else {
502                                         return escape_str(library_name);
503                                     }
504                                 }
505                             }
506                             [% CASE 'category' %]
507                             {
508                                 "data": "category_id",
509                                 "searchable": true,
510                                 "orderable": true,
511                                 "render": function( data, type, row, meta ) {
512                                     return escape_str(categories_map[data].description);
513                                 }
514                             }
515                             [% CASE 'dateexpiry' %]
516                             {
517                                 "data": "expiry_date",
518                                 "searchable": true,
519                                 "orderable": true,
520                                 "render": function( data, type, row, meta ) {
521                                     return data ? escape_str($date(data)) : "";
522                                 }
523                             }
524                             [% CASE 'borrowernotes' %]
525                             {
526                                 "data": "staff_notes",
527                                 "searchable": true,
528                                 "orderable": true,
529                                 [%# We don't escape here, we allow html tag in staff notes %]
530                             }
531                             [% CASE 'phone' %]
532                             {
533                                 "data": "phone",
534                                 "searchable": true,
535                                 "orderable": true,
536                                 "render": function( data, type, row, meta ) {
537                                     return escape_str(data);
538                                 }
539                             }
540                             [% CASE 'checkouts' %][% embed.push('checkouts+count', 'overdues+count') %]
541                             {
542                                 "data": "",
543                                 "searchable": false,
544                                 "orderable": false,
545                                 "render": function( data, type, row, meta ) {
546                                     if ( row.overdues_count ) {
547                                         return "<span class='overdue'><strong>"+row.overdues_count + "</strong></span>";
548                                     } else {
549                                         return "0 / " + row.checkouts_count;
550                                     }
551                                 }
552                             }
553                             [% CASE 'account_balance' %][% embed.push('account_balance') %]
554                             {
555                                 "data": "",
556                                 "searchable": false,
557                                 "orderable": false,
558                                 "render": function( data, type, row, meta ) {
559                                     let r = "<span style='text-align: right; display: block;'><a href=\"/cgi-bin/koha/members/boraccount.pl?borrowernumber="+row.patron_id+"\">";
560                                     let balance_str = row.account_balance || 0;
561                                     balance_str = balance_str.escapeHtml().format_price();
562                                     if ( row.account_balance < 0 ) {
563                                         // FIXME Format price here
564                                         r += "<span class='credit'>" + balance_str + "</span>";
565                                     } else if ( row.account_balance > 0 ) {
566                                         r += "<span class='debit'><strong>" + balance_str  + "</strong></span>"
567                                     } else {
568                                         r += balance_str;
569                                     }
570                                     r += "</a></span>";
571                                     return r;
572                                 }
573                             }
574
575                             [% CASE 'action' %]
576                             {
577                                 "data": function( row, type, val, meta ) {
578
579                                     let patron_id = encodeURIComponent(row.patron_id);
580                                     let action_node = "";
581                                     [% FOR action IN actions %]
582                                     [% SWITCH action %]
583                                     [% CASE 'select' %]
584                                         action_node += '<a href="#" class="btn btn-default btn-xs select_user" data-borrowernumber="' + patron_id + '">Select</a><input type="hidden" id="borrower_data' + patron_id + '" name="borrower_data'+ patron_id + '" value=\''+JSON.stringify(row)+'\' />';
585                                     [% CASE 'add' %]
586                                         action_node += '<a href="#" class="btn btn-default btn-xs add_user" data-borrowernumber="' + patron_id + '" data-firstname="' + encodeURIComponent(row.firstname) + '" data-surname="' + encodeURIComponent(row.surname) + '">Add</a><input type="hidden" id="borrower_data' + patron_id + '" name="borrower_data'+ patron_id + '" />';
587                                     [% CASE 'edit' %]
588                                         action_node += '<a href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=circ&amp;borrowernumber=' + patron_id + '" class="btn btn-default btn-xs"><i class="fa fa-pencil"></i> Edit</a>';
589                                     [% CASE 'checkout' %]
590                                         [% IF CAN_user_circulate_circulate_remaining_permissions %]
591                                             action_node += '<a class="btn btn-default btn-xs" href="/cgi-bin/koha/circ/circulation.pl?borrowernumber=' + patron_id + '"><i class="fa fa-barcode"></i> ' + _("Check out") + '</a>';
592                                         [% END %]
593                                     [% END %]
594                                     [% END %]
595                                     return action_node;
596                                 },
597                                 "searchable": false,
598                                 "orderable": false
599                             }
600                         [% END %]
601                         [% UNLESS loop.last %],[% END %]
602                     [% END %]
603                 ],
604                 'embed': [% To.json(embed) | $raw %],
605                 "order": [[ [% order_column_index | html %], "asc" ]],
606                 'bAutoWidth': false,
607                 'lengthMenu': [aLengthMenu, aLengthMenuLabel],
608                 'sPaginationType': 'full_numbers',
609                 "pageLength": [% Koha.Preference('PatronsPerPage') | html %],
610                 [% IF sticky_header %]
611                 "initComplete": function(settings, json) {
612                     $("#[% sticky_header %]").show();
613                     Sticky = $("#[% sticky_header | html %]");
614                     Sticky.hcSticky({
615                         stickTo: "#[% sticky_to | html %]",
616                         stickyClass: "floating"
617                     });
618                 },
619                 [% END %]
620             }, typeof table_settings !== 'undefined' ? table_settings : null, 1, additional_filters);
621
622             $("#patron_search_form").on('submit', filter);
623             $(".filterByLetter").on("click",function(e){
624                 e.preventDefault();
625                 filterByFirstLetterSurname($(this).text(), true);
626             });
627             $("body").on("click",".add_user",function(e){
628                 e.preventDefault();
629                 var borrowernumber = $(this).data("borrowernumber");
630                 var firstname = $(this).data("firstname");
631                 var surname = $(this).data("surname");
632                 add_user( borrowernumber, firstname + " " + surname );
633             });
634
635             $("body").on("click",".select_user",function(e){
636                 e.preventDefault();
637                 var borrowernumber = $(this).data("borrowernumber");
638                 var borrower_data = $("#borrower_data"+borrowernumber).val();
639                 select_user( borrowernumber, JSON.parse(borrower_data) );
640             });
641
642             $("body").on("click",".patron_preview", function( e ){
643                 e.preventDefault();
644                 var borrowernumber = $(this).data("borrowernumber");
645                 var page = "/cgi-bin/koha/members/moremember.pl?print=brief&borrowernumber=" + borrowernumber;
646                 $("#patronPreview .modal-body").load( page + " div.container-fluid" );
647                 $('#patronPreview').modal({show:true});
648             });
649
650             $("#patronPreview").on('hidden.bs.modal', function (e) {
651                 $("#patronPreview .modal-body").html("<img src=\"[% interface | html %]/[% theme | html %]/img/spinner-small.gif\" alt=\"\" /> Loading");
652             });
653
654             $("#clear_search").on("click",function(e){
655                 e.preventDefault();
656                 clearFilters();
657                 $("#searchpattern").parent().hide();
658             });
659
660             if ( $("#search_patron_filter").val().length > 0 ) {
661                 $("#patron_search_form").submit();
662             }
663
664             /* Initial page load does not trigger the popstate event, so we explicitly call this */
665             getSearchByLocation( false );
666
667         });
668
669         function getSearchByLocation( setstate ){
670             /* Check to see if the URL contains a search parameter */
671             if( location.search != ""){
672                 var params = new URLSearchParams( location.search );
673                 var firstletter = params.get("firstletter");
674                 /* Check to see if search is a first letter param */
675                 if( firstletter ){
676                     /* Trigger function to return search results by letter */
677                     filterByFirstLetterSurname( firstletter, setstate );
678                 }
679             }
680         }
681
682         function update_search_description(){
683             var searched = $("#searchfieldstype_filter").find("option:selected").text();
684             if ( $("#search_patron_filter").val() ) {
685                 if ( $("#searchtype_filter").val() == 'start_with' ) {
686                     searched += _(" starting with ");
687                 } else {
688                     searched += _(" containing ");
689                 }
690                 searched += "'" + $("#search_patron_filter").val() + "'";
691             }
692             if ( $("#firstletter_filter").val() ) {
693                 searched += _(" begins with ") + "'" + $("#firstletter_filter").val() +"'";
694             }
695             if ( $("#categorycode_filter").val() ) {
696                 searched += _(" with category ") + "'" + $("#categorycode_filter").find("option:selected").text() + "'";
697             }
698             if ( $("#branchcode_filter").val() ) {
699                 searched += _(" in library ") + $("#branchcode_filter").find("option:selected").text();
700             }
701             $("#searchpattern").text(searched);
702             $("#searchpattern").parent().show();
703         }
704
705         function filter() {
706             $("#firstletter_filter").val('');
707             $("#[% table_id | html %]_search_results").show();
708
709             let table_dt = patrons_table.DataTable();
710             [% FOR c IN columns %]
711                 [% SWITCH c %]
712                 [% CASE 'branch' %]
713                     library_id = $("#branchcode_filter").val() || "";
714                     patrons_table.find('thead tr:eq(1) th[data-filter="libraries"] select').val(library_id);
715                     table_dt.column([% loop.count - 1 %]).search(library_id ? '^'+library_id+'$' : '');
716                 [% CASE 'category' %]
717                     let category_id = $("#categorycode_filter").val() || "";
718                     patrons_table.find('thead tr:eq(1) th[data-filter="categories"] select').val(category_id);
719                     table_dt.column([% loop.count - 1 %]).search(category_id ? '^'+category_id+'$' : '');
720                 [% END %]
721             [% END %]
722             table_dt.search("");
723             first_draw = 1; // Only redirect if we are coming from here
724             table_dt.draw();
725             [% IF display_search_description %]
726                 update_search_description();
727             [% END %]
728             return false;
729         }
730
731         function clearFilters() {
732             $("#searchfieldstype_filter option:first").prop("selected", true);
733             $("#searchtype_filter option[value='contain']").prop("selected", true);
734             $("#categorycode_filter option:first").prop("selected", true);
735             $("#branchcode_filter option:first").prop("selected", true);
736             $("#firstletter_filter").val('');
737             $("#search_patron_filter").val('');
738             /* remove any search string added by firstletter search */
739             history.pushState( {}, null, window.location.href.split("?" )[0]);
740             $("#[% table_id | html %]_search_results").hide();
741             [% IF display_search_description %]
742                 update_search_description();
743             [% END %]
744         }
745
746         // User has clicked on a letter
747         function filterByFirstLetterSurname(letter, setstate ) {
748             $("#firstletter_filter").val(letter);
749
750             $("#[% table_id | html %]_search_results").show();
751
752             if ( setstate ) {
753                 history.pushState( null, null, "?firstletter=" + letter );
754             }
755
756             patrons_table.DataTable().draw();
757             [% IF display_search_description %]
758                 update_search_description();
759             [% END %]
760         }
761
762         // modify parent window owner element
763         function add_user(borrowernumber, borrowername) {
764             var p = window.opener;
765             // In one place (serials/routing.tt), the page is reload on every add
766             // We have to wait for the page to be there
767             function wait_for_opener () {
768                 if ( ! $(opener.document).find('body').size() ) {
769                     setTimeout(wait_for_opener, 500);
770                 } else {
771                     [%# Note that add_user could sent data instead of borrowername too %]
772                     $("#info").hide();
773                     $("#error").hide();
774                     if ( p.add_user(borrowernumber, borrowername) < 0 ) {
775                         $("#error").html(_("Patron '%s' is already in the list.").format(borrowername));
776                         $("#error").show();
777                     } else {
778                         $("#info").html(_("Patron '%s' added.").format(borrowername));
779                         $("#info").show();
780                     }
781                 }
782             }
783             wait_for_opener();
784         }
785         function select_user(borrowernumber, data) {
786             var p = window.opener;
787             [%  IF callback %]
788                 p.[% callback | html %](borrowernumber, data);
789             [%  ELSE %]
790                 p.select_user(borrowernumber, data);
791             [%  END %]
792             window.close();
793         }
794     </script>
795 [% END %]