Skip to content

Commit

Permalink
separate jsp and css
Browse files Browse the repository at this point in the history
  • Loading branch information
@erinz2020
erinz2020 committed Jan 31, 2025
1 parent dfbc199 commit ccb8c4d
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 44 deletions.
30 changes: 21 additions & 9 deletions frontend/src/components/header/HeaderQuickSearch.jsx
View file
Original file line number Diff line number Diff line change
@@ -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",
}, {
Expand All @@ -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",
},
Expand All @@ -40,7 +43,7 @@ export default function HeaderQuickSearch() {
species: "Species 3",
},

]);
]);
const [showDropdown, setShowDropdown] = useState(false);
const theme = React.useContext(ThemeColorContext);

Expand Down Expand Up @@ -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",
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/css/dropdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,10 @@
.site-name {
display: none !important;
}
}

.header-quick-search-input::placeholder {
color: gray;
opacity: 0.6;
font-size: 0.9rem;
}
89 changes: 89 additions & 0 deletions src/main/webapp/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
69 changes: 34 additions & 35 deletions src/main/webapp/header.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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 = "";
}
});
});
Expand Down Expand Up @@ -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>
<% } %>

Expand Down

0 comments on commit ccb8c4d

Please sign in to comment.