Bug 11299: (follow-up) Rebase on recent changes
[srvgit] / koha-tmpl / intranet-tmpl / prog / en / modules / cataloguing / addbiblio.tt
index 8cbd2de..2b5b8ee 100644 (file)
@@ -5,8 +5,12 @@
 <title>Koha &rsaquo; Cataloging &rsaquo; [% IF ( biblionumber ) %]Editing [% title | html %] (Record number [% biblionumber | html %])[% ELSE %]Add MARC record[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% Asset.js("lib/hc-sticky.js") | $raw %]
+[% INCLUDE 'select2.inc' %]
+<script>
+    var CAN_user_parameters_manage_auth_values = "[% CAN_user_parameters_manage_auth_values | html %]";
+    $.fn.select2.defaults.set("width", "100%" );
+</script>
 [% Asset.js("js/cataloging.js") | $raw %]
-[% INCLUDE 'browser-strings.inc' %]
 [% Asset.js("js/browser.js") | $raw %]
 <script>
     var browser = KOHA.browser('[% searchid | html %]', parseInt('[% biblionumber | html %]', 10));
             $("#toolbar").hide();
         [% END %]
 
-        $('#addbibliotabs').tabs().bind('show.ui-tabs', function(e, ui) {
+        var $tabs = $('#addbibliotabs').tabs().bind('show.ui-tabs', function(e, ui) {
             $("#"+ui.panel.id+" input:eq(0)").focus();
         });
+        $( "ul.sortable_field", $tabs ).sortable({
+            axis: "y",
+            containment: $("#addbibliotabs")
+        });
+        $( "ul.sortable_subfield", $tabs ).sortable({
+            axis: "y",
+            containment: "parent"
+        });
 
         [% IF tab %]
             link = $("a[href='#[% tab | html %]']");
         });
 
         /* check cookie to hide/show marcdocs*/
-        if($.cookie("marcdocs_[% borrowernumber | html %]") == 'hide'){
+        if( Cookies.get("marcdocs_[% borrowernumber | html %]") == 'hide'){
             toggleMARCdocLinks(false);
         } else {
             toggleMARCdocLinks(true);
         }
 
         $("#marcDocsSelect").click(function(){
-            if($.cookie("marcdocs_[% borrowernumber | html %]") == 'hide'){
+            if( Cookies.get("marcdocs_[% borrowernumber | html %]") == 'hide'){
                 toggleMARCdocLinks(true);
             } else {
                 toggleMARCdocLinks(false);
@@ -54,7 +66,7 @@
         });
 
         /* check cookie to hide/show marc tags*/
-        var marctags_cookie = $.cookie("marctags_[% borrowernumber | html %]");
+        var marctags_cookie = Cookies.get("marctags_[% borrowernumber | html %]");
         if( marctags_cookie == 'hide'){
             toggleMARCTagLinks(false);
         } else if( marctags_cookie == 'show'){
         }
 
         $("#marcTagsSelect").click(function(){
-            if( $.cookie("marctags_[% borrowernumber | html %]") == 'hide'){
+            if( Cookies.get("marctags_[% borrowernumber | html %]") == 'hide'){
                 toggleMARCTagLinks(true)
             } else {
                 toggleMARCTagLinks(false);
             }
         });
 
-        [%# Only ask for a confirmation if it is an edit %]
         $("#z3950search").click(function(){
-            [% IF biblionumber %]
-                if (confirm(_("Please note that this external search could replace the current record."))){
-                    PopupZ3950();
-                }
-            [% ELSE %]
-                PopupZ3950();
-            [% END %]
+            PopupZ3950();
+        });
+
+        $("#linkerbutton").click(function(){
+            AutomaticLinker();
         });
 
         $("#saverecord").click(function(){
 
             if ( !confirm( breedingid ? _("This record cannot be transferred to the advanced editor. Continue?") : _("Any changes will not be saved. Continue?") ) ) return false;
 
-            $.cookie( 'catalogue_editor_[% logged_in_user.borrowernumber | html %]', 'advanced', { expires: 365, path: '/' } );
+            Cookies.set( 'catalogue_editor_[% logged_in_user.borrowernumber | html %]', 'advanced', { expires: 365, path: '/' } );
 
             var biblionumber = [% biblionumber || "null" | html %];
 
         var onOption = function () {
             return Check();
         }
-    [% END %]
+[% END %]
+
+/**
+* this function append button for create new authority if not found
+*/
+
+function addCreateAuthorityButton(tag_subfield_line, heading, tag_index) {
+    var title = _("Create authority");
+    var elem = $('<a href="#" title="' + title + '"><i class="fa fa-plus-circle"></i></a>');
+    tag_subfield_line.append(elem);
+    var tag_subfield_line_a = $('.subfield_line[id^=subfield' + heading.tag + 'a]').eq(tag_index);
+    var subfield_a = tag_subfield_line_a.children('.input_marceditor').eq(0);
+    var index = subfield_a.attr('id');
+    elem.click(function() {
+        var popup = window.open("", "new_auth_popup",'fullscreen,toolbar=false,scrollbars=yes');
+        if(popup !== null) {
+            // Create a new form that will be POSTed in the new window
+            var form = $('<form>').attr({
+            method: 'post',
+            action: "/cgi-bin/koha/authorities/authorities.pl",
+            target: "new_auth_popup"
+            });
+            //add the authtypecode
+            form.append($('<input>').attr({
+                type: 'hidden',
+                name: 'authtypecode',
+                value: heading.auth_type
+            }));
+            form.append($('<input>').attr({
+                type: 'hidden',
+                name: 'tagreport',
+                value: heading.tag_to_report
+            }));
+            form.append($('<input>').attr({
+                type: 'hidden',
+                name: 'tagbiblio',
+                value: heading.tag
+            }));
+            form.append($('<input>').attr({
+                type: 'hidden',
+                name: 'index',
+                value: index
+            }));
+            $('.tag[id^=tag_' + heading.tag + '_]').eq(tag_index).find(':input').each(function(){
+                form.append($('<input>').attr({
+                    type: 'hidden',
+                    name: this.name.split('_',4).join(''),
+                    value: $(this).val()
+                }));
+            });
+            $('body').append(form);
+            form.submit();
+            form.remove();
+        }
+        return false;
+    });
 
+}
+
+/**
+ * Updates the authid for every heading field
+ * Adds visual feedback for the changes made on the form.
+ */
+function updateHeadingLinks(links) {
+    var current_tag = '';
+    var tag_index = 0;
+
+    // Delete the old message dialog and create a new one
+    $('#autolinker_dialog').remove();
+    var message_dialog = $('<div id="autolinker_dialog" class="dialog message"><strong>' + _("Automatic authority link results:") + '</strong><ul></ul></div>');
+    var message_dialog_ul = message_dialog.find('ul');
+
+    $.each(links, function(index, heading) {
+        if(current_tag == heading.tag) {
+            tag_index++;
+        }
+        else {
+            current_tag = heading.tag;
+            tag_index = 0;
+        }
+
+        // Find the $9 field to update
+        var tag_subfield_line = $('.subfield_line[id^=subfield' + heading.tag + '9]').eq(tag_index);
+        if( tag_subfield_line.length < 1 ){ return; }
+
+        var subfield = tag_subfield_line.find('.input_marceditor').eq(0);
+
+        // Delete the old status if one exists
+        tag_subfield_line.children('.subfield_status').remove();
+
+        // If the field wasn't modified. Skip it.
+        if(heading.status == 'UNCHANGED') {
+            return;
+        }
+
+
+        // Make the subfield line visible and update its value
+        tag_subfield_line.show();
+        subfield.val(heading.authid);
+
+        // Add the new status
+        var image = '<i class="fa fa-close no_matching_authority" </i> ';
+        var message = '';
+        var field_class = 'no_matching_authority_field';
+        switch(heading.status) {
+            case 'LOCAL_FOUND':
+                image = '<i class="fa fa-check matching_authority"</i> ';
+                message = _("A matching authority was found in the local database.");
+                field_class = 'matching_authority_field';
+                break;
+            case 'CREATED':
+                image = '<i class="fa fa-check matching_authority"></i> ';
+                message = _("No matching authority found. A new authority was created automatically.");
+                field_class = 'matching_authority_field';
+                break;
+            case 'MULTIPLE_MATCH':
+                message = _("More than one local match found. Possibly a duplicate authority!");
+                break;
+            case 'NONE_FOUND':
+                message = _("No matching authority found.");
+                break;
+            default:
+                message = heading.status;
+                break;
+        }
+
+        subfield[0].classList.add(field_class);
+        tag_subfield_line.find('i').each(function() {
+            this.remove();
+        });
+        tag_subfield_line.append(image);
+
+        // Add the message to the dialog
+        message_dialog_ul.append('<li><strong>' + heading.tag + '</strong> - ' + message + '</li>');
+
+        // Add a link to create a new authority if none was found
+        if(heading.status == 'NONE_FOUND' && tag_subfield_line.find('i').length == 1) {
+            addCreateAuthorityButton(tag_subfield_line, heading , tag_index);
+        }
+    });
+
+    if(message_dialog.find('li').length == 0) {
+        message_dialog_ul.append("<li>" + _("No authority link was changed.") + "</li>");
+    }
+    $('#addbibliotabs').before(message_dialog);
+}
+
+/**
+ * Use an ajax request to automatically find authority links for the current record
+ */
+function AutomaticLinker() {
+    // Show the Loading overlay
+    $("#loading").show();
+
+    // Remove fields that are completely empty
+    $('#f').find('.tag').each(function() {
+        var empty = true;
+        $(this).find('.input_marceditor').each(function() {
+            if($(this).val() != '') {
+                empty = false;
+                return false;
+            }
+        });
+        if(empty) {
+            UnCloneField($(this).attr('id'));
+        }
+    });
+
+    // Get all the form values to post via AJAX
+    var form_data = {};
+    $('#f').find(':input').each(function(){
+        form_data[this.name] = $(this).val();
+    });
+    delete form_data[''];
+
+    // Send the data to automatic_linker.pl
+    $.ajax({
+        url:'/cgi-bin/koha/svc/cataloguing/automatic_linker.pl',
+        type:'post',
+        data: form_data,
+        dataType: 'json',
+        error: function(xhr) {
+            alert("Error : \n" + xhr.responseText);
+        },
+        success: function(json) {
+            switch(json.status) {
+                case 'UNAUTHORIZED':
+                    alert(_("Error : You do not have the permissions necessary to use this functionality."));
+                    break;
+                case 'OK':
+                    updateHeadingLinks(json.links);
+                    break;
+            }
+        },
+        complete: function() {
+            $("#loading").hide();
+        }
+    });
+}
+
+
+function PopupMARCFieldDoc(field) {
+    [% IF Koha.Preference('marcfielddocurl') %]
+        var docurl = "[% Koha.Preference('marcfielddocurl').replace('"','&quot;') | html %]";
+        docurl = docurl.replace("{MARC}", "[% marcflavour | html %]");
+        docurl = docurl.replace("{FIELD}", ""+field);
+        docurl = docurl.replace("{LANG}", "[% lang | html %]");
+        window.open(docurl);
+    [% ELSIF ( marcflavour == 'MARC21' ) %]
+        _MARC21FieldDoc(field);
+    [% ELSIF ( marcflavour == 'UNIMARC' ) %]
+        _UNIMARCFieldDoc(field);
+    [% END %]
+}
     function confirmnotdup(redirect){
         $("#confirm_not_duplicate").attr("value","1");
         $("#redirect").attr("value",redirect);
     function _MARC21FieldDoc(field) {
         if(field == 0) {
             window.open("http://www.loc.gov/marc/bibliographic/bdleader.html");
+        } else if (field >= 90 && field <= 99 ){
+            window.open("http://www.loc.gov/marc/bibliographic/bd09x.html");
+        } else if (field >= 590 && field <= 599 ){
+            window.open("http://www.loc.gov/marc/bibliographic/bd59x.html");
+        } else if (field >= 690 && field <= 699 ){
+            window.open("http://www.loc.gov/marc/bibliographic/bd69x.html");
         } else if (field < 900) {
             window.open("http://www.loc.gov/marc/bibliographic/bd" + ("000"+field).slice(-3) + ".html");
         } else {
     function toggleMARCdocLinks(flag){
         if( flag === true ){
             $(".marcdocs").show();
-            $.cookie("marcdocs_[% borrowernumber | html %]",'show', { path: "/", expires: 365 });
+            Cookies.set("marcdocs_[% borrowernumber | html %]",'show', { path: "/", expires: 365 });
             $("#marcDocsSelect i").addClass('fa-check-square-o').removeClass('fa-square-o');
         } else {
             $(".marcdocs").hide();
-            $.cookie("marcdocs_[% borrowernumber | html %]",'hide', { path: "/", expires: 365 });
+            Cookies.set("marcdocs_[% borrowernumber | html %]",'hide', { path: "/", expires: 365 });
             $("#marcDocsSelect i").removeClass('fa-check-square-o').addClass('fa-square-o');
         }
     }
         if( flag === true ){
             $(".tagnum").show();
             $(".subfieldcode").show();
-            $.cookie("marctags_[% borrowernumber | html %]",'show', { path: "/", expires: 365 });
+            Cookies.set("marctags_[% borrowernumber | html %]",'show', { path: "/", expires: 365 });
             $("#marcTagsSelect i").addClass('fa-check-square-o').removeClass('fa-square-o');
         } else {
             $(".tagnum").hide();
             $(".subfieldcode").hide();
-            $.cookie("marctags_[% borrowernumber | html %]",'hide', { path: "/", expires: 365 });
+            Cookies.set("marctags_[% borrowernumber | html %]",'hide', { path: "/", expires: 365 });
             $("#marcTagsSelect i").removeClass('fa-check-square-o').addClass('fa-square-o');
         }
     }
 
     /**
-     * check if mandatory subfields are written
+     * check if mandatory/important subfields are written
+     * @param mandatory true to check for mandatories, false for importants
      */
-    function AreMandatoriesNotOk(){
-        var mandatories = new Array();
-        var mandatoriesfields = new Array();
+    function AreFieldsNotOk (mandatory = true) {
+        var fields = new Array();
+        var subfields = new Array();
         var tab = new Array();
         var label = new Array();
         var flag=0;
         var tabflag= new Array();
-        [% FOREACH BIG_LOO IN BIG_LOOP %]
-            [% FOREACH innerloo IN BIG_LOO.innerloop %]
-                [% IF ( innerloo.mandatory ) %]
-                    mandatoriesfields.push(new Array("[% innerloo.tag | html %]","[% innerloo.index | html %][% innerloo.random | html %]","[% innerloo.index | html %]"));
+        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 %]"));
+                    [% END %]
+                    [% FOREACH subfield_loo IN innerloo.subfield_loop %]
+                        [% IF ( subfield_loo.mandatory ) %]subfields.push("[% subfield_loo.id | html %]");
+                            tab.push("[% BIG_LOO.number | html %]");
+                            label.push("[% subfield_loo.marc_lib | $raw %]");
+                        [% END %]
+                    [% END %]
                 [% END %]
-                [% FOREACH subfield_loo IN innerloo.subfield_loop %]
-                    [% IF ( subfield_loo.mandatory ) %]mandatories.push("[% subfield_loo.id | html %]");
-                        tab.push("[% BIG_LOO.number | html %]");
-                        label.push("[% subfield_loo.marc_lib | $raw %]");
+            [% END %]
+            StrAlert = _("Can't save this record because the following field 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 %]"));
+                    [% END %]
+                    [% FOREACH subfield_loo IN innerloo.subfield_loop %]
+                        [% IF ( subfield_loo.important ) %]subfields.push("[% subfield_loo.id | html %]");
+                            tab.push("[% BIG_LOO.number | html %]");
+                            label.push("[% subfield_loo.marc_lib | $raw %]");
+                        [% END %]
                     [% END %]
                 [% END %]
             [% END %]
-        [% END %]
-        var StrAlert = _("Can't save this record because the following field aren't filled:");
+            StrAlert = _("A few important fields are not filled:");
+            notFilledClass = "important_subfield_not_filled";
+        }
+
         StrAlert += "\n\n";
-        for(var i=0,len=mandatories.length; i<len ; i++){
-            var tag=mandatories[i].substr(4,3);
-            var subfield=mandatories[i].substr(17,1);
-            var tagnumber=mandatories[i].substr(19,mandatories[i].lastIndexOf("_")-19);
+        for(var i=0,len=subfields.length; i<len ; i++){
+            var tag=subfields[i].substr(4,3);
+            var subfield=subfields[i].substr(17,1);
+            var tagnumber=subfields[i].substr(19,subfields[i].lastIndexOf("_")-19);
             if (tabflag[tag+subfield+tagnumber] ==  null) {
-            tabflag[tag+subfield+tagnumber]=new Array();
+                tabflag[tag+subfield+tagnumber]=new Array();
                 tabflag[tag+subfield+tagnumber][0]=0;
-        }
-            if( tabflag[tag+subfield+tagnumber][0] != 1 && (document.getElementById(mandatories[i]) != null && ! document.getElementById(mandatories[i]).value || document.getElementById(mandatories[i]) == null)){
+            }
+            if( tabflag[tag+subfield+tagnumber][0] != 1 && (document.getElementById(subfields[i]) != null && ! document.getElementById(subfields[i]).value || document.getElementById(subfields[i]) == null)){
                 tabflag[tag+subfield+tagnumber][0] = 0 + tabflag[tag+subfield+tagnumber] ;
-                document.getElementById(mandatories[i]).setAttribute('class','input_marceditor noEnterSubmit subfield_not_filled');
-                $('#' + mandatories[i]).focus();
+
+                var elt = document.getElementById(subfields[i]);
+                if ( elt.nodeName == 'SELECT' ) {
+                    $(elt).siblings('.select2').find("span[role='combobox']").addClass(notFilledClass);
+                } else {
+                    elt.setAttribute('class','input_marceditor noEnterSubmit ' + notFilledClass);
+                }
+                $('#' + subfields[i]).focus();
                 tabflag[tag+subfield+tagnumber][1]=label[i];
                 tabflag[tag+subfield+tagnumber][2]=tab[i];
             } else {
             }
         }
 
-        /* Check for mandatories field(not subfields) */
-        for(var i=0,len=mandatoriesfields.length; i<len; i++){
+        /* Check for mandatories/importants field(not subfields) */
+        for(var i=0,len=fields.length; i<len; i++){
             isempty  = true;
-            arr      = mandatoriesfields[i];
+            arr      = fields[i];
             divid    = "tag_" + arr[0] + "_" + arr[1];
             varegexp = new RegExp("^tag_" + arr[0] + "_code_");
 
 
             if(isempty){
                 flag = 1;
-                    StrAlert += "\t* " + _("Field %s is mandatory, at least one of its subfields must be filled.").format(arr[0]) + "\n";
+                StrAlert += "\t* ";
+                if (mandatory) {
+                    StrAlert += _("Field %s is mandatory, at least one of its subfields must be filled.").format(arr[0]);
+                } else {
+                    StrAlert += _("Field %s is important, at least one of its subfields must be filled.").format(arr[0]);
+                }
+                StrAlert += "\n";
             }
 
         }
      *
      */
     function Check(){
-        var StrAlert = AreMandatoriesNotOk();
+        var StrAlert = AreFieldsNotOk();
         if( ! StrAlert ){
+            var StrWarning = AreFieldsNotOk(false);
+            if (StrWarning){
+                StrWarning += "\n" + _("Are you sure you want to save?");
+                var r=confirm(StrWarning);
+                if (! r){
+                    return false;
+                }
+            }
             document.f.submit();
             return true;
         } else {
      */
     function GetZ3950Terms(){
         var frameworkcode = document.getElementById("frameworkcode").value;
-        var strQuery = "&frameworkcode=" + frameworkcode;
+        var strQuery = "&frameworkcode=" + encodeURIComponent(frameworkcode);
         var mandatories = new Array();
         var mandatories_label = new Array();
         [% FOREACH BIG_LOO IN BIG_LOOP %]
         for(var i=0,len=mandatories.length; i<len ; i++){
             var field_value = document.getElementById(mandatories[i]).value;
             if( field_value ){
-                strQuery += "&"+mandatories_label[i]+"="+field_value;
+                strQuery += "&"+encodeURIComponent(mandatories_label[i])+"="+encodeURIComponent(field_value);
             }
         }
         return strQuery;
 
 </script>
 [% Asset.css("css/addbiblio.css") | $raw %]
-
-[% INCLUDE 'select2.inc' %]
-<script>
-  $(document).ready(function() {
-    $('.subfield_line select').select2();
-  });
-</script>
-
 </head>
 <body id="cat_addbiblio" class="cat">
 
                     [% END # /IF CAN_user_editcatalogue_edit_items %]
 
                     [% UNLESS (circborrowernumber) %][%# Hide in fast cataloging %]
-                        <div class="btn-group"><a class="btn btn-default" href="#" id="z3950search"><i class="fa fa-search"></i> Z39.50/SRU search</a></div>
+                        [% IF biblionumber %]
+                            <div class="btn-group"><a class="btn btn-default" href="#" id="z3950search"><i class="fa fa-search"></i> Replace record via Z39.50/SRU search</a></div>
+                        [% ELSE %]
+                            <div class="btn-group"><a class="btn btn-default" href="#" id="z3950search"><i class="fa fa-search"></i> Z39.50/SRU search</a></div>
+                        [% END %]
+                        [% IF ( CAN_user_editauthorities ) %]
+                            <div class="btn-group"><a class="btn btn-default" href="#" id="linkerbutton"><i class="fa fa-refresh"></i> Link authorities automatically</a></div>
+                        [% END %]
                     [% END %]
 
                     <div class="btn-group">
                                     <a href="#" id="marcTagsSelect"><i class="fa fa-check-square-o"></i> Show tags</a>
                                 </li>
                             [% END %]
-                            <li class="divider"></li>
-                            <li class="nav-header">Change framework</li>
+                            <li class="dropdown-header">Change framework</li>
                             <li>
                                 <a href="#" class="change-framework" data-frameworkcode="">
                                     [% IF ( frameworkcode ) %]
                             [% IF ( BIG_LOOP.size > 1 ) %]
                                 <h3>Section [% BIG_LOO.number | html %]</h3>
                             [% END %]
+                            [% previous = "" %]
                             [% FOREACH innerloo IN BIG_LOO.innerloop %]
                                 [% IF ( innerloo.tag ) %]
-                                    <div class="tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+                                [% IF innerloo.tag != previous %]
+                                    [% IF previous != "" %]
+                                        </ul>
+                                    [% END %]
+                                    [% previous = innerloo.tag %]
+                                    [% IF ( innerloo.repeatable ) %]
+                                        <ul class="sortable_field">
+                                    [% ELSE %]
+                                        <ul>
+                                    [% END %]
+                                [% END %]
+                                    [% IF ( innerloo.repeatable ) %]
+                                        <li class="tag sortable_tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+                                    [% ELSE %]
+                                        <li class="tag clearfix" id="tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
+                                    [% END %]
                                         <div class="tag_title" id="div_indicator_tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]">
                                             [% IF advancedMARCEditor %]
                                                 <a href="#" tabindex="1" class="tagnum" title="[% innerloo.tag_lib | html %] - Click to Expand this Tag" onclick="ExpandField('tag_[% innerloo.tag | html %]_[% innerloo.index | html %][% innerloo.random | html %]'); return false;">[% innerloo.tag | html %]</a>
                                             </span> <!-- /.field_controls -->
                                         </div> <!-- /div.tag_title -->
 
+                                        <ul class="sortable_subfield">
                                         [% FOREACH subfield_loo IN innerloo.subfield_loop %]
                                             <!--  One line on the marc editor -->
-                                            <div class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
+                                            <li class="subfield_line" style="[% subfield_loo.visibility | html %]" id="subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]">
+                                                <div class="subfieldcode">
+                                                    <input type="text"
+                                                            title="[% subfield_loo.marc_lib | $raw %]"
+                                                            style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
+                                                            name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]"
+                                                            value="[% subfield_loo.subfield | html %]"
+                                                            size="1"
+                                                            maxlength="1"
+                                                            class="flat"
+                                                            tabindex="0" />
+                                                </div>
                                                 [% UNLESS advancedMARCEditor %]
-                                                    [% IF ( subfield_loo.fixedfield ) %]
-                                                        <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
+                                                    [% IF ( subfield_loo.mandatory ) %]
+                                                        <div class="subfield subfield_mandatory">
+                                                    [% ELSIF ( subfield_loo.important ) %]
+                                                        <div class="subfield subfield_important">
                                                     [% ELSE %]
-                                                        <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
+                                                        <div class="subfield">
                                                     [% END %]
-                                                [% END %]
-
-                                                    <span class="subfieldcode">
                                                         [% IF ( subfield_loo.fixedfield ) %]
-                                                            <img class="buttonUp" style="display:none;" src="[% interface | html %]/[% theme | html %]/img/up.png" onclick="upSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]')" alt="Move Up" title="Move Up" />
+                                                            <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" style="display:none;" class="labelsubfield">
                                                         [% ELSE %]
-                                                            <img class="buttonUp" src="[% interface | html %]/[% theme | html %]/img/up.png" onclick="upSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]')" alt="Move Up" title="Move Up" />
-                                                        [% END %]
-                                                            <input type="text"
-                                                                title="[% subfield_loo.marc_lib | $raw %]"
-                                                                style=" [% IF ( subfield_loo.fixedfield ) %]display:none; [% END %]border:0;"
-                                                                name="tag_[% subfield_loo.tag | html %]_code_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]"
-                                                                value="[% subfield_loo.subfield | html %]"
-                                                                size="1"
-                                                                maxlength="1"
-                                                                class="flat"
-                                                                tabindex="0" />
-                                                    </span>
-
-                                                [% UNLESS advancedMARCEditor %]
-                                                        [% IF ( subfield_loo.mandatory ) %]
-                                                            <span class="subfield subfield_mandatory">
-                                                        [% ELSE %]
-                                                            <span class="subfield">
+                                                            <label for="tag_[% subfield_loo.tag | html %]_subfield_[% subfield_loo.subfield | html %]_[% subfield_loo.index | html %]_[% subfield_loo.index_subfield | html %]" class="labelsubfield">
                                                         [% END %]
                                                         [% subfield_loo.marc_lib | $raw %]
-                                                        </span>
-                                                    </label>
+                                                        </label>
+                                                    </div>
                                                 [% END %]
 
                                                 [% SET mv = subfield_loo.marc_value %]
-                                                [% IF ( mv.type == 'text' ) %]
-                                                    [% IF ( mv.readonly == 1 ) %]
-                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
-                                                    [% ELSE %]
-                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
-                                                    [% END %]
-
-                                                    [% IF ( mv.authtype ) %]
-                                                        <span class="subfield_controls"><a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a></span>
-                                                    [% END %]
-                                                [% ELSIF ( mv.type == 'text_complex' ) %]
-                                                    <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
-                                                    <span class="subfield_controls">
-                                                        [% IF mv.noclick %]
-                                                            <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span>
-                                                        [% ELSE %]
-                                                            <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a>
-                                                        [% END %]
-                                                    </span>
-                                                    [% mv.javascript | $raw %]
-                                                [% ELSIF ( mv.type == 'hidden' ) %]
-                                                    <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
-                                                [% ELSIF ( mv.type == 'textarea' ) %]
-                                                    <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
-                                                [% ELSIF ( mv.type == 'select' ) %]
-                                                    <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor" id="[%- mv.id | html -%]">
-                                                    [% FOREACH aval IN mv.values %]
-                                                        [% IF aval == mv.default %]
-                                                        <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option>
+                                                <div id="field_marceditor[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]" class="field_marceditor">
+                                                    [% IF ( mv.type == 'text' ) %]
+                                                        [% IF ( mv.readonly == 1 ) %]
+                                                            <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor readonly" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" readonly="readonly" />
                                                         [% ELSE %]
-                                                        <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option>
+                                                            <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
                                                         [% END %]
+
+                                                    [% ELSIF ( mv.type == 'text_complex' ) %]
+                                                        <input type="text" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" value="[%- mv.value | html -%]" class="input_marceditor framework_plugin" tabindex="1" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" />
+                                                        [% mv.javascript | $raw %]
+                                                    [% ELSIF ( mv.type == 'hidden' ) %]
+                                                        <input tabindex="1" type="hidden" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" size="[%- mv.size | html -%]" maxlength="[%- mv.maxlength | html -%]" value="[%- mv.value | html -%]" />
+                                                    [% ELSIF ( mv.type == 'textarea' ) %]
+                                                        <textarea cols="70" rows="4" id="[%- mv.id | html -%]" name="[%- mv.name | html -%]" class="input_marceditor" tabindex="1">[%- mv.value | html -%]</textarea>
+                                                    [% ELSIF ( mv.type == 'select' ) %]
+                                                    [% IF mv.category AND CAN_user_parameters_manage_auth_values %]
+                                                        <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor" id="[%- mv.id | html -%]" data-category="[% mv.category | html %]">
+                                                    [% ELSE %]
+                                                        <select name="[%- mv.name | html -%]" tabindex="1" size="1" class="input_marceditor select2" id="[%- mv.id | html -%]">
                                                     [% END %]
-                                                    </select>
-                                                [% END  # /IF (mv.type...) %]
+                                                        [% FOREACH aval IN mv.values %]
+                                                            [% IF aval == mv.default %]
+                                                            <option value="[%- aval | html -%]" selected="selected">[%- mv.labels.$aval | html -%]</option>
+                                                            [% ELSE %]
+                                                            <option value="[%- aval | html -%]">[%- mv.labels.$aval | html -%]</option>
+                                                            [% END %]
+                                                        [% END %]
+                                                        </select>
+                                                    [% END  # /IF (mv.type...) %]
+                                                </div>
                                                 [% IF ( subfield_loo.mandatory ) %]
-                                                    <span class="required">Required</span>
+                                                    <div class="subfield_loop_mandatory">
+                                                        <span class="required">Required</span>
+                                                    </div>
+                                                [% ELSIF ( subfield_loo.important ) %]
+                                                    <div class="subfield_loop_mandatory">
+                                                        <span class="important">Important</span>
+                                                    </div>
                                                 [% END %]
-                                                <span class="subfield_controls">
+                                                <div class="subfield_controls">
+                                                    [% IF ( mv.type == 'text' ) %]
+                                                        [% IF ( mv.authtype ) %]
+                                                            <a href="#" class="buttonDot tag_editor" onclick="openAuth(this.parentNode.parentNode.getElementsByTagName('input')[1].id,'[%- mv.authtype | html -%]','biblio'); return false;" tabindex="1" title="Tag editor">Tag editor</a>
+                                                        [% END %]
+                                                    [% ELSIF ( mv.type == 'text_complex' ) %]
+                                                            [% IF mv.noclick %]
+                                                                <span class="buttonDot tag_editor disabled" tabindex="-1" title="Field autofilled by plugin"></span>
+                                                            [% ELSE %]
+                                                                [% IF mv.plugin == "upload.pl" %]
+                                                                    <a href="#" id="buttonDot_[% mv.id | html %]" class="tag_editor upload framework_plugin" tabindex="1"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
+                                                                [% ELSE %]
+                                                                    <a href="#" id="buttonDot_[% mv.id | html %]" class="buttonDot tag_editor framework_plugin" tabindex="1" title="Tag editor">Tag editor</a>
+                                                                [% END %]
+                                                            [% END %]
+                                                        </span>
+                                                    [% END %]
                                                     [% IF ( subfield_loo.repeatable ) %]
                                                         <a href="#" class="buttonPlus" tabindex="1" onclick="CloneSubfield('subfield[% subfield_loo.tag | html %][% subfield_loo.subfield | html %][% subfield_loo.random | html %]','[% advancedMARCEditor | html %]'); return false;">
                                                             <img src="[% interface | html %]/[% theme | html %]/img/clone-subfield.png" alt="Clone" title="Clone this subfield" />
                                                             <img src="[% interface | html %]/[% theme | html %]/img/delete-subfield.png" alt="Delete" title="Delete this subfield" />
                                                         </a>
                                                     [% END %]
-                                                </span>
-                                            </div> <!-- /.subfield_line -->
+                                                </div>
+                                            </li> <!-- /.subfield_line -->
                                             <!-- End of the line -->
                                         [% END # /FOREACH subfield_loop %]
-                                    </div> <!-- /.tag.clearfix -->
+                                        </ul> <!--  /.sortable_subfield -->
+                                    </li> <!-- /.tag.clearfix -->
                                 [% END %]<!-- if innerloo.tag -->
                             [% END # /FOREACH BIG_LOO.innerloop %]
+                            </ul> <!--  /.sortable_field -->
                         </div> <!-- /#tabXXX -->
                     [% END # /FOREACH BIG_LOOP %]
                 </div><!-- /#addbibliotabs -->
                 <input type="hidden" name="duedatespec" value="[% duedatespec | html %]" />
                 [%# End of fields for fast cataloging %]
             </form> <!-- /name=f -->
+
+            [% INCLUDE 'modals/cataloguing_create_av.inc' %]
+
         </div> <!-- /.col-md-10.col-md-offset-1 -->
     </div> <!-- /.row -->