From 3475ef06d482657733ab57d15fa1f6e3d8b88c93 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.

Sponsored-by: Cuyahoga County Public Library <https://cuyahogalibrary.org/>
Signed-off-by: Kristi Krueger <KKRUEGER@cuyahogalibrary.org>
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
---
 .../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 873d97e68e..f9b662b5a1 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 444dcd002b..45f5638c4f 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.5