Bug 16764: Update printers administration page

This patch updates the template for printers administration according to
current interface guidelines.

- Custom JavaScript form validation is removed in favor of the built-in
  form validation plugin.
- Printer-specific header search form is removed, along with server-side
  pagination code. The functionality of both is now taken care of the
  adding DataTables sorting and pagination to the table.
- Edit and delete links are styled as Boostrap buttons with Font Awesome
  icons.
- Confirmation dialogs are updated to use Font Awesome icons.

To test properly you will need to add multiple printers.

- Apply the patch and open /cgi-bin/koha/admin/printers.pl (there is no
  menu link for the page).
- When no printers exist you should see a message dialog saying so.
- Add a new printer. Confirm that printer name and queue are required
  fields.
- After adding multiple printers, confirm that the table of printers is
  correctly sorted and searched by the DataTables plugin.
- Delete a printer and verify that the confirmation dialog is correctly
  styled.

Signed-off-by: Marc Véron <veron@veron.ch>
Update: rebased and updated Bootstrap 3 classes

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/admin/printers.pl b/admin/printers.pl
index 9e0163b..cb43148 100755 (executable)
--- a/admin/printers.pl
+++ b/admin/printers.pl
@@ -60,10 +60,8 @@ sub StringSearch  {
 my $input = new CGI;
 my $searchfield=$input->param('searchfield');
 #my $branchcode=$input->param('branchcode');
-my $offset=$input->param('offset') || 0;
 my $script_name="/cgi-bin/koha/admin/printers.pl";
 
-my $pagesize=20;
 my $op = $input->param('op');
 $searchfield=~ s/\,//g;
 
@@ -132,19 +130,7 @@ if ($op eq 'add_form') {
 } else { # DEFAULT
        $template->param(else => 1);
        my ($count,$results)=StringSearch($searchfield,'web');
-       my $max = ($offset+$pagesize < $count) ? $offset+$pagesize : $count;
-       my @loop = (@$results)[$offset..$max];
-       
-       $template->param(loop => \@loop);
-       
-       if ($offset>0) {
-               $template->param(offsetgtzero => 1,
-                                prevpage => $offset-$pagesize);
-       }
-       if ($offset+$pagesize<$count) {
-               $template->param(ltcount => 1,
-                                nextpage => $offset+$pagesize);
-       }
+    $template->param(loop => $results);
 
 } #---- END $OP eq DEFAULT
 

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/printers-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/printers-admin-search.inc
deleted file mode 100644 (file)
index 3bd8e28..0000000
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/printers-admin-search.inc
+++ /dev/null
@@ -1,30 +0,0 @@
-[% USE Koha %]
-<div class="gradient">
-<h1 id="logo"><a href="/cgi-bin/koha/mainpage.pl">[% LibraryName %]</a></h1><!-- Begin Printers Resident Search Box -->
-<div id="header_search">
-       <div id="printer_search" class="residentsearch">
-    <p class="tip">Printer search:</p>
-<form action="[% script_name %]" method="post">
-                <input class="head-searchbox" type="text" size="40" name="description" value="[% searchfield %]" />
-                <input type="submit" name="submit" value="Search" />
-        </form>
-       </div>
-    [% INCLUDE 'patron-search-box.inc' %]
-       [% IF ( CAN_user_catalogue ) %]
-    <div id="catalog_search" class="residentsearch">
-       <p class="tip">Enter search keywords:</p>
-               <form action="/cgi-bin/koha/catalogue/search.pl"  method="get" id="cat-search-block">
-            [% IF ( Koha.Preference('IntranetCatalogSearchPulldown') ) %][% INCLUDE 'search_indexes.inc' %][% END %]
-            <input type="text" name="q" id="search-form" size="40" value="" title="Enter the terms you wish to search for." class="head-searchbox form-text" />
-                               <input type="submit" value="Submit"  class="submit" />
-               </form>
-       </div>
-       [% END %]
-                       <ul>
-            <li><a class="keep_text" href="#printer_search">Search printers</a></li>
-            [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a class="keep_text" href="#circ_search">Check out</a></li>[% END %]
-            [% IF ( CAN_user_catalogue ) %]<li><a class="keep_text" href="#catalog_search">Search the catalog</a></li>[% END %]
-                       </ul>   
-</div>
-</div><!-- /gradient -->
-<!-- End Printers Resident Search Box -->

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/printers.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/printers.tt
index 45e6d39..1090afc 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/printers.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/printers.tt
@@ -6,53 +6,27 @@
 [% IF ( delete_confirmed ) %] Printers › Printer deleted[% END %]
 [% IF ( else ) %]Printers[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-[% IF ( add_form ) %]<script type="text/javascript">
+[% IF ( loop ) %]
+<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables.css" />
+[% INCLUDE 'datatables.inc' %]
+<script type="text/javascript">
 //<![CDATA[
-        //
-        function isNotNull(f,noalert) {
-                if (f.value.length ==0) {
-   return false;
-                }
-                return true;
-        }
-        //
-        function isNum(v,maybenull) {
-        var n = new Number(v.value);
-        if (isNaN(n)) {
-                return false;
-                }
-        if (maybenull==0 && v.value=="") {
-                return false;
-        }
-        return true;
-        }
-        //
-        function Check(f) {
-                var ok=1;
-                var _alertString="";
-                var alertString2;
-                if (f.printername.value.length==0) {
-                        _alertString += "- printer name missing\n";
-                }
-                if (f.printqueue.value.length==0) {
-                        _alertString += "- Queue missing\n";
-                }
-                if (_alertString.length==0) {
-                        document.Aform.submit();
-                } else {
-                        alertString2 = "Form not submitted because of the following problem(s)\n";
-                        alertString2 += "------------------------------------------------------------------------------------\n\n";
-                        alertString2 += _alertString;
-                        alert(alertString2);
-                }
-        }
-        //]]>
+    $(document).ready(function() {
+        $("#printerst").dataTable($.extend(true, {}, dataTablesDefaults, {
+            "aoColumnDefs": [
+                { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
+            ],
+            "aaSorting": [[ 0, "asc" ]],
+            "sPaginationType": "four_button"
+        }));
+    });
+//]]>
 </script>
-       [% END %]
+[% END %]
 </head>
 <body id="admin_printers" class="admin">
 [% INCLUDE 'header.inc' %]
-[% INCLUDE 'printers-admin-search.inc' %]
+[% INCLUDE 'cat-search.inc' %]
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo; [% IF ( add_form ) %][% IF ( searchfield ) %] <a href="/cgi-bin/koha/admin/printers.pl">Printers</a> &rsaquo; Modify printer '[% searchfield %]'[% ELSE %] <a href="/cgi-bin/koha/admin/printers.pl">Printers</a> &rsaquo; New printer[% END %][% END %]
 [% IF ( add_validate ) %] <a href="/cgi-bin/koha/admin/printers.pl">Printers</a> &rsaquo; Printer added[% END %]
@@ -73,7 +47,7 @@
        [% ELSE %]
                <h1>New printer</h1>
        [% END %]
-        <form action="[% script_name %]" name="Aform" method="post">
+        <form action="[% script_name %]" name="Aform" method="post" class="validated">
         <input type="hidden" name="op" value="add_validate" />
        [% IF ( searchfield ) %]
                <input type="hidden" name="add" value="0" />
@@ -88,20 +62,22 @@
                </li>
        [% ELSE %]
                <li>
-            <label for="printername">Printer name: </label>
-                               <input type="text" name="printername" id="printername" size="50" maxlength="50" />
+            <label for="printername" class="required">Printer name: </label>
+                <input type="text" name="printername" id="printername" size="40" maxlength="40" class="required" required="required" />
+                <span class="required">Required</span>
                </li>
        [% END %]
                <li>
-                       <label for="printqueue">Queue: </label>
-                       <input type="text" name="printqueue" id="printqueue" size="50" maxlength="50" value="[% printqueue %]" /> 
+            <label for="printqueue" class="required">Queue: </label>
+            <input type="text" name="printqueue" id="printqueue" size="20" maxlength="20" value="[% printqueue %]"  class="required" required="required" />
+            <span class="required">Required</span>
                </li>
                <li>
                        <label for="printtype">Type: </label>
-                       <input type="text" name="printtype" id="printtype" size="50" maxlength="50" value="[% printtype %]" /> 
+            <input type="text" name="printtype" id="printtype" size="20" maxlength="20" value="[% printtype %]" />
                </li></ol>
         </fieldset>
-               <fieldset class="action"><input type="submit" value="Submit" onclick="Check(this.form);" /> <a class="cancel" href="/cgi-bin/koha/admin/printers.pl">Cancel</a></fieldset>
+        <fieldset class="action"><input type="submit" value="Submit" /> <a class="cancel" href="/cgi-bin/koha/admin/printers.pl">Cancel</a></fieldset>
         </form>
 
 [% END %]
@@ -114,35 +90,40 @@
 [% END %]
 
 [% IF ( delete_confirm ) %]
-<h3>Confirm deletion of printer <em>[% searchfield %]</em></h3>
-<ul>
-               <li>
-                       <strong>Printer: </strong>
-                       [% searchfield %]
-               </li>
-               <li>
-                       <strong>Queue: </strong>
-                       [% printqueue %]
-               </li>
-               <li>
-                       <strong>Type: </strong>
-                       [% printtype %]
-               </li>
-       </ul>
-       <form action="[% script_name %]" method="post">
-                       <input type="hidden" name="op" value="delete_confirmed" />
-                       <input type="hidden" name="searchfield" value="[% searchfield %]" />
-                       <input type="submit" value="Delete this printer" />
-                       </form> <form action="[% script_name %]" method="post">
-                               <input type="submit" value="Do not Delete" />
-                       </form>
+    <div class="dialog alert">
+        <h3>Confirm deletion of printer <em>[% searchfield %]</em></h3>
+
+        <table>
+            <tr>
+                <th scope="row">Printer: </th><td>[% searchfield %]</td>
+            </tr>
+            <tr>
+                <th scope="row">Queue: </th><td>[% printqueue %]</td>
+            </tr>
+            <tr>
+                <th scope="row">Type: </th><td>[% printtype %]</td>
+            </tr>
+        </table>
+
+        <form action="[% script_name %]" method="post">
+            <input type="hidden" name="op" value="delete_confirmed" />
+            <input type="hidden" name="searchfield" value="[% searchfield %]" />
+            <button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> Yes, delete</button>
+        </form>
+        <form action="/cgi-bin/koha/admin/printers.pl" method="get">
+            <button type="submit" class="deny"><i class="fa fa-fw fa-remove"></i> No, do not delete</button>
+        </form>
+    </div>
 [% END %]
 
 [% IF ( delete_confirmed ) %]
-<h3>Printer deleted</h3>
-<form action="[% script_name %]" method="post">
-               <fieldset class="action"><input type="submit" value="OK" /></fieldset>
-</form>
+    <div class="dialog message">
+        <h3>Printer deleted</h3>
+        <form action="[% script_name %]" method="post">
+            <button type="submit" class="approve"><i class="fa fa-fw fa-check"></i> OK</button>
+        </form>
+    </div>
+
 [% END %]
 
 [% IF ( else ) %]
@@ -156,30 +137,27 @@
                You searched for [% searchfield %]</span>
        [% END %]
 
-[% IF ( loop ) %]<table>
-               <tr>
-                       <th>Name</th>
-                       <th>Queue</th>
-                       <th>Type</th>
-                       <th>&nbsp;</th>
-               </tr>
+[% IF ( loop ) %]
+    <table id="printerst">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Queue</th>
+                <th>Type</th>
+                <th>&nbsp;</th>
+            </tr>
+        </thead>
+        <tbody>
                [% FOREACH loo IN loop %]
         <tr>
                        <td>[% loo.printername %]</td>
                        <td>[% loo.printqueue %]</td>
                        <td>[% loo.printtype %]</td>
-                       <td><a href="[% loo.script_name %]?op=add_form&amp;searchfield=[% loo.printername %]">Edit</a> <a href="[% loo.script_name %]?op=delete_confirm&amp;searchfield=[% loo.printername %]">Delete</a></td>
+            <td class="actions"><a class="btn btn-default btn-xs" href="[% loo.script_name %]?op=add_form&amp;searchfield=[% loo.printername |uri %]"><i class="fa fa-pencil"></i> Edit</a> <a class="btn btn-default btn-xs" href="[% loo.script_name %]?op=delete_confirm&amp;searchfield=[% loo.printername |uri %]"><i class="fa fa-trash"></i> Delete</a></td>
                </tr>
                [% END %]
-       </table>[% ELSE %]<div class="notice">No printers defined.</div>[% END %]
-
-       [% IF ( offsetgtzero ) %]
-               <a href="[% script_name %]?offset=[% prevpage %]">&lt;&lt; Previous</a>
-       [% END %]
-
-       [% IF ( ltcount ) %]
-               <a href="[% script_name %]?offset=[% nextpage %]">Next &gt;&gt;</a>     
-       [% END %]
+        </tbody>
+    </table>[% ELSE %]<div class="dialog message">No printers defined.</div>[% END %]
 [% END %]
 
 </div>