From b36327d91ae27863faae2fa453c4545fa3a96c59 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Fri, 20 May 2016 12:19:49 -0400 Subject: [PATCH] Bug 16764 - Update printers administration page Content-Type: text/plain; charset="utf-8" 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. --- admin/printers.pl | 16 +- .../prog/en/includes/printers-admin-search.inc | 28 ---- .../prog/en/modules/admin/printers.tt | 162 +++++++++------------ 3 files changed, 71 insertions(+), 135 deletions(-) delete mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/printers-admin-search.inc diff --git a/admin/printers.pl b/admin/printers.pl index 9e0163b..cb43148 100755 --- 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 index 7d75a71..0000000 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/printers-admin-search.inc +++ /dev/null @@ -1,28 +0,0 @@ -<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"> - <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 onclick="keep_text(0)" href="#printer_search">Search printers</a></li> - [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a onclick="keep_text(1)" href="#circ_search">Check out</a></li>[% END %] - [% IF ( CAN_user_catalogue ) %]<li><a onclick="keep_text(2)" 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 62c0258..d194100 100644 --- 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> › <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> › [% IF ( add_form ) %][% IF ( searchfield ) %] <a href="/cgi-bin/koha/admin/printers.pl">Printers</a> › Modify printer '[% searchfield %]'[% ELSE %] <a href="/cgi-bin/koha/admin/printers.pl">Printers</a> › New printer[% END %][% END %] [% IF ( add_validate ) %] <a href="/cgi-bin/koha/admin/printers.pl">Printers</a> › 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> </th> - </tr> +[% IF ( loop ) %] + <table id="printerst"> + <thead> + <tr> + <th>Name</th> + <th>Queue</th> + <th>Type</th> + <th> </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&searchfield=[% loo.printername %]">Edit</a> <a href="[% loo.script_name %]?op=delete_confirm&searchfield=[% loo.printername %]">Delete</a></td> + <td class="actions"><a class="btn btn-mini" href="[% loo.script_name %]?op=add_form&searchfield=[% loo.printername |uri %]"><i class="fa fa-pencil"></i> Edit</a> <a class="btn btn-mini" href="[% loo.script_name %]?op=delete_confirm&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 %]"><< Previous</a> - [% END %] - - [% IF ( ltcount ) %] - <a href="[% script_name %]?offset=[% nextpage %]">Next >></a> - [% END %] + </tbody> + </table>[% ELSE %]<div class="dialog message">No printers defined.</div>[% END %] [% END %] </div> -- 2.1.4