Bug 20969: Use modal to add and edit notes from basket

This patch modifies the acquisitions basket page so that links to add or
edit vendor or internal notes trigger a modal with the notes edit form
instead of redirecting to a different page. This is a markup change only
-- The form still submits to modordernotes.pl.

To test, apply the patch and view a basket in acquisitions which has
multiple orders. Test various note controls:  Add internal note, Add
vendor note, Edit internal note, edit vendor note.

Confirm that the operations work correctly with multiple orders in the
basket.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Charles Farmer <charles.farmer@inLibro.com>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt
index e9a94f8..a909a93 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/acqui/basket.tt
@@ -450,14 +450,14 @@
                                 [% END %]
                             </p>
                                 [% IF ( books_loo.order_internalnote ) %]
-                                    <p class="ordernote"><strong>Internal note: </strong>[% books_loo.order_internalnote|html %] [<a href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=internal">Change internal note</a>]</p>
+                                    <p class="ordernote"><strong>Internal note: </strong><span id="internal-note-[% books_loo.ordernumber %]">[% books_loo.order_internalnote|html %]</span> <a class="edit_note" data-ordernumber="[% books_loo.ordernumber %]" data-note_type="internal" href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=internal" title="Edit internal note"><i class="fa fa-pencil"></i> Edit internal note</a></p>
                                 [% ELSE %]
-                                    [<a href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=internal">Add internal note</a>]
+                                    <a class="edit_note" data-ordernumber="[% books_loo.ordernumber %]" data-note_type="internal" href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=internal" title="Add internal note"><i class="fa fa-plus"></i> Add internal note</a>
                                 [% END %]
                                 [% IF ( books_loo.order_vendornote ) %]
-                                    <p class="ordernote"><strong>Vendor note: </strong>[% books_loo.order_vendornote|html %] [<a href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=vendor">Change vendor note</a>]</p>
+                                    <p class="ordernote"><strong>Vendor note: </strong> <span id="vendor-note-[% books_loo.ordernumber %]">[% books_loo.order_vendornote|html %]</span> <a class="edit_note" data-ordernumber="[% books_loo.ordernumber %]" data-note_type="vendor" href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=vendor" title="Edit vendor note"><i class="fa fa-pencil"></i> Edit vendor note</a></p>
                                 [% ELSE %]
-                                    [<a href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=vendor">Add vendor note</a>]
+                                    <a class="edit_note" data-ordernumber="[% books_loo.ordernumber %]" data-note_type="vendor" href="/cgi-bin/koha/acqui/modordernotes.pl?ordernumber=[% books_loo.ordernumber %]&type=vendor" title="Add vendor note"><i class="fa fa-plus"></i> Add vendor note</a>
                                 [% END %]
                             [% IF (books_loo.transferred_from) %]
                               [% basket = books_loo.transferred_from.basket %]
@@ -685,6 +685,30 @@
 </div>
 </div>
 
+<!-- Modal for editing vendor and internal notes -->
+<div class="modal" id="noteEditor" tabindex="-1" role="dialog" aria-labelledby="noteEditorLabel">
+    <div class="modal-dialog" role="document">
+        <form id="modify_order_notes" action="/cgi-bin/koha/acqui/modordernotes.pl" method="post">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title" id="noteEditorLabel">Order note</h4>
+                </div>
+                <div class="modal-body">
+                <textarea id="ordernotes" name="ordernotes" rows="3" cols="30" class="focus">[% ordernotes %]</textarea>
+                <input type="hidden" id="ordernumber" name="ordernumber" value="" />
+                <input type="hidden" name="op" value="save" />
+                <input type="hidden" id="type" name="type" value="" />
+            </div>
+            <div class="modal-footer">
+                <button type="submit" class="btn btn-default">Save</button>
+                <button type="button" class="btn btn-link cancel" data-dismiss="modal">Cancel</button>
+            </div>
+        </form>
+    </div>
+</div>
+</div>
+
 [% MACRO jsinclude BLOCK %]
     [% Asset.js("js/acquisitions-menu.js") %]
 [% INCLUDE 'datatables.inc' %]
@@ -730,6 +754,28 @@
                 e.preventDefault();
                 transfer_order_popup( $(this).data("ordernumber"));
             });
+
+            $(".edit_note").on("click", function(e) {
+                e.preventDefault();
+                var ordernumber = $(this).data("ordernumber");
+                var note_type = $(this).data("note_type");
+                var modalTitle = $(this).attr("title") + " (order number " + ordernumber + ")";
+                var note_text = $( "#" + note_type + "-note-" + ordernumber ).html();
+                $("#noteEditor .modal-title").text(modalTitle);
+                $("#ordernumber").val( ordernumber );
+                $("#ordernotes").html( note_text );
+                $("#type").val( note_type );
+                $("#noteEditor").modal("show");
+            });
+
+             $("#noteEditor").on('hidden.bs.modal', function (e) {
+                $("#noteEditorLabel").html("");
+                $("#noteEditor .modal-title").text("");
+                $("#ordernotes").html( "" );
+                $("#ordernumber").val("");
+                $("#type").val("");
+            });
+
         });
     </script>