Bug 17981: Add a preview mode for notice templates
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / letter.tt
index aeea068..f2e3ef2 100644 (file)
+[% USE Koha %]
+[% USE Branches %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Tools &rsaquo; Notices[% IF ( add_form ) %][% IF ( modify ) %] &rsaquo; Modify notice[% ELSE %] &rsaquo; Add notice[% END %][% END %][% IF ( add_validate ) %] &rsaquo; Notice added[% END %][% IF ( delete_confirm ) %] &rsaquo; Confirm deletion[% END %]</title>
+<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' %]
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
-[% INCLUDE 'datatables.inc' %]
-<script type="text/javascript" src="[% interface %]/[% theme %]/en/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": [
-            { "aTargets": [ -1,-2, -3 ], "bSortable": false, "bSearchable": false }
-        ],
-        "bPaginate": false
-    }));
-    [% IF no_op_set %]
-      $('#branch').change(function() {
-            $('#op').val("");
-            $('#selectlibrary').submit();
-      });
-      $('#newnotice').click(function() {
-            $('#op').val("add_form");
-            return true;
-      });
-    [% END %]
-
-    $("#submit").click( function(event) {
-        $("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 );
-                alert(msg)
-                event.preventDefault();
-            }
-        } );
-        return true;
-    });
-
-    var sms_limit = 160;
-    $("#content_sms").on("keyup", function(){
-        var length = $(this).val().length;
-        $("#sms_counter").html(length + "/" + sms_limit);
-        if ( length  > sms_limit ) {
-            $("#sms_counter").css("color", "red");
-        } else {
-            $("#sms_counter").css("color", "black");
-        }
-    });
-}); 
-[% IF ( add_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(mtt_id) {
-            var fieldset = $("#" + mtt_id);
-            var myQuery = $(fieldset).find('textarea[name="content"]');
-            var myListBox = $(fieldset).find('select[name="SQLfieldname"]');
-
-            if($(myListBox).find('option').length > 0) {
-                var chaineAj = "";
-                var NbSelect = 0;
-                $(myListBox).find('option').each( function (){
-                    if ( $(this).attr('selected') ) {
-                        NbSelect++;
-                        if (NbSelect > 1)
-                            chaineAj += ", ";
-                        chaineAj += $(this).val();
-                    }
-                } );
-                $(myQuery).insertAtCaret("<<" + chaineAj + ">>");
-            }
-        }
-       [% END %]
-               //]]>
-               </script>
+<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables_[% KOHA_VERSION %].css" />
 </head>
+
 <body id="tools_letter" class="tools">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'letters-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; [% IF ( add_form ) %][% IF ( modify ) %]<a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Modify notice[% ELSE %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Add notice[% END %][% ELSE %][% IF ( add_validate ) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Notice added[% ELSE %][% IF ( delete_confirm ) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Confirm deletion[% ELSE %]Notices &amp; Slips[% END %][% END %][% END %]</div>
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; [% IF ( add_form or copy_form) %][% IF ( modify ) %]<a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Modify notice[% ELSE %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Add notice[% END %][% ELSE %][% IF ( add_validate or copy_validate) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Notice added[% ELSE %][% IF ( delete_confirm ) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Confirm deletion[% ELSE %]Notices &amp; Slips[% END %][% END %][% END %]</div>
+
+<div id="preview_template" class="modal in" tabindex="-1" role="dialog" aria-labelledby="preview_template_label" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+    <div class="modal-header">
+        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="preview_template_label">Preview notice template</h3>
+    </div>
+    <div class="modal-body">
+        <div id="loading"> <img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" /> Loading </div>
+    </div>
+    <div class="modal-footer">
+        <!-- TODO <a href="#" class="btn btn-default" id="preview_template_button" role="button" data-toggle="modal">Convert using the Template Toolkit syntax</a>-->
+        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+    </div>
+    </div>
+    </div>
+</div>
 
-[% IF ( add_form ) %]<div id="doc" class="yui-t7">[% ELSE %]<div id="doc3" class="yui-t2">[% END %]
-   
-   <div id="bd">
-       <div id="yui-main">
-       <div class="yui-b">
+[% IF add_form or copy_form %]
+    <div class="main container-fluid">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+[% ELSE %]
+    <div id="doc3" class="yui-t2">
+        <div id="bd">
+            <div id="yui-main">
+                <div class="yui-b">
+[% END %]
 
 [% IF ( no_op_set ) %]
     <h1>Notices and Slips</h1>
     <form method="get" action="/cgi-bin/koha/tools/letter.pl" id="selectlibrary">
-      <input type="hidden" name="searchfield" value="[% searchfield %]" />
+      <input type="hidden" name="searchfield" value="[% searchfield | html %]" />
     [% UNLESS independant_branch %]
       <p>
         Select a library :
             <select name="branchcode" id="branch" style="width:20em;">
-                <option value="">All libraries</option>
-            [% FOREACH branchloo IN branchloop %]
-                [% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
-            [% END %]
+                <option value="*">All libraries</option>
+                [% PROCESS options_for_libraries libraries => Branches.all( selected => branchcode ) %]
             </select>
       </p>
     [% END %]
       <div id="toolbar" class="btn-toolbar">
-          <button type="submit" class="btn btn-small" id="newnotice"><i class="icon-plus"></i> New notice</button>
+          <button type="submit" class="btn btn-default btn-sm" id="newnotice"><i class="fa fa-plus"></i> New notice</button>
         <input type="hidden" id="op" name="op" />
       </div>
     </form>
 
                [% IF ( search ) %]
-        <p>You searched for <b>[% searchfield %]</b></p>
+        <p>You searched for <b>[% searchfield | html %]</b></p>
                [% END %]
                [% IF ( letter && !independant_branch) %]
             [% select_for_copy = BLOCK %]
             <select name="branchcode">
-                [% FOREACH branchloo IN branchloop %]
-                <option value="[% branchloo.value %]">Copy to [% branchloo.branchname %]</option>
+                [% FOREACH l IN Branches.all() %]
+                <option value="[% l.branchcode %]">Copy to [% l.branchname %]</option>
                 [% END %]
             </select>
             [% END %]
@@ -155,9 +81,8 @@ $(document).ready(function() {
                 <th>Module</th>
                 <th>Code</th>
                 <th>Name</th>
-                <th>Copy notice</th>
-                <th>&nbsp;</th>
-                <th>&nbsp;</th>
+                <th class="nosort">Copy notice</th>
+                <th class="nosort">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -168,10 +93,10 @@ $(document).ready(function() {
                   <td>[% lette.module %]</td>
                   <td>[% lette.code %]</td>
                   <td>[% lette.name %]</td>
-                  <td style="white-space: nowrap">
+                  <td class="actions">
                     [% IF !independant_branch || !lette.branchcode %]
                       <form method="post" action="/cgi-bin/koha/tools/letter.pl">
-                        <input type="hidden" name="op" value="copy" />
+                        <input type="hidden" name="op" value="copy_form" />
                         <input type="hidden" name="oldbranchcode" value="[% lette.branchcode %]" />
                         <input type="hidden" name="module" value="[% lette.module %]" />
                         <input type="hidden" name="code" value="[% lette.code %]" />
@@ -180,18 +105,16 @@ $(document).ready(function() {
                         [% ELSE %]
                           [% select_for_copy %]
                         [% END %]
-                        <input type="submit" value="Copy" />
+                        <button class="btn btn-default btn-xs"><i class="fa fa-clone"></i> Copy</button>
                       </form>
                     [% END %]
                   </td>
-                  <td>
+                  <td class="actions">
                     [% IF can_edit %]
-                      <a href="/cgi-bin/koha/tools/letter.pl?op=add_form&amp;branchcode=[% lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]">Edit</a>
+                      <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/letter.pl?op=add_form&amp;branchcode=[% lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]"><i class="fa fa-pencil"></i> Edit</a>
                     [% END %]
-                  </td>
-                  <td>
                     [% IF !lette.protected && can_edit %]
-                      <a href="/cgi-bin/koha/tools/letter.pl?op=delete_confirm&amp;branchcode=[%lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]">Delete</a>
+                      <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/letter.pl?op=delete_confirm&amp;branchcode=[%lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]"><i class="fa fa-trash"></i> Delete</a>
                     [% END %]
                   </td>
                 </tr>
@@ -210,10 +133,29 @@ $(document).ready(function() {
 [% END %]
 
        
-[% IF ( add_form ) %]
+[% IF add_form or copy_form %]
 <h1>[% IF ( modify ) %]Modify notice[% ELSE %]Add notice[% END %]</h1>
-        <form name="Aform" method="post" enctype="multipart/form-data">
-               <input type="hidden" name="op" id="op" value="add_validate" />
+
+    <div id="toolbar" class="btn-toolbar">
+        <div class="btn-group">
+            <button class="btn btn-default btn-sm" id="submit_form"><i class="fa fa-save"></i> Save</button>
+            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+                <li><a id="saveandcontinue" href="#">Save and continue editing</a></li>
+            </ul>
+        </div>
+        <a class="btn btn-default btn-sm cancel" href="/cgi-bin/koha/tools/letter.pl"><i class="fa fa-remove"></i> Cancel</a>
+    </div>
+
+        <form id="add_notice" name="Aform" method="post" enctype="multipart/form-data" class="validate">
+        [% IF add_form %]
+          <input type="hidden" name="op" id="op" value="add_validate" />
+        [% ELSE %]
+          <input type="hidden" name="op" id="op" value="copy_validate" />
+        [% END %]
+
                <input type="hidden" name="checked" value="0" />
                [% IF ( modify ) %]
                <input type="hidden" name="add" value="0" />
@@ -221,25 +163,43 @@ $(document).ready(function() {
                <input type="hidden" name="add" value="1" />
                [% END %]
                <fieldset class="rows">
-                               <input type="hidden" name="oldbranchcode" value="[% branchcode %]" />
+            <input type="hidden" name="oldbranchcode" value="[% oldbranchcode %]" />
+            <ol>
             [% IF independant_branch %]
                 <input type="hidden" name="branchcode" value="[% independant_branch %]" />
             [% ELSE %]
-               <ol>
-                       <li>
-                               <label for="branch">Library:</label>
-                <select name="branchcode" id="branch" style="width:20em;">
-                    <option value="">All libraries</option>
-                [% FOREACH branchloo IN branchloop %]
-                    [% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
+            <li>
+
+                [% IF adding %]
+                    <label for="branch">Library:</label>
+                    <select name="branchcode" id="branch" style="width:20em;">
+                        <option value="">All libraries</option>
+                        [% PROCESS options_for_libraries libraries => Branches.all( selected => branchcode ) %]
+                    </select>
+                [% ELSE %]
+                    <span class="label">Library:</span>
+                    <input type="hidden" id="branch" name="branchcode" value="[% branchcode %]" />
+                    [% IF ( branchcode ) %]
+                       [% Branches.GetName( branchcode ) %]
+                    [% ELSE %]
+                        All libraries
+                    [% END %]
                 [% END %]
-                </select>
-                       </li>
+            </li>
             [% END %]
                        <li>
                                <label for="module">Koha module:</label>
                                <input type="hidden" name="oldmodule" value="[% module %]" />
-               [% IF ( modify ) %]<select name="module" id="module">[% END %] [% IF ( adding ) %] <select name="module" id="module" onchange="javascript:window.location.href = unescape(window.location.pathname)+'?op=add_form&amp;module='+this.value+'&amp;content='+window.document.forms['Aform'].elements['content'].value;">[% END %]
+                [% IF adding  %]
+                  <select name="module" id="newmodule">
+                [% ELSE %]
+                  <select name="module" id="module">
+                [% END %]
+                                    [% IF ( module == "acquisition" ) %]
+                                      <option value="acquisition" selected="selected">Acquisition</option>
+                                    [% ELSE %]
+                                      <option value="acquisition" >Acquisition</option>
+                                    [% END %]
                                     [% IF ( module == "catalogue" ) %]
                                       <option value="catalogue" selected="selected">Catalog</option>
                                     [% ELSE %]
@@ -250,6 +210,11 @@ $(document).ready(function() {
                                     [% ELSE %]
                                       <option value="circulation">Circulation</option>
                                     [% END %]
+                                    [% IF ( module == "orderacquisition" ) %]
+                                      <option value="orderacquisition" selected="selected">Order acquisition</option>
+                                    [% ELSE %]
+                                      <option value="orderacquisition">Order acquisition</option>
+                                    [% END %]
                                     [% IF ( module == "claimacquisition" ) %]
                                       <option value="claimacquisition" selected="selected">Claim acquisition</option>
                                     [% ELSE %]
@@ -280,117 +245,185 @@ $(document).ready(function() {
                                     [% ELSE %]
                                       <option value="suggestions">Suggestions</option>
                                     [% END %]
-                               </select>
-                       </li>
-                       <li>
-                               <span class="label">Code:</span>[% IF ( adding ) %]<input type="text" id="code" name="code" size="20" maxlength="20" />[% ELSE %]<input type="hidden" id="code" name="code" value="[% code %]" />[% code %][% END %]
-                       </li>
-               <li>
-            <label for="name">Name:</label><input type="text" id="name" name="name" size="60" value="[% letter_name %]" />
-               </li>
-
-        [% FOREACH letter IN letters %]
-          <li>
-            <fieldset class="rows mtt" id="[% letter.message_transport_type %]">
-              <legend>
+                </select>
+            </li>
+            <li>
+              [% IF adding %]
+                  <label for="code" class="required">Code:</label>
+                  <input type="text" id="code" name="code" size="20" maxlength="20" value="" required="required"/>
+                  <span class="required">Required</span>
+              [% ELSE %]
+                  <span class="label">Code:</span>
+                  <input type="hidden" id="code" name="code" value="[% code %]" />
+                  [% code %]
+              [% END %]
+            </li>
+            <li>
+              <label for="name" class="required">Name:</label>
+              <input type="text" id="name" name="name" size="60" value="[% letter_name %]" required="required" />
+              <span class="required">Required</span>
+            </li>
+            [% IF code and preview_is_available%]
+                <li>
+                    <label for="name">Data for preview:</label>
+                    [% SWITCH code %]
+                    [% CASE 'CHECKIN' %]
+                        <input type="text" id="data_preview" name="data_preview" value="" placeholder="barcode" />
+                    [% CASE 'CHECKOUT' %]
+                        <input type="text" id="data_preview" name="data_preview" value="" placeholder="barcode|borrowernumber" />
+                    [% CASE 'HOLD_SLIP' %]
+                        <input type="text" id="data_preview" name="data_preview" value="" placeholder="biblionumber|borrowernumber" />
+                    [% CASE %]
+                        Not supported yet.
+                    [% END %]
+                    </li>
+            [% END %]
+        </ol>
+    </fieldset>
+        [% IF Koha.Preference('TranslateNotices') %]
+        <div style="clear:both"></div>
+            <div id="tabs">
+                <ul>
+                    <li><a href="#lang_default">Default</a></li>
+                    [% FOR language IN languages %]
+                        [% FOR sublanguage IN language.sublanguages_loop %]
+                            [% IF language.plural %]
+                                <li><a href="#lang_[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</a></li>
+                            [% ELSE %]
+                                <li><a href="#lang_[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</a></li>
+                            [% END %]
+                        [% END %]
+                    [% END %]
+                </ul>
+        [% END %]
+
+        [% FOREACH lang IN letters.keys %]
+            <div id="lang_[% lang %]">
+        <div class="transport-types" style="clear:both">
+        [% FOR mtt IN letters.$lang.templates.keys.sort %]
+            [% SET letter = letters.$lang.templates.$mtt %]
+            <h3>
                 [% SWITCH letter.message_transport_type %]
                 [% CASE 'email' %]
-                  email
+                  Email
                 [% CASE 'print' %]
-                  print
+                  Print
                 [% CASE 'sms' %]
-                  sms
+                  SMS
                 [% CASE 'feed' %]
-                  feed
+                  Feed
                 [% CASE 'phone' %]
-                  phone
+                  Phone
                 [% CASE %]
                   [% letter.message_transport_type %]
                 [% END %]
-              </legend>
+            </h3>
+            [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
+              <fieldset class="rows mtt" id="[% letter.message_transport_type %]_[% lang %]" disabled="disabled">
+                <div class="dialog message">You should enable the SMSSendDriver preference to use the SMS templates.</div>
+            [% ELSIF letter.message_transport_type == "phone" and not Koha.Preference("TalkingTechItivaPhoneNotification") %]
+              <fieldset class="rows mtt" id="[% letter.message_transport_type %]_[% lang %]" disabled="disabled">
+                <div class="dialog message">You should enable the TalkingTechItivaPhoneNotification preference to use the phone templates.</div>
+            [% ELSE %]
+              <fieldset class="rows mtt" id="[% letter.message_transport_type %]_[% lang %]">
+            [% END %]
               <ol>
                 <li>
                   <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type %]" />
-                  <label for="is_html_[% letter.message_transport_type %]">HTML message:</label>
+                  <input type="hidden" name="lang" value="[% lang %]" />
+                  <label for="is_html_[% letter.message_transport_type %]_[% lang %]">HTML message:</label>
                   [% IF letter.is_html %]
-                    <input type="checkbox" name="is_html_[% letter.message_transport_type %]" id="is_html_[% letter.message_transport_type %]" value="1" checked="checked" />
+                    <input type="checkbox" name="is_html_[% letter.message_transport_type %]" id="is_html_[% letter.message_transport_type %]_[% lang %]" value="1" checked="checked" />
                   [% ELSE %]
-                    <input type="checkbox" name="is_html_[% letter.message_transport_type %]" id="is_html_[% letter.message_transport_type %]" value="1" />
+                    <input type="checkbox" name="is_html_[% letter.message_transport_type %]" id="is_html_[% letter.message_transport_type %]_[% lang %]" value="1" />
                   [% END %]
                 </li>
                 <li>
-                  <label for="title">Message subject:</label><input type="text" id="title" name="title" size="60" value="[% letter.title %]" />
+                  <label for="title_[% letter.message_transport_type %]_[% lang %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type %]_[% lang %]" name="title" size="60" value="[% letter.title %]" />
                 </li>
                 <li>
-                  <label for="SQLfieldname">Message body: [% IF letter.message_transport_type == 'sms' %]<span id="sms_counter">[% letter.content.length %]/160</span>[% END %]</label>
+                  <label for="SQLfieldname_[% letter.message_transport_type %]_[% lang %]">Message body:</label>
+                  [% IF letter.message_transport_type == 'sms' %]
+                    <span class="sms_counter" id="sms_counter_[% lang %]">[% IF letter.content && letter.content.length > 0 %][% letter.content.length %][% ELSE %]0[% END %]/160 characters</span>
+                  [% END %]
                   <table>
                     <tr>
                       <td>
-                        <select name="SQLfieldname" multiple="multiple" size="9">
-                          [% FOREACH SQLfieldnam IN SQLfieldname %]
-                            <option value="[% SQLfieldnam.value %]">[% SQLfieldnam.text %]</option>
+                        <select name="SQLfieldname" id="SQLfieldname_[% letter.message_transport_type %]_[% lang %]" multiple="multiple" size="9">
+                          [% FOREACH SQLfieldname IN SQLfieldnames %]
+                            <option value="[% SQLfieldname.value %]">[% SQLfieldname.text %]</option>
                           [% END %]
                         </select>
                       </td>
-                      <td><input type="button" name="insert" value="&gt;&gt;" onclick="insertValueQuery('[% letter.message_transport_type %]')" title="Insert" /></td>
-                      <td><textarea name="content" id="content_[% letter.message_transport_type %]" cols="80" rows="15">[% letter.content %]</textarea></td>
+                        <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" data-lang="[% lang %]" class="content_[% letter.message_transport_type %]" id="content_[% letter.message_transport_type %]_[% lang %]" cols="80" rows="15">[% letter.content %]</textarea></td>
                     </tr>
                   </table>
                 </li>
+                [% IF preview_is_available %]
+                    <li>
+                        <a href="/cgi-bin/koha/svc/letters/preview" class="preview_template btn btn-default btn-xs" title="Preview this notice template" data-mtt="[% letter.message_transport_type %]" data-lang="[% lang %]"><i class="fa fa-eye"></i> Preview</a>
+                    </li>
+                [% END %]
               </ol>
             </fieldset>
-          </li>
+            [% END %]
+            </div>
+        </div> <!-- / #transport-types -->
+        [% END %]
+        [% IF Koha.Preference('TranslateNotices') %]
+        </div>
         [% END %]
-        </ol>
 
         [% 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>
-        <fieldset class="action"><input type="submit" id="submit" value="Submit" class="button" /> <a class="cancel" href="/cgi-bin/koha/tools/letter.pl">Cancel</a></fieldset>
-      <input type="hidden" name="searchfield" value="[% searchfield %]" />
+
+        <input type="hidden" id="redirect" name="redirect" value="" />
+        <input type="hidden" name="searchfield" value="[% searchfield %]" />
     </form>
 [% END %]
 
-[% IF ( add_validate ) %]
+[% IF ( add_validate or copy_validate) %]
        Data recorded
        <form action="[% action %]" method="post">
        <input type="submit" value="OK" />
        </form>
 [% END %]
-       
+
 [% IF ( delete_confirm ) %]
-    <div class="dialog alert"><h3>Delete notice?</h3>
-       <table>
-        <thead>
-               <tr>
-                       <th>Library</th>
-                       <th>Module</th>
-                       <th>Code</th>
-                       <th>Name</th>
-               </tr>
-        </thead>
-               <tr>
-                       <td>[% branchname %]</td>
-                       <td>[% module %]</td>
-            <td>[% code %]</td>
-                       <td>[% name %]</td>
-               </tr>
-       </table>
-               <form action="[% action %]" method="post">
-               <input type="hidden" name="op" value="delete_confirmed">
-               <input type="hidden" name="branchcode" value="[% branchcode %]" />
-               <input type="hidden" name="code" value="[% code %]" />
-               <input type="hidden" name="module" value="[% module %]" />
-        <input type="hidden" name="message_transport_type" value="*" />
-                <input type="submit" value="Yes, delete" class="approve" />
-                               </form>
-
-                               <form action="[% action %]" method="get">
-                    <input type="submit" value="No, do not delete" class="deny" />
-                               </form>
-               </div>
+    <div class="dialog alert">
+        <h3>Delete notice?</h3>
+        <table>
+            <thead>
+            <tr>
+                <th>Library</th>
+                <th>Module</th>
+                <th>Code</th>
+                <th>Name</th>
+            </tr>
+            </thead>
+            <tr>
+                <td>[% IF letter.branchcode %][% Branches.GetName( letter.branchcode ) %][% ELSE %](All libraries)[% END %]</td>
+                <td>[% letter.module %]</td>
+                <td>[% letter.code %]</td>
+                <td>[% letter.name %]</td>
+            </tr>
+        </table>
+            <form action="[% action %]" method="post">
+            <input type="hidden" name="op" value="delete_confirmed">
+            <input type="hidden" name="branchcode" value="[% letter.branchcode %]" />
+            <input type="hidden" name="code" value="[% letter.code %]" />
+            <input type="hidden" name="module" value="[% letter.module %]" />
+            <button type="submit" class="approve"><i class="fa fa-check"></i> Yes, delete</button>
+        </form>
 
+        <form action="[% action %]" method="get">
+            <button type="submit" class="deny"><i class="fa fa-times"></i> No, do not delete</button>
+        </form>
+    </div>
 [% END %]
-       
+
 [% IF ( delete_confirmed ) %]
        Data deleted
        <form action="[% action %]" method="post">
@@ -400,10 +433,225 @@ $(document).ready(function() {
 
 </div>
 </div>
-[% UNLESS ( add_form ) %]
+[% UNLESS add_form or copy_form %]
     <div class="yui-b noprint">
         [% INCLUDE 'tools-menu.inc' %]
     </div>
 [% END %]
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/tools-menu_[% KOHA_VERSION %].js"></script>
+    [% 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 + " div");
+                $('#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>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]