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