Bug 17981: Add a preview mode for notice templates
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / letter.tt
index 91f6f10..f2e3ef2 100644 (file)
 [% USE Koha %]
 [% USE Branches %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <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 %]/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_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/',
-            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 });
-}); 
-[% 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(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 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>
 
-[% IF add_form or copy_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">
+<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 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 %]
+                [% 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="fa fa-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 %]
@@ -199,8 +81,8 @@ $(document).ready(function() {
                 <th>Module</th>
                 <th>Code</th>
                 <th>Name</th>
-                <th>Copy notice</th>
-                <th>Actions</th>
+                <th class="nosort">Copy notice</th>
+                <th class="nosort">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -211,7 +93,7 @@ $(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_form" />
@@ -223,16 +105,16 @@ $(document).ready(function() {
                         [% ELSE %]
                           [% select_for_copy %]
                         [% END %]
-                        <button class="btn btn-mini"><i class="fa fa-clone"></i> Copy</button>
+                        <button class="btn btn-default btn-xs"><i class="fa fa-clone"></i> Copy</button>
                       </form>
                     [% END %]
                   </td>
-                  <td style="white-space: nowrap">
+                  <td class="actions">
                     [% IF can_edit %]
-                      <a class="btn btn-mini" 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>
+                      <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 %]
                     [% IF !lette.protected && can_edit %]
-                      <a class="btn btn-mini" 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>
+                      <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>
@@ -253,6 +135,20 @@ $(document).ready(function() {
        
 [% IF add_form or copy_form %]
 <h1>[% IF ( modify ) %]Modify notice[% ELSE %]Add notice[% END %]</h1>
+
+    <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" />
@@ -274,17 +170,20 @@ $(document).ready(function() {
             [% ELSE %]
             <li>
 
-                <label for="branch">Library:</label>
                 [% IF adding %]
+                    <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 %]
-                    [% END %]
+                        [% 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 %]" />
-                    [% Branches.GetName( branchcode ) %]
+                    [% IF ( branchcode ) %]
+                       [% Branches.GetName( branchcode ) %]
+                    [% ELSE %]
+                        All libraries
+                    [% END %]
                 [% END %]
             </li>
             [% END %]
@@ -292,7 +191,7 @@ $(document).ready(function() {
                                <label for="module">Koha module:</label>
                                <input type="hidden" name="oldmodule" value="[% module %]" />
                 [% 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;">
+                  <select name="module" id="newmodule">
                 [% ELSE %]
                   <select name="module" id="module">
                 [% END %]
@@ -311,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 %]
@@ -349,8 +253,8 @@ $(document).ready(function() {
                   <input type="text" id="code" name="code" size="20" maxlength="20" value="" required="required"/>
                   <span class="required">Required</span>
               [% ELSE %]
-                  <label for="code">Code:</label>
-                  <input type="hidden" id="code" name="code" size="20" maxlength="20" value="[% code %]" required="required"/>
+                  <span class="label">Code:</span>
+                  <input type="hidden" id="code" name="code" value="[% code %]" />
                   [% code %]
               [% END %]
             </li>
@@ -359,10 +263,45 @@ $(document).ready(function() {
               <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>
-        <div id="transport-types" style="clear:both">
-        [% FOREACH letter IN letters %]
+        [% 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' %]
@@ -380,54 +319,68 @@ $(document).ready(function() {
                 [% END %]
             </h3>
             [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
-              <fieldset class="rows mtt" id="[% letter.message_transport_type %]" disabled="disabled">
+              <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 %]" disabled="disabled">
+              <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 %]">
+              <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_[% letter.message_transport_type %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type %]" 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_[% letter.message_transport_type %]">Message body:</label>
+                  <label for="SQLfieldname_[% letter.message_transport_type %]_[% lang %]">Message body:</label>
                   [% IF letter.message_transport_type == 'sms' %]
-                    <span id="sms_counter">[% IF letter.content && letter.content.length > 0 %][% letter.content.length %][% ELSE %]0[% END %]/160 characters</span>
+                    <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" id="SQLfieldname_[% letter.message_transport_type %]" multiple="multiple" size="9">
+                        <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>
-        [% END %]
+            [% END %]
+            </div>
         </div> <!-- / #transport-types -->
+        [% END %]
+        [% IF Koha.Preference('TranslateNotices') %]
+        </div>
+        [% 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>
-      <input type="hidden" name="searchfield" value="[% searchfield %]" />
+
+        <input type="hidden" id="redirect" name="redirect" value="" />
+        <input type="hidden" name="searchfield" value="[% searchfield %]" />
     </form>
 [% END %]
 
@@ -486,4 +439,219 @@ $(document).ready(function() {
     </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' %]