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

Merge branch 'dev' of https://iutbg-gitlab.iutbourg.univ-lyon1.fr/sae-but2/2025-26/gestion-benevoles-association/frontend into dev

Browse Source
This commit is contained in:
T'JAMPENS QUENTIN p2406187
2025-12-10 12:17:56 +01:00
parent 2dd2cd2d4b 12c0af8190
commit 7a532492ea
14 changed files with 177 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+21 -4
View File
@@ -12,7 +12,8 @@
"react": "^19.1.1",
"react-chartjs-2": "^5.3.1",
"react-dom": "^19.1.1",
"react-router": "^7.9.4"
"react-router": "^7.9.4",
"react-router-dom": "^7.10.1"
},
"devDependencies": {
"@chromatic-com/storybook": "^4.1.2",
@@ -4511,9 +4512,9 @@
}
},
"node_modules/react-router": {
"version": "7.9.4",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
"integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
"integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
@@ -4532,6 +4533,22 @@
}
}
},
"node_modules/react-router-dom": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
"integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
"license": "MIT",
"dependencies": {
"react-router": "7.10.1"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/recast": {
"version": "0.23.11",
"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
package.json
+2 -1
View File
@@ -17,7 +17,8 @@
"react": "^19.1.1",
"react-chartjs-2": "^5.3.1",
"react-dom": "^19.1.1",
"react-router": "^7.9.4"
"react-router": "^7.9.4",
"react-router-dom": "^7.10.1"
},
"devDependencies": {
"@chromatic-com/storybook": "^4.1.2",
src/components/Event/Event.module.css
+1
View File
@@ -41,6 +41,7 @@
.eventContent {
display: flex;
width: 100%;
}
.eventTitle {
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
+46 -18
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>
@@ -53,21 +65,37 @@ function SearchBar() {
) : null}
</div>
{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" />
)}
</div>
<p>{result.name}</p>
</div>
</Link>
))}
<div className={styles.elementList}>
{searchResults.map((result, i) => (
(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>
</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>
</div>
);
}
src/components/SearchBar/SearchBar.module.css
+14 -1
View File
@@ -1,15 +1,21 @@
.searchBarContainer{
position: fixed;
top: 10rem;
top: 4rem;
z-index: 100;
width: 60%;
background: #fff;
padding: 0.5rem;
}
.searchBarForm{
display: flex;
}
.elementList {
max-height: 60vh;
overflow-y: auto;
}
.eventImageDiv {
@@ -71,3 +77,10 @@
.searchBarForm input:focus{
outline: none;
}
@media screen and (max-width: 480px) {
.searchBarContainer{
width: 80%;
}
}
src/components/ToolBar/ToolBar.module.css
+14 -4
View File
@@ -20,6 +20,7 @@
.filterMenu{
padding: 5px 5px 5px 5px;
width: fit-content;
}
.createButton, .searchButton, .sortButton {
@@ -27,9 +28,9 @@
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
width: 55px;
height: 55px;
border-radius: 50% !important;
width: 55px !important;
height: 55px !important;
transition: all 0.5s ease;
}
@@ -60,7 +61,7 @@
}
.sortButton svg, .searchButton svg {
transform: scale(0.8);
transform: scale(0.5);
fill: #019AFF;
}
@@ -72,6 +73,15 @@
@media screen and (max-width: 768px) {
.createButton,
.searchButton,
.sortButton {
flex: 0 0 55px;
width: 55px !important;
height: 55px !important;
}
.eventsButtons {
flex-direction: row;
position: relative;
src/pages/Events/EventsPage.jsx
+3 -2
View File
@@ -3,12 +3,13 @@ import Event from "../../components/Event/Event.jsx";
import styles from "./EventsPage.module.css";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import getAllEvents from "../../utils/event/getAllEvents.js";
import filter from "../../utils/filter.js";
function EventsPage(){
const [filters, setFilters] = useState({
alphabetical: "asc",
yearOrder: "asc",
yearOrder: "desc",
});
@@ -28,7 +29,7 @@ function EventsPage(){
<div className={styles.eventsContainer}>
<ToolBar setFilters={setFilters} filters={filters}/>
<div className={styles.eventsList}>
{events.map((event, index) => (
{filter(events, filters, "event").map((event, index) => (
<Event key={index} event={event} />
))}
</div>
src/pages/Volunteers/VolunteerCard.jsx
+3 -12
View File
@@ -1,33 +1,24 @@
import React, {useEffect, useState} from "react";
import React, {useState} from "react";
import styles from "./VolunteersPage.module.css";
import getUserById from "../../utils/users/getUserById.js";
import formatDate from "../../utils/date/formatDate.js";
import { useNavigate } from "react-router";
import Button from "../../components/ui/button/button.jsx";
export default function VolunteerCard({ id }) {
export default function VolunteerCard({ user }) {
const [isExpanded, setIsExpanded] = useState(false);
const [user, setUser] = useState({});
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
useEffect(() => {
(async () => {
const data = await getUserById(id);
setUser(data);
}) ()
}, []);
const navigate = useNavigate();
return (
<div className={`${styles.profileboard} glassCard`}>
<div className={styles.header}>
<h2>{user?.name}</h2>
<h2>{user?.name} {user?.lastname}</h2>
<Button
variant={"transparent"}
onClick={toggleExpand}
src/pages/Volunteers/VolunteersPage.jsx
+17 -5
View File
@@ -2,22 +2,34 @@ import { useState, useEffect } from "react";
import styles from "./VolunteersPage.module.css";
import VolunteerCard from "./VolunteerCard.jsx";
import getAllUser from "../../utils/users/getAllUsers.js";
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
import filter from "../../utils/filter.js";
import getUserById from "../../utils/users/getUserById.js";
function VolunteerPage() {
const [filters, setFilters] = useState({
alphabetical: "asc",
yearOrder: "desc",
});
const [users, setUsers] = useState([]);
useEffect(() => {
(async () => {
const data = await getAllUser();
setUsers(data);
}) ()
const ids = await getAllUser();
const usersData = await Promise.all(ids.map(id => getUserById(id)));
setUsers(usersData);
})()
}, [])
return (
<div className={styles.container}>
{users.map((user, index) => <VolunteerCard key={index} id={user} /> )}
<ToolBar setFilters={setFilters} filters={filters}/>
<div className={styles.usersList}>
{filter(users, filters, "user").map((user, index) => (
<VolunteerCard key={index} user={user} />
))}
</div>
</div>
);
}
src/pages/Volunteers/VolunteersPage.module.css
+10 -8
View File
@@ -1,18 +1,22 @@
.container {
width: 100%;
padding: 10px;
margin-top: 50px;
box-sizing: border-box;
position: relative;
}
.profileboard {
width: 100%;
padding: 15px;
margin-top: 3%;
width: 80%;
display: flex;
flex-direction: column;
gap: 10px;
box-sizing: border-box;
margin: 1rem 0;
padding: 1rem 0.5rem;
}
.usersList{
display: flex;
flex-direction: column;
align-items: center;
}
.header {
@@ -101,8 +105,6 @@
@media screen and (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 50px auto;
padding: 20px;
}
src/utils/filter.js
+16 -18
View File
@@ -1,31 +1,30 @@
function filter(elements, filters) {
function filter(elements, filters, type) {
const compareDate = (dateA, dateB) => {
const dA = new Date(dateA);
const dB = new Date(dateB);
if (filters.yearOrder === "asc") {
return dB - dA;
return dA - dB; // plus ancien -> plus récent
} else {
return dA - dB;
return dB - dA; // plus récent -> plus ancien
}
};
return [...elements].sort((a, b) => {
const sortedATasks = a.tasks.sort((taskA, taskB) =>
compareDate(taskA.start, taskB.start)
);
const sortedBTasks = b.tasks.sort((taskA, taskB) =>
compareDate(taskA.start, taskB.start)
);
let timeComparison;
const timeComparison = compareDate(
sortedATasks[0].start,
sortedBTasks[0].start
);
if (filters.yearOrder !== null) {
if (type === "event") {
timeComparison = compareDate(a.start, b.start);
}
if (timeComparison !== 0) {
return timeComparison;
else if (type === "user") {
timeComparison = compareDate(a.created_at, b.created_at);
}
if (timeComparison !== 0 && timeComparison !== undefined) {
return timeComparison;
}
}
if (filters.alphabetical !== null) {
@@ -38,5 +37,4 @@ function filter(elements, filters) {
});
}
export default filter;
export default filter;
src/utils/searchUsers.js
+22
View File
@@ -0,0 +1,22 @@
export default async function searchUsers(query) {
try {
const encodedQuery = encodeURIComponent(query);
const response = await fetch(
`http://localhost:80/api/users/search?query=${encodedQuery}`,
{
method: 'GET',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
);
const data = await response.json();
return data.hits.map(hit => hit.document);
} catch (err) {
console.error("Erreur :", err);
return null;
}
}