From f8d195130de31290a60cad953e4e3cc05707b36f Mon Sep 17 00:00:00 2001
From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Date: Wed, 29 Sep 2021 15:17:38 +0100
Subject: [PATCH] Bug 29002: Add ability to book material

This patch introduces a new modal to the biblio details page to allow
booking of materials.

Test plan
1) Navigate to the details page of a biblio
2) Note the new 'Place booking' button in the toolbar
3) Click the new button and note the new modal dialogue
4) Enter part of a patron name or cardnumber and then select from the
   presented results
5) Select a start date and end date from the calender
6) Submit
---
 .../prog/en/includes/cat-toolbar.inc          |   4 +
 .../prog/en/includes/modals/place_booking.inc |  42 ++++++
 .../prog/en/modules/catalogue/detail.tt       |   4 +
 .../prog/js/place_booking_modal.js            | 129 ++++++++++++++++++
 4 files changed, 179 insertions(+)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/cat-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/cat-toolbar.inc
index e194411af5..62a8736102 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/cat-toolbar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/cat-toolbar.inc
@@ -189,6 +189,8 @@
     [% END %]
 [% END %]
 
+<div class="btn-group"><button id="placbooking" class="btn btn-default" data-toggle="modal" data-target="#placeBookingModal" data-biblionumber="[% biblionumber | html %]"><i class="fa fa-calendar"></i> Place booking</button></div>
+
 [% IF Koha.Preference('ArticleRequests') %]
     <div class="btn-group"><a id="placehold" class="btn btn-default" href="/cgi-bin/koha/circ/request-article.pl?biblionumber=[% biblionumber | html %]"><i class="fa fa-file-text-o"></i> Request article</a></div>
 [% END %]
@@ -239,3 +241,5 @@
         </div>
         </div>
     </div>
+
+    [% INCLUDE modals/place_booking.inc %]
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
new file mode 100644
index 0000000000..77a2d5bda2
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
@@ -0,0 +1,42 @@
+<!-- Place booking modal -->
+<div class="modal" id="placeBookingModal" tabindex="-1" role="dialog" aria-labelledby="placeBookingLabel">
+    <form id="placeBookingForm">
+        <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="placeBookingLabel">Place booking</h4>
+                </div>
+                <div class="modal-body">
+                    <div id="booking_result"></div>
+                    <fieldset class="rows">
+                        <input type="hidden" name="biblio_id" id="booking_biblio_id">
+                        <input type="hidden" name="start_date" id="booking_start_date">
+                        <input type="hidden" name="end_date" id="booking_end_date">
+                        <ol>
+                            <li>
+                                <div class="hint">Enter patron card number or partial name:</div>
+                                <label class="required" for="booking_patron_id">Patron: </label>
+                                <select name="booking_patron_id" id="booking_patron_id" required="required">
+                                    <option></option>
+                                    [% IF patron %]
+                                    <option value="[% borrowernumber | uri %]" selected="selected">[% patron.firstname | html %] [% patron.surname %] ([% patron.cardnumber %] )</option>
+                                    [% END %]
+                                </select>
+                            </li>
+                            <li>
+                                <label class="required" for="period">Period: </label>
+                                <input type="text" id="period" name="period" class="flatpickr" required="required" disabled="true" autocomplete="off">
+                                <span class="required">Required</span>
+                            </li>
+                        </ol>
+                    </fieldset>
+                </div> <!-- /.modal-body -->
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary">Submit</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> <!-- /#placeBookingModal -->
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
index 7c2b961d6c..c47bf399cf 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
@@ -1022,6 +1022,9 @@ Note that permanent location is a code, and location may be an authval.
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
+    [% INCLUDE 'calendar.inc' %]
+    [% INCLUDE 'select2.inc' %]
+    [% INCLUDE 'js-date-format.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
     [% Asset.js("js/coce.js") | $raw %]
     [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %]
@@ -1317,6 +1320,7 @@ Note that permanent location is a code, and location may be an authval.
     [% INCLUDE 'columns_settings.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
     [% Asset.js("js/table_filters.js") | $raw %]
+    [% Asset.js("js/place_booking_modal.js") | $raw %]
     <script>
         var browser;
         browser = KOHA.browser('[% searchid | html %]', parseInt(biblionumber, 10));
diff --git a/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js b/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js
new file mode 100644
index 0000000000..93a30d8476
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/place_booking_modal.js
@@ -0,0 +1,129 @@
+function update_picker(periodPicker, biblionumber) {
+
+    // Disable input whilst we fetch dates
+    $("#period").prop('disabled', true);
+
+    // Fetch dates and re-enable input
+    $.ajax({
+        url: '/api/v1/bookings?biblio_id=' + biblionumber,
+        async: true,
+        success: function(data) {
+            var dates_to_disable = [];
+            for (booking of data) {
+                dates_to_disable.push({
+                    from: booking.start_date,
+                    to: booking.end_date
+                });
+            }
+            periodPicker.set('disable', dates_to_disable);
+            $("#period").prop('disabled', false);
+        }
+    });
+};
+
+$('#placeBookingModal').on('show.bs.modal', function(e) {
+    var button = $(e.relatedTarget);
+    var biblionumber = button.data('biblionumber');
+    $('#booking_biblio_id').val(biblionumber);
+
+    $("#booking_patron_id").select2({
+        dropdownParent: $(".modal-content", "#placeBookingModal"),
+        width: '30%',
+        dropdownAutoWidth: true,
+        allowClear: true,
+        minimumInputLength: 3,
+        ajax: {
+            url: '/api/v1/patrons',
+            delay: 250,
+            dataType: 'json',
+            data: function(params) {
+                var search_term = (params.term === undefined) ? '' : params.term;
+                var query = {
+                    'q': JSON.stringify({
+                        "-or": [
+                            {
+                                "firstname": {
+                                    "-like": search_term + '%'
+                                }
+                            },
+                            {
+                                "surname": {
+                                    "-like": search_term + '%'
+                                }
+                            },
+                            {
+                                "cardnumber": {
+                                    "-like": search_term + '%'
+                                }
+                            }
+                        ]
+                    }),
+                    '_order_by': 'firstname'
+                };
+                return query;
+            },
+            processResults: function(data) {
+                var results = [];
+                data.forEach(function(patron) {
+                    results.push({
+                        "id": patron.patron_id,
+                        "text": escape_str(patron.firstname) + " " + escape_str(patron.surname) + " (" + escape_str(patron.cardnumber) + ")"
+                    });
+                });
+                return {
+                    "results": results
+                };
+            }
+        },
+        placeholder: "Search for a patron"
+    });
+
+    var periodPicker = $("#period").flatpickr({
+        mode: "range",
+        minDate: "today",
+        dateFormat: "Y-m-d",
+        onChange: function(selectedDates) {
+            var _this = this;
+            var dateArr = selectedDates.map(function(date) {
+                return _this.formatDate(date, 'Y-m-d');
+            });
+            $('#booking_start_date').val(dateArr[0]);
+            $('#booking_end_date').val(dateArr[1]);
+        }
+    });
+
+    // Get blocked dates
+    update_picker(periodPicker, biblionumber);
+});
+
+$("#placeBookingForm").on('submit', function(e) {
+    e.preventDefault();
+
+    var url = '/api/v1/bookings';
+
+    var start_date = $datetime($('#booking_start_date').val(), {
+        dateformat: "rfc3339"
+    });
+    var end_date = $datetime($('#booking_end_date').val(), {
+        dateformat: "rfc3339"
+    });
+
+    var posting = $.post(
+        url,
+        JSON.stringify({
+            "start_date": start_date,
+            "end_date": end_date,
+            "biblio_id": $('#booking_biblio_id').val(),
+            "item_id": $('#booking_item_id').val() ? $('#booking_item_id').val() : null,
+            "patron_id": $('#booking_patron_id').find(':selected').val()
+        })
+    );
+
+    posting.done(function(data) {
+        $('#placeBookingModal').modal('hide');
+    });
+
+    posting.fail(function(data) {
+        $('#result').replaceWith('<div id="result" class="alert alert-danger">Failure</div>');
+    });
+});
-- 
2.20.1