Bug 28694: Check alert in cataloguing should be a static message
This patch modifies the basic cataloging interface so that form
validation errors are collected in a static "dialog" at the top of the
page instead of showing in a transient JavaScript alert.
The text of the message is roughly the same as it was in the alert, and
links have been added so that the user can click to jump directly to the
field referenced.
If the user scrolls down away from the static error message, a button
appears in the floating toolbar to jump back to the message.
To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Go to Cataloging and create a new record using the basic cataloging
editor and a framework which has multiple mandatory fields defined
(e.g. an unmodified default framework)
- Without entering anything in mandatory fields, click the "Save"
button.
- You should see a message box appear at the top of the page.
- It should list each missing mandatory subfield and tag, each with a
"Go to field" link next to it.
- Clicking the "Go to field" link should switch you to the correct tab
and scroll the mandatory field into view.
- When you have scrolled down far enough for the error messages to be
offscreen, an "Errors" button should appear in the floating toolbar.
Clicking it should scroll the box back into view.
- The JS function for scrolling to a particular element on the screen
has been modified, so test that the links in the toolbar for
individual tags still work correctly.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
* Returns a roughly ideal position to scroll an element into view
* @param {string} target - The HTML id of the element to scroll into view
* @param {string} elemid - The HTML id of the element which might obscure
* the view of the target element e.g. a floating toolbar
* @return {number} - The y-coordinate to pass to window.scrollTo()
*/
function getScrollto( target, elemid ){
var dest = $("#" + target );
var yoffset = dest.offset();
if( elemid != "" ){
var element = $("#" + elemid );
var elem_height = element.outerHeight();
} else {
elem_height = 0;
}
return yoffset.top - elem_height - 20;
}
function redirect(dest){
$("#redirect").attr("value",dest);
return Check();
@ -185,7 +215,7 @@
var onOption = function () {
return Check();
}
[% END %]
[% END %]
/**
* this function append button for create new authority if not found
@ -512,14 +542,14 @@ function PopupMARCFieldDoc(field) {
var label = new Array();
var flag=0;
var tabflag= new Array();
var StrAlert = "";
var StrAlert = "<div id='form-errors' class='dialog alert list'>";
var notFilledClass = "subfield_not_filled";
if (mandatory) {
[% FOREACH BIG_LOO IN BIG_LOOP %]
[% FOREACH innerloo IN BIG_LOO.innerloop %]
[% IF ( innerloo.mandatory ) %]
fields.push(new Array("[% innerloo.tag | html %]","[% innerloo.index | html %][% innerloo.random | html %]","[% innerloo.index | html %]"));
fields.push(new Array("[% innerloo.tag | html %]","[% innerloo.index | html %][% innerloo.random | html %]","[% innerloo.index | html %]", "[% BIG_LOO.number | html %]"));
[% END %]
[% FOREACH subfield_loo IN innerloo.subfield_loop %]
[% IF ( subfield_loo.mandatory ) %]subfields.push("[% subfield_loo.id | html %]");
@ -529,12 +559,12 @@ function PopupMARCFieldDoc(field) {
[% END %]
[% END %]
[% END %]
StrAlert = _("Can't save this record because the following field aren't filled:");
fields.push(new Array("[% innerloo.tag | html %]","[% innerloo.index | html %][% innerloo.random | html %]","[% innerloo.index | html %]"));
fields.push(new Array("[% innerloo.tag | html %]","[% innerloo.index | html %][% innerloo.random | html %]","[% innerloo.index | html %]", "[% BIG_LOO.number | html %]"));
[% END %]
[% FOREACH subfield_loo IN innerloo.subfield_loop %]
[% IF ( subfield_loo.important ) %]subfields.push("[% subfield_loo.id | html %]");
@ -544,11 +574,10 @@ function PopupMARCFieldDoc(field) {
[% END %]
[% END %]
[% END %]
StrAlert = _("A few important fields are not filled:");
StrAlert += "<h4>" + _("A few important fields are not filled:") + "</h4>";
notFilledClass = "important_subfield_not_filled";
}
StrAlert += "\n\n";
StrAlert += "<ul>";
for(var i=0,len=subfields.length; i<len ; i++){
var tag=subfields[i].substr(4,3);
var subfield=subfields[i].substr(17,1);
@ -572,18 +601,23 @@ function PopupMARCFieldDoc(field) {
StrAlert += "<li>" + _("Field %s is mandatory, at least one of its subfields must be filled.").format( prop ) + ' <a class="linkfield btn btn-link" href="#" data-tab="' + mandatoryFields[prop]["tab"] + '" data-field="' + mandatoryFields[prop]["elemid"] + '"><i class="fa fa-arrow-right" aria-hidden="true"></i> Go to field</a></li>';
} else {
StrAlert += "<li>" + _("Field %s is important, at least one of its subfields must be filled.").format(arr[0]) + ' <a class="linkfield btn btn-link" href="#" data-tab="' + mandatoryFields[prop]["tab"] + '" data-field="' + mandatoryFields[prop]["elemid"] + '"><i class="fa fa-arrow-right" aria-hidden="true"></i> Go to field</a></li>';
