From 0f18c6fa4b36ad963b380cf7e5801910e93d6a3b 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.
---
 .../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 52834a6aab..b718e4ddae 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt
@@ -57,6 +57,7 @@
     </div> <!-- /.row -->
 
     [% INCLUDE modals/place_booking.inc %]
+    [% INCLUDE modals/cancel_booking.inc %]
 
     [% MACRO jsinclude BLOCK %]
     [% Asset.js("lib/dayjs/dayjs.min.js") | $raw %]
@@ -66,6 +67,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(){
@@ -132,6 +134,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.40.1