Bug 15887: Revise layout and behavior of item search fields management
This patch adds some JavaScript to the item search fields management page so that the add form is not displayed by default. This simplifies the interface and makes it more consistent with other similar interfaces. Also changed in this patch: - Changing instances of "Items search fields" to "Item search fields." - Correct form structure to use ordered list - Add "required" classes and enable built-in JS form validation. - Add explicitly labeled "Choose" options to <select>s. - Add missing ids to form fields (labels don't work without them). - Correct classes of message and alert dialogs. - Add JS confirmation of deletions. - Convert MARC tag and subfield dropdowns to regular inputs (Bug 15384). To test, apply the patch and go to Administration. - Confirm that the "Item search fields" link is correct. - Follow the link and confirm that the list of existing fields is shown by default, or a message saying there are no existing fields. - Click the "New search field" button and confirm that it displays the entry form. - Confirm that submitting an empty form does not work. - Confirm that clicking the "Cancel" link correctly hides the form. - Confirm that submitting valid data works correctly. - In the table of existing item search fields, confirm that the "Edit" button works correctly. - Confirm that submitting edits works correctly. - In the table of existing item search fields, confirm that clicking "Delete" highlights the row in question and a confirmation dialog appears. - Test both canceling and confirming deletion. Signed-off-by: Hector Castro <hector.hecaxmmx@gmail.com> Works as described. JSHint OK, koha-qa OK. Revision per QA: Undid the change making tag and subfield inputs text fields. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Brendan A Gallagher <brendan@bywatersolutions.com>
This commit is contained in:
Brendan A Gallagher
parent
255c0af989
commit
fd74b271db
7 changed files with 120 additions and 74 deletions
|
|
@ -262,7 +262,8 @@ table+table {
|
|||
border : 0;
|
||||
}
|
||||
|
||||
.highlighted-row { background-color: orange !important }
|
||||
.highlighted-row,
|
||||
.highlighted-row td { background-color: #FFD000 !important }
|
||||
|
||||
tbody tr:nth-child(odd) td {
|
||||
background-color : #F3F3F3;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
<ul>
|
||||
<ol>
|
||||
<li>
|
||||
<label for="name">Name</label>
|
||||
[% IF field %]
|
||||
<input type="text" name="name" value="[% field.name %]" disabled="disabled">
|
||||
<input type="hidden" name="name" value="[% field.name %]">
|
||||
[% ELSE %]
|
||||
<input type="text" name="name" />
|
||||
[% END %]
|
||||
[% IF field %]
|
||||
<span class="label">Name: </span>
|
||||
[% field.name %]
|
||||
<input type="hidden" name="name" value="[% field.name %]">
|
||||
[% ELSE %]
|
||||
<label class="required" for="name">Name: </label>
|
||||
<input type="text" name="name" id="name" class="required" required="required" />
|
||||
<span class="required">Required</span>
|
||||
[% END %]
|
||||
</li>
|
||||
<li>
|
||||
<label for="label">Label</label>
|
||||
<label class="required" for="label">Label: </label>
|
||||
[% IF field %]
|
||||
<input type="text" name="label" value="[% field.label %]" />
|
||||
<input type="text" name="label" id="label" value="[% field.label %]" class="required" required="required" />
|
||||
[% ELSE %]
|
||||
<input type="text" name="label" />
|
||||
<input type="text" name="label" id="label" class="required" required="required" />
|
||||
[% END %]
|
||||
<span class="required">Required</span>
|
||||
</li>
|
||||
<li>
|
||||
<label for="tagfield">MARC field</label>
|
||||
<select name="tagfield">
|
||||
<label for="tagfield" required="required">MARC field: </label>
|
||||
<select id="tagfield" name="tagfield" class="required" required="required">
|
||||
[% FOREACH tagfield IN ['001'..'999'] %]
|
||||
[% IF field && field.tagfield == tagfield %]
|
||||
<option value="[% tagfield %]" selected="selected">[% tagfield %]</option>
|
||||
|
|
@ -27,10 +30,11 @@
|
|||
[% END %]
|
||||
[% END %]
|
||||
</select>
|
||||
<span class="required">Required</span>
|
||||
</li>
|
||||
<li>
|
||||
<label for="tagsubfield">MARC subfield</label>
|
||||
<select name="tagsubfield">
|
||||
<label for="tagsubfield">MARC subfield: </label>
|
||||
<select id="tagsubfield" name="tagsubfield">
|
||||
[% codes = [''] %]
|
||||
[% codes = codes.merge([0..9], ['a'..'z']) %]
|
||||
[% FOREACH tagsubfield IN codes %]
|
||||
|
|
@ -43,8 +47,8 @@
|
|||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<label for="authorised_values_category">Authorised values category</label>
|
||||
<select name="authorised_values_category">
|
||||
<label for="authorised_values_category">Authorised values category: </label>
|
||||
<select id="authorised_values_category" name="authorised_values_category">
|
||||
<option value="">- None -</option>
|
||||
[% FOREACH category IN authorised_values_categories %]
|
||||
[% IF field && field.authorised_values_category == category %]
|
||||
|
|
@ -55,4 +59,4 @@
|
|||
[% END %]
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<li><a href="/cgi-bin/koha/admin/classsources.pl">Classification sources</a></li>
|
||||
<li><a href="/cgi-bin/koha/admin/matching-rules.pl">Record matching rules</a></li>
|
||||
<li><a href="/cgi-bin/koha/admin/oai_sets.pl">OAI sets configuration</a></li>
|
||||
<li><a href="/cgi-bin/koha/admin/items_search_fields.pl">Items search fields</a></li>
|
||||
<li><a href="/cgi-bin/koha/admin/items_search_fields.pl">Item search fields</a></li>
|
||||
</ul>
|
||||
|
||||
<h5>Acquisition parameters</h5>
|
||||
|
|
|
|||
24
koha-tmpl/intranet-tmpl/prog/en/js/item_search_fields.js
Normal file
24
koha-tmpl/intranet-tmpl/prog/en/js/item_search_fields.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
$(document).ready(function(){
|
||||
$("#add_field_form").hide();
|
||||
$("#new_search_field").on("click",function(e){
|
||||
e.preventDefault();
|
||||
$("#add_field_form").show();
|
||||
$(".dialog").hide();
|
||||
$("#search_fields_list,#toolbar").hide();
|
||||
});
|
||||
$(".cancel").on("click",function(e){
|
||||
e.preventDefault();
|
||||
$("#add_field_form").hide();
|
||||
$(".dialog").show();
|
||||
$("#search_fields_list,#toolbar").show();
|
||||
});
|
||||
$(".field-delete").on("click",function(){
|
||||
$(this).parent().parent().addClass("highlighted-row");
|
||||
if( confirm( MSG_ITEM_SEARCH_DELETE_CONFIRM )){
|
||||
return true;
|
||||
} else {
|
||||
$(this).parent().parent().removeClass("highlighted-row");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
<dd>Manage rules for automatically matching MARC records during record imports.</dd>
|
||||
<dt><a href="/cgi-bin/koha/admin/oai_sets.pl">OAI sets configuration</a></dt>
|
||||
<dd>Manage OAI Sets</dd>
|
||||
<dt><a href="/cgi-bin/koha/admin/items_search_fields.pl">Items search fields</a></dt>
|
||||
<dd>Manage custom fields for items search</dd>
|
||||
<dt><a href="/cgi-bin/koha/admin/items_search_fields.pl">Item search fields</a></dt>
|
||||
<dd>Manage custom fields for item search.</dd>
|
||||
</dl>
|
||||
|
||||
<h3>Acquisition parameters</h3>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
[% INCLUDE 'doc-head-open.inc' %]
|
||||
<title>Koha › Administration › Items search fields</title>
|
||||
<title>Koha › Administration › Item search fields</title>
|
||||
[% INCLUDE 'doc-head-close.inc' %]
|
||||
</head>
|
||||
<body id="admin_itemssearchfields" class="admin">
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<div id="breadcrumbs">
|
||||
<a href="/cgi-bin/koha/mainpage.pl">Home</a> ›
|
||||
<a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> ›
|
||||
<a href="/cgi-bin/koha/admin/items_search_fields.pl">Items search fields</a> ›
|
||||
<a href="/cgi-bin/koha/admin/items_search_fields.pl">Item search fields</a> ›
|
||||
[% field.name %]
|
||||
</div>
|
||||
|
||||
|
|
@ -16,21 +16,21 @@
|
|||
<div id="bd">
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
<h1>Items search field: [% field.label %]</h1>
|
||||
<h1>Item search field: [% field.label %]</h1>
|
||||
|
||||
<form action="" method="POST">
|
||||
<form action="/cgi-bin/koha/admin/items_search_field.pl" method="POST" class="validated">
|
||||
<fieldset class="rows">
|
||||
<legend>Edit field</legend>
|
||||
[% INCLUDE 'admin-items-search-field-form.inc' field=field %]
|
||||
<div>
|
||||
<input type="hidden" name="op" value="mod" />
|
||||
</div>
|
||||
<fieldset class="action">
|
||||
<input type="submit" value="Update" />
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
<fieldset class="action">
|
||||
<input type="submit" value="Submit" />
|
||||
<a class="cancel" href="/cgi-bin/koha/admin/items_search_fields.pl">Cancel</a>
|
||||
</fieldset>
|
||||
</form>
|
||||
<a href="/cgi-bin/koha/admin/items_search_fields.pl">Return to items search fields overview page</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yui-b">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
[% INCLUDE 'doc-head-open.inc' %]
|
||||
<title>Koha › Administration › Items search fields</title>
|
||||
<title>Koha › Administration › Item search fields</title>
|
||||
[% INCLUDE 'doc-head-close.inc' %]
|
||||
<script type="text/javascript">
|
||||
var MSG_ITEM_SEARCH_DELETE_CONFIRM = _("Are you sure you want to delete this field?");
|
||||
</script>
|
||||
<script type="text/javascript" src="[% themelang %]/js/item_search_fields.js"></script>
|
||||
</head>
|
||||
<body id="admin_itemssearchfields" class="admin">
|
||||
[% INCLUDE 'header.inc' %]
|
||||
|
|
@ -8,83 +12,96 @@
|
|||
<div id="breadcrumbs">
|
||||
<a href="/cgi-bin/koha/mainpage.pl">Home</a> ›
|
||||
<a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> ›
|
||||
Items search fields
|
||||
Item search fields
|
||||
</div>
|
||||
|
||||
<div id="doc3" class="yui-t2">
|
||||
<div id="bd">
|
||||
<div id="yui-main">
|
||||
<div class="yui-b">
|
||||
|
||||
<div id="toolbar" class="btn-toolbar">
|
||||
<a class="btn btn-small" id="new_search_field" href="/cgi-bin/koha/admin/items_search_fields.pl"><i class="fa fa-plus"></i> New search field</a>
|
||||
</div>
|
||||
|
||||
[% IF field_added %]
|
||||
<div class="dialog">
|
||||
<div class="dialog message">
|
||||
Field successfully added: [% field_added.label %]
|
||||
</div>
|
||||
[% ELSIF field_not_added %]
|
||||
<div class="alert">
|
||||
<p>Failed to add field. Please check if the field name doesn't already exist.</p>
|
||||
<div class="dialog alert">
|
||||
<p>Failed to add field. Please make sure the field name doesn't already exist.</p>
|
||||
<p>Check logs for more details.</p>
|
||||
</div>
|
||||
[% ELSIF field_deleted %]
|
||||
<div class="dialog">
|
||||
<div class="dialog message">
|
||||
Field successfully deleted.
|
||||
</div>
|
||||
[% ELSIF field_not_deleted %]
|
||||
<div class="alert">
|
||||
<div class="dialog alert">
|
||||
<p>Failed to delete field.</p>
|
||||
<p>Check logs for more details.</p>
|
||||
</div>
|
||||
[% ELSIF field_updated %]
|
||||
<div class="dialog">
|
||||
<div class="dialog message">
|
||||
Field successfully updated: [% field_updated.label %]
|
||||
</div>
|
||||
[% ELSIF field_not_updated %]
|
||||
<div class="alert">
|
||||
<div class="dialog alert">
|
||||
<p>Failed to update field.</p>
|
||||
<p>Check logs for more details.</p>
|
||||
</div>
|
||||
[% END %]
|
||||
<h1>Items search fields</h1>
|
||||
[% IF fields.size %]
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Label</th>
|
||||
<th>MARC field</th>
|
||||
<th>MARC subfield</th>
|
||||
<th>Authorised values category</th>
|
||||
<th>Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
[% FOREACH field IN fields %]
|
||||
<tr>
|
||||
<td>[% field.name %]</td>
|
||||
<td>[% field.label %]</td>
|
||||
<td>[% field.tagfield %]</td>
|
||||
<td>[% field.tagsubfield %]</td>
|
||||
<td>[% field.authorised_values_category %]</td>
|
||||
<td>
|
||||
<a href="/cgi-bin/koha/admin/items_search_field.pl?name=[% field.name %]" title="Edit [% field.name %] field">Edit</a>
|
||||
<a href="/cgi-bin/koha/admin/items_search_fields.pl?op=del&name=[% field.name %]" title="Delete [% field.name %] field">Delete</a>
|
||||
</td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="search_fields_list">
|
||||
<h2>Item search fields</h2>
|
||||
|
||||
<table id="search_fields_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Label</th>
|
||||
<th>MARC field</th>
|
||||
<th>MARC subfield</th>
|
||||
<th>Authorised values category</th>
|
||||
<th>Operations</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
[% FOREACH field IN fields %]
|
||||
<tr>
|
||||
<td>[% field.name %]</td>
|
||||
<td>[% field.label %]</td>
|
||||
<td>[% field.tagfield %]</td>
|
||||
<td>[% field.tagsubfield %]</td>
|
||||
<td>[% field.authorised_values_category %]</td>
|
||||
<td>
|
||||
<a class="btn btn-mini" href="/cgi-bin/koha/admin/items_search_field.pl?name=[% field.name %]" title="Edit [% field.name %] field"><i class="fa fa-pencil"></i> Edit</a>
|
||||
<a class="field-delete btn btn-mini" href="/cgi-bin/koha/admin/items_search_fields.pl?op=del&name=[% field.name %]"><i class="fa fa-remove"></i> Delete</a>
|
||||
</td>
|
||||
</tr>
|
||||
[% END %]
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
[% ELSE %]
|
||||
<div class="dialog message">
|
||||
There are no item search fields defined.
|
||||
</div>
|
||||
[% END %]
|
||||
<form action="" method="POST">
|
||||
|
||||
<form id="add_field_form" action="/cgi-bin/koha/admin/items_search_fields.pl" method="POST" class="validated">
|
||||
<fieldset class="rows">
|
||||
<legend>Add a new field</legend>
|
||||
[% INCLUDE 'admin-items-search-field-form.inc' field=undef %]
|
||||
<div>
|
||||
<input type="hidden" name="op" value="add" />
|
||||
</div>
|
||||
<fieldset class="action">
|
||||
<input type="submit" value="Add this field" />
|
||||
</fieldset>
|
||||
<input type="hidden" name="op" value="add" />
|
||||
</fieldset>
|
||||
<fieldset class="action">
|
||||
<input type="submit" value="Submit" />
|
||||
<a href="#" class="cancel">Cancel</a>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="yui-b">
|
||||
|
|
|
|||
Loading…
Reference in a new issue