Bug 21645: Fix focus when modal is shown
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / admin / library_groups.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE KohaSpan %]
4 [% SET footerjs = 1 %]
5 [% INCLUDE 'doc-head-open.inc' %]
6 <title>Koha &rsaquo; Administration &rsaquo; Library groups</title>
7 [% INCLUDE 'doc-head-close.inc' %]
8 [% Asset.css("lib/jquery/plugins/treetable/stylesheets/jquery.treetable.css") | $raw %]
9 </head>
10
11 <body id="admin_library_groups" class="admin">
12 [% INCLUDE 'header.inc' %]
13 [% INCLUDE 'cat-search.inc' %]
14
15 <div id="breadcrumbs">
16     <a href="/cgi-bin/koha/mainpage.pl">Home</a>
17     &rsaquo; <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a>
18     &rsaquo; <a href="/cgi-bin/koha/admin/library_groups.pl">Library groups</a>
19 </div>
20
21 [% IF added %]
22     <div class="dialog message group-added">
23         [% IF added.branchcode %]
24             [% added.library.branchname | $KohaSpan class = 'name' | $raw %] added to group.
25         [% ELSE %]
26             Group [% added.title | $KohaSpan class = 'name' | $raw %] created.
27         [% END %]
28     </div>
29 [% ELSIF deleted %]
30     <div class="dialog message group-deleted">
31         [% IF deleted.title %]
32             Group [% deleted.title | $KohaSpan class = 'name' | $raw %] has been deleted.
33         [% ELSE %]
34             [% deleted.library | $KohaSpan class = 'name' | $raw %] has been removed from group.
35         [% END %]
36     </div>
37 [% ELSIF error_duplicate_title %]
38     <div class="dialog alert error-duplicate-group-title">
39             A group with the title [% error_duplicate_title | $KohaSpan class = 'name' | $raw %] already exists.
40     </div>
41 [% END %]
42
43 <div class="main container-fluid">
44     <div class="row">
45         <div class="col-sm-10 col-sm-push-2">
46             <main>
47
48                     <div id="toolbar" class="btn-toolbar">
49                         <div class="btn-group">
50                             <a id="add-group-root" class="btn btn-default btn-sm add-group" href="#">
51                                 <i class="fa fa-plus"></i> Add group
52                             </a>
53                         </div>
54                     </div>
55
56                 <h2>Library groups</h2>
57
58                 [% FOREACH root_group IN root_groups %]
59                     <table class="library-groups">
60                         <tr>
61                             <th>&nbsp;</th>
62                             <th>Description</th>
63                             <th>Features enabled</th>
64                             <th>&nbsp;</th>
65                         </tr>
66                         [% PROCESS tree group=root_group %]
67                     </table>
68                 [% END %]
69
70             </main>
71         </div> <!-- /.col-sm-10.col-sm-push-2 -->
72
73         <div class="col-sm-2 col-sm-pull-10">
74             <aside>
75                 [% INCLUDE 'admin-menu.inc' %]
76             </aside>
77         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
78     </div> <!-- /.row -->
79
80     <div id="add-group-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="add-group-modal-label" aria-hidden="true">
81         <form id="add-group-form" action="/cgi-bin/koha/admin/library_groups.pl" class="form-horizontal">
82             <div class="modal-dialog">
83                 <div class="modal-content">
84                     <div class="modal-header">
85                         <h3 id="add-group-modal-label">Add group</h3>
86                     </div>
87                     <div class="modal-body">
88                         <input type="hidden" id="add-group-modal-parent-id" name="parent_id" value="" />
89                         <input type="hidden" id="add-group-modal-action" name="action" value="add">
90
91                         <p>
92                             <label for="add-group-modal-title">Title: </label>
93                             <input type="text" name="title" id="add-group-modal-title" required="required" />
94                             <span class="required">Required</span>
95                         </p>
96
97                         <p>
98                             <label for="add-group-modal-description">Description: </label>
99                             <input type="text" name="description" id="add-group-modal-description" />
100                         </p>
101                         <div id="root-group-features-add">
102                             <h3>Features</h3>
103                             <div class="checkbox">
104                                 <p>
105                                     <label>
106                                         <input type="checkbox" name="ft_hide_patron_info" id="add-group-modal-ft_hide_patron_info" value="1" />
107                                         Limit patron data access by group
108                                     </label>
109                                 </p>
110                                 <p>
111                                     <label>
112                                         <input type="checkbox" name="ft_search_groups_opac" id="add-group-modal-ft_search_groups_opac" value="1" />
113                                         Use for OPAC search groups
114                                     </label>
115                                 </p>
116                                 <p>
117                                     <label>
118                                         <input type="checkbox" name="ft_search_groups_staff" id="add-group-modal-ft_search_groups_staff" value="1" />
119                                         Use for staff search groups
120                                     </label>
121                                 </p>
122                             </div>
123                         </div>
124                     </div>
125                     <div class="modal-footer">
126                         <button type="submit" class="btn btn-default">Save</button>
127                         <a href="#" class="cancel" data-dismiss="modal" aria-hidden="true">Cancel</a>
128                     </div>
129                 </div>
130             </div>
131         </form>
132     </div>
133
134     <div id="edit-group-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="edit-group-modal-label" aria-hidden="true">
135         <form id="edit-group-form" action="/cgi-bin/koha/admin/library_groups.pl" class="form-horizontal">
136             <div class="modal-dialog">
137                 <div class="modal-content">
138                     <div class="modal-header">
139                         <h3 id="edit-group-modal-label">Edit group</h3>
140                     </div>
141                     <div class="modal-body">
142                         <input type="hidden" id="edit-group-modal-id" name="id" value="" />
143                         <input type="hidden" id="edit-group-modal-action" name="action" value="edit" />
144
145                         <p>
146                             <label for="edit-group-modal-title">Title: </label>
147                             <input type="text" id="edit-group-modal-title" name="title" value="" required="required" />
148                             <span class="required">Required</span>
149                         </p>
150
151                         <p>
152                             <label for="edit-group-modal-description">Description: </label>
153                             <input type="text" id="edit-group-modal-description" name="description" value="" />
154                         </p>
155                         <div id="root-group-features-edit">
156                             <h3>Features</h3>
157                             <div class="checkbox">
158                                 <p>
159                                     <label>
160                                         <input type="checkbox" id="edit-group-modal-ft_hide_patron_info" name="ft_hide_patron_info" value="1" />
161                                         Limit patron data access by group
162                                     </label>
163                                 </p>
164                                 <p>
165                                     <label>
166                                         <input type="checkbox" id="edit-group-modal-ft_search_groups_opac" name="ft_search_groups_opac" value="1" />
167                                         Use for OPAC search groups
168                                     </label>
169                                 </p>
170                                 <p>
171                                     <label>
172                                         <input type="checkbox" id="edit-group-modal-ft_search_groups_staff" name="ft_search_groups_staff" value="1" />
173                                         Use for staff search groups
174                                     </label>
175                                 </p>
176                             </div>
177                         </div>
178                     </div>
179                     <div class="modal-footer">
180                         <button type="submit" class="btn btn-default">Update</button>
181                         <a href="#" class="cancel" data-dismiss="modal" aria-hidden="true">Cancel</a>
182                     </div>
183                 </div>
184             </div>
185         </form>
186     </div>
187
188     <div id="delete-group-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="delete-group-modal-label" aria-hidden="true">
189         <form action="/cgi-bin/koha/admin/library_groups.pl">
190             <div class="modal-dialog">
191                 <div class="modal-content">
192                     <input id="delete-group-modal-action" type="hidden" name="action" value="delete" />
193                     <input id="delete-group-modal-id" type="hidden" name="id" value="" />
194                     <div class="modal-header">
195                         <h3 id="delete-group-modal-label">Delete group</h3>
196                     </div>
197                     <div class="modal-body">
198                         Are you sure you want to delete <span id="delete-group-modal-title" class="name"></span>?
199                     </div>
200                     <div class="modal-footer">
201                         <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
202                         <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
203                     </div>
204                 </div>
205             </div>
206         </form>
207     </div>
208
209     <div id="remove-library-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="remove-library-modal-label" aria-hidden="true">
210         <form action="/cgi-bin/koha/admin/library_groups.pl">
211             <div class="modal-dialog">
212                 <div class="modal-content">
213                     <input id="remove-library-modal-action" type="hidden" name="action" value="delete" />
214                     <input id="remove-library-modal-id" type="hidden" name="id" value="" />
215                     <div class="modal-header">
216                         <h3 id="remove-library-modal-label">Remove library from group</h3>
217                     </div>
218                     <div class="modal-body">
219                         Are you sure you want to remove <span id="remove-library-modal-library" class="name"></span> from <span id="remove-library-modal-group" class="name"></span>?
220                     </div>
221                     <div class="modal-footer">
222                         <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i> Remove</button>
223                         <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
224                     </div>
225                 </div>
226             </div>
227         </form>
228     </div>
229
230 [% MACRO jsinclude BLOCK %]
231     [% Asset.js("lib/jquery/plugins/treetable/jquery.treetable.js") | $raw %]
232     <script>
233         $(document).ready(function() {
234             $('.library-groups').treetable({
235                 expandable: true,
236                 initialState: 'expanded',
237                 clickableNodeNames: true,
238             });
239
240             $('.add-group').on('click', function(e) {
241                 e.preventDefault();
242                 var id = $(this).data('groupId');
243                 add_group( id );
244             });
245
246             $('.edit-group').on('click', function(e) {
247                 e.preventDefault();
248                 var id = $(this).data('groupId');
249                 var parent_id = $(this).data('groupParentId');
250                 var title = $(this).data('groupTitle');
251                 var description = $(this).data('groupDescription');
252                 var ft_hide_patron_info = $(this).data('groupFt_hide_patron_info');
253                 var ft_search_groups_opac = $(this).data('groupFt_search_groups_opac');
254                 var ft_search_groups_staff = $(this).data('groupFt_search_groups_staff');
255                 edit_group( id, parent_id, title, description, ft_hide_patron_info, ft_search_groups_opac, ft_search_groups_staff );
256             });
257
258             $('.delete-group').on('click', function(e) {
259                 e.preventDefault();
260                 var id = $(this).data('groupId');
261                 var title = $(this).data('groupTitle');
262                 delete_group( id, title );
263             });
264
265             $('.remove-library').on('click', function(e) {
266                 e.preventDefault();
267                 var id = $(this).data('groupId');
268                 var library = $(this).data('groupLibrary');
269                 var parent_title = $(this).data('groupParentTitle');
270                 remove_library( id, library, parent_title );
271             });
272             $('#add-group-modal').on('shown.bs.modal', function() {
273                 $('#add-group-modal-title').focus();
274             });
275             $('#edit-group-modal').on('shown.bs.modal', function() {
276                 $('#edit-group-modal-title').focus();
277             });
278         });
279
280         function add_group( parent_id ) {
281             $('#add-group-modal-parent-id').val( parent_id );
282
283             $('#add-group-modal-description').val("");
284             $('#add-group-modal-title').val("");
285
286
287             $('#add-group-modal-ft_hide_patron_info').prop('checked', false);
288             $('#add-group-modal-ft_search_groups_opac').prop('checked', false);
289             $('#add-group-modal-ft_search_groups_staff').prop('checked', false);
290             if ( parent_id ) {
291                 $('#root-group-features-add').hide();
292             } else {
293                 $('#root-group-features-add').show();
294             }
295             $('#add-group-modal').modal('show');
296
297         }
298
299         function edit_group( id, parent_id, title, description, ft_hide_patron_info, ft_search_groups_opac, ft_search_groups_staff ) {
300             $('#edit-group-modal-id').val( id );
301             $('#edit-group-modal-title').val( title );
302             $('#edit-group-modal-description').val( description );
303
304             if ( parent_id ) {
305                 $('#edit-group-modal-ft_hide_patron_info').prop('checked', false);
306                 $('#edit-group-modal-ft_search_groups_opac').prop('checked', false);
307                 $('#edit-group-modal-ft_search_groups_staff').prop('checked', false);
308                 $('#root-group-features-edit').hide();
309             } else {
310                 $('#edit-group-modal-ft_hide_patron_info').prop('checked', ft_hide_patron_info ? true : false );
311                 $('#edit-group-modal-ft_search_groups_opac').prop('checked', ft_search_groups_opac ? true : false );
312                 $('#edit-group-modal-ft_search_groups_staff').prop('checked', ft_search_groups_staff ? true : false );
313                 $('#root-group-features-edit').show();
314             }
315
316             $('#edit-group-modal').modal('show');
317         }
318
319         function delete_group( id, title ) {
320             $('#delete-group-modal-title').html(title);
321             $('#delete-group-modal-id').val( id );
322             $('#delete-group-modal').modal('show');
323         }
324
325         function remove_library( id, library, parent_title ) {
326             $('#remove-library-modal-library').html( library );
327             $('#remove-library-modal-group').html(parent_title);
328             $('#remove-library-modal-id').val( id );
329             $('#remove-library-modal').modal('show');
330         }
331
332     </script>
333 [% END %]
334
335 [% INCLUDE 'intranet-bottom.inc' %]
336
337 [% BLOCK tree %]
338     <tr data-tt-id="[% group.id | html %]" data-tt-parent-id="[% group.parent_id | html %]">
339         <td>
340             [% IF group.branchcode %]
341                 [% group.branchcode | html %]
342             [% ELSE %]
343                 [% group.title | html %]
344             [% END %]
345         </td>
346         <td>
347             [% IF group.branchcode %]
348                 [% group.library.branchname | html %]
349             [% ELSE %]
350                 [% group.description | html %]
351             [% END %]
352         </td>
353         <td>
354             [% UNLESS group.branchcode %]
355               <ul>
356                 [% IF group.ft_hide_patron_info %]
357                     <li>Hide patron's info for librarians outside of this group.</li>
358                 [% END %]
359                 [% IF group.ft_search_groups_opac %]
360                     <li>Use for OPAC search groups</li>
361                 [% END %]
362                 [% IF group.ft_search_groups_staff %]
363                     <li>Use for staff search groups</li>
364                 [% END %]
365               </ul>
366             [% END %]
367         </td>
368         <td>
369             [% IF group.branchcode %]
370                 <button class="btn btn-default btn-xs remove-library" data-group-id="[% group.id | html %]" data-group-library="[% group.library.branchname | html %]" data-group-parent-title="[% group.parent.title | html %]" ><i class="fa fa-trash"></i> Remove from group</button>
371             [% ELSE %]
372                 <div class="btn-group">
373                     <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i> Actions <span class="caret"></span></button>
374                     <ul class="dropdown-menu">
375                         <li>
376                             <a id="add-group-[% group.id | html %]" href="#" class="add-group" data-group-id="[% group.id | html %]">
377                                 <i class="fa fa-plus"></i> Add sub-group
378                             </a>
379                        </li>
380
381                         <li>
382                             <a class="edit-group" id="edit-group-[% group.id | html %]" href="#" data-group-id="[% group.id | html %]" data-group-parent-id="[% group.parent_id | html %]" data-group-title="[% group.title | html %]" data-group-description="[% group.description | html %]" data-group-ft_hide_patron_info="[% group.ft_hide_patron_info | html %]" data-group-ft_search_groups_opac="[% group.ft_search_groups_opac | html %]" data-group-ft_search_groups_staff="[% group.ft_search_groups_staff | html %]" >
383                                 <i class="fa fa-pencil"></i> Edit
384                             </a>
385                        </li>
386
387                         <li>
388                             <a class="delete-group" id="delete-group-[% group.id | html %]" href="#" data-group-id="[% group.id | html %]" data-group-title="[% group.title | html %]">
389                                 <i class="fa fa-trash"></i> Delete
390                             </a>
391                        </li>
392                     </ul>
393                 </div>
394
395                 <div class="btn-group">
396                     <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-plus"></i> Add library <span class="caret"></span></button>
397                     <ul class="dropdown-menu">
398                         [% FOREACH library IN group.libraries_not_direct_children %]
399                             <li>
400                                 <a class="add-library" id="add-library[% library.id | html %]-[% group.id | html %]" href="/cgi-bin/koha/admin/library_groups.pl?action=add&parent_id=[% group.id | html %]&branchcode=[% library.id | html %]">
401                                     [% library.branchname | html %]
402                                 </a>
403                            </li>
404                         [% END %]
405                     </ul>
406                 </div>
407             [% END %]
408         </td>
409     </tr>
410
411     [% FOREACH g IN group.children %]
412         [% PROCESS tree group=g %]
413     [% END %]
414 [% END %]