diff --git a/librarian/templates/librarian/base.html b/librarian/templates/librarian/base.html index 61ccedbf45e421c0031c75848f1a5e693918a780..86a34ee362636db0fb9eeaab246d5e1584759375 100644 --- a/librarian/templates/librarian/base.html +++ b/librarian/templates/librarian/base.html @@ -20,9 +20,19 @@ <i class="bi bi-upc"></i> </a> </div> - <form class="d-flex px-2" role="search" action="{% url "librarian:search_all" %}"> - <input class="form-control me-2" type="search" placeholder="Search anything..." aria-label="Search" name="q"> - <button class="btn btn-outline-success" type="submit">Search</button> + <div class="d-flex px-2" role="search"> + <select id="search-type" class="form-select me-2" aria-label="Search Type"> + <option value="all" selected>Everything</option> + <option value="jump_copy">Quick Copy</option> + <option value="jump_patron">Quick Patron</option> + </select> + <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="search-q"> + <button class="btn btn-outline-success" id="search-submit">Search</button> + </div> + + <form id="form-search-everything" action="{% url 'librarian:search_all' %}"> + <input type="hidden" name="search-type" id="search-type-hidden"> + <input type="hidden" name="search-q" id="search-q-hidden"> </form> {% endblock %} @@ -31,8 +41,112 @@ {{ block.super }} <script> + // Tooltip Initialisation const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); </script> + <script> + // Search Box JS + + function updatePlaceholder(selectedType) { + let placeholderText; + switch(selectedType) { + case 'all': + placeholderText = "Search everything..."; + break; + case 'jump_copy': + placeholderText = "Scan copy barcode..."; + break; + case 'jump_patron': + placeholderText = "Scan patron barcode..."; + break; + default: + placeholderText = "Invalid search type!"; + } + + $("#search-q").attr("placeholder", placeholderText); + } + + function getSearchType() { + const searchType = localStorage.getItem('searchType'); + if (searchType === null) { + // If no search type is found in local storage, set it to 'all' + localStorage.setItem('searchType', 'all'); + } + return searchType ? searchType : 'all'; + } + + $("#search-type").on("change", function() { + const selectedType = $(this).val(); + localStorage.setItem('searchType', selectedType); + + // Update the search placeholder based on the selected type + updatePlaceholder(selectedType); + }); + + $("#search-submit").on("click", function() { + const searchType = $("#search-type").val(); + const searchQuery = $("#search-q").val(); + + if (searchType === 'all') { + // Set the hidden inputs in the form + $("#search-type-hidden").val(searchType); + $("#search-q-hidden").val(searchQuery); + + // Submit the form + $("#form-search-everything").submit(); + + } else if (searchType === 'jump_copy') { + // Perform an AJAX request to get the copy details + const assnNo = searchQuery.trim(); + $.ajax(`{% url "api:copy-by-assn" %}${assnNo}/`, { + dataType: "json", + success: (data) => { + window.location.href = `{% url "librarian:copy_detail" %}${data.id}?quick`; + }, + error: (e) => { + console.error(e); + alert("Copy not found"); + } + }); + + } else if (searchType === 'jump_patron') { + const bcid = searchQuery.trim(); + $.ajax(`{% url "api:user-by-cardno" %}${bcid}/`, { + dataType: "json", + success: (data) => { + window.location.href = `{% url "librarian:user_detail" %}${data.id}?quick`; + }, + error: (e) => { + console.error(e); + alert("Patron not found"); + } + }); + } + }); + + // Submit on enter + $("#search-q").on("keyup", (e) => { + if (e.keyCode === 13) { + $("#search-submit").click(); + } + }); + + $(document).ready(function() { + // Get search type currently in local storage + let searchType = getSearchType(); + + // Set the selected option in the dropdown + $('#search-type').val(searchType); + updatePlaceholder(searchType); + + const urlParams = new URLSearchParams(window.location.search); + if(urlParams.has("quick")) { + $("#search-q").focus(); + } + + }); + </script> + {% endblock %} \ No newline at end of file