Bug 13476: Fix DataTables for the search items form
[koha_ffzg] / koha-tmpl / intranet-tmpl / prog / en / modules / catalogue / itemsearch.tt
1 [% USE CGI %]
2 [% USE JSON.Escape %]
3
4 [% BLOCK form_field_select %]
5   <div class="form-field form-field-select">
6     <label class="form-field-label" for="[% name %]">[% label %]</label>
7     <select id="[% name %]_op" name="[% name %]_op">
8       <option value="=">is</option>
9       [% IF CGI.param(name _ '_op') == '!=' %]
10         <option value="!=" selected="selected">is not</option>
11       [% ELSE %]
12         <option value="!=" >is not</option>
13       [% END %]
14     </select>
15     [% values = CGI.param(name) %]
16     <select id="[% name %]" name="[% name %]" multiple="multiple" size="[% options.size < 4 ? options.size + 1 : 4 %]">
17       [% IF (values == '') %]
18         <option value="" selected="selected">
19       [% ELSE %]
20         <option value="">
21       [% END %]
22         [% empty_option || "All" %]
23       </option>
24       [% FOREACH option IN options %]
25         [% IF values != '' && values.grep(option.value).size %]
26           <option value="[% option.value %]" selected="selected">[% option.label %]</option>
27         [% ELSE %]
28           <option value="[% option.value %]">[% option.label %]</option>
29         [% END %]
30       [% END %]
31     </select>
32   </div>
33 [% END %]
34
35 [% BLOCK form_field_select_option %]
36   [% IF params.f == value %]
37     <option value="[% value %]" selected="selected">[% label %]</option>
38   [% ELSE %]
39     <option value="[% value %]">[% label %]</option>
40   [% END %]
41 [% END %]
42
43 [% BLOCK form_field_select_text %]
44   <div class="form-field form-field-select-text">
45     [% IF params.exists('c') %]
46       <select name="c" class="form-field-conjunction">
47         <option value="and">AND</option>
48         [% IF params.c == 'or' %]
49           <option value="or" selected="selected">OR</option>
50         [% ELSE %]
51           <option value="or">OR</option>
52         [% END %]
53       </select>
54     [% ELSE %]
55       <select name="c" class="form-field-conjunction" disabled="disabled">
56         <option value="and">AND</option>
57         <option value="or">OR</option>
58       </select>
59     [% END %]
60     <select name="f" class="form-field-column">
61       [% INCLUDE form_field_select_option value='barcode' label='Barcode' %]
62       [% INCLUDE form_field_select_option value='itemcallnumber' label='Call number' %]
63       [% INCLUDE form_field_select_option value='stocknumber' label='Stock number' %]
64       [% INCLUDE form_field_select_option value='title' label='Title' %]
65       [% INCLUDE form_field_select_option value='author' label='Author' %]
66       [% INCLUDE form_field_select_option value='publishercode' label='Publisher' %]
67       [% INCLUDE form_field_select_option value='publicationdate' label='Publication date' %]
68       [% INCLUDE form_field_select_option value='collectiontitle' label='Collection' %]
69       [% INCLUDE form_field_select_option value='isbn' label='ISBN' %]
70       [% INCLUDE form_field_select_option value='issn' label='ISSN' %]
71       [% IF items_search_fields.size %]
72         <optgroup label="Custom search fields">
73           [% FOREACH field IN items_search_fields %]
74             [% marcfield = field.tagfield %]
75             [% IF field.tagsubfield %]
76               [% marcfield = marcfield _ '$' _ field.tagsubfield %]
77             [% END %]
78             [% IF params.f == "marc:$marcfield" %]
79               <option value="marc:[% marcfield %]" data-authorised-values-category="[% field.authorised_values_category %]" selected="selected">[% field.label %] ([% marcfield %])</option>
80             [% ELSE %]
81               <option value="marc:[% marcfield %]" data-authorised-values-category="[% field.authorised_values_category %]">[% field.label %] ([% marcfield %])</option>
82             [% END %]
83           [% END %]
84         </optgroup>
85       [% END %]
86     </select>
87     <input type="text" name="q" class="form-field-value" value="[% params.q %]" />
88     <input type="hidden" name="op" value="like" />
89   </div>
90 [% END %]
91
92 [% BLOCK form_field_select_text_block %]
93   [% c = CGI.param('c').list %]
94   [% f = CGI.param('f').list %]
95   [% q = CGI.param('q').list %]
96   [% op = CGI.param('op').list %]
97   [% IF q.size %]
98     [% size = q.size - 1 %]
99     [% FOREACH i IN [0 .. size] %]
100       [%
101         params = {
102           f => f.$i
103           q = q.$i
104           op = op.$i
105         }
106       %]
107       [% IF i > 0 %]
108         [% j = i - 1 %]
109         [% params.c = c.$j %]
110       [% END %]
111       [% INCLUDE form_field_select_text params=params %]
112     [% END %]
113   [% ELSE %]
114     [% INCLUDE form_field_select_text %]
115   [% END %]
116 [% END %]
117
118 [% BLOCK form_field_radio_yes_no %]
119   <div class="form-field">
120     <label class="form-field-label">[% label %]:</label>
121     <input type="radio" name="[% name %]" id="[% name %]_indifferent" value="" checked="checked"/>
122     <label for="[% name %]_indifferent">Ignore</label>
123     <input type="radio" name="[% name %]" id="[% name %]_yes" value="yes" />
124     <label for="[% name %]_yes">Yes</label>
125     <input type="radio" name="[% name %]" id="[% name %]_no" value="no" />
126     <label for="[% name %]_no">No</label>
127   </div>
128 [% END %]
129
130 [%# Page starts here %]
131
132 [% INCLUDE 'doc-head-open.inc' %]
133   <title>Koha &rsaquo; Catalog &rsaquo; Item search</title>
134   [% INCLUDE 'doc-head-close.inc' %]
135   <link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
136   [% INCLUDE 'datatables.inc' %]
137   <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.dataTables.columnFilter.js"></script>
138   <link rel="stylesheet" type="text/css" href="[% themelang %]/css/itemsearchform.css" />
139   <script type="text/javascript">
140     //<![CDATA[
141     var authorised_values = [% authorised_values_json %];
142
143     function loadAuthorisedValuesSelect(select) {
144       var selected = select.find('option:selected');
145       var category = selected.data('authorised-values-category');
146       var form_field_value = select.siblings('.form-field-value');
147       if (category && category in authorised_values) {
148         var values = authorised_values[category];
149         var html = '<select name="q" class="form-field-value">\n';
150         for (i in values) {
151           var value = values[i];
152           html += '<option value="' + value.authorised_value + '">' + value.lib + '</option>\n';
153         }
154         html += '</select>\n';
155         var new_form_field_value = $(html);
156         new_form_field_value.val(form_field_value.val());
157         form_field_value.replaceWith(new_form_field_value);
158       } else {
159         if (form_field_value.prop('tagName').toLowerCase() == 'select') {
160           html = '<input name="q" type="text" class="form-field-value" />';
161           var new_form_field_value = $(html);
162           form_field_value.replaceWith(new_form_field_value);
163         }
164       }
165     }
166
167     function addNewField() {
168       var form_field = $('div.form-field-select-text').last();
169       var copy = form_field.clone(true);
170       copy.find('input,select').not('[type="hidden"]').each(function() {
171         $(this).val('');
172       });
173       copy.find('.form-field-conjunction').removeAttr('disabled');
174       form_field.after(copy);
175       copy.find('select.form-field-column').change();
176     }
177
178     function submitForm($form) {
179       var tr = ''
180         + '    <tr>'
181         + '      <th>' + _("Title") + '</th>'
182         + '      <th>' + _("Publication date") + '</th>'
183         + '      <th>' + _("Publisher") + '</th>'
184         + '      <th>' + _("Collection") + '</th>'
185         + '      <th>' + _("Barcode") + '</th>'
186         + '      <th>' + _("Call number") + '</th>'
187         + '      <th>' + _("Home library") + '</th>'
188         + '      <th>' + _("Current location") + '</th>'
189         + '      <th>' + _("Shelving location") + '</th>'
190         + '      <th>' + _("Stock number") + '</th>'
191         + '      <th>' + _("Status") + '</th>'
192         + '      <th>' + _("Checkouts") + '</th>'
193         + '      <th></th>'
194         + '    </tr>'
195       var table = ''
196         + '<table id="results">'
197         + '  <thead>' + tr + tr + '</thead>'
198         + '  <tbody></tbody>'
199         + '</table>';
200       var results_heading = "<h1>" + _("Item search results") + "</h1>";
201       results_heading += "<p><a href=\"/cgi-bin/koha/catalogue/search.pl\">" + _("Go to advanced search") + "</a></p>";
202       results_heading += "<p><a class=\"editsearchlink\" href=\"#\">" + _("Edit search") + "</a></p>";
203       $('#results-wrapper').empty().html(results_heading + table);
204
205       var params = [];
206       $form.find('select,input[type="text"],input[type="hidden"]').not('[disabled]').each(function () {
207         params.push({ 'name': $(this).attr('name'), 'value': $(this).val() });
208       });
209       $form.find('input[type="radio"]:checked').each(function() {
210         params.push({ 'name': $(this).attr('name'), 'value': $(this).val() });
211       });
212
213       $('#results').dataTable($.extend(true, {}, dataTablesDefaults, {
214         'bDestroy': true,
215         'bServerSide': true,
216         'bProcessing': true,
217         'sAjaxSource': '/cgi-bin/koha/catalogue/itemsearch.pl',
218         'fnServerData': function(sSource, aoData, fnCallback) {
219           aoData.push( { 'name': 'format', 'value': 'json' } );
220           for (i in params) {
221             aoData.push(params[i]);
222           }
223           $.ajax({
224               'dataType': 'json',
225               'type': 'POST',
226               'url': sSource,
227               'data': aoData,
228               'success': function(json){
229                   fnCallback(json);
230               }
231           });
232         },
233         'sDom': '<"top pager"ilp>t<"bottom pager"ip>r',
234         'aoColumns': [
235           { 'sName': 'title' },
236           { 'sName': 'publicationyear' },
237           { 'sName': 'publishercode' },
238           { 'sName': 'collectiontitle' },
239           { 'sName': 'barcode' },
240           { 'sName': 'itemcallnumber' },
241           { 'sName': 'homebranch' },
242           { 'sName': 'holdingbranch' },
243           { 'sName': 'location' },
244           { 'sName': 'stocknumber' },
245           { 'sName': 'notforloan' },
246           { 'sName': 'issues' },
247           { 'sName': 'checkbox', 'bSortable': false }
248         ]
249       })).columnFilter({
250         'sPlaceHolder': 'head:after',
251         'aoColumns': [
252           { 'type': 'text' },
253           { 'type': 'text' },
254           { 'type': 'text' },
255           { 'type': 'text' },
256           { 'type': 'text' },
257           { 'type': 'text' },
258           { 'type': 'select', 'values': [% branches.json %] },
259           { 'type': 'select', 'values': [% branches.json %] },
260           { 'type': 'select', 'values': [% locations.json %] },
261           { 'type': 'text' },
262           { 'type': 'select', 'values': [% notforloans.json %] },
263           { 'type': 'text' },
264           null
265         ]
266       });
267     }
268
269     function hideForm() {
270       $("#item-search-block").hide();
271       $('.editsearchlink').show();
272     }
273
274     $(document).ready(function () {
275       // Add the "New field" link.
276       var form_field = $('div.form-field-select-text').last()
277       var button_field_new = $('<a href="#" class="button-field-new" title="Add a new field">New field</a>');
278       button_field_new.click(function() {
279         addNewField();
280         return false;
281       });
282       form_field.after(button_field_new);
283
284       // If a field is linked to an authorised values list, display the list.
285       $('div.form-field-select-text select').change(function() {
286         loadAuthorisedValuesSelect($(this));
287       }).change();
288
289       // Prevent user to select the 'All ...' option with other options.
290       $('div.form-field-select').each(function() {
291         $(this).find('select').filter(':last').change(function() {
292           values = $(this).val();
293           if (values.length > 1) {
294             var idx = $.inArray('', values);
295             if (idx != -1) {
296               values.splice(idx, 1);
297               $(this).val(values);
298             }
299           }
300         });
301       });
302
303       $('#itemsearchform').submit(function() {
304         var searchform = $(this);
305         var format = searchform.find('input[name="format"]:checked').val();
306         if (format == 'html') {
307           submitForm(searchform);
308           hideForm();
309           return false;
310         }
311       });
312
313       $("body").on("click",".editsearchlink",function(e) {
314         e.preventDefault();
315         $('#item-search-block').show();
316         $(this).hide();
317         return false;
318       });
319     });
320     //]]>
321   </script>
322 </head>
323 <body id="catalog_itemsearch" class="catalog">
324   [% INCLUDE 'header.inc' %]
325   <div id="breadcrumbs">
326     <a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a> &rsaquo; Item search
327   </div>
328
329   <div id="doc" class="yui-t7">
330     <div id="item-search-block">
331       <h1>Item search</h1>
332       <p><a href="/cgi-bin/koha/catalogue/search.pl">Go to advanced search</a></p>
333       <form action="/cgi-bin/koha/catalogue/itemsearch.pl" method="get" id="itemsearchform">
334           <fieldset>
335             [% INCLUDE form_field_select
336               name="homebranch"
337               label="Home library"
338               options = branches
339               empty_option = "All libraries"
340             %]
341             [% INCLUDE form_field_select
342               name="location"
343               label="Shelving location"
344               options = locations
345               empty_option = "All locations"
346             %]
347           </fieldset>
348           <fieldset>
349             [% INCLUDE form_field_select
350               name="itype"
351               label="Item type"
352               options = itemtypes
353               empty_option = "All item types"
354             %]
355             [% INCLUDE form_field_select
356               name="ccode"
357               label="Collection code"
358               options = ccodes
359               empty_option = "All collection codes"
360             %]
361             [% INCLUDE form_field_select
362               name="notforloan"
363               label="Status"
364               options = notforloans
365               empty_option = "All statuses"
366             %]
367           </fieldset>
368           <fieldset>
369             [% INCLUDE form_field_select_text_block %]
370             <p class="hint">You can use the following wildcard characters: % _</p>
371             <p class="hint">% matches any number of characters</p>
372             <p class="hint">_ matches only a single character</p>
373           </fieldset>
374           <fieldset>
375             <div class="form-field">
376               <label class="form-field-label" for="itemcallnumber_from">From call number:</label>
377               [% value = CGI.param('itemcallnumber_from') %]
378               <input type="text" id="itemcallnumber_from" name="itemcallnumber_from" value="[% value %]" />
379               <span class="hint">(inclusive)</span>
380             </div>
381             <div class="form-field">
382               [% value = CGI.param('itemcallnumber_to') %]
383               <label class="form-field-label" for="itemcallnumber_to">To call number:</label>
384               <input type="text" id="itemcallnumber_to" name="itemcallnumber_to" value="[% value %]" />
385               <span class="hint">(inclusive)</span>
386             </div>
387             [% INCLUDE form_field_radio_yes_no name="damaged" label="Damaged" %]
388             [% INCLUDE form_field_radio_yes_no name="itemlost" label="Lost" %]
389             <div class="form-field">
390               <label class="form-field-label" for="issues_op">Checkout count:</label>
391               <select id="issues_op" name="issues_op">
392                 <option value=">">&gt;</option>
393                 <option value="<">&lt;</option>
394                 <option value="=">=</option>
395                 <option value="!=">!=</option>
396               </select>
397               <input type="text" name="issues" />
398             </div>
399             <div class="form-field">
400               <label class="form-field-label" for="datelastborrowed_op">Last checkout date:</label>
401               <select id="datelastborrowed_op" name="datelastborrowed_op">
402                 <option value=">">After</option>
403                 <option value="<">Before</option>
404                 <option value="=">On</option>
405               </select>
406               <input type="text" name="datelastborrowed" />
407               <span class="hint">ISO Format (YYYY-MM-DD)</span>
408             </div>
409           </fieldset>
410           <fieldset>
411             <div class="form-field-radio">
412               <label>Output:</label>
413               <input type="radio" id="format-html" name="format" value="html" checked="checked" /> <label for="format-html">Screen</label>
414               <input type="radio" id="format-csv" name="format" value="csv" /> <label for="format-csv">CSV</label>
415             </div>
416             <div class="form-actions">
417               <input type="submit" value="Search" />
418             </div>
419           </fieldset>
420       </form>
421
422       <p><a id="editsearchlink" href="#" style="display:none">Edit search</a></p>
423     </div>
424   </div>
425   <div id="doc3" class="yui-t7">
426       <div id="results-wrapper">
427         [% IF search_done %]
428           [% IF total_rows > 0 %]
429             <p>Found [% total_rows %] results.</p>
430           [% ELSE %]
431             <p>No results found.</p>
432           [% END %]
433
434           [% IF results %]
435             [% INCLUDE 'catalogue/itemsearch_items.inc' items = results %]
436           [% END %]
437
438           <div id="pagination-bar">
439             [% pagination_bar %]
440           </div>
441
442         [% END %]
443       </div>
444
445     [% INCLUDE 'intranet-bottom.inc' %]