Bug 17981: Add a preview mode for notice templates
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / letter.tt
index fc5e66b..f2e3ef2 100644 (file)
 
 <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 or copy_form %]
     <div class="main container-fluid">
         <div class="row">
@@ -24,7 +42,6 @@
                 <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="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') %]
                 <li>
                   <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type %]" />
                   <input type="hidden" name="lang" value="[% lang %]" />
-                  <label for="is_html_[% letter.message_transport_type %]">HTML message:</label>
+                  <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 %]_[% lang %]" value="1" checked="checked" />
                   [% ELSE %]
                   [% END %]
                 </li>
                 <li>
-                  <label for="title_[% letter.message_transport_type %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type %]_[% lang %]" 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 class="sms_counter" id="sms_counter_[% lang %]">[% IF letter.content && letter.content.length > 0 %][% letter.content.length %][% ELSE %]0[% END %]/160 characters</span>
                   [% END %]
                     </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 %]
                     $.ajax({
                         data: { code: new_lettercode, branchcode: new_branchcode },
                         type: 'GET',
-                        url: '/cgi-bin/koha/svc/letters/',
+                        url: '/cgi-bin/koha/svc/letters/get/',
                         success: function (data) {
                              if ( data.letters.length > 0 ) {
                                  if( new_branchcode == '' ) {
                 $("#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) {