Bug 30952: Undo change to Home breadcrumb for remaining templates
[koha-ffzg.git] / koha-tmpl / intranet-tmpl / prog / en / modules / reports / guided_reports_start.tt
index f76a692..650313c 100644 (file)
@@ -5,16 +5,17 @@
 [% USE Koha %]
 [% USE TablesSettings %]
 [% USE JSON.Escape %]
+[% PROCESS 'i18n.inc' %]
 [% SET footerjs = 1 %]
 
 [%- BLOCK area_name -%]
     [%- SWITCH area -%]
-        [%- CASE 'CIRC' -%]Circulation
-        [%- CASE 'CAT'  -%]Catalog
-        [%- CASE 'PAT'  -%]Patrons
-        [%- CASE 'ACQ'  -%]Acquisitions
-        [%- CASE 'ACC'  -%]Accounts
-        [%- CASE 'SER'  -%]Serials
+        [%- CASE 'CIRC' -%]<span>Circulation</span>
+        [%- CASE 'CAT'  -%]<span>Catalog</span>
+        [%- CASE 'PAT'  -%]<span>Patrons</span>
+        [%- CASE 'ACQ'  -%]<span>Acquisitions</span>
+        [%- CASE 'ACC'  -%]<span>Accounts</span>
+        [%- CASE 'SER'  -%]<span>Serials</span>
     [%- END -%]
 [%- END -%]
 
 </head>
 
 <body id="rep_guided_reports_start" class="rep">
-[% INCLUDE 'header.inc' %]
-[% INCLUDE 'circ-search.inc' %]
+[% WRAPPER 'header.inc' %]
+    [% INCLUDE 'circ-search.inc' %]
+[% END %]
 
+[% WRAPPER 'sub-header.inc' %]
 <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
     <ol>
         <li>
             <li>
                 <a href="#" aria-current="page">
                     [% IF ( build1 ) %]
-                        Step 1 of 6: Choose a module
+                        <span>Step 1 of 6: Choose a module</span>
                     [% ELSIF ( build2 ) %]
-                        Step 2 of 6: Pick a report type
+                        <span>Step 2 of 6: Pick a report type</span>
                     [% ELSIF ( build3 ) %]
-                        Step 3 of 6: Select columns for display
+                        <span>Step 3 of 6: Select columns for display</span>
                     [% ELSIF ( build4 ) %]
-                        Step 4 of 6: Select criteria to limit on
+                        <span>Step 4 of 6: Select criteria to limit on</span>
                     [% ELSIF ( build5 ) %]
-                        Step 5 of 6: Pick which columns to total
+                        <span>Step 5 of 6: Pick which columns to total</span>
                     [% ELSIF ( build6 ) %]
-                        Step 6 of 6: Select how you want the report ordered
+                        <span>Step 6 of 6: Select how you want the report ordered</span>
                     [% END %]
                 </a>
         [% END %]
     </ol>
 </nav> <!-- /#breadcrumbs -->
+[% END %]
 
 <div id="update_sql" class="modal" tabindex="-1" role="dialog" aria-labelledby="update_sql_label" aria-hidden="true">
     <div class="modal-dialog">
                 [% INCLUDE "reports-toolbar.inc" %]
 
                 [% IF ( start ) %]
-                    <h2>Guided reports</h2>
+                    <h1>Guided reports</h1>
                     <p>Use the guided reports engine to create non standard reports. This feature aims to provide some middle ground between the built in canned reports and writing custom SQL reports.</p>
 
                     <h3>Build and run reports</h3>
                 [% END %]
 
                 [% IF ( saved1 ) %]
-                    [% IF ( savedreports ) %]
                         <h1>Saved reports</h1>
+                    [% IF ( savedreports ) %]
 
                         [% IF ( filters.date || filters.author || filters.keyword ) %]
                             <p>Filtered by:
                         [% END %]
 
                         <div id="tabs" class="toptabs">
-                            <ul>
-                                <li><a href="#reports">All</a></li>
+                            <ul class="nav nav-tabs" role="tablist">
+                                <li role="presentation" class="active">
+                                    <a href="#reports" aria-controls="reports" role="tab" data-toggle="tab">All</a>
+                                </li>
                                 [% FOREACH group IN groups_with_subgroups %]
-                                    <li><a id="[% group.id | html %]" href="#reports">[% group.name | html %]</a></li>
+                                    <li role="presentation">
+                                        <a id="[% group.id | html %]" href="#reports" aria-controls="reports" role="tab" data-toggle="tab">[% group.name | html %]</a>
+                                    </li>
                                 [% END %]
                             </ul>
-                            <div id="reports">
-                                <div id="subgroup_filter_block">
-                                    <label for="subgroup_filter">Subgroup:</label>
-                                    <select id="subgroup_filter">
-                                        <option value="">All</option>
-                                    </select>
-                                </div>
 
-                                [% IF (Koha.Preference('Mana') == 1) %]
-                                    [% IF manamsg %]
-                                        <div id="mana_search_message" class="dialog message">
-                                            <p> [% manamsg | html %] </p>
-                                        </div>
+                            <div class="tab-content">
+                                <div id="reports" role="tabpanel" class="tab-pane active">
+                                    <div id="subgroup_filter_block">
+                                        <label for="subgroup_filter">Subgroup:</label>
+                                        <select id="subgroup_filter">
+                                            <option value="">All</option>
+                                        </select>
+                                    </div>
+
+                                    [% IF (Koha.Preference('Mana') == 1) %]
+                                        [% IF manamsg %]
+                                            <div id="mana_search_message" class="dialog message">
+                                                <p> [% manamsg | html %] </p>
+                                            </div>
+                                        [% END %]
                                     [% END %]
-                                [% END %]
 
-                                <form action="/cgi-bin/koha/reports/guided_reports.pl" id="reports_form" method="post">
-                                    <input type="hidden" name="phase" value="Delete Multiple" />
-                                    <table id="table_reports">
-                                        <thead>
-                                            <tr>
-                                                <th class="NoSort">&nbsp;</th>
-                                                <th>ID</th>
-                                                <th>Report name</th>
-                                                <th>Type</th>
-                                                <th>Group</th>
-                                                <th>Subgroup</th>
-                                                <th>Notes</th>
-                                                <th>Author</th>
-                                                <th>Creation date</th>
-                                                <th>Last edit</th>
-                                                <th>Last run</th>
-                                                <th class="report_public">Public</th>
-                                                <th class="report_json_url">JSON URL</th>
-                                                [% IF (usecache) %]
-                                                    <th>Cache expiry (seconds)</th>
-                                                [% ELSE %]
-                                                    <th class="NoVisible">Cache expiry (seconds)</th>
-                                                [% END %]
-                                                <th>Saved results</th>
-                                                [% IF has_obsolete_reports %]
-                                                    <th>Update</th>
-                                                [% ELSE %]
-                                                    <th class="NoVisible">Update</th>
-                                                [% END %]
-                                                <th class="NoSort noExport">Actions</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            [% FOREACH savedreport IN savedreports %]
-                                                [% UNLESS ( loop.odd ) %]<tr class="odd">[% ELSE %]<tr>[% END %]
-                                                    <td class="report_checkbox">
-                                                        [% IF ( CAN_user_reports_delete_reports ) %] <!-- not break CSS -->
-                                                            <input type="checkbox" name="ids" id="ids[% savedreport.id | html %]" value="[% savedreport.id | html %]" />
-                                                        [% END %]
-                                                        <input type="hidden" class="report_sql" value="[% savedreport.savedsql |html %]">
-                                                    </td>
-                                                    <td class="report_id">
-                                                        <label for="ids[% savedreport.id | html %]">[% savedreport.id | html %]</label>
-                                                    </td>
-                                                    <td class="report_name">
-                                                        [% IF ( savedreport.report_name ) %]
-                                                            [% savedreport.report_name | html %]
-                                                        [% ELSE %]
-                                                            [ no name ]
-                                                        [% END %]
-                                                    </td>
-                                                    <td class="report_type">
-                                                        [% savedreport.type | html %]
-                                                    </td>
-                                                    <td class="report_group">
-                                                        [% savedreport.groupname | html %]
-                                                    </td>
-                                                    <td>
-                                                        [% savedreport.subgroupname | html %]
-                                                    </td>
-                                                    <td class="report_notes">
-                                                        [% savedreport.notes | html %]
-                                                    </td>
-                                                    <td>
-                                                        [% savedreport.borrowersurname | html %]
-                                                        [% IF ( savedreport.borrowerfirstname ) %]
-                                                            , [% savedreport.borrowerfirstname | html %]
-                                                        [% END %]
-                                                        ([% savedreport.borrowernumber | html %])
-                                                    </td>
-                                                    <td data-order="[% savedreport.date_created | html %]">
-                                                        [% savedreport.date_created | $KohaDates %]
-                                                    </td>
-                                                    <td data-order="[% savedreport.last_modified | html %]">
-                                                        [% savedreport.last_modified | $KohaDates  with_hours => 1 %]
-                                                    </td>
-                                                    <td data-order="[% savedreport.last_run | html %]">
-                                                        [% savedreport.last_run | $KohaDates  with_hours => 1 %]
-                                                    </td>
-                                                    <td class="report_public">
-                                                        [% IF (savedreport.public) %]
-                                                            Yes
-                                                        [% ELSE %]
-                                                            No
-                                                        [% END %]
-                                                    </td>
-                                                    <td class="report_json_url">
-                                                        [% IF (savedreport.public) %]
-                                                            <a href="[% OPACBaseURL | url %]/cgi-bin/koha/svc/report?id=[% savedreport.id | uri %]">[% OPACBaseURL | html %]/cgi-bin/koha/svc/report?id=[% savedreport.id | html %]</a>
-                                                        [% ELSE %]
-                                                            <a href="/cgi-bin/koha/svc/report?id=[% savedreport.id | uri %]">[% Koha.Preference('staffClientBaseURL') | html %]/cgi-bin/koha/svc/report?id=[% savedreport.id | html %]</a>
-                                                        [% END %]
-                                                    </td>
-                                                    <td>
-                                                        [% savedreport.cache_expiry | html %]
-                                                    </td>
-                                                    <td>
-                                                        [% FOR result IN savedreport.results %]
-                                                            <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=retrieve%20results&amp;id=[% result.id | uri %]">[% result.date_run | html %]</a>
-                                                            <br/>
-                                                        [% END %]
-                                                    </td>
-                                                    <td>
-                                                        [% IF savedreport.seems_obsolete %]
-                                                            This report seems obsolete, it uses biblioitems.marcxml field.
-                                                            <a href="/cgi-bin/koha/svc/convert_report?report_id=[% savedreport.id | uri %]" data-report_id="[% savedreport.id | html %]" class="update_sql btn btn-default btn-xs" title="Update SQL"><i class="fa fa-eye"></i> Update SQL</a>
-                                                        [% END %]
-                                                    </td>
-                                                    <td>
-                                                        <div class="btn-group dropup">
-                                                            [%# There should be no space between these two buttons, it would render badly %]
-                                                            <a class="btn btn-default btn-xs" role="button"
-                                                               href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | html %]&amp;phase=Run%20this%20report"><i
-                                                               class="fa fa-play"></i> Run</a><a
-                                                               class="btn btn-default btn-xs dropdown-toggle" id="reportactions[% savedreport.id | html %]" role="button" data-toggle="dropdown"
-                                                               href="#"><b class="caret"></b></a>
-                                                            <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="reportactions[% savedreport.id | html %]">
-                                                                <li><a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | uri %]&amp;phase=Show%20SQL"><i class="fa fa-search"></i> View</a></li>
-                                                                <li>
-                                                                    <a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | uri %]&phase=Show%20SQL" class="preview_sql" data-reportid="[% savedreport.id | html %]">
-                                                                        <i class="fa fa-eye"></i> Preview SQL
-                                                                    </a>
-                                                                </li>
-                                                                [% IF ( CAN_user_reports_create_reports ) %]
-                                                                    <li><a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | uri %]&amp;phase=Edit%20SQL"><i class="fa fa-pencil"></i> Edit</a></li>
-                                                                    <li><a title="Duplicate this saved report" href="/cgi-bin/koha/reports/guided_reports.pl?phase=Create report from existing&amp;report_id=[% savedreport.id | uri %]"><i class="fa fa-copy"></i> Duplicate</a></li>
-                                                                [% END %]
-                                                                [% IF (Koha.Preference('Mana') == 1) %]
-                                                                    <li><a class="ShareButton" data-toggle="modal" href="#mana_share_report" title="Share your report with Mana Knowledge Base"><i class="fa fa-share-alt"></i> Share</a></li>
-                                                                [% END %]
-                                                                <li><a href="/cgi-bin/koha/tools/scheduler.pl?id=[% savedreport.id | uri %]"><i class="fa fa-clock-o"></i> Schedule</a></li>
-                                                                [% IF ( CAN_user_reports_delete_reports ) %]
-                                                                    <li><a class="confirmdelete" title="Delete this saved report" href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | html %]&amp;phase=Delete%20Saved"><i class="fa fa-trash"></i> Delete</a></li>
-                                                                [% END %]
-                                                            </ul>
-                                                        </div>
-                                                        <input type="hidden" id="previewSql[% savedreport.id | html %]" value="[% savedreport.savedsql | html %]" data-title="[% savedreport.report_name | html %]" />
-                                                    </td>
+                                    <form action="/cgi-bin/koha/reports/guided_reports.pl" id="reports_form" method="post">
+                                        <input type="hidden" name="phase" value="Delete Multiple" />
+                                        <table id="table_reports">
+                                            <thead>
+                                                <tr>
+                                                    <th class="NoSort">&nbsp;</th>
+                                                    <th>ID</th>
+                                                    <th>Report name</th>
+                                                    <th>Type</th>
+                                                    <th>Group</th>
+                                                    <th>Subgroup</th>
+                                                    <th>Notes</th>
+                                                    <th>Author</th>
+                                                    <th>Creation date</th>
+                                                    <th>Last edit</th>
+                                                    <th>Last run</th>
+                                                    <th class="report_public">Public</th>
+                                                    <th class="report_json_url">JSON URL</th>
+                                                    [% IF (usecache) %]
+                                                        <th>Cache expiry (seconds)</th>
+                                                    [% ELSE %]
+                                                        <th class="NoVisible">Cache expiry (seconds)</th>
+                                                    [% END %]
+                                                    <th>Saved results</th>
+                                                    [% IF has_obsolete_reports %]
+                                                        <th>Update</th>
+                                                    [% ELSE %]
+                                                        <th class="NoVisible">Update</th>
+                                                    [% END %]
+                                                    <th class="NoSort noExport">Actions</th>
                                                 </tr>
-                                            [% END %]
-                                        </tbody>
-                                    </table>
+                                            </thead>
+                                            <tbody>
+                                                [% FOREACH savedreport IN savedreports %]
+                                                    [% UNLESS ( loop.odd ) %]<tr class="odd">[% ELSE %]<tr>[% END %]
+                                                        <td class="report_checkbox">
+                                                            [% IF ( CAN_user_reports_delete_reports ) %] <!-- not break CSS -->
+                                                                <input type="checkbox" name="ids" id="ids[% savedreport.id | html %]" value="[% savedreport.id | html %]" />
+                                                            [% END %]
+                                                            <input type="hidden" class="report_sql" value="[% savedreport.savedsql |html %]">
+                                                        </td>
+                                                        <td class="report_id">
+                                                            <label for="ids[% savedreport.id | html %]">[% savedreport.id | html %]</label>
+                                                        </td>
+                                                        <td class="report_name">
+                                                            [% IF ( savedreport.report_name ) %]
+                                                                [% savedreport.report_name | html %]
+                                                            [% ELSE %]
+                                                                [ no name ]
+                                                            [% END %]
+                                                        </td>
+                                                        <td class="report_type">
+                                                            [% savedreport.type | html %]
+                                                        </td>
+                                                        <td class="report_group">
+                                                            [% savedreport.groupname | html %]
+                                                        </td>
+                                                        <td>
+                                                            [% savedreport.subgroupname | html %]
+                                                        </td>
+                                                        <td class="report_notes">
+                                                            [% savedreport.notes | html %]
+                                                        </td>
+                                                        <td>
+                                                            [%- savedreport.borrowersurname | html -%][%- IF ( savedreport.borrowerfirstname ) -%], [%- savedreport.borrowerfirstname | html -%][%- END -%]
+                                                            ([% savedreport.borrowernumber | html %])
+                                                        </td>
+                                                        <td data-order="[% savedreport.date_created | html %]">
+                                                            [% savedreport.date_created | $KohaDates %]
+                                                        </td>
+                                                        <td data-order="[% savedreport.last_modified | html %]">
+                                                            [% savedreport.last_modified | $KohaDates  with_hours => 1 %]
+                                                        </td>
+                                                        <td data-order="[% savedreport.last_run | html %]">
+                                                            [% savedreport.last_run | $KohaDates  with_hours => 1 %]
+                                                        </td>
+                                                        <td class="report_public">
+                                                            [% IF (savedreport.public) %]
+                                                                Yes
+                                                            [% ELSE %]
+                                                                No
+                                                            [% END %]
+                                                        </td>
+                                                        <td class="report_json_url">
+                                                            [% IF (savedreport.public) %]
+                                                                <a href="[% OPACBaseURL | url %]/cgi-bin/koha/svc/report?id=[% savedreport.id | uri %]">[% OPACBaseURL | html %]/cgi-bin/koha/svc/report?id=[% savedreport.id | html %]</a>
+                                                            [% ELSE %]
+                                                                <a href="/cgi-bin/koha/svc/report?id=[% savedreport.id | uri %]">[% Koha.Preference('staffClientBaseURL') | html %]/cgi-bin/koha/svc/report?id=[% savedreport.id | html %]</a>
+                                                            [% END %]
+                                                        </td>
+                                                        <td>
+                                                            [% savedreport.cache_expiry | html %]
+                                                        </td>
+                                                        <td>
+                                                            [% FOR result IN savedreport.results %]
+                                                                <a href="/cgi-bin/koha/reports/guided_reports.pl?phase=retrieve%20results&amp;id=[% result.id | uri %]">[% result.date_run | html %]</a>
+                                                                <br/>
+                                                            [% END %]
+                                                        </td>
+                                                        <td>
+                                                            [% IF savedreport.seems_obsolete %]
+                                                                This report seems obsolete, it uses biblioitems.marcxml field.
+                                                                <a href="/cgi-bin/koha/svc/convert_report?report_id=[% savedreport.id | uri %]" data-report_id="[% savedreport.id | html %]" class="update_sql btn btn-default btn-xs" title="Update SQL"><i class="fa fa-eye"></i> Update SQL</a>
+                                                            [% END %]
+                                                        </td>
+                                                        <td>
+                                                            <div class="btn-group dropup">
+                                                                [%# There should be no space between these two buttons, it would render badly %]
+                                                                <a class="btn btn-default btn-xs" role="button"
+                                                                href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | html %]&amp;phase=Run%20this%20report"><i
+                                                                class="fa fa-play"></i> Run</a><a
+                                                                class="btn btn-default btn-xs dropdown-toggle" id="reportactions[% savedreport.id | html %]" role="button" data-toggle="dropdown"
+                                                                href="#"><b class="caret"></b></a>
+                                                                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="reportactions[% savedreport.id | html %]">
+                                                                    <li><a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | uri %]&amp;phase=Show%20SQL"><i class="fa fa-search"></i> View</a></li>
+                                                                    <li>
+                                                                        <a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | uri %]&phase=Show%20SQL" class="preview_sql" data-reportid="[% savedreport.id | html %]">
+                                                                            <i class="fa fa-eye"></i> Preview SQL
+                                                                        </a>
+                                                                    </li>
+                                                                    [% IF ( CAN_user_reports_create_reports ) %]
+                                                                        <li><a href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | uri %]&amp;phase=Edit%20SQL"><i class="fa fa-pencil"></i> Edit</a></li>
+                                                                        <li><a title="Duplicate this saved report" href="/cgi-bin/koha/reports/guided_reports.pl?phase=Create report from existing&amp;report_id=[% savedreport.id | uri %]"><i class="fa fa-copy"></i> Duplicate</a></li>
+                                                                    [% END %]
+                                                                    [% IF (Koha.Preference('Mana') == 1) %]
+                                                                        <li><a class="ShareButton" data-toggle="modal" href="#mana_share_report" title="Share your report with Mana Knowledge Base"><i class="fa fa-share-alt"></i> Share</a></li>
+                                                                    [% END %]
+                                                                    <li><a href="/cgi-bin/koha/tools/scheduler.pl?id=[% savedreport.id | uri %]"><i class="fa fa-clock-o"></i> Schedule</a></li>
+                                                                    [% IF ( CAN_user_reports_delete_reports ) %]
+                                                                        <li><a class="confirmdelete" title="Delete this saved report" href="/cgi-bin/koha/reports/guided_reports.pl?reports=[% savedreport.id | html %]&amp;phase=Delete%20Saved"><i class="fa fa-trash"></i> Delete</a></li>
+                                                                    [% END %]
+                                                                </ul>
+                                                            </div>
+                                                            <input type="hidden" id="previewSql[% savedreport.id | html %]" value="[% savedreport.savedsql | html %]" data-title="[% savedreport.report_name | html %]" />
+                                                        </td>
+                                                    </tr>
+                                                [% END %]
+                                            </tbody>
+                                        </table>
 
-                                    [% IF ( CAN_user_reports_delete_reports ) %]
-                                        <fieldset class="action">
-                                            <input type="submit" value="Delete selected" />
-                                        </fieldset>
-                                    [% END %]
-                                </form>
-                            </div>
+                                        [% IF ( CAN_user_reports_delete_reports ) %]
+                                            <fieldset class="action">
+                                                <input type="submit" value="Delete selected" />
+                                            </fieldset>
+                                        [% END %]
+                                    </form>
+                                </div> <!-- /#reports -->
+                            </div> <!-- /.tab-content -->
                         </div>
                     [% ELSE # IF ( savedreports ) %]
                         <div class="dialog message">
                         <input type="hidden" name="public" value="[% public | html %]" />
                         <input type="hidden" name="cache_expiry" value="[% cache_expiry | html %]" />
                         <fieldset class="rows">
-                            <legend>Save your custom report</legend>
+                            <legend><h1>Save your custom report</h1></legend>
                             <ol>
                                 <li>
                                     <label for="reportname" class="required">Report name: </label>
                 [% END # /IF ( enter_params ) %]
 
                 [% IF ( execute ) %]
-                    <h1>[% name | html %] <span id="report_id">([% id | html %])</span></h1>
+                    <h1>[% name | html %] <span class="report_heading_id"><span class="report_label">Report ID:</span> <span class="report_number">[% id | html %]</span></span></h1>
                     [% IF ( notes ) %]
                         <p><span class="label">Notes:</span> [% notes | html %]</p>
                     [% END %]
                             <span class="label">Total number of results:</span>
                             [% unlimited_total | html %]
                             [% IF unlimited_total >= limit %]
-                                ([% limit | html %] shown)
-                            [% END %].
+                                ([% results.size | html %] shown)
+                            [% END %]
                         </p>
                     [% END %]
 
                 [% END #/IF ( execute ) %]
 
                 [% IF ( create ) %]
+                    <h1>Create from SQL</h1>
                     <form action="/cgi-bin/koha/reports/guided_reports.pl" method="post" id="sql_report_form">
                         <fieldset class="rows">
                             <legend>Create report from SQL</legend>
                                     [% IF ( reportname ) %]
                                         <input type="text" class="required" required="required" id="reportname" name="reportname" value="[% reportname | html %]" size="50"/>
                                     [% ELSE %]
-                                        <input type="text" class="required" required="required" id="reportname" name="reportname" size="50" />
+                                        <input type="text" class="required focus" required="required" id="reportname" name="reportname" size="50" />
                                     [% END %]
                                     <span class="required">Required</span>
                                 </li>
                 [% END # /IF saved_results %]
 
                 [% IF ( showsql ) %]
+                <h1>Saved reports - SQL</h1>
                     <fieldset class="rows">
                         <legend>[% reportname | html %]</legend>
                         <ol>
                         <input type="hidden" name="phase" value="Update SQL" />
                         <input type="hidden" name="id" value="[% id | html %]"/>
                         <fieldset class="rows">
-                            <legend>Edit SQL report</legend>
+                            <legend><h1>Edit SQL report</h1></legend>
                             <ol>
                                 <li>
                                     <label for="reportname" class="required">Report name: </label>
                                     Use of this keyword is not allowed in Koha reports due to security and data integrity risks. Only SELECT queries are allowed.<br />
                                     Please return to the &quot;Saved Reports&quot; screen and delete this report or retry creating a new one.
                                 [% ELSIF ( error.queryerr ) %]
-                                    The database returned the following error: <br />
+                                    <span>The database returned the following error:</span> <br />
                                     [% error.queryerr | html %]<br />Please check the log for further details.
                                 [% ELSIF ( error.cache_expiry ) %]
                                     Please select a cache expiry less than 30 days.
             }
         }
 
-        /**
-         * Process the value of the NumSavedReports system preference for use as
-            a DataTable pageLenth option
-         * @param {string} pageLength - The value of the NumSavedReports system
-            preference, passed via the template during table initiation
-         * @return {number} - The number of results to show by default in the
-            DataTable (-1 for "all")
-         */
-        function getPageLength( pageLength ){
-            if( pageLength !== "" ){
-                if( Number( pageLength ) > 0 ){
-                    return Number( pageLength );
-                } else {
-                    return 20; /* Negative or non-numeric value passed. Use default 20 */
-                }
-            } else {
-                return -1;
-            }
-        }
-
-        /**
-         * Rebuild the DataTable's lengthMenu array, adding the value of the NumSavedReports
-            system preference
-         * @param {string} pageLength - The value of the NumSavedReports system
-            preference, passed via the template during table initiation
-         * @return {Array} - An array of two arrays: 1. The numeric values for
-            options in the pageLenth <select>; 2. The text values for options in
-            the pageLength <select>;
-         */
-        function buildLengthMenu( num ){
-            var lengthMenu = dataTablesDefaults.lengthMenu;
-            var pageLength = getPageLength( num );
-            if( !lengthMenu[0].includes( pageLength ) ){
-                /* extend lengthMenu with custom value */
-                lengthMenu.forEach( function( item ){
-                    item.pop(); /* Remove the last entry, "all" */
-                    item.push( Number( pageLength ) ); /* Add the value from NumSavedReports */
-                    item.sort(function( a, b ){ /* Re-sort the values */
-                        return a - b;
-                    });
-                });
-                lengthMenu[0].push(-1); /* Add the numeric "all" option */
-                lengthMenu[1].push( _("All") ); /* Add the textual "all" option */
-            }
-            return lengthMenu;
-        }
-
         $(document).ready(function(){
 
             var activeTab = localStorage.getItem("sql_reports_activetab");
             [% END %]
 
             $('[data-toggle="tooltip"]').tooltip();
-            var columns_settings = [% TablesSettings.GetColumns( 'reports', 'saved-sql', 'table_reports', 'json' ) | $raw %];
 
             $('#limit').change(function() {
                 $('#limitselect').submit();
             });
 
             [% IF (saved1) %]
+                var table_settings = [% TablesSettings.GetTableSettings( 'reports', 'saved-sql', 'table_reports', 'json' ) | $raw %];
                 var rtable = KohaTable("table_reports", {
-                    "pageLength": getPageLength( "[% Koha.Preference('NumSavedReports') | html %]" ),
-                    "lengthMenu": buildLengthMenu( "[% Koha.Preference('NumSavedReports') | html %]" ),
                     'bAutoWidth': false,
                     'sPaginationType': 'full',
                     'aaSorting': [[ 1, "asc" ]],
                     'oLanguage': {
                         'sZeroRecords': _("No matching reports found")
                     }
-                }, columns_settings);
+                }, table_settings);
 
-                var rtabs = $("#tabs").tabs({
-                    create: function( e, ui ){
-                        tabsInit( ui, rtable );
-                    },
-                    activate: function( e, ui ){
-                        tabsInit( ui, rtable );
-                    }
+                $("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
+                    tabsInit( $(e.target).parent(), rtable );
                 });
+
                 if( activeTab ){
-                    $("#tabs").tabs("option","active", activeTab );
+                    $("#tabs li:eq(" + activeTab + ") a").tab("show");
                 }
 
                 $("#subgroup_filter").change(function() {
                 });
             [% END %]
 
-            $(".toggle_sql").click(function(){
-                $("#sql_output").toggle();
-                $("#toggle_sql_hid").toggle();
-                $("#toggle_sql_vis").toggle();
+            $("#toggle_sql").click(function(){
+                var sql_output = $("#sql_output");
+                sql_output.toggle();
+                if( sql_output.is(":visible") ){
+                    $(this).button('complete');
+                } else {
+                    $(this).button('reset');
+                }
                 if( !showsql ){
                     showsql = CodeMirror.fromTextArea(sql, {
                         lineNumbers: false,
             $("#toggle_auto_links").click();
         }
 
-        function tabsInit( ui, rtable ){
-            var thisTab = ui.newTab ? ui.newTab : ui.tab;
+        function tabsInit( tab, rtable ){
+            var thisTab = tab; // ui.newTab ? ui.newTab : ui.tab;
             var activeTab = thisTab.index();
             localStorage.setItem("sql_reports_activetab", activeTab );
 
             rtable.fnSetColumnVis(4, true);
             rtable.fnSetColumnVis(5, true);
 
-            var g_id = $(ui.newTab).children().attr('id');
-            var g_name = $(ui.newTab).text();
+            var g_id = $( tab ).children().attr('id');
+            var g_name = $( tab ).children().text();
             if ( g_name == _("All") ) {
                 g_id = "";
                 g_name = "";