|
Lines 66-72
Link Here
|
| 66 |
</ol> |
66 |
</ol> |
| 67 |
</fieldset> |
67 |
</fieldset> |
| 68 |
[% END %] |
68 |
[% END %] |
| 69 |
[% CASE %] |
69 |
[% CASE 'add-multiple' %] |
|
|
70 |
<div id="booking_result"></div> |
| 71 |
<fieldset class="brief"> |
| 72 |
<input type="hidden" name="biblio_id" id="biblio-id" value="[% biblio.biblionumber %]"> |
| 73 |
<input type="hidden" name="start_date" id="booking-start_date" value=""> |
| 74 |
<input type="hidden" name="end_date" id="booking-end_date" value=""> |
| 75 |
<input type="hidden" id="items-hidden" name="items"> |
| 76 |
<ol> |
| 77 |
<li> |
| 78 |
<div> |
| 79 |
<label for="itemnumber">Add barcode :</label> |
| 80 |
<input type="text" id="barcode" name="barcode"> |
| 81 |
<button type="button" class="btn btn-sm btn-link" > |
| 82 |
<i class="fa fa-fw fa-plus" aria-hidden="true" onclick="addItem()"></i> |
| 83 |
</button> |
| 84 |
</div> |
| 85 |
<ul id="items-list"></ul> |
| 86 |
</li> |
| 87 |
<button type="button" id="checks_bookings" name="opac-add-multiple-check" class="btn btn-sm btn-link" style="display:none" onclick="validateItems()"> |
| 88 |
<i class="fa fa-fw fa-arrows-rotate" aria-hidden="true"></i> Validate items |
| 89 |
</button> |
| 90 |
<li> |
| 91 |
<label class="required" for="booking_pickup">Pickup at:</label> |
| 92 |
<select name="booking_pickup" id="pickup_library_id" required="required" disabled="true"></select> |
| 93 |
<span class="required">Required</span> |
| 94 |
</li> |
| 95 |
<li> |
| 96 |
<div id="period_fields"> |
| 97 |
<label class="required" for="period">Booking dates: </label> |
| 98 |
<input type="text" id="period" name="period" class="flatpickr" data-flatpickr-futuredate="true" data-flatpickr-disable-shortcuts="true" required autocomplete="off"> |
| 99 |
<span class="required">Required</span> |
| 100 |
</div> |
| 101 |
<div class="hint">Select the booking start date and end date</div> |
| 102 |
</li> |
| 103 |
</ol> |
| 104 |
</fieldset> |
| 70 |
[% END %] |
105 |
[% END %] |
| 71 |
</div> |
106 |
</div> |
| 72 |
<div class="modal-footer"> |
107 |
<div class="modal-footer"> |
|
Lines 86-89
Link Here
|
| 86 |
</div> <!-- /.modal-content --> |
121 |
</div> <!-- /.modal-content --> |
| 87 |
</form> |
122 |
</form> |
| 88 |
</div> <!-- /.modal-dialog --> |
123 |
</div> <!-- /.modal-dialog --> |
| 89 |
</div> <!-- /.modal --> |
124 |
</div> <!-- /.modal --> |
|
|
125 |
<script> |
| 126 |
function addItem() { |
| 127 |
const barcodeInput = document.getElementById('barcode'); |
| 128 |
const itemsList = document.getElementById('items-list'); |
| 129 |
const barcode = barcodeInput.value.trim(); |
| 130 |
const errorDiv = document.getElementById('booking_result'); |
| 131 |
const errorElement = document.createElement('div'); |
| 132 |
errorElement.id = 'add_booking_error'; |
| 133 |
errorElement.classList.add('alert', 'alert-danger'); |
| 134 |
const observer = new MutationObserver(function() { |
| 135 |
if (itemsList.children.length === 0) { |
| 136 |
$("#pickup_library_id").prop("disabled", true); |
| 137 |
$("#checks_bookings").hide(); |
| 138 |
|
| 139 |
} else { |
| 140 |
$("#pickup_library_id").prop("disabled", false); |
| 141 |
$("#checks_bookings").show(); |
| 142 |
} |
| 143 |
}); |
| 144 |
observer.observe(itemsList, { |
| 145 |
childList: true, |
| 146 |
subtree: true |
| 147 |
}); |
| 148 |
|
| 149 |
if (barcode) { |
| 150 |
let targetItemInList = document.getElementById('booking_item-' + barcode); |
| 151 |
if (targetItemInList) { |
| 152 |
errorElement.textContent = 'Item already in the list.'; |
| 153 |
errorDiv.appendChild(errorElement); |
| 154 |
return; |
| 155 |
} |
| 156 |
let biblioTitle; |
| 157 |
let itemRepresentation = $.ajax({ |
| 158 |
url: "/api/v1/items/?external_id=" + barcode, |
| 159 |
type: "GET", |
| 160 |
dataType: "json", |
| 161 |
success: function (response) { |
| 162 |
if (!response[0].bookable) { |
| 163 |
errorElement.textContent = 'Item not bookable'; |
| 164 |
errorDiv.replaceWith(errorElement); |
| 165 |
} else { |
| 166 |
let biblio_id = response[0].biblio_id; |
| 167 |
let item_id = response[0].item_id; |
| 168 |
let biblioRepresentation = $.ajax({ |
| 169 |
url: "/api/v1/biblios/" + biblio_id, |
| 170 |
type: "GET", |
| 171 |
dataType: "json", |
| 172 |
success: function (response) { |
| 173 |
if (response) { |
| 174 |
biblioTitle = response.title; |
| 175 |
const listItem = document.createElement('li'); |
| 176 |
listItem.setAttribute('id', 'booking_item-' + barcode); |
| 177 |
listItem.dataset.biblio_id = biblio_id; |
| 178 |
listItem.dataset.item_id = item_id; |
| 179 |
listItem.textContent = `${item_id} - ${biblioTitle} (${barcode})`; |
| 180 |
const deleteLink = document.createElement('a'); |
| 181 |
deleteLink.classList.add('fa', 'fa-fw', 'fa-times'); |
| 182 |
deleteLink.setAttribute('aria-hidden', 'true'); |
| 183 |
deleteLink.onclick = function () { |
| 184 |
deleteItem(listItem); |
| 185 |
}; |
| 186 |
listItem.appendChild(deleteLink); |
| 187 |
itemsList.appendChild(listItem); |
| 188 |
barcodeInput.value = ''; |
| 189 |
updateItemList(); |
| 190 |
} |
| 191 |
}, |
| 192 |
error: function (xhr, status, error) { |
| 193 |
errorElement.textContent = 'Fetch failed: ' + error; |
| 194 |
errorDiv.replaceWith(errorElement); |
| 195 |
}, |
| 196 |
}); |
| 197 |
} |
| 198 |
}, |
| 199 |
error: function (xhr, status, error) { |
| 200 |
errorElement.textContent = 'Fetch failed: ' + error; |
| 201 |
errorDiv.replaceWith(errorElement); |
| 202 |
}, |
| 203 |
}); |
| 204 |
} |
| 205 |
} |
| 206 |
function updateItemList() { |
| 207 |
const itemsList = document.getElementById('items-list'); |
| 208 |
const itemnumbers = []; |
| 209 |
const barcodes = itemsList.getElementsByTagName('li'); |
| 210 |
for (let barcode of barcodes) { |
| 211 |
itemnumbers.push(barcode.textContent); |
| 212 |
} |
| 213 |
const itemsHidden = document.getElementById('items-hidden'); |
| 214 |
itemsHidden.value = JSON.stringify(itemnumbers); |
| 215 |
} |
| 216 |
function deleteItem(listItem) { |
| 217 |
const itemsList = document.getElementById('items-list'); |
| 218 |
itemsList.removeChild(listItem); |
| 219 |
$('#pickup_library_id').empty(); |
| 220 |
updateItemList(); |
| 221 |
} |
| 222 |
</script> |