Bugzilla – Attachment 74168 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-notice-.patch (text/plain), 23.07 KB, created by
Owen Leonard
on 2018-04-13 13:49:08 UTC
(
hide
)
Description:
Bug 18007: Interface updates to notices and notice previews
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2018-04-13 13:49:08 UTC
Size:
23.07 KB
patch
obsolete
>From 717ea0bc3ea8e0dba3dfb7ae6273afe82c20c62b Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Fri, 13 Apr 2018 11:43:21 +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 > >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. >--- > .../intranet-tmpl/prog/en/modules/tools/letter.tt | 224 ++------------------- > .../prog/en/modules/tools/preview_letter.tt | 56 ++++-- > koha-tmpl/intranet-tmpl/prog/js/letter.js | 183 +++++++++++++++++ > 3 files changed, 238 insertions(+), 225 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 e28a7f7..1a5bda3 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt >@@ -5,6 +5,7 @@ > <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_[% KOHA_VERSION %].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"> >@@ -445,213 +446,22 @@ > [% INCLUDE 'datatables.inc' %] > <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.fixFloat_[% KOHA_VERSION %].js"></script> > <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.insertatcaret_[% KOHA_VERSION %].js"></script> >- <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> >+ <script type="text/javascript" src="[% interface %]/[% theme %]/js/letter_[% KOHA_VERSION %].js"></script> > [% END %] > > [% INCLUDE 'intranet-bottom.inc' %] >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..199a958 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 >@@ -29,27 +29,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>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 >index 0000000..9170ffc >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/letter.js >@@ -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() + ">>"); >+ } >+ }); >+ } >+ } >+ >+}); >-- >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