Implement new search functionality in librarian panel

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