Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add search bar to volunteer page

Browse Source
This commit is contained in:
Giovanni
2025-12-10 09:12:41 +01:00
parent 8275bd1643
commit 6a416abadb
13 changed files with 145 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Filter/Filter.jsx
+6 -6
View File
@@ -37,18 +37,18 @@ function Filter({isFilterVisible, filters, setFilters}){
</button>
</abbr>
<abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
onClick={() => setYearOrder("asc")}>
<abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
onClick={() => setYearOrder("desc")}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm400 0v-488l-44 44-56-56 140-140 140 140-57 56-43-43v487h-80ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
</svg>
</button>
</abbr>
<abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
onClick={() => setYearOrder("desc")}>
<abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
<button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
onClick={() => setYearOrder("asc")}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
<path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm440 0L640-300l56-56 44 44v-488h80v487l43-43 57 56-140 140ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
</svg>
src/components/Filter/Filter.module.css
+2 -2
View File
@@ -48,7 +48,7 @@
.filterTag svg {
transform: scale(1);
transform: scale(0.7);
color: black;
}
@@ -59,7 +59,7 @@
.active svg {
fill: #019AFF;
transform: scale(1);
transform: scale(0.8);
}
@media screen and (max-width: 768px){
src/components/SearchBar/SearchBar.jsx
+41 -14
View File
@@ -2,10 +2,14 @@ import styles from "./SearchBar.module.css"
import {Link} from "react-router";
import {useEffect, useState} from "react";
import searchEvents from "../../utils/searchEvents.js";
import searchUsers from "../../utils/searchUsers.js";
import { useLocation } from "react-router-dom";
function SearchBar() {
const [searchQuery, setSearchQuery] = useState('');
const [searchResults, setSearchResults] = useState([]);
const location = useLocation();
useEffect(() => {
const performSearch = async (query) => {
@@ -14,7 +18,15 @@ function SearchBar() {
return;
}
const data = await searchEvents(query);
let data;
if (location.pathname.includes("events")) {
data = await searchEvents(query);
} else if (location.pathname.includes("volunteers")) {
data = await searchUsers(query);
}
if (data) {
setSearchResults(data);
} else {
@@ -34,7 +46,7 @@ function SearchBar() {
return (
<div className={`${styles.searchBarContainer} glassCard`}>
<form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
<form className={styles.searchBarForm} onSubmit={(element) => element.preventDefault()}>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
<path
d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
@@ -43,7 +55,7 @@ function SearchBar() {
type="text"
placeholder="Rechercher un événement"
value={searchQuery}
onChange={(event) => setSearchQuery(event.target.value)}
onChange={(element) => setSearchQuery(element.target.value)}
/>
</form>
@@ -55,18 +67,33 @@ function SearchBar() {
{searchResults.map((result, i) => (
<Link to={`/event/` + event.id}>
<div className={styles.searchedEvent} key={i}>
<div className={`${styles.eventImageDiv}`}>
{result.image == null ? (
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
) : (
<img src={result.image + `.png`} alt="Photo de l'événement" />
)}
(location.pathname.includes("events")) ? (
<Link to={`/event/` + result.id}>
<div className={styles.searchedEvent} key={i}>
<div className={`${styles.eventImageDiv}`}>
{result.image == null ? (
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
) : (
<img src={result.image + `.png`} alt="Photo de l'événement" />
)}
</div>
<p>{result.name}</p>
</div>
<p>{result.name}</p>
</div>
</Link>
</Link>
) : location.pathname.includes("volunteers") ? (
<Link to={`/profile/` + result.id}>
<div className={styles.searchedEvent} key={i}>
<div className={`${styles.eventImageDiv}`}>
{result.image == null ? (
<img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
) : (
<img src={result.image + `.png`} alt="Photo de l'événement" />
)}
</div>
<p>{result.name} {result.lastname}</p>
</div>
</Link>
) : null
))}
</div>
);
src/components/SearchBar/SearchBar.module.css
+1
View File
@@ -4,6 +4,7 @@
z-index: 100;
width: 60%;
background: #fff;
padding: 0.5rem;
}
.searchBarForm{
src/components/ToolBar/ToolBar.module.css
+1 -1
View File
@@ -60,7 +60,7 @@
}
.sortButton svg, .searchButton svg {
transform: scale(0.8);
transform: scale(0.5);
fill: #019AFF;
}