From cfd28e1a735148ff32af60cd31ce3a2a648f01c1 Mon Sep 17 00:00:00 2001
From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Date: Wed, 27 Mar 2024 22:04:07 +0000
Subject: [PATCH] Bug 34440: Add itemtype selection to bookings modal

Whilst we still don't need to know the specific item we will need to
know the itemtype to be able to fetch the correct circulation rules for
adjusting the datepicker with lead and trail times.

This patch adds such a picker option. You should be able to select the
item or itemtype in either order.. selecting itemtype first will limit
the items list to options available (and 'Any item').. upon selecting a
specific item the itemtype selector should become disabled and reflect
the itemtype of the item selected.
---
 .../prog/en/includes/modals/place_booking.inc |  9 ++
 .../prog/js/modals/place_booking.js           | 88 ++++++++++++++++++-
 2 files changed, 95 insertions(+), 2 deletions(-)

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
index 56c5302dd3e..cc16fc0bed6 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/modals/place_booking.inc
@@ -1,3 +1,4 @@
+[% USE ItemTypes %]
 <!-- Place booking modal -->
 <div class="modal" id="placeBookingModal" tabindex="-1" role="dialog" aria-labelledby="placeBookingLabel">
     <form method="get" id="placeBookingForm">
@@ -30,6 +31,14 @@
                                 <select name="booking_pickup" id="pickup_library_id" required="required" disabled="disabled"></select>
                                 <span class="required">Required</span>
                             </li>
+                            <li>
+                                <label for="booking_itemtype">Itemtype: </label>
+                                [% SET itemtypes = ItemTypes.Get() %]
+                                <select id="booking_itemtype" name="booking_itemtype" disabled="true">
+                                    [% FOREACH itemtype IN itemtypes %]
+                                        <option value="[% itemtype.itemtype | html %]">[% itemtype.description | html%]</option>
+                                    [% END %]
+                                </select>
                             <li>
                             <label for="booking_item_id">Item: </label>
                                 <select name="booking_item_id" id="booking_item_id" disabled="disabled">
diff --git a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js
index 99b1b6ddf22..e1efaf353da 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js
@@ -180,6 +180,16 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
         }
     }
 
+    // Itemtype select2
+    $("#booking_itemtype").select2({
+        dropdownParent: $(".modal-content", "#placeBookingModal"),
+        width: "50%",
+        allowClear: true,
+        dropdownAutoWidth: true,
+        minimumResultsForSearch: 20,
+        placeholder: __("Item type"),
+    });
+
     // Item select2
     $("#booking_item_id").select2({
         dropdownParent: $(".modal-content", "#placeBookingModal"),
@@ -227,6 +237,13 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
         if ($bookingItemSelect.data("loaded")) {
             $bookingItemSelect.prop("disabled", false);
         }
+
+        // Enable itemtype selection if item data if also fetched
+        let $bookingItemtypeSelect = $("#booking_itemtype");
+        $bookingItemtypeSelect.data("patron", true);
+        if ($bookingItemtypeSelect.data("loaded")) {
+            $bookingItemtypeSelect.prop("disabled", false);
+        }
     });
 
     // Adopt periodPicker
@@ -285,8 +302,10 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
                 // Total bookable items
                 let bookable = 0;
 
+                let itemtypes = new Set();
                 for (item of bookable_items) {
                     bookable++;
+
                     // Populate item select (NOTE: Do we still need this check for pre-existing select option here?)
                     if (
                         !$("#booking_item_id").find(
@@ -301,12 +320,28 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
                             false
                         );
                         newOption.setAttribute("data-available", true);
+                        newOption.setAttribute(
+                            "data-itemtype",
+                            item.effective_item_type_id
+                        );
 
                         // Append it to the select
                         $("#booking_item_id").append(newOption);
                     }
+
+                    // Build list of itemtypes
+                    itemtypes.add(item.effective_item_type_id);
                 }
 
+                // Filter itemtypes
+                $("#booking_itemtype option").each(function () {
+                    const optionValue = $(this).val();
+                    if (!itemtypes.has(optionValue)) {
+                        $(this).remove();
+                    }
+                });
+                $("#booking_itemtype").trigger("change");
+
                 // Set disable function for periodPicker
                 let disableExists = periodPicker.config.disable.filter(
                     f => f.name === "dateDisable"
@@ -487,6 +522,32 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
                     });
                 }
 
+                // Setup listener for itemtype select2
+                $("#booking_itemtype").on("select2:select", function (e) {
+                    effective_itemtype = e.params.data.id
+                        ? e.params.data.id
+                        : null;
+
+                    // Disable items not of this itemtype
+                    $("#booking_item_id > option").each(function () {
+                        let option = $(this);
+                        if (option.val() != 0) {
+                            let item_itemtype = option.data("itemtype");
+                            if (item_itemtype == effective_itemtype) {
+                                if (
+                                    option.data("available") &&
+                                    option.data("pickup")
+                                ) {
+                                    option.prop("disabled", false);
+                                }
+                            } else {
+                                option.prop("disabled", true);
+                            }
+                        }
+                    });
+                    $("#booking_item_id").trigger("change.select2");
+                });
+
                 // Setup listener for item select2
                 $("#booking_item_id").on("select2:select", function (e) {
                     booking_item_id = e.params.data.id
@@ -518,6 +579,17 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
                     // Disable patron selection change
                     $("#booking_patron_id").prop("disabled", true);
 
+                    // handle itemtype picker
+                    if (booking_item_id != 0) {
+                        let itemtype = e.params.data.element.dataset.itemtype;
+
+                        $("#booking_itemtype").val(itemtype);
+                        $("#booking_itemtype").trigger("change.select2");
+                        $("#booking_itemtype").prop("disabled", true);
+                    } else {
+                        $("#booking_itemtype").prop("disabled", false);
+                    }
+
                     // redraw pariodPicker taking selected item into account
                     periodPicker.redraw();
                 });
@@ -691,7 +763,15 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
                 periodPicker.redraw();
                 $("#period_fields :input").prop("disabled", false);
 
-                // Redraw select with new options and enable
+                // Redraw itemtype select with new options and enable
+                let $bookingItemtypeSelect = $("#booking_itemtype");
+                $bookingItemtypeSelect.trigger("change");
+                $bookingItemtypeSelect.data("loaded", true);
+                if ($bookingItemtypeSelect.data("patron")) {
+                    $bookingItemtypeSelect.prop("disabled", false);
+                }
+
+                // Redraw item select with new options and enable
                 let $bookingItemSelect = $("#booking_item_id");
                 $bookingItemSelect.trigger("change");
                 $bookingItemSelect.data("loaded", true);
@@ -940,10 +1020,14 @@ $("#placeBookingModal").on("hidden.bs.modal", function (e) {
     $("#booking_patron_id").prop("disabled", false);
     booking_patron = undefined;
 
-    // Restet item select
+    // Reset item select
     $("#booking_item_id").val(0).trigger("change");
     $("#booking_item_id").prop("disabled", true);
 
+    // Reset itemtype select
+    $("#booking_itemtype").val(0).trigger("change");
+    $("#booking_itemtype").prop("disabled", true);
+
     // Reset pickup library select
     $("#pickup_library_id").val(null).trigger("change");
     $("#pickup_library_id").empty();
-- 
2.39.2