From 21fb4634455607f48bd89e1379393b78e0880d74 Mon Sep 17 00:00:00 2001
From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Date: Wed, 8 Dec 2021 14:59:17 +0000
Subject: [PATCH] Bug 29002: Add modal based booking cancellation

This patch adds a modal based booking cancellation flow to the biblio
bookings display tab page.

Test plan
1) Follow the test plans for the previous patches
2) Note a new column now appears in the bookings table with a 'Cancel'
   action button against each booking
3) Cancel one of the bookings using the new cancel button
4) A modal dialog should appear allowing you to continue with the
   cancelation or cancel
5) Confirm the cancelled booking is removed from the bookings table
6) Sign off

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Janet McGowan <janet.mcgowan@ptfs-europe.com>
Signed-off-by: Caroline Cyr La Rose <caroline.cyr-la-rose@inlibro.com>
Signed-off-by: Laurence Rault <laurence.rault@biblibre.com>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../en/includes/modals/cancel_booking.inc     | 22 +++++++++++++++
 .../prog/en/modules/bookings/list.tt          | 12 ++++++++
 .../prog/js/cancel_booking_modal.js           | 28 +++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/modals/cancel_booking.inc
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/cancel_booking_modal.js

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/modals/cancel_booking.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/cancel_booking.inc
new file mode 100644
index 0000000000..3e54718311
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/cancel_booking.inc
@@ -0,0 +1,22 @@
+<!-- Cancel booking modal -->
+<div class="modal" id="cancelBookingModal" tabindex="-1" role="dialog" aria-labelledby="cancelBookingLabel">
+    <form id="cancelBookingForm">
+        <div class="modal-dialog" role="document">
+            <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="cancelBookingLabel">Cancel booking</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="cancel_booking_result"></div>
+                    <input type="hidden" name="booking_id" id="cancel_booking_id">
+                    <p>Are you sure you want to cancel this booking?</p>
+                </div> <!-- /.modal-body -->
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-danger">Confirm</button>
+                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                </div> <!-- /.modal-footer -->
+            </div> <!-- /.modal-content -->
+        </div> <!-- /.modal-dialog -->
+    </form>
+</div> <!-- /#cancelBookingModal -->
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
index a0b61bc34d..34ba2c655a 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
@@ -52,6 +52,7 @@
         </div> <!-- /.col-sm-2.col-sm-pull-10 -->
     </div> <!-- /.row -->
 
+    [% INCLUDE modals/cancel_booking.inc %]
 
     [% MACRO jsinclude BLOCK %]
     [% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
@@ -61,6 +62,7 @@
     [% INCLUDE 'select2.inc' %]
     [% INCLUDE 'js-date-format.inc' %]
     [% Asset.js("js/place_booking_modal.js") | $raw %]
+    [% Asset.js("js/cancel_booking_modal.js") | $raw %]
 <script>
     var bookings_table;
     $(document).ready(function(){
@@ -127,6 +129,16 @@
                 "render": function(data, type, row, meta) {
                     return $date(row.end_date);
                 }
+            },
+            {
+                "data": "",
+                "title": "Actions",
+                "searchable": false,
+                "orderable": false,
+                "render": function(data, type, row, meta) {
+                    var result = '<button type="button" class="btn btn-default btn-xs cancel-action" data-toggle="modal" data-target="#cancelBookingModal" data-booking="'+row.booking_id+'"><i class="fa fa-trash" aria-hidden="true"></i> '+_("Cancel")+'</button>';
+                    return result;
+                }
             }]
         }, [], 1);
     });
diff --git a/koha-tmpl/intranet-tmpl/prog/js/cancel_booking_modal.js b/koha-tmpl/intranet-tmpl/prog/js/cancel_booking_modal.js
new file mode 100644
index 0000000000..627bdfdc72
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/cancel_booking_modal.js
@@ -0,0 +1,28 @@
+$('#cancelBookingModal').on('show.bs.modal', function(e) {
+    var button = $(e.relatedTarget);
+    var booking = button.data('booking');
+    $('#cancel_booking_id').val(booking);
+});
+
+$("#cancelBookingForm").on('submit', function(e) {
+    e.preventDefault();
+
+    var booking_id = $('#cancel_booking_id').val();
+    var url = '/api/v1/bookings/'+booking_id;
+
+    var deleting = $.ajax({
+        'method': "DELETE",
+        'url': url
+    });
+
+    deleting.done(function(data) {
+        if (bookings_table) {
+            bookings_table.api().ajax.reload();
+        }
+        $('#cancelBookingModal').modal('hide');
+    });
+
+    deleting.fail(function(data) {
+        $('#cancel_booking_result').replaceWith('<div id="booking_result" class="alert alert-danger">Failure</div>');
+    });
+});
-- 
2.39.5