Bug 22015: Move DataTables CSS to global include
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / common / patron_search.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% USE Branches %]
5 [% SET footerjs = 1 %]
6 [% INCLUDE 'doc-head-open.inc' %]
7 <title>Koha &rsaquo; Patron search</title>
8 [% INCLUDE 'doc-head-close.inc' %]
9 <style> .modal-body .close { display: none; } </style>
10 </head>
11
12 <body id="common_patron_search" class="common">
13 <div id="patron_search" class="yui-t7">
14     <div class="container-fluid">
15
16         <form id="searchform">
17             <fieldset class="brief">
18                 <h3>Search for patron</h3>
19                 <ol>
20                     <li>
21                         <label for="searchmember_filter">Search:</label>
22                         <input type="text" id="searchmember_filter" value="[% searchmember | html %]"/>
23                     </li>
24                     <li>
25                         <label for="categorycode_filter">Category:</label>
26                         <select id="categorycode_filter">
27                             <option value="">Any</option>
28                             [% FOREACH category IN categories %]
29                                 <option value="[% category.categorycode | html %]">[% category.description | html %]</option>
30                             [% END %]
31                         </select>
32                     </li>
33                     <li>
34                         <label for="branchcode_filter">Library:</label>
35                         <select id="branchcode_filter">
36                             [% SET libraries = Branches.all( only_from_group => 1 ) %]
37                             [% IF libraries.size != 1 %]
38                                 <option value="">Any</option>
39                             [% END %]
40                             [% FOREACH l IN libraries %]
41                                 <option value="[% l.branchcode | html %]">[% l.branchname | html %]</option>
42                             [% END %]
43                         </select>
44                     </li>
45                 </ol>
46                 <fieldset class="action">
47                     <input type="submit" value="Search" />
48                 </fieldset>
49             </fieldset>
50         </form>
51
52         [% IF patrons_with_acq_perm_only %]
53             <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>
54         [% END %]
55
56         <div class="browse">
57             Browse by last name:
58             [% FOREACH letter IN alphabet.split(' ') %]
59                 <a href="#" class="filterByLetter">[% letter | html %]</a>
60             [% END %]
61         </div>
62
63         <div id="info" class="dialog message"></div>
64         <div id="error" class="dialog alert"></div>
65
66         <input type="hidden" id="firstletter_filter" value="" />
67         <div id="searchresults">
68             <table id="memberresultst">
69                 <thead>
70                     <tr>
71                         [% FOR column IN columns %]
72                             [% SWITCH column %]
73                                 [% CASE 'cardnumber' %]<th>Card</th>
74                                 [% CASE 'dateofbirth' %]<th>Date of birth</th>
75                                 [% CASE 'address' %]<th>Address</th>
76                                 [% CASE 'name' %]<th>Name</th>
77                                 [% CASE 'branch' %]<th>Library</th>
78                                 [% CASE 'category' %]<th>Category</th>
79                                 [% CASE 'dateexpiry' %]<th>Expires on</td>
80                                 [% CASE 'borrowernotes' %]<th>Notes</th>
81                                 [% CASE 'action' %]<th>&nbsp;</th>
82                             [% END %]
83                         [% END %]
84                     </tr>
85                   </thead>
86                 <tbody></tbody>
87             </table>
88         </div>
89
90 <div id="closewindow"><a href="#" class="btn btn-default btn-default close">Close</a></div>
91
92 <!-- Patron preview modal -->
93 <div class="modal" id="patronPreview" tabindex="-1" role="dialog" aria-labelledby="patronPreviewLabel">
94     <div class="modal-dialog" role="document">
95         <div class="modal-content">
96             <div class="modal-header">
97                 <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
98                 <h4 class="modal-title" id="patronPreviewLabel"></h4>
99             </div>
100             <div class="modal-body">
101                 <div id="loading">
102                     <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading
103                 </div>
104             </div>
105             <div class="modal-footer">
106                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
107             </div>
108         </div>
109     </div>
110 </div>
111
112 </div>
113 </div>
114
115 [% MACRO jsinclude BLOCK %]
116     [% INCLUDE 'datatables.inc' %]
117
118     <script type="text/javascript">
119         var search = 1;
120         $(document).ready(function(){
121             $("#info").hide();
122             $("#error").hide();
123
124             [% IF view != "show_results" %]
125                 $("#searchresults").hide();
126                 search = 0;
127             [% END %]
128
129             // Apply DataTables on the results table
130             dtMemberResults = $("#memberresultst").dataTable($.extend(true, {}, dataTablesDefaults, {
131                 'bServerSide': true,
132                 'sAjaxSource': "/cgi-bin/koha/svc/members/search",
133                 'fnServerData': function(sSource, aoData, fnCallback) {
134                     if ( ! search ) {
135                         return;
136                     }
137                     aoData.push({
138                         'name': 'searchmember',
139                         'value': $("#searchmember_filter").val()
140                     },{
141                         'name': 'firstletter',
142                         'value': $("#firstletter_filter").val()
143                     },{
144                         'name': 'categorycode',
145                         'value': $("#categorycode_filter").val()
146                     },{
147                         'name': 'branchcode',
148                         'value': $("#branchcode_filter").val()
149                     },{
150                         'name': 'name_sorton',
151                         'value': 'borrowers.surname borrowers.firstname'
152                     },{
153                         'name': 'category_sorton',
154                         'value': 'categories.description',
155                     },{
156                         'name': 'branch_sorton',
157                         'value': 'branches.branchname'
158                     },{
159                         'name': 'template_path',
160                         'value': '[% json_template | html %]',
161                     },{
162                         'name': 'selection_type',
163                         'value': '[% selection_type | html %]',
164                     }
165                     [% IF patrons_with_acq_perm_only %]
166                     ,{
167                         'name': 'has_permission',
168                         'value': 'acquisition.order_manage',
169                     }
170                     [% END %]
171                     );
172                     $.ajax({
173                         'dataType': 'json',
174                         'type': 'POST',
175                         'url': sSource,
176                         'data': aoData,
177                         'success': function(json){
178                             fnCallback(json);
179                         }
180                     });
181                 },
182                 'aoColumns':[
183                     [% FOR column IN columns %]
184                         [% IF column == 'action' %]
185                             { 'mDataProp': 'dt_action', 'bSortable': false, 'sClass': 'actions' }
186                         [% ELSIF column == 'address' %]
187                             { 'mDataProp': 'dt_address', 'bSortable': false }
188                         [% ELSE %]
189                             { 'mDataProp': 'dt_[% column | html %]' }
190                         [% END %]
191                         [% UNLESS loop.last %],[% END %]
192                     [% END %]
193                 ],
194                 'bAutoWidth': false,
195                 [% IF patrons_with_acq_perm_only %]
196                     'bPaginate': false,
197                 [% ELSE %]
198                     'sPaginationType': 'full_numbers',
199                     "iDisplayLength": [% Koha.Preference('PatronsPerPage') | html %],
200                 [% END %]
201                 'aaSorting': [[[% aaSorting || 0 | html %], 'asc']],
202                 'bFilter': false,
203                 'bProcessing': true,
204             }));
205
206             $("#searchform").on('submit', filter);
207             $(".filterByLetter").on("click",function(e){
208                 e.preventDefault();
209                 filterByFirstLetterSurname($(this).text());
210             });
211             $("body").on("click",".add_user",function(e){
212                 e.preventDefault();
213                 var borrowernumber = $(this).data("borrowernumber");
214                 var firstname = $(this).data("firstname");
215                 var surname = $(this).data("surname");
216                 add_user( borrowernumber, firstname + " " + surname );
217             });
218
219             $("body").on("click",".select_user",function(e){
220                 e.preventDefault();
221                 var borrowernumber = $(this).data("borrowernumber");
222                 var borrower_data = $("#borrower_data"+borrowernumber).val();
223                 select_user( borrowernumber, JSON.parse(borrower_data) );
224             });
225
226             $("body").on("click",".patron_preview", function( e ){
227                 e.preventDefault();
228                 var borrowernumber = $(this).data("borrowernumber");
229                 var page = "/cgi-bin/koha/members/moremember.pl?print=brief&borrowernumber=" + borrowernumber;
230                 $("#patronPreview .modal-body").load( page + " div.container-fluid" );
231                 $('#patronPreview').modal({show:true});
232             });
233
234             $("#patronPreview").on('hidden.bs.modal', function (e) {
235                 $("#patronPreview .modal-body").html("<img src=\"[% interface | html %]/[% theme | html %]/img/spinner-small.gif\" alt=\"\" /> Loading");
236             });
237
238         });
239
240         function filter() {
241             search = 1;
242             $("#firstletter_filter").val('');
243             $("#searchresults").show();
244             dtMemberResults.fnDraw();
245             return false;
246         }
247
248         // User has clicked on a letter
249         function filterByFirstLetterSurname(letter) {
250             $("#firstletter_filter").val(letter);
251             search = 1;
252             $("#searchresults").show();
253             dtMemberResults.fnDraw();
254         }
255
256         // modify parent window owner element
257         [% IF selection_type == 'add' %]
258             function add_user(borrowernumber, borrowername) {
259                 var p = window.opener;
260                 // In one place (serials/routing.tt), the page is reload on every add
261                 // We have to wait for the page to be there
262                 function wait_for_opener () {
263                     if ( ! $(opener.document).find('body').size() ) {
264                         setTimeout(wait_for_opener, 500);
265                     } else {
266                         [%# Note that add_user could sent data instead of borrowername too %]
267                         $("#info").hide();
268                         $("#error").hide();
269                         if ( p.add_user(borrowernumber, borrowername) < 0 ) {
270                             $("#error").html(_("Patron '%s' is already in the list.").format(borrowername));
271                             $("#error").show();
272                         } else {
273                             $("#info").html(_("Patron '%s' added.").format(borrowername));
274                             $("#info").show();
275                         }
276                     }
277                 }
278                 wait_for_opener();
279             }
280         [% ELSIF selection_type == 'select' %]
281             function select_user(borrowernumber, data) {
282                 var p = window.opener;
283                 p.select_user(borrowernumber, data);
284                 window.close();
285             }
286         [% END %]
287     </script>
288 [% END %]
289
290 [% SET popup_window = 1 %]
291 [% INCLUDE 'intranet-bottom.inc' %]