Bug 16576 [Revised] Remove the use of "onclick" from label templates

This patch updates several label creator templates to remove the use of
"onclick" in favor of defining click events in JavaScript.

Also changed:
 - Replaced the non-existant element <icon> with <i>
 - Removed the use of <center> and 'align="center"';
 - In the item search results template:
   - The use of the checkboxes jQuery plugin has been replaced with
     straight jQuery for simplicity's sake.
   - Output of table headers has been modified so that translatable
     strings are in the template instead of having English strings
     passed from the script.
   - Moved the 'Add checked' and 'Done' buttons into a floating toolbar.

To test, apply the patch and go to Tools -> Label creator.

- Choose New -> Label batch
  - Click 'Add items'
    - Perform a search for items.
    - Confirm that 'select all' and 'clear all' links work.
    - Confirm that clicking an individual 'Add' button works.
    - Select multiple items and click the 'Add checked' button. Confirm
      that the selected items were added to your batch.
  - Click 'Add items' again to save the selected items to your batch.
  - Test that the 'Delete' and 'Export' buttons next to any item work
    correctly.
- Choose Manage -> Label batches
  - Test that the 'Delete' button works correctly.
  - Select one or more batches and test that the 'Export selected'
    button works correctly.

Revision: Removed changes to pagination in the item search results
template since it didn't work.

Followed test plan, works as expected.
Signed-off-by: Marc Véron <veron@veron.ch>
Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2016-05-24 09:18:37 -04:00 committed by Kyle M Hall
parent 7da5fb8175
commit b118074fe4
4 changed files with 105 additions and 54 deletions

View file

@ -7,7 +7,6 @@
[% INCLUDE 'datatables.inc' %]
<script type="text/javascript">
//<![CDATA[
var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this?");
function DeleteConfirm() {
var msg = _("Are you sure you want to delete batch %s?").format("[% batch_id %]");
var answer = confirm(msg);
@ -159,6 +158,15 @@
Xport('batch');
return false;
});
$(".delete").on("click", function(){
return confirmDelete( _("Are you sure you want to delete this?") );
});
$(".export").on("click", function(e){
e.preventDefault();
var label_id = $(this).data("label-id");
var batch_id = $(this).data("batch-id");
GB_showCenter(_("Export labels"),"/cgi-bin/koha/labels/label-print.pl?batch_id=" + batch_id + "&label_id=" + label_id, 400, 800);
});
});
//]]>
</script>
@ -218,12 +226,12 @@
</div>
</form>
<div id="batch-manage" class="btn-toolbar">
<a class="btn btn-small" id="additems" href="#"><icon class="fa fa-plus"></icon> Add item(s)</a>[% IF ( table_loop ) %]
<a class="btn btn-small" id="removeitems" href="#"><icon class="fa fa-trash"></icon> Remove selected items</a>
<a class="btn btn-small" id="deletebatch" href="#"><icon class="fa fa-minus-square"></icon> Delete batch</a>
<a class="btn btn-small" id="deduplicate" href="#"><icon class="fa fa-minus"></icon> Remove duplicates</a>
<a class="btn btn-small" id="exportitems" href="#"><icon class="fa fa-share-square-o"></icon> Export selected items</a>
<a class="btn btn-small" id="exportbatch" href="#"><icon class="fa fa-share-square-o"></icon> Export full batch</a>[% END %]
<a class="btn btn-small" id="additems" href="#"><i class="fa fa-plus"></i> Add item(s)</a>[% IF ( table_loop ) %]
<a class="btn btn-small" id="removeitems" href="#"><i class="fa fa-trash"></i> Remove selected items</a>
<a class="btn btn-small" id="deletebatch" href="#"><i class="fa fa-minus-square"></i> Delete batch</a>
<a class="btn btn-small" id="deduplicate" href="#"><i class="fa fa-minus"></i> Remove duplicates</a>
<a class="btn btn-small" id="exportitems" href="#"><i class="fa fa-share-square-o"></i> Export selected items</a>
<a class="btn btn-small" id="exportbatch" href="#"><i class="fa fa-share-square-o"></i> Export full batch</a>[% END %]
</div>
[% IF ( table_loop ) %]
<form name="items" class="checkboxed">
@ -235,11 +243,11 @@
<tr>
[% FOREACH header_field IN table_loo.header_fields %]
[% SWITCH header_field.field_label -%]
[% CASE "Label Number" -%]
[% CASE "Label number" -%]
<th>Label number</th>
[% CASE "Summary" -%]
<th class="anti-the">Summary</th>
[% CASE "Item Type" %]
[% CASE "Item type" %]
<th>Item type</th>
[% CASE "Barcode" %]
<th>Barcode</th>
@ -256,8 +264,11 @@
<tr>
[% FOREACH text_field IN table_loo.text_fields %]
[% IF ( text_field.select_field ) %]
<td><a class="btn btn-mini" onclick="return confirm(MSG_CONFIRM_DELETE);" href="/cgi-bin/koha/labels/label-edit-batch.pl?op=remove&amp;batch_id=[% batch_id |url %]&amp;label_id=[% text_field.field_value |url %]"><icon class="fa fa-trash"></icon> Delete</a><a class="btn btn-mini" href="#" onclick="GB_showCenter('Export labels','/cgi-bin/koha/labels/label-print.pl?batch_id=[% batch_id %]&amp;label_id=[% text_field.field_value |url %]', 400, 800)"><icon class="fa fa-share-square-o"></icon> Export</a></td>
<td><center><input type="checkbox" name="action" value="[% text_field.field_value %]"></center></td>
<td>
<a class="btn btn-mini delete" href="/cgi-bin/koha/labels/label-edit-batch.pl?op=remove&amp;batch_id=[% batch_id |url %]&amp;label_id=[% text_field.field_value |url %]"><i class="fa fa-trash"></i> Delete</a>
<a class="btn btn-mini export" href="#" data-batch-id="[% batch_id %]" data-label-id="[% text_field.field_value |html %]"><i class="fa fa-share-square-o"></i> Export</a>
</td>
<td><input type="checkbox" name="action" value="[% text_field.field_value %]"></td>
[% ELSE %]
<td>
[% IF ( text_field.field_name == '_item_type_tbl' ) %]
@ -275,14 +286,10 @@
</table>
</form>
[% ELSE %]
<fieldset class="rows" style="border-bottom: 0px; border: 0px;">
<ol><li>
<div class="dialog message">
<h4>There are no items in this batch yet</h4>
<p>Add items by using the text area above or leave empty to add via item search.</p>
</div>
</li></ol>
</fieldset>
[% END %]
</div>
</div>

View file

@ -16,7 +16,6 @@
[% INCLUDE 'greybox.inc' %]
<script type="text/javascript">
//<![CDATA[
var MSG_CONFIRM_DELETE = _("Are you sure you want to delete this?");
function Xport() {
batches= new Array;
if(document.layouts.action.length > 0) {
@ -64,6 +63,15 @@
alert(_("Please select a %s.").format("[% label_element %]"));
return (-1);
};
$(document).ready(function(){
$("#print").click(function(e){
e.preventDefault();
Xport();
});
$(".delete").on("click", function(){
return confirmDelete( _("Are you sure you want to delete this?") );
});
});
//]]>
</script>
@ -139,8 +147,11 @@
<tr>
[% FOREACH text_field IN table_loo.text_fields %]
[% IF ( text_field.select_field ) %]
<td align="center" class="actions"><a class="btn btn-mini" href="/cgi-bin/koha/labels/label-edit-[% label_element |url %].pl?op=edit&amp;element_id=[% text_field.field_value |url %]"><icon class="fa fa-edit"></icon> Edit</a> <a class="btn btn-mini" href="/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=[% label_element %]&amp;element_id=[% text_field.field_value |url %]" onclick="return confirm(MSG_CONFIRM_DELETE);"><icon class="fa fa-trash"></icon> Delete</a></td>
[% IF label_element == 'batch' %] <td align="center"><input type="checkbox" name="action" value="[% text_field.field_value %]" /></td>[% END %]
<td class="actions">
<a class="btn btn-mini" href="/cgi-bin/koha/labels/label-edit-[% label_element |url %].pl?op=edit&amp;element_id=[% text_field.field_value |url %]"><i class="fa fa-edit"></i> Edit</a>
<a class="btn btn-mini delete" href="/cgi-bin/koha/labels/label-manage.pl?op=delete&amp;label_element=[% label_element %]&amp;element_id=[% text_field.field_value |url %]"><i class="fa fa-trash"></i> Delete</a>
</td>
[% IF label_element == 'batch' %] <td><input type="checkbox" name="action" value="[% text_field.field_value %]" /></td>[% END %]
[% ELSIF ( text_field.field_value ) %]
<td>[% text_field.field_value %]</td>
[% ELSE %]
@ -151,7 +162,7 @@
[% END %]
[% END %]
</table>
[% IF ( print ) %]<input type="button" class="btn btn-sm" id="print" onclick="Xport()" value="Export selected" />[% END %]
[% IF ( print ) %]<button type="button" class="btn btn-sm" id="print">Export selected</button>[% END %]
</fieldset>
</form>
[% ELSE %]

View file

@ -6,6 +6,11 @@
function Done() {
window.location = "[% referer %]";
};
$(document).ready(function(){
$(".gb-close").on("click",function(){
parent.parent.GB_hide();
});
});
//]]>
</script>
<style type="text/css">#custom-doc {width:47.23em; *width:46.04em; min-width:610px; margin:auto; margin-top:0.4em;}</style>
@ -46,7 +51,7 @@
</fieldset>
[% END %]
<fieldset class="action">
<input type="button" id="done" onclick="parent.parent.GB_hide();" class="submit" value="Done" />
<input type="button" class="gb-close" value="Done" />
</fieldset>
</form>
[% ELSE %]
@ -96,8 +101,8 @@
</ol>
</fieldset>
<fieldset class="action">
<input type="submit" class="submit" value="Export" />
<a href="#" class="cancel" id="done" onclick="parent.parent.GB_hide();return false;">Cancel</a>
<input type="submit" value="Export" />
<a href="#" class="cancel gb-close">Cancel</a>
</fieldset>
</form>
[% END %]

View file

@ -2,17 +2,28 @@
<title>Koha &rsaquo; Barcodes and labels &rsaquo; Search results</title>
[% INCLUDE 'doc-head-close.inc' %]
<style type="text/css">#custom-doc { width:46.23em;*width:45.04em;min-width:700px; margin:auto;margin-top: .4em; text-align:left; }</style>
<script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script>
<script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.fixFloat.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#CheckAll").click(function(){
$(".checkboxed").checkCheckboxes();
return false;
$("#toolbar").fixFloat();
$("#CheckAll").click(function(e){
e.preventDefault();
$("input[type='checkbox']").prop("checked",true);
});
$("#CheckNone").click(function(){
$(".checkboxed").unCheckCheckboxes();
return false;
$("#CheckNone").click(function(e){
e.preventDefault();
$("input[type='checkbox']").prop("checked",false);
});
$("#add_items").on("click",function(){
add_item('checked',[% batch_id %],'[% type %]');
});
$(".select_item").on("click",function(e){
e.preventDefault();
var batch_id = $(this).data("batch-id");
var itemnumber = $(this).data("item-number");
var type = $(this).data("field-type");
add_item(itemnumber, batch_id, type);
});
});
function add_item(item_number,batch_id,type_id){
@ -59,39 +70,56 @@
[% ELSE %]
No results found
[% END %]
</div>
<form name="resultform" class="checkboxed" action="">
<p><a id="CheckAll" href="#">Select all</a> <a id="CheckNone" href="#">Clear all</a> | <input type="button" value="Add checked" onclick="add_item('checked',[% batch_id %],'[% type %]'); return false;" />
<input type="button" class="close" value="Done" /></p>
<form name="resultform" action="">
<div id="toolbar" class="btn-toolbar">
<div class="btn-group"><button type="button" class="btn btn-small" id="add_items"><i class="fa fa-plus"></i> Add checked</button></div>
<div class="btn-group"><a href="#" class="btn btn-small close"><i class="fa fa-times-circle"></i> Done</a></div>
</div>
<div><a id="CheckAll" href="#"><i class="fa fa-check"></i> Select all</a> <a id="CheckNone" href="#"><i class="fa fa-remove"></i> Clear all</a></div>
<div id="label-search-results">
<input type="hidden" name="ccl_query" value="[% ccl_query %]" />
[% FOREACH result_se IN result_set %]
<div style="border-bottom:1px solid #CCC;margin: .5em 0;">
<div style="border-bottom:1px solid #CCC;padding:1em 0;">
<h4>[% result_se.title |html %]</h4>
<p>[% IF ( result_se.author ) %]by [% result_se.author %][% END %]
[[% result_se.itemtype %]], [% IF ( result_se.publishercode ) %][% result_se.publishercode %] [% END %][% IF ( result_se.place ) %][% result_se.place %] [% END %][% IF ( result_se.copyrightdate ) %][% result_se.copyrightdate %], [% END %][% IF ( result_se.pages ) %][% result_se.pages %][% END %][% IF ( result_se.isbn ) %], <b>ISBN: </b>[% result_se.isbn %][% END %][% IF ( result_se.notes ) %],<br />[% result_se.notes %][% END %]</p>
<table style="margin-bottom:1em;">
<table>
[% FOREACH item_tabl IN result_se.item_table %]
[% IF ( item_tabl.header_fields ) %]
<thead>
<tr>
[% FOREACH header_field IN item_tabl.header_fields %]
[% SWITCH header_field.field_label -%]
[% CASE "Add Item" -%]
<th>Add item</th>
[% CASE "Call Number" -%]
<th>Call number</th>
[% CASE "Accession Date" %]
<th>Accession date</th>
[% CASE "Barcode" %]
<th>Barcode</th>
[% CASE "Select" -%]
<th>Select</th>
[% CASE %]
<th>[% header_field.field_label %]</th>
z [% END -%]
[% END %]
</tr>
</thead>
[% ELSE %]
<tr>
[% FOREACH text_field IN item_tabl.text_fields %]
[% IF ( text_field.select_field ) %]
<td align="center"><input type="checkbox" name="action" value="[% text_field.field_value %]"></td>
<td><input type="checkbox" name="action" value="[% text_field.field_value %]"></td>
[% ELSIF ( text_field.link_field ) %]
<td align="center">
<a onclick="add_item('[% text_field.field_value %]',[% batch_id %], '[% text_field.type %]'); return false" href="/cgi-bin/koha/barcodes/label-edit-batch.pl?op=add&amp;batch_id=[% batch_id %]&amp;item_number=[% text_field.field_value %]">Add</a>
<td>
<a class="btn btn-mini select_item" data-item-number="[% text_field.field_value %]" data-batch-id="[% batch_id %]" data-field-type="[% text_field.type %]"><i class="fa fa-plus"></i> Add</a>
</td>
[% ELSE %]
<td align="center">[% text_field.field_value %]</td>
<td>[% text_field.field_value %]</td>
[% END %]
[% END %]
</tr>
@ -103,7 +131,6 @@
</div>
</form>
</div>
<div class="results">
[% IF ( displayprev || displaynext ) %]
<p>
[% IF ( displayprev ) %]
@ -120,6 +147,7 @@
<a href="label-item-search.pl?startfrom=[% startfromnext %]&amp;ccl_query=[% ccl_query %]&amp;resultsperpage=[% resultsperpage %]&amp;op=do_search&amp;batch_id=[% batch_id %]">&gt;&gt;</a>
[% END %]
</p>
<div id="closewindow"><a href="#" class="btn btn-default close">Close</a></div>
[% END %]
</div>
[% INCLUDE 'popup-bottom.inc' %]