From ccb8c4d11056d61860b73278b490efa65816997b Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Fri, 31 Jan 2025 19:28:08 +0000
Subject: [PATCH] separate jsp and css

---
 .../components/header/HeaderQuickSearch.jsx   | 30 +++++--
 frontend/src/css/dropdown.css                 |  6 ++
 src/main/webapp/css/header.css                | 89 +++++++++++++++++++
 src/main/webapp/header.jsp                    | 69 +++++++-------
 4 files changed, 150 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/header/HeaderQuickSearch.jsx b/frontend/src/components/header/HeaderQuickSearch.jsx
index f9addba82d..d88bca05d4 100644
--- a/frontend/src/components/header/HeaderQuickSearch.jsx
+++ b/frontend/src/components/header/HeaderQuickSearch.jsx
@@ -1,13 +1,16 @@
 
 import React, { useState } from "react";
-import { Col, Dropdown, FormControl } from "react-bootstrap";
+import { Dropdown, FormControl } from "react-bootstrap";
 import MainButton from "../MainButton";
 import { FormattedMessage } from "react-intl";
 import ThemeColorContext from "../../ThemeColorProvider";
+import { useNavigate } from "react-router-dom";
 
 export default function HeaderQuickSearch() {
     const [search, setSearch] = useState("");
+    const navigate = useNavigate();
     const [searchResults, setSearchResults] = useState([{
+        uuid: "5a746580-df85-40cd-976f-ae0d53155ec4",
         name: "5a746580-df85-40cd-976f-ae0d53155ec4",
         species: "Species 1",
     }, {
@@ -16,22 +19,22 @@ export default function HeaderQuickSearch() {
     }, {
         name: "Name 3",
         species: "Species 3",
-    },{
+    }, {
         name: "Name 3",
         species: "Species 3",
-    },{
+    }, {
         name: "Name 3",
         species: "Species 3",
-    },{
+    }, {
         name: "Name 3",
         species: "Species 3",
-    },{
+    }, {
         name: "Name 3",
         species: "Species 3",
-    },{
+    }, {
         name: "Name 3",
         species: "Species 3",
-    },{
+    }, {
         name: "Name 3",
         species: "Species 3",
     },
@@ -40,7 +43,7 @@ export default function HeaderQuickSearch() {
         species: "Species 3",
     },
 
-]);
+    ]);
     const [showDropdown, setShowDropdown] = useState(false);
     const theme = React.useContext(ThemeColorContext);
 
@@ -99,7 +102,16 @@ export default function HeaderQuickSearch() {
                     maxHeight: "400px",
                 }}>
                     {searchResults.map((result, index) => (
-                        <Dropdown.Item key={index}>
+                        <Dropdown.Item key={index}
+                            as="button"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            onMouseDown={(e) => {
+                                e.preventDefault();
+                                console.log("clicked", result);
+                                navigate(`/individuals&id=${result.uuid || result.id}`);
+                            }}
+                        >
                             <div className="d-flex flex-row justify-content-between">
                                 <div className="individual-name" style={{
                                     width: "180px",
diff --git a/frontend/src/css/dropdown.css b/frontend/src/css/dropdown.css
index 3f6bda51cc..6f5711a806 100644
--- a/frontend/src/css/dropdown.css
+++ b/frontend/src/css/dropdown.css
@@ -77,4 +77,10 @@
   .site-name {
       display: none !important;
   }
+}
+
+.header-quick-search-input::placeholder {
+  color: gray; 
+  opacity: 0.6; 
+  font-size: 0.9rem;
 }
\ No newline at end of file
diff --git a/src/main/webapp/css/header.css b/src/main/webapp/css/header.css
index 9089f03a78..9c4b3d6f1d 100644
--- a/src/main/webapp/css/header.css
+++ b/src/main/webapp/css/header.css
@@ -399,6 +399,95 @@
   .container {
     padding-left: 5px;
   }
+}
+
+
+#quick-search-input{
+  background-color: transparent; 
+  border: none; 
+  color: white; 
+  width: 100%; 
+  height: 100%; 
+  outline: none; 
+  border-radius: 20px; 
+  padding: 0 10px;
+}
+
+#quick-search-clear{
+  color: white; 
+  cursor: pointer; 
+  font-size: 1.2rem; 
+  padding: 0 5px; 
+  position: absolute; 
+  right: 5px; 
+  top: 0; 
+  height: 100%; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center;
+}
+
+#quick-search-results{
+  position: absolute; 
+  top: 50px; left: 0; 
+  width: 300px; 
+  background-color: white; 
+  max-height: 300px; 
+  overflow: auto; 
+  display: none; 
+  border-radius: 5px; 
+  color: black; 
+  padding: 10px
+}
+
+.search-box{
+  background-color: transparent; 
+  border: 1px solid white; 
+  border-radius: 20px; 
+  color: white; 
+  height: 33px; 
+  width: 150px; 
+  position: relative; 
+  display: flex; 
+}
+
+.quick-search-wrapper{
+  display: flex; 
+  justify-content: center; 
+  align-items: center; 
+  margin: 0 10px; 
+  position: relative;
+}
 
+.quick-search-result{
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+  align-items: center; 
+  padding-left: 10px; 
+  border-bottom: 1px solid #ddd
+}
+
+.quick-search-result-content{
+  display: flex; 
+  flex-direction: column;
+}
+
+.quick-search-result-value{
+  color: black; 
+  width: 180px; 
+  overflow: hidden;
+}
+
+.quick-search-result-species {
+  color: black;
+}
 
+.quick-search-result-context{
+  height: 25px; width: 100px; 
+  background-color: #00ACCE; 
+  border-radius: 4px; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center
 }
\ No newline at end of file
diff --git a/src/main/webapp/header.jsp b/src/main/webapp/header.jsp
index d7bffeb6dc..5614db6d1c 100755
--- a/src/main/webapp/header.jsp
+++ b/src/main/webapp/header.jsp
@@ -230,12 +230,14 @@ if(request.getUserPrincipal()!=null){
           const resultsDropdown = document.getElementById("quick-search-results");
 
           // Event listener for input changes
+          searchInput.addEventListener("focus", function() {
+            resultsDropdown.style.display = "block";
+            resultsDropdown.innerHTML = "Your search results will appear here.";
+          });
           searchInput.addEventListener("input", function() {
-            console.log("Input changed");
             const query = searchInput.value;
             resultsDropdown.style.display = "block";
-            if (query.length > 0) {
-
+            
               console.log("Query: ", query);
               //$.ajax({
                 //url: wildbookGlobals.baseUrl + '../quickSearch',
@@ -315,33 +317,39 @@ if(request.getUserPrincipal()!=null){
                   context: "Context 5",
                 },
               ];
-              resultsDropdown.innerHTML = datas.map(data => {
-                const { id, value, species, context } = data;
-                console.log("value: ", JSON.stringify(value));
-                return '<a href="<%=urlLoc %>/react/individual/' + data.id +'">' +
-                  '<div class="search-result" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; paddingLeft: 10px; border-bottom: 1px solid #ddd">' +
-                  '<div class="search-result-content" style="display: flex; flex-direction: column;"> ' + 
-                  '<div class="search-result-value" style="color: black; width: 180px; overflow: hidden;">'+ data.value +'</div>' +
-                  '<div class="search-result-species" style="color: black">'+ data.species +'</div></div>' +
-                  '<div class="search-result-context" style="height: 25px; width: 100px; background-color: #00ACCE; border-radius: 4px; display: flex; align-items: center; justify-content: center">'+ data.context +'</div></div>' + 
-                '</a>' ;
-              }).join("");
-            } else {
-              resultsDropdown.innerHTML = "Your search results will appear here.";
-            } 
-            
+
+              if(datas.length > 0) {
+                resultsDropdown.innerHTML = datas.map(data => {
+                  const { id, value, species, context } = data;
+                  console.log("value: ", JSON.stringify(value));
+                  return '<a href="<%=urlLoc %>/individuals.jsp&id=' + data.id +'" target="_blank">' +
+                    '<div class="quick-search-result">' +
+                    '<div class="quick-search-result-content">' + 
+                    '<div class="quick-search-result-value">'+ data.value +'</div>' +
+                    '<div class="quick-search-result-species">'+ data.species +'</div></div>' +
+                    '<div class="quick-search-result-context">'+ data.context +'</div></div>' + 
+                  '</a>' ;
+                }).join("");
+              }
+              else {
+                resultsDropdown.innerHTML = "No matching results.";
+              }
           });
 
           // Event listener for close button
           closeButton.addEventListener("click", function() {
             searchInput.value = "";
-            resultsDropdown.innerHTML = "";
+            resultsDropdown.style.display = "none";
           });
          
           // Event listener to close dropdown when clicking outside
           document.addEventListener("click", function(event) {
-            if (!event.target.closest(".search-wrapper")) {
-              resultsDropdown.innerHTML = "";
+          const searchInput = document.getElementById("quick-search-input");
+          const resultsDropdown = document.getElementById("quick-search-results");
+
+          if (!searchInput.contains(event.target) && !resultsDropdown.contains(event.target)) {
+            resultsDropdown.style.display = "none";
+            searchInput.value = "";
             }
           });
         });
@@ -654,26 +662,17 @@ if(request.getUserPrincipal()!=null){
                       </li>
 
                      <% if(user != null && !loggingOut){ %>
-                      <div class="search-wrapper w-100"
-                        style="display: flex; justify-content: center; align-items: center; margin: 0 10px; position: relative;"
-                      >
-                        <div class="search-box"
-                          style="background-color: transparent; border: 1px solid white; border-radius: 20px; color: white; height: 33px; width: 150px; position: relative; display: flex; "
-                        >
+                      <div class="quick-search-wrapper w-100">
+                        <div class="search-box">
                           <input 
                             type="text" 
                             id="quick-search-input" 
-                            placeholder="<%=props.getProperty("search")%>" 
-                            style="background-color: transparent; border: none; color: white; width: 100%; height: 100%; outline: none; border-radius: 20px; padding: 0 10px;"
+                            placeholder="<%=props.getProperty("search")%>"                             
                             autocomplete="off" 
                           />
-                          <span 
-                            id="quick-search-clear"
-                            style="color: white; cursor: pointer; font-size: 1.2rem; padding: 0 5px; position: absolute; right: 5px; top: 0; height: 100%; display: flex; align-items: center; justify-content: center;">
-                              &times;
-                          </span>
+                          <span id="quick-search-clear"> &times;</span>
                         </div>
-                        <div id="quick-search-results" style="position: absolute; top: 50px; left: 0; width: 300px; background-color: white; height: 300px; overflow: auto; display: none; border-radius: 5px; color: black; padding: 10px"></div>
+                        <div id="quick-search-results"></div>
                       </div>
                       <% } %>