Bug 18007: Interface updates to notices and notice previews
authorOwen Leonard <oleonard@myacpl.org>
Fri, 13 Apr 2018 11:43:21 +0000 (11:43 +0000)
committerJonathan Druart <jonathan.druart@bugs.koha-community.org>
Mon, 16 Apr 2018 17:07:27 +0000 (14:07 -0300)
This patch makes changes to the form for adding and editing notices, and
to the template for viewing a rendered preview of notices.

- Preview now shows side-by-side comparisons
- JavaScript has been movied out of template into separate file
- Validation of the add/edit form improved through use of validation
  plugin

To test, apply the patch on top of those for Bug 17981

- Add a new notice.
  - Confirm that the form can't be submitted without data in the "code"
    and "name" fields.
  - Confirm that the form can't be submitted without filling in at least
    one message template (subject and body).
  - Confirm that you cannot submit the form while using an
    existing notice code.
  - Follow Bug 17981's test plan for testing the preview function.
    Confirm that the preview loads correctly and looks correct.
    - Test both with old syntax messages which require conversion and
      messages in template-toolkit syntax.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Fixed conflicts caused by bug 20538.

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
koha-tmpl/intranet-tmpl/prog/en/modules/tools/preview_letter.tt
koha-tmpl/intranet-tmpl/prog/js/letter.js [new file with mode: 0644]

index 079bb68..27e4544 100644 (file)
@@ -6,6 +6,7 @@
 <title>Koha &rsaquo; Tools &rsaquo; Notices[% IF ( add_form or copy_form ) %][% IF ( modify ) %] &rsaquo; Modify notice[% ELSE %] &rsaquo; Add notice[% END %][% END %][% IF ( add_validate or copy_validate) %] &rsaquo; Notice added[% END %][% IF ( delete_confirm ) %] &rsaquo; Confirm deletion[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% Asset.css("css/datatables.css") %]
+<style type="text/css">#preview_template .modal-dialog { width : 80%; } .spinner { display: none; } @media (max-width: 767px) { #preview_template { margin: 0; width : auto; } }</style>
 </head>
 
 <body id="tools_letter" class="tools">
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") %]
     [% Asset.js("lib/jquery/plugins/jquery.insertatcaret.js") %]
-    <script type="text/javascript">
-        $(document).ready(function() {
-            [% IF add_form or copy_form %]
-                $('#toolbar').fixFloat();
-            [% END %]
-            $("#lettert:has(tbody tr)").dataTable($.extend(true, {}, dataTablesDefaults, {
-                "sDom": 't',
-                "aoColumnDefs": [
-                    { "bSortable": false, "bSearchable": false, 'aTargets': [ 'nosort' ] }
-                ],
-                "bPaginate": false
-            }));
-            [% IF no_op_set %]
-                $('#branch').change(function() {
-                    $('#op').val("");
-                    $('#selectlibrary').submit();
-                });
-                $('#newnotice').click(function() {
-                    $('#op').val("add_form");
-                    return true;
-                });
-            [% END %]
-
-            $("#newmodule").on("change",function(){
-                if( $("#branch").val() == ""){
-                    var branchcode = "*";
-                } else {
-                    var branchcode = $("#branch").val();
-                }
-                window.location.href = "/cgi-bin/koha/tools/letter.pl?op=add_form&module=" + $(this).val() + "&branchcode=" + branchcode;
-            });
-
-            $("#submit_form").click( function(event) {
-                event.preventDefault();
-                var at_least_one_exists = 0;
-                var are_valid = 1;
-                $("fieldset.mtt").each( function(){
-                    var title = $(this).find('input[name="title"]').val();
-                    var content = $(this).find('textarea[name="content"]').val();
-                    if (
-                            ( title.length == 0 && content.length > 0 )
-                         || ( title.length > 0 && content.length == 0 )
-                    ) {
-                        var mtt = $(this).find('input[name="message_transport_type"]').val();
-                        var msg = _("Please specify title and content for %s");
-                        msg = msg.replace( "%s", mtt );
-                        at_least_one_exists = 1;
-                        alert(msg);
-                        return are_valid = false;
-                    } else if ( title.length > 0 && content.length > 0 ) {
-                        at_least_one_exists = 1;
-                    }
-                } );
-                if ( ! at_least_one_exists ) {
-                    alert( _("Please fill at least one template.") );
-                    return false;
-                }
-                if ( ! are_valid ) {
-                    return false;
-                }
-
-                // Test if code already exists in DB
-                var new_lettercode = $("#code").val();
-                var new_branchcode = $("#branch").val();
-                [% IF ( add_form and code ) # IF edit %]
-                    if ( new_lettercode != '[% code %]' ) {
-                [% END %]
-                    $.ajax({
-                        data: { code: new_lettercode, branchcode: new_branchcode },
-                        type: 'GET',
-                        url: '/cgi-bin/koha/svc/letters/get/',
-                        success: function (data) {
-                             if ( data.letters.length > 0 ) {
-                                 if( new_branchcode == '' ) {
-                                     alert( _("A default letter with the code '%s' already exists.").format(new_lettercode) );
-                                 } else {
-                                     alert( _("A letter with the code '%s' already exists for '%s'.").format(new_lettercode, new_branchcode) );
-                                 }
-                                 return false;
-                             } else {
-                                 $("#add_notice").submit();
-                             }
-                        },
-                    });
-                [% IF ( add_form and code ) %]
-                    } else {
-                        $("#add_notice").submit();
-                    }
-                [% END %]
-            });
-
-            var sms_limit = 160;
-            $(".content_sms").on("keyup", function(){
-                var length = $(this).val().length;
-                var sms_counter = ("#sms_counter_" + $(this).data('lang'));
-                $(sms_counter).html(length + "/" + sms_limit + _(" characters"));
-                if ( length  > sms_limit ) {
-                    $(sms_counter).css("color", "red");
-                } else {
-                    $(sms_counter).css("color", "black");
-                }
-            });
-            $( ".transport-types" ).accordion({ collapsible: true, active:false, animate: 200 });
-            $(".insert").on("click",function(){
-                var containerid = $(this).data("containerid");
-                insertValueQuery( containerid );
-            })
-
-            $("#tabs").tabs();
-
-            $("#saveandcontinue").on("click",function(e){
-                e.preventDefault();
-                $("#redirect").val("just_save");
-                $("#submit_form").click();
-            });
-
-            $("body").on("click", ".preview_template", function(e){
-                e.preventDefault();
-                var mtt = $(this).data("mtt");
-                var lang = $(this).data("lang");
-
-                var code = $("#code").val();
-                var content = $("#content_"+mtt+"_"+lang).val();
-                var title = $("#title_"+mtt+"_"+lang).val();
-
-                var is_html = $("#is_html_"+mtt+"_"+lang).val();
-                var page = $(this).attr("href");
-                var data_preview = $("#data_preview").val();
-                page += '?code='+encodeURIComponent(code);
-                page += '&title='+encodeURIComponent(title);
-                page += '&content='+encodeURIComponent(content);
-                page += '&data_preview='+encodeURIComponent(data_preview);
-                page += '&is_html='+encodeURIComponent(is_html);
-                $("#preview_template .modal-body").load(page);
-                $('#preview_template').modal('show');
-                $("#preview_template_button").attr("href", "/cgi-bin/koha/svc/letters/convert?code="+code+"&mtt="+mtt+"&lang="+lang);
-            });
-            $("#preview_template").on("hidden", function(){
-                $("#preview_template_label").html("");
-                $("#preview_template .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/spinner-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
-            });
-            $("body").on("click", "#convert_template", function(e){
-                e.preventDefault();
-                var mtt = $(this).data("mtt");
-                var lang = $(this).data("lang");
-
-                var code = $("#code").val();
-                var content = $("#content_"+mtt+"_"+lang).val();
-                var title = $("#title_"+mtt+"_"+lang).val();
-
-                var is_html = $("#is_html_"+mtt+"_"+lang).val();
-                var page = $(this).attr("href");
-                var data_preview = $("#data_preview").val();
-                page += '?code='+encodeURIComponent(code);
-                page += '&title='+encodeURIComponent(title);
-                page += '&content='+encodeURIComponent(content);
-                page += '&data_preview='+encodeURIComponent(data_preview);
-                page += '&is_html='+encodeURIComponent(is_html);
-                $("#preview_template .modal-body").load(page + " div");
-                $('#preview_template').modal('show');
-                $("#preview_template_button").attr("href", "/cgi-bin/koha/svc/letters/convert?code="+code+"&branchcode="+branchcode+"&mtt="+mtt+"&lang="+lang);
-            });
-            $("#convert_template").on("hidden", function(){
-                $("#convert_template_label").html("");
-                $("#convert_template .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/spinner-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
-            });
-
-        });
-        [% IF add_form or copy_form %]
-            function cancel(f) {
-                $('#op').val("");
-                f.method = "get";
-                f.submit();
-            }
-
-            function isNotNull(f,noalert) {
-              if (f.value.length ==0) {
-                  return false;
-              }
-              return true;
-            }
-
-            function isNum(v,maybenull) {
-                var n = new Number(v.value);
-                if (isNaN(n)) {
-                    return false;
-                }
-                if (maybenull==0 && v.value==''){
-                  return false;
-                }
-                return true;
-            }
-            function insertValueQuery(containerid) {
-                var fieldset = $("#" + containerid);
-                var myQuery = $(fieldset).find('textarea[name="content"]');
-                var myListBox = $(fieldset).find('select[name="SQLfieldname"]');
-
-                if($(myListBox).find('option').length > 0) {
-                    $(myListBox).find('option').each( function (){
-                        if ( $(this).attr('selected') && $(this).val().length > 0 ) {
-                            $(myQuery).insertAtCaret("<<" + $(this).val() + ">>");
-                        }
-                    });
-                }
-            }
-        [% END %]
-    </script>
+    <script>
+        var no_op_set = '[% no_op_set %]';
+        var interface = '[% interface %]';
+        var theme = '[% theme %]';
+        var add_form = '[% add_form %]';
+        var copy_form = '[% copy_form %]';
+        var code = '[% code %]';
+        var new_lettercode = '[% new_lettercode %]';
+        var new_branchcode = '[% new_branchcode %]';
+        var MSG_CODE_EXISTS = _("A default letter with the code '%s' already exists.");
+        var MSG_CODE_EXISTS_FOR_LIBRARY = _("A letter with the code '%s' already exists for '%s'.");
+        var MSG_EMPTY_TITLE_AND_CONTENT = _("Please specify title and content for %s");
+        var MSG_EMPTY_TEMPLATES = _("Please fill at least one template.");
+        var MSG_LOADING = _("Loading");
+     </script>
+    [% Asset.js("js/letter.js") %]
 [% END %]
 
 [% INCLUDE 'intranet-bottom.inc' %]
index b7aadd9..199a958 100644 (file)
             [% END %]
 
             [% IF rendered_message %]
-                <fieldset class="brief">
-                    <legend>Original version</legend>
-                    <pre>[% original_content | html %]</pre>
-                </fieldset>
-
-                <fieldset class="brief">
-                    <legend>Rendered message:</legend>
-                    <pre>[% rendered_message.content | html %]</pre>
-                </fieldset>
+                <div class="yui-g">
+                    <div class="yui-u first">
+                        <h3>Original version</h3>
+                        <span style="font-family:monospace">
+                            [% FILTER html_line_break %]
+                                [% original_content | html %]
+                            [% END %]
+                        </span>
+                    </div>
+                    <div class="yui-u">
+                        <h3>Original message, rendered:</h3>
+                        <span style="font-family:monospace">
+                            [% FILTER html_line_break %]
+                                [% rendered_message.content | html %]
+                            [% END %]
+                        </span>
+                    </div>
+                </div>
             [% END %]
 
-            [% IF rendered_tt_message %]
-                <fieldset class="brief">
-                    <legend>Converted version</legend>
-                    <pre>[% tt_content | html %]</pre>
-                </fieldset>
 
-                <fieldset class="brief">
-                    <legend>Rendered message:</legend>
-                    <pre>[% rendered_tt_message.content | html %]</pre>
-                </fieldset>
+            [% IF rendered_tt_message %]
+            <hr />
+                <div class="yui-g">
+                    <div class="yui-u first">
+                        <h3>Converted version</h3>
+                        <span style="font-family:monospace">
+                            [% FILTER html_line_break %]
+                                [% tt_content | html %]
+                            [% END %]
+                        </span>
+                    </div>
+                    <div class="yui-u">
+                        <h3>Converted message, rendered:</h3>
+                        <span style="font-family:monospace">
+                            [% FILTER html_line_break %]
+                                [% rendered_tt_message.content | html %]
+                            [% END %]
+                        </span>
+                    </div>
+                </div>
             [% END %]
         </div>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/letter.js b/koha-tmpl/intranet-tmpl/prog/js/letter.js
new file mode 100644 (file)
index 0000000..4415d19
--- /dev/null
@@ -0,0 +1,183 @@
+/* Variables defined in letter.tt: */
+/* global _ module add_form copy_form dataTablesDefaults no_op_set MSG_EMPTY_TITLE_AND_CONTENT MSG_EMPTY_TEMPLATES code MSG_CODE_EXISTS MSG_CODE_EXISTS_FOR_LIBRARY MSG_DT_LOADING_RECORDS interface theme */
+
+var modal_loading = "<div id=\"loading\"><img src=\"" + interface + "/" + theme + "/img/spinner-small.gif\" alt=\"\" /> "+ MSG_DT_LOADING_RECORDS +"</div>";
+
+var editing = 0;
+if( add_form == 1 && code !== '' ){
+    editing = 1;
+}
+
+function checkCodes( new_lettercode, new_branchcode ){
+    $(".spinner").show();
+    return $.ajax({
+        data: { code: new_lettercode, branchcode: new_branchcode },
+        type: 'GET',
+        url: '/cgi-bin/koha/svc/letters/get/',
+        async: !1,
+        success: function (data) {
+            if ( data.letters.length > 0 ) {
+                if( new_branchcode === '' ) {
+                    alert( MSG_CODE_EXISTS.format(new_lettercode));
+                } else {
+                    alert( MSG_CODE_EXISTS_FOR_LIBRARY.format(new_lettercode, new_branchcode) );
+                }
+                $(".spinner").hide();
+            } else {
+                $(".spinner").hide();
+            }
+        }
+    });
+}
+
+$(document).ready(function() {
+    if( add_form || copy_form ){
+        $('#toolbar').fixFloat();
+    }
+
+    $("#lettert:has(tbody tr)").dataTable($.extend(true, {}, dataTablesDefaults, {
+        "sDom": 't',
+        "aoColumnDefs": [
+            { "bSortable": false, "bSearchable": false, 'aTargets': [ 'nosort' ] }
+        ],
+        "bPaginate": false
+    }));
+
+    if( no_op_set ){
+        $('#branch').change(function() {
+            $('#op').val("");
+            $('#selectlibrary').submit();
+        });
+        $('#newnotice').click(function() {
+            $('#op').val("add_form");
+            return true;
+        });
+    }
+
+    $("#newmodule").on("change",function(){
+        var branchcode;
+        if( $("#branch").val() === ""){
+            branchcode = "*";
+        } else {
+            branchcode = $("#branch").val();
+        }
+        window.location.href = "/cgi-bin/koha/tools/letter.pl?op=add_form&module=" + $(this).val() + "&branchcode=" + branchcode;
+    });
+
+    $("#submit_form").on("click",function(){
+        $("#add_notice").submit();
+    });
+
+    $("#add_notice").validate({
+        submitHandler: function(form){
+            var at_least_one_exists = 0;
+            var are_valid = 1;
+            $("fieldset.mtt").each( function(){
+                var title = $(this).find('input[name="title"]').val();
+                var content = $(this).find('textarea[name="content"]').val();
+                if (
+                    ( title.length === 0 && content.length > 0 ) || ( title.length > 0 && content.length === 0 )
+                ) {
+                    var mtt = $(this).find('input[name="message_transport_type"]').val();
+                    at_least_one_exists = 1; // Only one template has to be filled in for form to be valid
+                    alert( MSG_EMPTY_TITLE_AND_CONTENT.format( mtt ) );
+                    are_valid = 0;
+                } else if ( title.length > 0 && content.length > 0 ) {
+                    at_least_one_exists = 1;
+                }
+            });
+
+            if ( ! at_least_one_exists ) {
+                // No templates were filled out
+                alert( MSG_EMPTY_TEMPLATES );
+                return false;
+            }
+
+            if ( ! are_valid ){
+                return false;
+            }
+
+            // Test if code already exists in DB
+            if( editing == 1 ){ // This is an edit operation
+                // We don't need to check for an existing Code
+            } else {
+                var new_lettercode = $("#code").val();
+                var new_branchcode = $("#branch").val();
+                var code_check = checkCodes( new_lettercode, new_branchcode );
+                if( code_check.responseJSON.letters.length > 0 ){
+                    return false;
+                }
+            }
+            form.submit();
+        }
+    });
+
+    var sms_limit = 160;
+    $(".content_sms").on("keyup", function(){
+        var length = $(this).val().length;
+        var sms_counter = ("#sms_counter_" + $(this).data('lang'));
+        $(sms_counter).html(length + "/" + sms_limit + _(" characters"));
+        if ( length  > sms_limit ) {
+            $(sms_counter).css("color", "red");
+        } else {
+            $(sms_counter).css("color", "black");
+        }
+    });
+
+    $( ".transport-types" ).accordion({ collapsible: true, active:false, animate: 200 });
+
+    $(".insert").on("click",function(){
+        var containerid = $(this).data("containerid");
+        insertValueQuery( containerid );
+    });
+
+    $("#saveandcontinue").on("click",function(e){
+        e.preventDefault();
+        $("#redirect").val("just_save");
+        $("#submit_form").click();
+    });
+
+    $("#tabs").tabs();
+
+    $("body").on("click", ".preview_template", function(e){
+        e.preventDefault();
+        var mtt = $(this).data("mtt");
+        var lang = $(this).data("lang");
+
+        var code = $("#code").val();
+        var content = $("#content_"+mtt+"_"+lang).val();
+        var title = $("#title_"+mtt+"_"+lang).val();
+
+        var is_html = $("#is_html_"+mtt+"_"+lang).val();
+        var page = $(this).attr("href");
+        var data_preview = $("#data_preview").val();
+        page += '?code='+encodeURIComponent(code);
+        page += '&title='+encodeURIComponent(title);
+        page += '&content='+encodeURIComponent(content);
+        page += '&data_preview='+encodeURIComponent(data_preview);
+        page += '&is_html='+encodeURIComponent(is_html);
+        $("#preview_template .modal-body").load(page + " #main");
+        $('#preview_template').modal('show');
+        $("#preview_template_button").attr("href", "/cgi-bin/koha/svc/letters/convert?module="+module+"&code="+code+"&mtt="+mtt+"&lang="+lang);
+    });
+
+    $("#preview_template").on("hidden.bs.modal", function(){
+        $("#preview_template_label").html("");
+        $("#preview_template .modal-body").html( modal_loading );
+    });
+
+    function insertValueQuery(containerid) {
+        var fieldset = $("#" + containerid);
+        var myQuery = $(fieldset).find('textarea[name="content"]');
+        var myListBox = $(fieldset).find('select[name="SQLfieldname"]');
+
+        if($(myListBox).find('option').length > 0) {
+            $(myListBox).find('option').each( function (){
+                if ( $(this).attr('selected') && $(this).val().length > 0 ) {
+                    $(myQuery).insertAtCaret("<<" + $(this).val() + ">>");
+                }
+            });
+        }
+    }
+
+});