916 header quick search

frontend/src/components/AuthenticatedAppHeader.jsx

@@ -8,6 +8,7 @@ import AvatarAndUserProfile from "./header/AvatarAndUserProfile";
 import Menu from "./header/Menu";
 import FooterVisibilityContext from "../FooterVisibilityContext";
 import Logo from "./svg/Logo";
+import HeaderQuickSearch from "./header/HeaderQuickSearch";
 
 export default function AuthenticatedAppHeader({
   username,
@@ -37,7 +38,7 @@ export default function AuthenticatedAppHeader({
         className="container"
         style={{
           height: "50px",
-          paddingLeft: "5%",
+          paddingLeft: 0,
           paddingRight: "5%",
         }}
       >
@@ -60,7 +61,7 @@ export default function AuthenticatedAppHeader({
               href="/"
             >
               <Logo />
-              {process.env.SITE_NAME}
+              <span className="site-name">{process.env.SITE_NAME}</span>
             </Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
@@ -78,6 +79,7 @@ export default function AuthenticatedAppHeader({
                   showClassicEncounterSearch={showClassicEncounterSearch}
                 />
               </Nav>
+              <HeaderQuickSearch />
               <NotificationButton
                 collaborationTitle={collaborationTitle}
                 collaborationData={collaborationData}

frontend/src/components/header/AvatarAndUserProfile.jsx

@@ -30,7 +30,7 @@ export default function AvatarAndUserProfile({ avatar }) {
   };
 
   return (
-    <Nav style={{ alignItems: "center", marginLeft: "20px", width: 50 }}>
+    <Nav style={{ alignItems: "center", marginLeft: "5px", width: 50 }}>
       <NavDropdown
         title={<Avatar avatar={avatar} />}
         id="basic-nav-dropdown"

frontend/src/components/header/HeaderQuickSearch.jsx

@@ -0,0 +1,150 @@
+import React, { useState, useContext } from "react";
+import { Dropdown, FormControl, Spinner } from "react-bootstrap";
+import MainButton from "../MainButton";
+import { FormattedMessage } from "react-intl";
+import ThemeColorContext from "../../ThemeColorProvider";
+import usePostHeaderQuickSearch from "../../models/usePostHeaderQuickSearch";
+
+export default function HeaderQuickSearch() {
+  const [search, setSearch] = useState("");
+  const [showDropdown, setShowDropdown] = useState(false);
+  const theme = useContext(ThemeColorContext);
+
+  const { searchResults, loading } = usePostHeaderQuickSearch(search);
+
+  const handleInputChange = (e) => {
+    setSearch(e.target.value);
+  };
+
+  const handleClearSearch = () => {
+    setSearch(""); //
+    setShowDropdown(false);
+  };
+
+  return (
+    <div className="header-quick-search">
+      <Dropdown show={showDropdown} onBlur={() => setShowDropdown(false)}>
+        <div className="d-flex">
+          <FormControl
+            type="text"
+            placeholder="Search Individuals"
+            value={search}
+            onChange={handleInputChange}
+            onFocus={() => setShowDropdown(true)}
+            style={{
+              height: "35px",
+              width: "150px",
+              paddingLeft: "10px",
+              backgroundColor: "transparent",
+              border: "1px solid white",
+              borderRadius: "20px 0px 0px 20px",
+              color: "white",
+              borderRight: "none",
+            }}
+            className="header-quick-search-input"
+          />
+          <button
+            className="header-quick-search-button"
+            style={{
+              height: "35px",
+              backgroundColor: "transparent",
+              border: "1px solid white",
+              borderRadius: "0px 20px 20px 0px",
+              color: "white",
+              borderLeft: "none",
+            }}
+            onClick={handleClearSearch}
+          >
+            <i className="bi bi-x"></i>
+          </button>
+        </div>
+
+        <Dropdown.Menu
+          style={{
+            width: "300px",
+            marginTop: "10px",
+            overflow: "auto",
+            maxHeight: "400px",
+            minHeight: "100px",
+          }}
+        >
+          {loading && (
+            <Dropdown.Item className="text-center">
+              <Spinner animation="border" size="sm" />
+              <span className="ms-2">
+                <FormattedMessage id="LOADING" />
+              </span>
+            </Dropdown.Item>
+          )}
+          {!loading && searchResults.length === 0 && search.trim() === "" && (
+            <Dropdown.Item>
+              <FormattedMessage id="SEARCH_RESULT_DISPLAY" />
+            </Dropdown.Item>
+          )}
+          {!loading && searchResults.length === 0 && search.trim() !== "" && (
+            <Dropdown.Item>
+              <FormattedMessage id="NO_MATCHING_RESULTS" />
+            </Dropdown.Item>
+          )}
+          {!loading &&
+            searchResults.map((result, index) => (
+              <React.Fragment key={index}>
+                <Dropdown.Item
+                  key={index}
+                  as="button"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    window.open(`/individuals.jsp?id=${result.id}`);
+                  }}
+                >
+                  <div className="d-flex flex-row justify-content-between">
+                    <div
+                      className="individual-name"
+                      style={{
+                        width: "180px",
+                        fontSize: "0.8rem",
+                        overflow: "hidden",
+                      }}
+                    >
+                      <div>{search}</div>
+                      <div>{result.taxonomy}</div>
+                    </div>
+                    <MainButton
+                      noArrow={true}
+                      style={{
+                        width: "80px",
+                        height: "30px",
+                        color: "white",
+                        fontSize: "0.8rem",
+                        marginRight: 0,
+                      }}
+                      backgroundColor={theme.primaryColors.primary500}
+                    >
+                      <FormattedMessage
+                        id={
+                          result?.id
+                            ?.toLowerCase()
+                            .includes(search.toLowerCase())
+                            ? "SYSTEM_ID"
+                            : result?.names?.some((name) =>
+                                  name
+                                    .toLowerCase()
+                                    .includes(search.toLowerCase()),
+                                )
+                              ? "FILTER_NAME"
+                              : "UNKNOWN"
+                        }
+                      />
+                    </MainButton>
+                  </div>
+                  {index < searchResults.length - 1 && <Dropdown.Divider />}
+                </Dropdown.Item>
+              </React.Fragment>
+            ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+}

frontend/src/components/header/Menu.jsx

@@ -43,8 +43,8 @@ export default function Menu({
             style={{
               color: "white",
               boxSizing: "border-box",
-              paddingLeft: 5,
-              paddingRight: 5,
+              paddingLeft: 2,
+              paddingRight: 2,
               borderBottom:
                 dropdownBorder[`dropdown${idx + 1}`] || "2px solid transparent",
             }}

frontend/src/components/navBar/NotificationButton.jsx

@@ -20,7 +20,7 @@ const NotificationButton = ({
       style={{
         width: "35px",
         height: "35px",
-        marginLeft: "20px",
+        marginLeft: "5px",
         position: "relative",
       }}
       tabIndex={0}

frontend/src/css/dropdown.css

@@ -71,4 +71,16 @@
 
 .nav-item>a {
   padding: 0.5rem 1rem;
+}
+
+@media (max-width: 1100px) {
+  .site-name {
+      display: none !important;
+  }
+}
+
+.header-quick-search-input::placeholder {
+  color: gray; 
+  opacity: 0.6; 
+  font-size: 0.9rem;
 }

frontend/src/locale/de.json

@@ -359,5 +359,10 @@
     "BEARING": "Peilung",
     "DISTANCE": "Entfernung",
     "FILTER_BIRTH" : "Geburt",
-    "FILTER_DEATH" : "Tod"
-}
+    "FILTER_DEATH" : "Tod",
+    "NO_MATCHING_RESULTS": "Keine passenden Ergebnisse",
+    "SYSTEM_ID": "System-ID",
+    "SEARCH_INDIVIDUALS": "Individuen suchen",
+    "SEARCH_RESULT_DISPLAY" : "Ihre Suchergebnisse werden hier angezeigt.",
+    "UNKNOWN" : "Unbekannt"
+}

frontend/src/locale/en.json

@@ -359,5 +359,11 @@
     "BEARING" : "Bearing",
     "DISTANCE" : "Distance",
     "FILTER_BIRTH" : "Birth",
-    "FILTER_DEATH" : "Death"
+    "FILTER_DEATH" : "Death",
+    "NO_MATCHING_RESULTS": "No matching results",
+    "SYSTEM_ID": "System ID",
+    "SEARCH_INDIVIDUALS": "Search Individuals",
+    "SEARCH_RESULT_DISPLAY" : "Your search results will appear here",
+    "UNKNOWN" : "Unknown"
+
 }

frontend/src/locale/es.json

@@ -358,5 +358,10 @@
     "BEARING": "Rumbo",
     "DISTANCE": "Distancia",
     "FILTER_BIRTH" : "Nacimiento",
-    "FILTER_DEATH" : "Muerte"
+    "FILTER_DEATH" : "Muerte",
+    "NO_MATCHING_RESULTS": "No hay resultados coincidentes",
+    "SYSTEM_ID": "ID del Sistema",
+    "SEARCH_INDIVIDUALS": "Buscar Individuos",
+    "SEARCH_RESULT_DISPLAY": "Tus resultados de búsqueda aparecerán aquí.",
+    "UNKNOWN" : "Desconocido"
 }

frontend/src/locale/fr.json

@@ -358,5 +358,10 @@
     "BEARING": "Cap",
     "DISTANCE": "Distance",
     "FILTER_BIRTH" : "Naissance",
-    "FILTER_DEATH" : "Décès"
+    "FILTER_DEATH" : "Décès",
+    "NO_MATCHING_RESULTS": "Aucun résultat correspondant",
+    "SYSTEM_ID": "ID du Système",
+    "SEARCH_INDIVIDUALS": "Rechercher des Individus",
+    "SEARCH_RESULT_DISPLAY": "Vos résultats de recherche apparaîtront ici",
+    "UNKNOWN" : "Inconnu"
 }

frontend/src/locale/it.json

@@ -358,5 +358,10 @@
     "BEARING": "Direzione",
     "DISTANCE": "Distanza",
     "FILTER_BIRTH" : "Nascita",
-    "FILTER_DEATH" : "Morte"
+    "FILTER_DEATH" : "Morte",
+    "NO_MATCHING_RESULTS": "Nessun risultato corrispondente",
+    "SYSTEM_ID": "ID di sistema",
+    "SEARCH_INDIVIDUALS": "Cerca individui",
+    "SEARCH_RESULT_DISPLAY": "I tuoi risultati di ricerca appariranno qui",
+    "UNKNOWN" : "Sconosciuto"
 }

frontend/src/models/usePostHeaderQuickSearch.js

@@ -0,0 +1,56 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+export default function usePostHeaderQuickSearch(value) {
+  const [searchResults, setSearchResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!value.trim()) {
+      setSearchResults([]);
+      setLoading(false);
+      return;
+    }
+
+    const delayDebounce = setTimeout(() => {
+      setLoading(true);
+      axios
+        .post("/api/v3/search/individual?size=10", {
+          query: {
+            bool: {
+              should: [
+                {
+                  wildcard: {
+                    names: {
+                      value: `*${value}*`,
+                      case_insensitive: true,
+                    },
+                  },
+                },
+                {
+                  wildcard: {
+                    id: {
+                      value: `*${value}*`,
+                      case_insensitive: true,
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        })
+        .then((response) => {
+          setSearchResults(response?.data?.hits || []);
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error("Error fetching search results:", error);
+          setLoading(false);
+        });
+    }, 300);
+
+    return () => clearTimeout(delayDebounce);
+  }, [value]);
+
+  return { searchResults, loading };
+}

src/main/resources/bundles/de/header.properties

@@ -102,3 +102,12 @@ sessionHeaderWarning = Warnung vor Sitzungszeit\u00FCberschreitung
 sessionModalContent = Ihre Sitzung l\u00E4uft in K\u00FCrze ab.
 sessionLoginButton = Anmelden
 sessionLoginModalContent = Sie wurden vom System abgemeldet.
+
+systemId = System-ID
+Name = Name
+unknown = Unbekannt
+loading = Lade...
+noMatchResults = Keine \u00DCbereinstimmungsergebnisse
+errorOccurred = Fehler aufgetreten
+searchResultDisplay = Suchergebnisanzeige
+searchIndividuals = Individuen suchen

src/main/resources/bundles/en/header.properties

@@ -102,3 +102,14 @@ sessionHeaderWarning = Session Timeout Warning
 sessionModalContent = Your session is about to expire.
 sessionLoginButton = Log in
 sessionLoginModalContent = You've been logged out of the system.
+
+
+systemId = System-ID
+Name = Name
+unknown = Unknown
+loading = Loading...
+noMatchResults = No matching results
+errorOccurred = An error occurred
+searchResultDisplay = Search Result Display
+searchIndividuals = Search Individuals
+

src/main/resources/bundles/es/header.properties

@@ -102,3 +102,12 @@ sessionHeaderWarning = Advertencia de Tiempo de Sesi\u00f3n Agotado
 sessionModalContent = Tu sesi\u00f3n est\u00e1 a punto de expirar.
 sessionLoginButton = Acceso
 sessionLoginModalContent = Has cerrado tu sesi\u00f3n en el sistema.
+
+systemId = ID del sistema
+Name = Nombre
+unknown = Desconocido
+loading = Cargando...
+noMatchResults = No hay resultados coincidentes
+errorOccurred = Se ha producido un error
+searchResultDisplay = Mostrar resultados de b\u00fasqueda
+searchIndividuals = Buscar individuos