Bug 21964: Update two-column templates with Bootstrap grid: Patrons part 2
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / members / member.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% USE ColumnsSettings %]
5 [% USE Branches %]
6 [% USE Categories %]
7 [% SET footerjs = 1 %]
8 [% INCLUDE 'doc-head-open.inc' %]
9 <title>Koha &rsaquo; Patrons [% IF ( searching ) %]&rsaquo; Search results[% END %]</title>
10 [% INCLUDE 'doc-head-close.inc' %]
11 [% Asset.css("css/datatables.css") | $raw %]
12 </head>
13
14 <body id="pat_member" class="pat">
15 [% INCLUDE 'header.inc' %]
16 [% INCLUDE 'patron-search.inc' %]
17
18 <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>
19
20 <div class="main container-fluid">
21     <div class="row">
22         <div class="col-sm-10 col-sm-push-2">
23             <main>
24
25           [% IF CAN_user_tools_manage_patron_lists %]
26             <div id="patron_list_dialog" class="dialog alert">
27               Added <span class="patrons-length"></span> patrons to <a></a>.
28             </div>
29           [% END %]
30
31           [% INCLUDE 'patron-toolbar.inc' %]
32           [% INCLUDE 'noadd-warnings.inc' %]
33
34           <div class="browse">
35             Browse by last name:
36             [% FOREACH letter IN alphabet.split(' ') %]
37                 <a href="#" class="filterByLetter">[% letter | html %]</a>
38             [% END %]
39           </div>
40
41           [% IF CAN_user_borrowers_edit_borrowers && pending_borrower_modifications %]
42             <div class="pending-info" id="patron_updates_pending">
43               <a href="/cgi-bin/koha/members/members-update.pl">Patrons requesting modifications</a>:
44               <span class="number_box"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications | html %]</a></span>
45             </div>
46           [% END %]
47
48           <div id="searchresults">
49             <div id="searchheader">
50               <h3>Patrons found for: <span id="searchpattern">[% IF searchmember %] for '[% searchmember | html %]'[% END %]</span></h3>
51             </div>
52             [% IF CAN_user_tools_manage_patron_lists || CAN_user_borrowers_edit_borrowers %]
53               <div id="searchheader">
54                   <div>
55                       <a href="#" id="select_all"><i class="fa fa-check"></i> Select all</a>
56                       |
57                       <a href="#" id="clear_all"><i class="fa fa-remove"></i> Clear all</a>
58                     [% IF CAN_user_tools_manage_patron_lists %]
59                       |
60                       <span>
61                           <label for="add_to_patron_list">Add selected patrons to:</label>
62                           <select id="add_to_patron_list" name="add_to_patron_list">
63                               <option value=""></option>
64                               [% IF patron_lists %]
65                                   <optgroup label="Patron lists:">
66                                       [% FOREACH pl IN patron_lists %]
67                                           <option value="[% pl.patron_list_id | html %]">[% pl.name | html %]</option>
68                                       [% END %]
69                                   </optgroup>
70                               [% END %]
71
72                               <option value="new">[ New list ]</option>
73                           </select>
74
75                           <input type="text" id="new_patron_list" name="new_patron_list" id="new_patron_list" />
76
77                           <input id="add_to_patron_list_submit" type="submit" class="submit" value="Save">
78                       </span>
79                     [% END %]
80
81                     [% IF CAN_user_tools_manage_patron_lists && CAN_user_borrowers_edit_borrowers %]
82                         |
83                     [% END %]
84
85                     [% IF CAN_user_borrowers_edit_borrowers %]
86                           <button id="merge-patrons" type="submit">Merge selected patrons</button>
87                     [% END %]
88                   </div>
89                 </div>
90             [% END %]
91
92             <table id="memberresultst">
93               <thead>
94                 <tr>
95                 [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
96                   <th>&nbsp;</th>
97                 [% END %]
98                   <th>Card</th>
99                   <th>Name</th>
100                   <th>Date of birth</th>
101                   <th>Category</th>
102                   <th>Library</th>
103                   <th>Expires on</th>
104                   <th>OD/Checkouts</th>
105                   <th>Fines</th>
106                   <th>Circ note</th>
107                   <th>&nbsp;</th>
108                 </tr>
109               </thead>
110               <tbody></tbody>
111             </table>
112           </div>
113
114             </main>
115         </div> <!-- /.col-sm-10.col-sm-push-2 -->
116
117         <div class="col-sm-2 col-sm-pull-10">
118             <aside>
119                 <form method="get" id="searchform">
120                   <input type="hidden" id="firstletter_filter" value="" />
121                   <fieldset class="brief">
122                     <h3>Filters</h3>
123                     <ol>
124                       <li>
125                         <label for="searchmember_filter">Search:</label>
126                         <input type="text" id="searchmember_filter" value="[% searchmember | html %]"/>
127                       </li>
128                       <li>
129                         <label for="searchfieldstype_filter">Search fields:</label>
130                         <select name="searchfieldstype" id="searchfieldstype_filter">
131                           [% IF searchfieldstype == "standard" %]
132                             <option selected="selected" value='standard'>Standard</option>
133                           [% ELSE %]
134                             <option value='standard'>Standard</option>
135                           [% END %]
136                           [% IF searchfieldstype == "surname" %]
137                             <option selected="selected" value='surname'>Surname</option>
138                           [% ELSE %]
139                             <option value='surname'>Surname</option>
140                           [% END %]
141                           [% IF searchfieldstype == "email" %]
142                             <option selected="selected" value='email'>Email</option>
143                           [% ELSE %]
144                             <option value='email'>Email</option>
145                           [% END %]
146                           [% IF searchfieldstype == "borrowernumber" %]
147                             <option selected="selected" value='borrowernumber'>Borrower number</option>
148                           [% ELSE %]
149                             <option value='borrowernumber'>Borrower number</option>
150                           [% END %]
151                           [% IF searchfieldstype == "userid" %]
152                             <option selected="selected" value='userid'>Username</option>
153                           [% ELSE %]
154                             <option value='userid'>Username</option>
155                           [% END %]
156                           [% IF searchfieldstype == "phone" %]
157                             <option selected="selected" value='phone'>Phone number</option>
158                           [% ELSE %]
159                             <option value='phone'>Phone number</option>
160                           [% END %]
161                           [% IF searchfieldstype == "address" %]
162                             <option selected="selected" value='address'>Street address</option>
163                           [% ELSE %]
164                             <option value='address'>Street address</option>
165                           [% END %]
166                           [% IF searchfieldstype == "dateofbirth" %]
167                             <option selected="selected" value='dateofbirth'>Date of birth</option>
168                           [% ELSE %]
169                             <option value='dateofbirth'>Date of birth</option>
170                           [% END %]
171                           [% IF searchfieldstype == "sort1" %]
172                             <option selected="selected" value='sort1'>Sort field 1</option>
173                           [% ELSE %]
174                             <option value='sort1'>Sort field 1</option>
175                           [% END %]
176                           [% IF searchfieldstype == "sort2" %]
177                             <option selected="selected" value='sort2'>Sort field 2</option>
178                           [% ELSE %]
179                             <option value='sort2'>Sort field 2</option>
180                           [% END %]
181                         </select>
182                       </li>
183                       <li>
184                         <label for="searchtype_filter">Search type:</label>
185                         <select name="searchtype" id="searchtype_filter">
186                           [% IF searchtype == "start_with" %]
187                             <option value='start_with' selected="selected">Starts with</option>
188                             <option value="contain">Contains</option>
189                           [% ELSE %]
190                             <option value='start_with'>Starts with</option>
191                             <option value="contain" selected="selected">Contains</option>
192                           [% END %]
193                         </select>
194                       </li>
195                       <li>
196                         <label for="categorycode_filter">Category:</label>
197                         [% SET categories = Categories.all() %]
198                         <select id="categorycode_filter">
199                           <option value="">Any</option>
200                           [% FOREACH cat IN categories %]
201                             [% IF cat.categorycode == categorycode_filter %]
202                     <option selected="selected" value="[% cat.categorycode | html %]">[% cat.description | html %]</option>
203                             [% ELSE %]
204                     <option value="[% cat.categorycode | html %]">[% cat.description | html %]</option>
205
206                             [% END %]
207                           [% END %]
208                         </select>
209                       </li>
210                       <li>
211                         <label for="branchcode_filter">Library:</label>
212                         [% SET branches = Branches.all( selected => branchcode_filter, only_from_group => 1 ) %]
213                         <select id="branchcode_filter">
214                           [% IF branches.size != 1 %]
215                             <option value="">Any</option>
216                           [% END %]
217                           [% PROCESS options_for_libraries libraries => branches %]
218                         </select>
219                       </li>
220                     </ol>
221                     <fieldset class="action">
222                       <input type="submit" value="Search" />
223                       <input type="button" value="Clear" id="clear_search" />
224                     </fieldset>
225                   </fieldset>
226                 </form>
227             </aside>
228         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
229     </div> <!-- /.row -->
230
231 [% MACRO jsinclude BLOCK %]
232     [% INCLUDE 'datatables.inc' %]
233     [% INCLUDE 'columns_settings.inc' %]
234     [% INCLUDE 'str/members-menu.inc' %]
235     [% Asset.js("js/members-menu.js") | $raw %]
236     <script>
237         $(document).ready(function() {
238             $('#merge-patrons').prop('disabled', true);
239             $('#memberresultst').on('change', 'input.selection', function() {
240                 if ( $('.selection:checked').length > 1 ) {
241                     $('#merge-patrons').prop('disabled', false);
242                 } else {
243                     $('#merge-patrons').prop('disabled', true);
244                 }
245             });
246             $('#merge-patrons').on('click', function() {
247                 var merge_patrons_url = 'merge-patrons.pl?' + $('.selection:checked')
248                     .map(function() {
249                        return "id=" + $(this).val()
250                     }).get().join('&');
251
252                 window.location.href = merge_patrons_url;
253             });
254
255             $('#add_to_patron_list_submit').prop('disabled', true);
256             $('#new_patron_list').hide();
257
258             $('#add_to_patron_list').change(function() {
259                 var value = $('#add_to_patron_list').val();
260                 if ( value == 'new' ) {
261                     $('#new_patron_list').val('')
262                     $('#new_patron_list').show();
263                     $('#new_patron_list').focus();
264                 } else if ( value ) {
265                     $('#new_patron_list').hide();
266                     $('#add_to_patron_list_submit').prop('disabled', false);
267                 } else {
268                     $('#new_patron_list').hide();
269                     $('#add_to_patron_list_submit').prop('disabled', true);
270                 }
271             });
272
273             $('#new_patron_list').on('input', function() {
274                 if ( $('#new_patron_list').val() ) {
275                     $('#add_to_patron_list_submit').prop('disabled', false);
276                 } else {
277                     $('#add_to_patron_list_submit').prop('disabled', true);
278                 }
279             });
280
281             $("#add_to_patron_list_submit").on('click', function(e){
282                 if ( $('#add_to_patron_list').val() == 'new' ) {
283                     if ( $('#new_patron_list').val() ) {
284                         $("#add_to_patron_list option").each(function() {
285                             if ( $(this).text() == $('#new_patron_list').val() ) {
286                                 alert( _("You already have a list with that name!") );
287                                 return false;
288                             }
289                         });
290                     } else {
291                         alert( _("You must give your new patron list a name!") );
292                         return false;
293                     }
294                 }
295
296                 if ( $("#memberresultst input:checkbox:checked").length == 0 ) {
297                     alert( _("You have not selected any patrons to add to a list!") );
298                     return false;
299                 }
300
301                 var borrowernumbers = [];
302                 $("#memberresultst").find("input:checkbox:checked").each(function(){
303                     borrowernumbers.push($(this).val());
304                 });
305                 var data = {
306                     add_to_patron_list: $("#add_to_patron_list").val(),
307                     new_patron_list: $("#new_patron_list").val(),
308                     borrowernumbers: borrowernumbers
309                 };
310                 $.ajax({
311                     data: data,
312                     type: 'POST',
313                     url: '/cgi-bin/koha/svc/members/add_to_list',
314                     success: function(data) {
315                         $("#patron_list_dialog").show();
316                         $("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
317                         $("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
318                         $("#patron_list_dialog > a").html(data.patron_list.name);
319                         if ( $('#add_to_patron_list').val() == 'new' ) {
320                             var new_patron_list_added = $("<option>", {
321                                 value: data.patron_list.patron_list_id,
322                                 text: data.patron_list.name
323                             });
324                             $("#add_to_patron_list optgroup").append(new_patron_list_added);
325                             $("#add_to_patron_list").val(data.patron_list.patron_list_id);
326                             $("#new_patron_list").val('');
327                             $('#add_to_patron_list').change();
328                         }
329                     },
330                     error: function() {
331                         alert("an error occurred");
332                     }
333                 });
334                 return true;
335             });
336             $(".filterByLetter").on("click",function(e){
337                 e.preventDefault();
338                 filterByFirstLetterSurname($(this).text());
339             });
340             $("#select_all").on("click",function(e){
341                 e.preventDefault();
342                 $(".selection").prop("checked", true).change();
343             });
344             $("#clear_all").on("click",function(e){
345                 e.preventDefault();
346                 $(".selection").prop("checked", false).change();
347             });
348             $("#clear_search").on("click",function(e){
349                 e.preventDefault();
350                 clearFilters(true);
351             });
352             $("#searchform").on("submit", filter);
353         });
354
355         var dtMemberResults;
356         var search = 1;
357         $(document).ready(function() {
358             [% IF searchmember %]
359                 $("#searchmember_filter").val("[% searchmember | html %]");
360             [% END %]
361             [% IF searchfieldstype %]
362                 $("searchfieldstype_filter").val("[% searchfieldstype | html %]");
363             [% END %]
364             [% IF searchtype %]
365                 $("#searchtype_filter").val("[% searchtype | html %]");
366             [% END %]
367             [% IF categorycode %]
368                 $("#categorycode_filter").val("[% categorycode_filter | html %]");
369             [% END %]
370             [% IF branchcode %]
371                 $("#branchcode_filter").val("[% branchcode_filter | html %]");
372             [% END %]
373
374             [% IF view != "show_results" %]
375                 search = 0;
376             [% ELSE %]
377                 $("#searchresults").show();
378             [% END %]
379
380             // Build the aLengthMenu
381             var aLengthMenu = [
382                 [% PatronsPerPage | html %], 10, 20, 50, 100, -1
383             ];
384             jQuery.unique(aLengthMenu);
385             aLengthMenu.sort(function( a, b ){
386                 // Put "All" at the end
387                 if ( a == -1 ) {
388                     return 1;
389                 } else if ( b == -1 ) {
390                     return -1;
391                 }
392                 return parseInt(a) < parseInt(b) ? -1 : 1;}
393             );
394             var aLengthMenuLabel = [];
395             $(aLengthMenu).each(function(){
396                 if ( this == -1 ) {
397                     // Label for -1 is "All"
398                     aLengthMenuLabel.push(_("All"));
399                 } else {
400                     aLengthMenuLabel.push(this);
401                 }
402             });
403
404             // Apply DataTables on the results table
405             var columns_settings = [% ColumnsSettings.GetColumns( 'members', 'member', 'memberresultst', 'json' ) | $raw %];
406             [% UNLESS CAN_user_borrowers_edit_borrowers OR CAN_user_tools_manage_patron_lists %]
407                 [%# Remove the first column if we do not display the checkbox %]
408                 columns_settings.splice(0, 1);
409             [% END %]
410             dtMemberResults = KohaTable("memberresultst", {
411                 'bServerSide': true,
412                 'sAjaxSource': "/cgi-bin/koha/svc/members/search",
413                 'fnServerData': function(sSource, aoData, fnCallback) {
414                     if ( ! search ) {
415                         return;
416                     }
417                     aoData.push({
418                         'name': 'searchmember',
419                         'value': $("#searchmember_filter").val()
420                     },{
421                         'name': 'firstletter',
422                         'value': $("#firstletter_filter").val()
423                     },{
424                         'name': 'searchfieldstype',
425                         'value': $("#searchfieldstype_filter").val()
426                     },{
427                         'name': 'searchtype',
428                         'value': $("#searchtype_filter").val()
429                     },{
430                         'name': 'categorycode',
431                         'value': $("#categorycode_filter").val()
432                     },{
433                         'name': 'branchcode',
434                         'value': $("#branchcode_filter").val()
435                     },{
436                         'name': 'name_sorton',
437                         'value': 'borrowers.surname borrowers.firstname'
438                     },{
439                         'name': 'dateofbirth',
440                         'value': 'borrowers.dateofbirth',
441                     },{
442                         'name': 'category_sorton',
443                         'value': 'categories.description',
444                     },{
445                         'name': 'branch_sorton',
446                         'value': 'branches.branchname'
447                     },{
448                         'name': 'template_path',
449                         'value': 'members/tables/members_results.tt',
450                     });
451                     $.ajax({
452                         'dataType': 'json',
453                         'type': 'POST',
454                         'url': sSource,
455                         'data': aoData,
456                         'success': function(json){
457                             // redirect if there is only 1 result.
458                             if ( json.aaData.length == 1 ) {
459                                 var borrowernumber = json.aaData[0].borrowernumber;
460                                 document.location.href="/cgi-bin/koha/members/moremember.pl?borrowernumber="+borrowernumber;
461                                 return false;
462                             }
463                             fnCallback(json);
464                         }
465                     });
466                 },
467                 'aoColumns':[
468                     [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
469                       { 'mDataProp': 'dt_borrowernumber', 'bSortable': false },
470                     [% END %]
471                     { 'mDataProp': 'dt_cardnumber' },
472                     { 'mDataProp': 'dt_name' },
473                     { 'mDataProp': 'dt_dateofbirth' },
474                     { 'mDataProp': 'dt_category' },
475                     { 'mDataProp': 'dt_branch' },
476                     { 'mDataProp': 'dt_dateexpiry' },
477                     { 'mDataProp': 'dt_od_checkouts', 'bSortable': false },
478                     { 'mDataProp': 'dt_fines', 'bSortable': false },
479                     { 'mDataProp': 'dt_borrowernotes' },
480                     { 'mDataProp': 'dt_action', 'bSortable': false, 'sClass': 'actions' }
481                 ],
482                 'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
483                     /* Center text for 6th column */
484                     $("td:eq(5)", nRow).css("text-align", "center");
485
486                     return nRow;
487                 },
488                 'bFilter': false,
489                 'bAutoWidth': false,
490                 [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
491                     'aaSorting': [[2, 'asc']],
492                 [% ELSE %]
493                     'aaSorting': [[1, 'asc']],
494                 [% END %]
495                 "aLengthMenu": [aLengthMenu, aLengthMenuLabel],
496                 'sPaginationType': 'full_numbers',
497                 "iDisplayLength": [% PatronsPerPage | html %],
498                 "bProcessing": true,
499             }, columns_settings);
500             update_searched();
501         });
502
503         // Update the string "Results found ..."
504         function update_searched(){
505             var searched = $("#searchfieldstype_filter").find("option:selected").text();
506             if ( $("#searchmember_filter").val() ) {
507                 if ( $("#searchtype_filter").val() == 'start_with' ) {
508                     searched += _(" starting with ");
509                 } else {
510                     searched += _(" containing ");
511                 }
512                 searched += "'" + $("#searchmember_filter").val() + "'";
513             }
514             if ( $("#firstletter_filter").val() ) {
515                 searched += _(" begins with ") + "'" + $("#firstletter_filter").val() +"'";
516             }
517             if ( $("#categorycode_filter").val() ) {
518                 searched += _(" with category ") + "'" + $("#categorycode_filter").find("option:selected").text() + "'";
519             }
520             if ( $("#branchcode_filter").val() ) {
521                 searched += _(" in library ") + $("#branchcode_filter").find("option:selected").text();
522             }
523             $("#searchpattern").text(searched);
524         }
525
526         // Redraw the table
527         function filter() {
528             $("#firstletter_filter").val('');
529             update_searched();
530             search = 1;
531             $("#searchresults").show();
532             dtMemberResults.fnDraw();
533             return false;
534         }
535
536         // User has clicked on the Clear button
537         function clearFilters(redraw) {
538             $("#searchform select").val('');
539             $("#firstletter_filter").val('');
540             $("#searchmember_filter").val('');
541             if(redraw) {
542                 search = 1;
543                 $("#searchresults").show();
544                 dtMemberResults.fnDraw();
545             }
546         }
547
548         // User has clicked on a letter
549         function filterByFirstLetterSurname(letter) {
550             clearFilters(false);
551             $("#firstletter_filter").val(letter);
552             update_searched();
553             search = 1;
554             $("#searchresults").show();
555             dtMemberResults.fnDraw();
556         }
557     </script>
558 [% END %]
559
560 [% INCLUDE 'intranet-bottom.inc' %]