Bug 30952: Staff interface redesign (header)
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / members / member.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% USE TablesSettings %]
5 [% USE Branches %]
6 [% USE Categories %]
7 [% SET footerjs = 1 %]
8 [% PROCESS 'patronfields.inc' %]
9 [% SET libraries = Branches.all %]
10 [% SET categories = Categories.all.unblessed %]
11 [% SET columns = ['cardnumber', 'name-address', 'dateofbirth', 'branch', 'category', 'dateexpiry', 'checkouts', 'account_balance', 'borrowernotes', 'action'] %]
12 [% PROCESS 'patron-search.inc' %]
13 [% INCLUDE 'doc-head-open.inc' %]
14 <title>Patrons[% IF ( searching ) %] &rsaquo; Search results[% END %] &rsaquo; Koha</title>
15 [% INCLUDE 'doc-head-close.inc' %]
16 </head>
17
18 <body id="pat_member" class="pat">
19 [% WRAPPER 'header.inc' %]
20     [% INCLUDE 'patron-search-header.inc' %]
21 [% END %]
22
23 [% WRAPPER 'sub-header.inc' %]
24 <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
25     <ol>
26         <li>
27             <a href="/cgi-bin/koha/mainpage.pl"><i class="fa fa-home"></i></a>
28         </li>
29         [% IF ( searching ) %]
30             <li>
31                 <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>
32             </li>
33             <li>
34                 <a href="#" aria-current="page">
35                     Search results
36                 </a>
37             </li>
38         [% ELSE %]
39             <li>
40                 <a href="#" aria-current="page">
41                     Patrons
42                 </a>
43             </li>
44         [% END %]
45     </ol>
46 </nav>
47 [% END %]
48
49 <div class="main container-fluid">
50     <div class="row">
51         <div class="col-sm-10 col-sm-push-2">
52             <main>
53
54           [% IF CAN_user_tools_manage_patron_lists %]
55             <div id="patron_list_dialog" class="dialog message">
56               Added <span class="patrons-length"></span> patrons to <a></a>.
57             </div>
58           [% END %]
59
60           [% INCLUDE 'patron-toolbar.inc' %]
61           [% INCLUDE 'noadd-warnings.inc' %]
62
63           [% IF CAN_user_borrowers_edit_borrowers && pending_borrower_modifications %]
64             <div class="pending-info" id="patron_updates_pending">
65               <a href="/cgi-bin/koha/members/members-update.pl">Patrons requesting modifications</a>:
66               <span class="number_box"><a href="/cgi-bin/koha/members/members-update.pl">[% pending_borrower_modifications | html %]</a></span>
67             </div>
68           [% END %]
69
70           <div id="searchresults">
71             [% IF CAN_user_tools_manage_patron_lists || CAN_user_borrowers_edit_borrowers %]
72               <div class="searchheader fh-fixedHeader" id="searchheader" style="display:none;">
73                   <div>
74                       <a href="#" class="btn btn-link" id="select_all"><i class="fa fa-check"></i> Select all</a>
75                       |
76                       <a href="#" class="btn btn-link" id="clear_all"><i class="fa fa-remove"></i> Clear all</a>
77                     [% IF CAN_user_tools_manage_patron_lists %]
78
79                     [% END %]
80
81                     [% IF CAN_user_tools_manage_patron_lists %]
82                         <div id="patronlist-dropdown" class="btn-group">
83                             <button id="patronlist-menu" type="button" class="btn btn-sm btn-default dropdown-toggle patron-edits disabled" disabled="disabled" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
84                                 Add to patron list <span class="caret"></span>
85                             </button>
86                             <ul class="dropdown-menu">
87                                 [% IF patron_lists %]
88                                     [% FOREACH pl IN patron_lists %]
89                                         <li><a href="#" class="patron-list-add" data-listid="[% pl.patron_list_id | html %]">[% pl.name | html %]</a></li>
90                                     [% END %]
91                                 [% END %]
92                                 <li role="separator" class="divider"></li>
93                                 <li><a href="#" class="patron-list-add" data-listid="new">New list</a></li>
94                             </ul>
95                         </div>
96                     [% END %]
97
98                     [% IF CAN_user_borrowers_edit_borrowers %]
99                           <button id="merge-patrons" class="btn btn-sm btn-default disabled" disabled="disabled" type="submit"><i class="fa fa-compress" aria-hidden="true"></i> Merge selected patrons</button>
100                     [% END %]
101                     <div id="patron_search_selected" class="btn-group" style="display:none;">
102                         <span></span>
103                         <a href="#" id="clear-patron-selection"><i class="fa fa-remove"></i> Clear</a>
104                     </div>
105                   </div>
106                 </div>
107             [% END %]
108
109             [% IF CAN_user_borrowers_edit_borrowers || CAN_user_tools_manage_patron_lists %]
110                 [% columns.unshift('checkbox') | html %]
111             [% END %]
112             [% PROCESS patron_search_table table_id => 'memberresultst' columns => columns %]
113           </div>
114
115             </main>
116         </div> <!-- /.col-sm-10.col-sm-push-2 -->
117
118         <div class="col-sm-2 col-sm-pull-10">
119             <aside>
120                 [% PROCESS patron_search_filters categories => categories, libraries => libraries, filters => ['search_field', 'search_type', 'category', 'branch'], search_filter => searchmember %]
121             </aside>
122         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
123     </div> <!-- /.row -->
124
125     <!-- New Patron List Modal -->
126     <div class="modal" id="new-patron-list" tabindex="-1" role="dialog" aria-labelledby="new-patron-listLabel">
127         <div class="modal-dialog" role="document">
128             <div class="modal-content">
129                 <div class="modal-header">
130                     <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
131                     <h4 class="modal-title" id="new-patron-listLabel">Add patrons to a new patron list</h4>
132                 </div>
133                 <form id="new-patron-list_form">
134                     <div class="modal-body">
135                         <div class="form-group">
136                             <label for="new_patron_list" class="required">Patron list name: </label>
137                             <input class="form-control required" type="text" name="new_patron_list" id="new_patron_list" required="required" />
138                             <input type="hidden" name="add_to_patron_list" id="add_to_patron_list" />
139                             <span class="required">Required</span>
140                         </div>
141                     </div> <!-- /.modal-body -->
142                     <div class="modal-footer">
143                         <button type="submit" id="add_to_patron_list_submit" class="btn btn-default approve">Submit</button>
144                         <button type="button" class="btn btn-default deny" data-dismiss="modal">Cancel</button>
145                     </div> <!-- /.modal-footer -->
146                 </form> <!-- /#new-patron-list_form -->
147             </div> <!-- /.modal-content -->
148         </div> <!-- /.modal-dialog -->
149     </div> <!-- /#new-patron-list -->
150
151 [% MACRO jsinclude BLOCK %]
152     [% INCLUDE 'datatables.inc' %]
153     [% INCLUDE 'columns_settings.inc' %]
154     [% INCLUDE 'str/members-menu.inc' %]
155     [% Asset.js("js/members-menu.js") | $raw %]
156     <script>
157         function showPatronSelections( number ){
158             $("#patron_search_selected").show().find("span").text(_("Patrons selected: " + number ) );
159         }
160
161         $(document).ready(function() {
162             $('#merge-patrons').prop('disabled', true);
163             $('#memberresultst').on('change', 'input.selection', function() {
164                 var patron_search_selections = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
165                 var borrowernumber = $(this).val();
166                 if( $(this).prop("checked") ){
167                     patron_search_selections.push( $(this).val() );
168                     localStorage.setItem('patron_search_selections', JSON.stringify( patron_search_selections ));
169                     showPatronSelections( patron_search_selections.length );
170                 } else {
171                     var filtered = patron_search_selections.filter(function( value ){
172                         return value !== borrowernumber;
173                     });
174                     if( filtered.length > 0 ){
175                         localStorage.setItem('patron_search_selections', JSON.stringify( filtered ));
176                         patron_search_selections = filtered;
177                         showPatronSelections( filtered.length );
178                     } else {
179                         patron_search_selections = [];
180                         localStorage.removeItem('patron_search_selections');
181                         $("#patron_search_selected").hide();
182                     }
183                 }
184                 if ( patron_search_selections.length > 1 ) {
185                     /* More than one checkbox has been checked */
186                     $('#merge-patrons').prop('disabled', false).removeClass("disabled");
187                     $("#patronlist-menu").removeClass("disabled").prop("disabled", false);
188                 } else if ( patron_search_selections.length == 1 ) {
189                     /* At least one checkbox has been checked */
190                     $('#merge-patrons').prop('disabled', true).addClass("disabled");
191                     $("#patronlist-menu").removeClass("disabled").prop("disabled", false);
192                 } else {
193                     /* No checkbox has been checked */
194                     $('#merge-patrons').prop('disabled', true).addClass("disabled");
195                     $("#patronlist-menu").addClass("disabled").prop("disabled", true);
196                 }
197             });
198
199             $('#merge-patrons').on('click', function() {
200                 var patron_search_selections = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
201                 var merge_patrons_url = 'merge-patrons.pl?id=' + patron_search_selections.join("&id=");
202                 window.location.href = merge_patrons_url;
203             });
204
205             $("#clear-patron-selection").on("click", function(e){
206                 e.preventDefault();
207                 $(".selection").prop("checked", false).change();
208                 localStorage.removeItem("patron_search_selections");
209                 $("#patron_search_selected").hide();
210                 $('#merge-patrons').prop('disabled', true).addClass("disabled");
211                 $("#patronlist-menu").addClass("disabled").prop("disabled", true);
212             });
213
214             $("#patronlist-dropdown").on("click", ".patron-list-add", function(e){
215                 e.preventDefault();
216                 var patron_search_selections = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
217                 if ( patron_search_selections.length == 0 ) {
218                     alert( _("You have not selected any patrons to add to a list!") );
219                     $(".btn-group").removeClass("open"); /* Close button menu */
220                     return false;
221                 }
222
223                 var listid = $(this).data("listid");
224                 $("#add_to_patron_list").val( listid );
225                 if( listid == "new" ){
226                     /* #add_to_patron_list value "new" in the modal form will tell API to create a new list */
227                     $("#new-patron-list").modal("show");
228                 } else {
229                     /* Ajax submit the patrons to list */
230
231                     patronListAdd();
232                 }
233             })
234
235             /* Submit selected patrons to a list via AJAX */
236             $("#new-patron-list_form").on('submit', function(e){
237                 e.preventDefault();
238                 /* Upon submitting modal patron list add form... */
239                 if ( $('#new_patron_list').val() ) {
240                     $(".patron-list-add").each(function() {
241                         /* Check each list name in the menu of patron lists */
242                         /* If submitted list name matches... */
243                         if ( $(this).text() == $('#new_patron_list').val() ) {
244                             alert( _("You already have a list with that name!") );
245                             return false;
246                         }
247                     });
248                 } else {
249                     alert( _("You must give your new patron list a name!") );
250                     return false;
251                 }
252                 $("#new-patron-list").modal("hide");
253                 patronListAdd();
254             });
255
256             $("#select_all").on("click",function(e){
257                 e.preventDefault();
258                 $(".selection").each(function(){
259                     if( $(this).prop("checked") == false ){
260                         $(this).prop( "checked", true ).change();
261                     }
262                 });
263             });
264             $("#clear_all").on("click",function(e){
265                 e.preventDefault();
266                 $(".selection").each(function(){
267                     if( $(this).prop("checked") ){
268                         $(this).prop("checked", false ).change();
269                     }
270                 });
271             });
272
273             [% IF searchmember %]
274                 $("#searchmember_filter").val("[% searchmember | html %]");
275             [% END %]
276             [% IF searchfieldstype %]
277                 $("searchfieldstype_filter").val("[% searchfieldstype | html %]");
278             [% END %]
279             [% IF searchtype %]
280                 $("#searchtype_filter").val("[% searchtype | html %]");
281             [% END %]
282             [% IF categorycode %]
283                 $("#categorycode_filter").val("[% categorycode_filter | html %]");
284             [% END %]
285             [% IF branchcode %]
286                 $("#branchcode_filter").val("[% branchcode_filter | html %]");
287             [% END %]
288
289             $("#searchheader").hide();
290             $("#patron_search_form").on('submit', function(){$("#searchheader").show();});
291             $("#clear_search").on("click",function(e){$("#searchheader").hide();});
292         });
293
294         function patronListAdd(){
295             var borrowernumbers = JSON.parse( localStorage.getItem("patron_search_selections") ) || [];
296             if ( borrowernumbers.length > 0 ){
297                 var data = {
298                     add_to_patron_list: $("#add_to_patron_list").val(),
299                     new_patron_list: $("#new_patron_list").val(),
300                     borrowernumbers: borrowernumbers
301                 };
302                 $.ajax({
303                     data: data,
304                     type: 'POST',
305                     url: '/cgi-bin/koha/svc/members/add_to_list',
306                     success: function(data) {
307                         $("#patron_list_dialog").show();
308                         $("#patron_list_dialog > span.patrons-length").html(data.patrons_added_to_list);
309                         $("#patron_list_dialog > a").attr("href", "/cgi-bin/koha/patron_lists/list.pl?patron_list_id=" + data.patron_list.patron_list_id);
310                         $("#patron_list_dialog > a").html(data.patron_list.name);
311
312                         if ( $('#add_to_patron_list').val() == 'new' ) {
313                             /* Add a new entry to the menu */
314                             $("#patronlist-dropdown .divider").before('<li><a class="patron-list-add" href="#" data-listid="' + data.patron_list.patron_list_id + '">' + data.patron_list.name + '</li>');
315                         }
316                     },
317                     error: function() {
318                         alert( _("An error occurred. Patron list could not be updated.") );
319                     }
320                 });
321                 return true;
322             } else {
323                 alert( _("You have not selected any patrons to add to a list!") );
324                 return false;
325             }
326         }
327
328         function prepSelections(){
329             var selected_patrons = JSON.parse( localStorage.getItem("patron_search_selections") );
330             if( selected_patrons && selected_patrons.length > 0 ){
331                 showPatronSelections( selected_patrons.length );
332
333                 $('#merge-patrons').prop('disabled', true);
334                 $("input.selection").each(function(){
335                     var cardnumber = $(this).val();
336                     if( selected_patrons.indexOf( cardnumber ) >= 0 ){
337                         $(this).prop("checked", true );
338                     }
339                 });
340
341                 if( selected_patrons.length > 1 ){
342                     $('#merge-patrons').removeClass("disabled").prop('disabled', false);
343                     $('#patronlist-menu').removeClass("disabled").prop('disabled', false);
344                 }
345             }
346         }
347
348         $('#memberresultst tbody').on('click','td',function(e){
349             var $checkbox = $(this).find("input[type=checkbox]");
350             if (e.target.type != "checkbox") {
351                 $checkbox.prop('checked', !$checkbox.prop("checked"));
352                 $checkbox.change();
353             }
354         });
355
356     </script>
357
358     <script>
359         // Apply DataTables on the results table
360         var table_settings = [% TablesSettings.GetTableSettings( 'members', 'member', 'memberresultst', 'json' ) | $raw %];
361         [% UNLESS CAN_user_borrowers_edit_borrowers OR CAN_user_tools_manage_patron_lists %]
362             [%# Remove the first column if we do not display the checkbox %]
363             table_settings['columns'].splice(0, 1);
364         [% END %]
365     </script>
366
367     [% IF circsearch == 1 %]
368         [% SET redirect_url = '/cgi-bin/koha/circ/circulation.pl' %]
369     [% ELSE %]
370         [% SET redirect_url = '/cgi-bin/koha/members/moremember.pl' %]
371     [% END %]
372     [% PROCESS patron_search_js table_id => 'memberresultst', categories => categories, libraries => libraries, extended_attribute_types => attribute_type_codes, columns => columns,actions => ['edit', 'checkout'], redirect_if_one_result => 1, redirect_url => redirect_url, sticky_header => "searchheader", sticky_to => "searchresults", default_sort_column => 'name-address', display_search_description => 1, remember_selections => 1 %]
373
374 [% END %]
375
376 [% INCLUDE 'intranet-bottom.inc' %]