@@ -, +, @@ message - 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. --- koha-tmpl/intranet-tmpl/prog/css/addbiblio.css | 12 +++ .../intranet-tmpl/prog/css/src/staff-global.scss | 12 +++ .../prog/en/modules/cataloguing/addbiblio.tt | 114 ++++++++++++++++----- 3 files changed, 115 insertions(+), 23 deletions(-) --- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css +++ a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css @@ -368,6 +368,18 @@ tbody tr.active td { background-color: #FFAAAA !important; } + .show-errors { + background: #FFEC8C none; + border-color: #E0C726; + color: #000; + display: none; + text-shadow: none; +} + +.floating .show-errors { + display: inline-block; +} + @media (min-width: 768px) { li.subfield_line label { width: 20em; --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -1762,6 +1762,7 @@ i { padding: .5em; text-align: center; width: 65%; + max-width: 600px; a { &.approve { @@ -1864,6 +1865,17 @@ i { strong { color: #900; } + + &.list { + text-align: left; + + h2, + h3, + h4 { + margin: 1em 0; + text-align: left; + } + } } } --- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt +++ a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt @@ -155,14 +155,24 @@ $(".tag_anchor").on("click", function(e){ e.preventDefault(); - var toolbar_height = $("#toolbar").outerHeight(); $(".tag_anchor").removeClass("selected"); $(this).addClass("selected"); var link = this.href; var linkid = link.substring( link.indexOf("#") + 1 ); - var dest = $("#" + linkid ); - var yoffset = dest.offset(); - window.scrollTo( 0, yoffset.top - toolbar_height - 20 ); + window.scrollTo( 0, getScrollto( linkid, "toolbar" ) ); + }); + + $("body").on("click", ".linkfield", function(e){ + e.preventDefault(); + var tab = $(this).data("tab"); + var field = $(this).data("field"); + var tablink = $("a[data-tabid='" + tab + "']" ); + selectTab( tablink ); + window.scrollTo( 0, getScrollto( field, "toolbar" ) ); + }); + + $("body").on("click", ".show-errors", function(e){ + document.getElementById("form-errors").scrollIntoView(); }); }); @@ -176,6 +186,26 @@ $(".tag_anchors_" + tabid ).addClass("tab_selected").show(); } + /** + * 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 = "
"; 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:"); + StrAlert += "

" + _("The following subfields aren't filled:") + "

"; } else { [% FOREACH BIG_LOO IN BIG_LOOP %] [% FOREACH innerloo IN BIG_LOO.innerloop %] [% IF ( innerloo.important ) %] - 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 += "

" + _("A few important fields are not filled:") + "

"; notFilledClass = "important_subfield_not_filled"; } - - StrAlert += "\n\n"; + StrAlert += ""; /* Check for mandatories/importants field(not subfields) */ + /* Loop over array of fields identified as mandatory or + important to see if at least one subfield is filled */ + mandatoryFields = new Object(); + for(var i=0,len=fields.length; i 0 ){ + StrAlert += "

" + _("The following fields aren't filled:") + "

"; + StrAlert += ""; + } + StrAlert += "
"; if(flag){ + $("#show-errors").html('