Bugzilla – Attachment 59622 Details for
Bug 18007
Interface updates to notices and notice previews
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 18007 - Interface updates to notices and notice previews
Bug-18007---Interface-updates-to-notices-and-notic.patch (text/plain), 22.65 KB, created by
Owen Leonard
on 2017-01-27 19:10:13 UTC
(
hide
)
Description:
Bug 18007 - Interface updates to notices and notice previews
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2017-01-27 19:10:13 UTC
Size:
22.65 KB
patch
obsolete
>From 7d7e845e4166321a27167b049e4d64444238d26e Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Thu, 26 Jan 2017 19:50:39 +0000 >Subject: [PATCH] Bug 18007 - Interface updates to notices and notice previews > >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 >- There is now better visual feedback for AJAX form checks > >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. > - Confirm that while the form validates this step the submit button > shows a loading indicator. > - Follow Bug 17981's test plan for testing the preview function. > Confirm that the preview loads correctly and looks correct. >--- > .../intranet-tmpl/prog/en/modules/tools/letter.tt | 228 +++------------------ > .../prog/en/modules/tools/preview_letter.tt | 58 ++++-- > koha-tmpl/intranet-tmpl/prog/js/letter.js | 166 +++++++++++++++ > 3 files changed, 232 insertions(+), 220 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/letter.js > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt >index 86e3097..af185c2 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt >@@ -4,209 +4,25 @@ > <title>Koha › Tools › Notices[% IF ( add_form or copy_form ) %][% IF ( modify ) %] › Modify notice[% ELSE %] › Add notice[% END %][% END %][% IF ( add_validate or copy_validate) %] › Notice added[% END %][% IF ( delete_confirm ) %] › Confirm deletion[% END %]</title> > [% INCLUDE 'doc-head-close.inc' %] > <link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/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> > [% INCLUDE 'datatables.inc' %] > <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.insertatcaret.js"></script> > <script type="text/javascript"> >-//<![CDATA[ >-$(document).ready(function() { >- $("#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; >- $("#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(); >- >- $("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?module="+module+"&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?module="+module+"&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> >+ var no_op_set = '[% no_op_set %]'; >+ var interface = '[% interface %]'; >+ var theme = '[% theme %]'; >+ var add_form = '[% add_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."); >+</script> >+<script type="text/javascript" src="[% interface %]/[% theme %]/js/letter.js"></script> > </head> >+ > <body id="tools_letter" class="tools"> > [% INCLUDE 'header.inc' %] > [% INCLUDE 'letters-search.inc' %] >@@ -330,7 +146,7 @@ $(document).ready(function() { > > [% IF add_form or copy_form %] > <h1>[% IF ( modify ) %]Modify notice[% ELSE %]Add notice[% END %]</h1> >- <form id="add_notice" name="Aform" method="post" enctype="multipart/form-data" class="validate"> >+ <form id="add_notice" name="Aform" method="post" enctype="multipart/form-data"> > [% IF add_form %] > <input type="hidden" name="op" id="op" value="add_validate" /> > [% ELSE %] >@@ -539,7 +355,7 @@ $(document).ready(function() { > <td class="actions"> > <button type="button" data-containerid="[% letter.message_transport_type %]_[% lang %]" class="btn btn-default btn-sm insert">Insert <i class="fa fa-long-arrow-right"></i></button> > </td> >- <td><textarea name="content" id="content_[% letter.message_transport_type %]_[% lang %]" cols="80" rows="15">[% letter.content %]</textarea></td> >+ <td><textarea name="content" data-lang="[% lang %]" id="content_[% letter.message_transport_type %]_[% lang %]" cols="80" rows="15">[% letter.content %]</textarea></td> > </tr> > </table> > </li> >@@ -559,7 +375,15 @@ $(document).ready(function() { > [% END %] > > [% IF code.search('DGST') %] <span class="overdue">Warning, this is a template for a Digest, as such, any references to branch data ( e.g. branches.branchname ) will refer to the borrower's home branch.</span> [% END %] >- <fieldset class="action"><input type="submit" id="submit_form" value="Submit" class="button" /> <a class="cancel" href="/cgi-bin/koha/tools/letter.pl">Cancel</a></fieldset> >+ <fieldset class="action"> >+ <button type="submit" id="submit_form"> >+ <span class="spinner" style="display:none"> >+ <img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" /> >+ </span> >+ Submit >+ </button> >+ <a class="cancel" href="/cgi-bin/koha/tools/letter.pl">Cancel</a> >+ </fieldset> > <input type="hidden" name="searchfield" value="[% searchfield %]" /> > </form> > [% END %] >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/preview_letter.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/preview_letter.tt >index b7aadd9..eefd1dc 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/preview_letter.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/preview_letter.tt >@@ -3,7 +3,9 @@ > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > </head> > <body id="preview_letter" class="catalog"> >+ > <div id="main"> >+ > [% FOR m IN messages %] > [%# FIXME The message block does not appear at the top of the modal! %] > <div class="dialog [% m.type %]"> >@@ -29,27 +31,47 @@ > [% 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>Converted version</h3> >+ <span style="font-family:monospace"> >+ [% FILTER html_line_break %] >+ [% tt_content | html %] >+ [% END %] >+ </span> >+ </div> >+ </div> > [% END %] > >- [% IF rendered_tt_message %] >- <fieldset class="brief"> >- <legend>Converted version</legend> >- <pre>[% tt_content | html %]</pre> >- </fieldset> >+ <hr /> > >- <fieldset class="brief"> >- <legend>Rendered message:</legend> >- <pre>[% rendered_tt_message.content | html %]</pre> >- </fieldset> >+ [% IF rendered_tt_message %] >+ <div class="yui-g"> >+ <div class="yui-u first"> >+ <h3>Original message, rendered:</h3> >+ <span style="font-family:monospace"> >+ [% FILTER html_line_break %] >+ [% rendered_message.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 >index 0000000..49bc137 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/letter.js >@@ -0,0 +1,166 @@ >+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() { >+ $("#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; >+ }); >+ >+ $("#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; >+ } >+ return false; >+ } >+ form.submit(); >+ } >+ }); >+ >+ var sms_limit = 160; >+ $("#content_sms").on("keyup", function(){ >+ var length = $(this).val().length; >+ $("#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(); >+ >+ $("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() + ">>"); >+ } >+ }); >+ } >+ } >+ >+}); >-- >2.1.4
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 18007
:
59622
|
68083
|
69413
|
70299
|
73207
|
74163
|
74168
|
74191
|
74237