feat: membre list filter history

feat: add categorie filter membre search
feat: make user-friendly cat name
2025-11-18 15:45:18 +01:00 · 2025-11-18 14:02:02 +01:00 · 2025-11-18 13:27:49 +01:00
9 changed files with 165 additions and 71 deletions
--- a/src/main/java/fr/titionfire/ffsaf/domain/service/MembreService.java
+++ b/src/main/java/fr/titionfire/ffsaf/domain/service/MembreService.java
@ -126,11 +126,17 @@ public class MembreService {
    }

    public Uni<PageResult<SimpleMembre>> searchAdmin(int limit, int page, String search, String club,
-                                                     int licenceRequest, int payState, String order) {
+                                                     int licenceRequest, int payState, String order, String categorie) {
        if (search == null)
            search = "";
        search = "%" + search.replaceAll(" ", "% %") + "%";

+        String categorieFilter;
+        if (categorie == null || categorie.isBlank())
+            categorieFilter = " True";
+        else
+            categorieFilter = "categorie = " + Categorie.valueOf(categorie).ordinal();
+
        String finalSearch = search;
        Uni<List<LicenceModel>> baseUni = getLicenceListe(licenceRequest, payState);

@ -147,18 +153,18 @@ public class MembreService {

                    if (club == null || club.isBlank()) {
                        query = repository.find(
-                                        "id " + idf + " ?2 AND (" + FIND_NAME_REQUEST + ")",
+                                        "id " + idf + " ?2 AND (" + FIND_NAME_REQUEST + ") AND " + categorieFilter,
                                        sort, finalSearch, ids)
                                .page(Page.ofSize(limit));
                    } else {
                        if (club.equals("null")) {
                            query = repository.find(
-                                    "id " + idf + " ?2 AND club IS NULL AND (" + FIND_NAME_REQUEST + ")",
+                                    "id " + idf + " ?2 AND club IS NULL AND (" + FIND_NAME_REQUEST + ") AND " + categorieFilter,
                                    sort, finalSearch, ids).page(Page.ofSize(limit));
                        } else {
                            query = repository.find(
-                                            "id " + idf + " ?3 AND LOWER(club.name) LIKE LOWER(?2) AND (" + FIND_NAME_REQUEST + ")",
-                                            sort, finalSearch, club + "%", ids)
+                                            "id " + idf + " ?3 AND LOWER(club.name) LIKE LOWER(?2) AND (" + FIND_NAME_REQUEST + ") AND " + categorieFilter,
+                                            sort, finalSearch, club, ids)
                                    .page(Page.ofSize(limit));
                        }
                    }
@ -167,7 +173,7 @@ public class MembreService {
    }

    public Uni<PageResult<SimpleMembre>> search(int limit, int page, String search, int licenceRequest, int payState,
-                                                String order, String subject) {
+                                                String order, String categorie, String subject) {
        if (search == null)
            search = "";
        search = "%" + search.replaceAll(" ", "% %") + "%";
@ -176,6 +182,12 @@ public class MembreService {

        Uni<List<LicenceModel>> baseUni = getLicenceListe(licenceRequest, payState);

+        String categorieFilter;
+        if (categorie == null || categorie.isBlank())
+            categorieFilter = " True";
+        else
+            categorieFilter = "categorie = " + Categorie.valueOf(categorie).ordinal();
+
        Sort sort = getSort(order);
        if (sort == null)
            return Uni.createFrom().failure(new DInternalError("Erreur lors calcul du trie"));
@ -188,7 +200,7 @@ public class MembreService {
                    return repository.find("userId = ?1", subject).firstResult()
                            .chain(membreModel -> {
                                PanacheQuery<MembreModel> query = repository.find(
-                                                "id " + idf + " ?3 AND club = ?2 AND (" + FIND_NAME_REQUEST + ")",
+                                                "id " + idf + " ?3 AND club = ?2 AND (" + FIND_NAME_REQUEST + ") AND " + categorieFilter,
                                                sort, finalSearch, membreModel.getClub(), ids)
                                        .page(Page.ofSize(limit));
                                return getPageResult(query, limit, page);
--- a/src/main/java/fr/titionfire/ffsaf/rest/MembreAdminEndpoints.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/MembreAdminEndpoints.java
@ -58,6 +58,7 @@ public class MembreAdminEndpoints {
            @Parameter(description = "Page à consulter") @QueryParam("page") Integer page,
            @Parameter(description = "Text à rechercher") @QueryParam("search") String search,
            @Parameter(description = "Club à filter") @QueryParam("club") String club,
+            @Parameter(description = "Catégorie à filter") @QueryParam("categorie") String categorie,
            @Parameter(description = "État de la demande de licence: 0 -> sans demande, 1 -> avec demande ou validée, 2 -> toute les demande non validée, 3 -> validée, 4 -> tout, 5 -> demande complete, 6 -> demande incomplete") @QueryParam("licenceRequest") int licenceRequest,
            @Parameter(description = "État du payment: 0 -> non payer, 1 -> payer, 2 -> tout") @QueryParam("payment") int payment,
            @Parameter(description = "Ordre") @QueryParam("order") String order) {
@ -65,7 +66,7 @@ public class MembreAdminEndpoints {
            limit = 50;
        if (page == null || page < 1)
            page = 1;
-        return membreService.searchAdmin(limit, page - 1, search, club, licenceRequest, payment, order);
+        return membreService.searchAdmin(limit, page - 1, search, club, licenceRequest, payment, order, categorie);
    }

    @GET
--- a/src/main/java/fr/titionfire/ffsaf/rest/MembreClubEndpoints.java
+++ b/src/main/java/fr/titionfire/ffsaf/rest/MembreClubEndpoints.java
@ -50,6 +50,7 @@ public class MembreClubEndpoints {
            @Parameter(description = "Nombre max de résulta (max 50)") @QueryParam("limit") Integer limit,
            @Parameter(description = "Page à consulter") @QueryParam("page") Integer page,
            @Parameter(description = "Text à rechercher") @QueryParam("search") String search,
+            @Parameter(description = "Catégorie à filter") @QueryParam("categorie") String categorie,
            @Parameter(description = "Etat de la demande de licence: 0 -> sans demande, 1 -> avec demande ou validée, 2 -> toute les demande non validée, 3 -> validée, 4 -> tout, 5 -> demande complete, 6 -> demande incomplete") @QueryParam("licenceRequest") int licenceRequest,
            @Parameter(description = "Etat du payment: 0 -> non payer, 1 -> payer, 2 -> tout") @QueryParam("payment") int payment,
            @Parameter(description = "Ordre") @QueryParam("order") String order) {
@ -57,7 +58,7 @@ public class MembreClubEndpoints {
            limit = 50;
        if (page == null || page < 1)
            page = 1;
-        return membreService.search(limit, page - 1, search, licenceRequest, payment, order, securityCtx.getSubject());
+        return membreService.search(limit, page - 1, search, licenceRequest, payment, order, categorie, securityCtx.getSubject());
    }

    @GET
--- a/src/main/webapp/src/components/MemberCustomFiels.jsx
+++ b/src/main/webapp/src/components/MemberCustomFiels.jsx
@ -1,5 +1,5 @@
 import {useEffect, useState} from "react";
-import {getCategoryFormBirthDate} from "../utils/Tools.js";
+import {getCategoryFormBirthDate, getCatName} from "../utils/Tools.js";
 import {useCountries} from "../hooks/useCountries.jsx";

 export function BirthDayField({inti_date, inti_category, required = true}) {
@ -27,7 +27,7 @@ export function BirthDayField({inti_date, inti_category, required = true}) {
            <div className="input-group mb-3">
                <span className="input-group-text" id="category">Catégorie</span>
                <input type="text" className="form-control" placeholder="" name="category"
-                       aria-label="category" value={category ? category : ""} aria-describedby="category"
+                       aria-label="category" value={category ? getCatName(category) : ""} aria-describedby="category"
                       disabled/>
                {canUpdate && <button className="btn btn-outline-secondary" type="button" id="button-addon1"
                                      onClick={updateCat}>Mettre à jours</button>}
--- a/src/main/webapp/src/components/SearchBar.jsx
+++ b/src/main/webapp/src/components/SearchBar.jsx
@ -7,8 +7,8 @@ const removeDiacritics = str => {
 }


-export function SearchBar({search}) {
-    const [searchInput, setSearchInput] = useState("");
+export function SearchBar({search, defaultValue = ""}) {
+    const [searchInput, setSearchInput] = useState(defaultValue);

    const handelChange = (e) => {
        setSearchInput(e.target.value);
@ -40,4 +40,4 @@ export function SearchBar({search}) {
            </button>
        </div>
    </div>
-}
+}
--- a/src/main/webapp/src/pages/MemberList.jsx
+++ b/src/main/webapp/src/pages/MemberList.jsx
@ -6,7 +6,7 @@ import {useEffect, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
 import {Checkbox} from "../components/MemberCustomFiels.jsx";
 import * as Tools from "../utils/Tools.js";
-import {apiAxios, errFormater} from "../utils/Tools.js";
+import {apiAxios, errFormater, getCatName} from "../utils/Tools.js";
 import {toast} from "react-toastify";
 import {SearchBar} from "../components/SearchBar.jsx";
 import * as XLSX from "xlsx-js-style";
@ -14,36 +14,52 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faEuroSign} from "@fortawesome/free-solid-svg-icons";


+let lastRefresh = "";
+
 export function MemberList({source}) {
    const {hash} = useLocation();
    const navigate = useNavigate();
-    let page = Number(hash.substring(1));
-    page = (page > 0) ? page : 1;

    const [memberData, setMemberData] = useState([]);
    const [licenceData, setLicenceData] = useState([]);
    const [showLicenceState, setShowLicenceState] = useState(false);
-    const [clubFilter, setClubFilter] = useState("");
-    const [stateFilter, setStateFilter] = useState(4)
-    const [lastSearch, setLastSearch] = useState("");
-    const [paymentFilter, setPaymentFilter] = useState(2);
-    const [order, setOrder] = useState("");
+
+    const setFilter = (filter) => {
+        navigate("#" + encodeURI(JSON.stringify(filter)))
+    }
+    const filter = {
+        page: 1,
+        search: "",
+        club: "",
+        licenceRequest: 4,
+        payment: 2,
+        order: "",
+        categorie: "",
+        ...JSON.parse(decodeURI(hash.substring(1)) || "{}"),
+    }

    const setLoading = useLoadingSwitcher()
    const {
        data,
        error,
        refresh
-    } = useFetch(`/member/find/${source}?page=${page}&licenceRequest=${stateFilter}&payment=${paymentFilter}&order=${order}`, setLoading, 1)
-
+    } = useFetch(`/member/find/${source}?page=${filter.page}&search=${filter.search}&club=${filter.club}&licenceRequest=${filter.licenceRequest}&payment=${filter.payment}&order=${filter.order}&categorie=${filter.categorie}`, setLoading, 1)

    useEffect(() => {
-        refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}&order=${order}`);
-    }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter, order]);
+        const tmp = `/member/find/${source}?page=${filter.page}&search=${filter.search}&club=${filter.club}&licenceRequest=${filter.licenceRequest}&payment=${filter.payment}&order=${filter.order}&categorie=${filter.categorie}`;
+        if (tmp === lastRefresh)
+            return;
+        lastRefresh = tmp
+        refresh(lastRefresh);
+    }, [hash]);

    useEffect(() => {
        if (!data)
            return;
+        if (data.page_count < filter.page) {
+            setFilter({...filter, page: 1});
+        }
+
        const data2 = [];
        for (const e of data.result) {
            data2.push({
@ -80,23 +96,19 @@ export function MemberList({source}) {
    }, [showLicenceState]);

    const search = (search) => {
-        if (search === lastSearch)
+        if (search === filter.search)
            return;
-        setLastSearch(search);
-    }
-
-    const onOrderChange = (newOrder) => {
-        setOrder(newOrder.join(","));
+        setFilter({...filter, search: search});
    }

    return <>
        <div>
            <div className="row">
                <div className="col-lg-9">
-                    <SearchBar search={search}/>
+                    <SearchBar search={search} defaultValue={filter.search}/>
                    {data
                        ? <MakeCentralPanel data={data} visibleMember={memberData} navigate={navigate} showLicenceState={showLicenceState}
-                                            page={page} source={source}/>
+                                            page={filter.page} setPage={e => setFilter({...filter, page: e})} source={source}/>
                        : error
                            ? <AxiosError error={error}/>
                            : <Def/>
@ -116,17 +128,24 @@ export function MemberList({source}) {
                    <div className="card mb-4">
                        <div className="card-header">Trie</div>
                        <div className="card-body">
-                            <OrderBar onOrderChange={onOrderChange} source={source}/>
+                            <OrderBar onOrderChange={e => setFilter({...filter, order: e.join(",")})} defaultValues={filter.order} source={source}/>
                        </div>
                    </div>

                    <div className="card mb-4">
                        <div className="card-header">Filtre</div>
                        <div className="card-body">
-                            <FiltreBar showLicenceState={showLicenceState} setShowLicenceState={setShowLicenceState} data={data}
-                                       clubFilter={clubFilter} setClubFilter={setClubFilter} source={source}
-                                       stateFilter={stateFilter} setStateFilter={setStateFilter} paymentFilter={paymentFilter}
-                                       setPaymentFilter={setPaymentFilter}/>
+                            <FiltreBar showLicenceState={showLicenceState}
+                                       setShowLicenceState={setShowLicenceState}
+                                       clubFilter={filter.club}
+                                       setClubFilter={e => setFilter({...filter, club: e})}
+                                       source={source}
+                                       stateFilter={filter.licenceRequest}
+                                       setStateFilter={e => setFilter({...filter, licenceRequest: e})}
+                                       paymentFilter={filter.payment}
+                                       setPaymentFilter={e => setFilter({...filter, payment: e})}
+                                       catFilter={filter.categorie}
+                                       setCatFilter={e => setFilter({...filter, categorie: e})}/>
                        </div>
                    </div>

@ -354,11 +373,11 @@ function FileInput() {
    );
 }

-function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page, source}) {
+function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page, setPage, source}) {
    const pages = []
    for (let i = 1; i <= data.page_count; i++) {
        pages.push(<li key={i} className={"page-item " + ((page === i) ? "active" : "")}>
-            <span className="page-link" onClick={() => navigate("#" + i)}>{i}</span>
+            <span className="page-link" onClick={() => setPage(i)}>{i}</span>
        </li>);
    }

@ -375,10 +394,10 @@ function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page
            <nav aria-label="Page navigation">
                <ul className="pagination justify-content-center">
                    <li className={"page-item" + ((page <= 1) ? " disabled" : "")}>
-                        <span className="page-link" onClick={() => navigate("#" + (page - 1))}>&laquo;</span></li>
+                        <span className="page-link" onClick={() => setPage(page - 1)}>&laquo;</span></li>
                    {pages}
                    <li className={"page-item" + ((page >= data.page_count) ? " disabled" : "")}>
-                        <span className="page-link" onClick={() => navigate("#" + (page + 1))}>&raquo;</span></li>
+                        <span className="page-link" onClick={() => setPage(page + 1)}>&raquo;</span></li>
                </ul>
            </nav>
        </div>
@ -387,33 +406,50 @@ function MakeCentralPanel({data, visibleMember, navigate, showLicenceState, page

 function MakeRow({member, showLicenceState, navigate, source}) {
    const rowContent = <>
-        <div className="row">
+        <div className="row" style={{padding: "0.6em 0"}}>
            <span className="col-auto">{(member.licence_number ? String(member.licence_number).padStart(5, '0') : "-------") + "   "}
                {(showLicenceState && member.licence != null && member.licence.pay) ? <FontAwesomeIcon icon={faEuroSign}/> : <>&nbsp;&nbsp;</>}</span>
            <div className="ms-2 col-auto">
                <div className="fw-bold">{member.fname} {member.lname}</div>
            </div>
        </div>
-        {source === "club" ?
-            <small>{member.categorie}</small>
-            : <small>{member.club?.name || "Sans club"}</small>}
+        <div style={{verticalAlign: "center", margin: "auto 0"}}>
+            {source === "club" ?
+                <small>{getCatName(member.categorie)}</small>
+                : <div style={{
+                    textAlign: "right",
+                    fontSize: "small"
+                }}>{member.club?.name || "Sans club"}<br/><small>{getCatName(member.categorie)}</small></div>}
+        </div>
+
    </>

    if (showLicenceState && member.licence != null) {
-        return <div
-            className={"list-group-item d-flex justify-content-between align-items-start list-group-item-action list-group-item-"
-                + (member.licence.validate ? "success" : (member.licence.certificate.length > 1 ? "warning" : "danger"))}
-            onClick={() => navigate("" + member.id)}>{rowContent}</div>
-    } else {
-        return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
-                    onClick={() => navigate("" + member.id)}>
+        return <a className={"list-group-item d-flex justify-content-between align-items-start list-group-item-action list-group-item-"
+            + (member.licence.validate ? "success" : (member.licence.certificate.length > 1 ? "warning" : "danger"))}
+                  style={{padding: "0 1em"}}
+                  onClick={e => {
+                      e.preventDefault();
+                      navigate("" + member.id)
+                  }}
+                  href={"member/" + member.id}>
            {rowContent}
-        </div>
+        </a>
+    } else {
+        return <a className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                  style={{padding: "0 1em"}}
+                  onClick={e => {
+                      e.preventDefault();
+                      navigate("" + member.id)
+                  }}
+                  href={"member/" + member.id}>
+            {rowContent}
+        </a>
    }
 }

-function OrderBar({onOrderChange, source}) {
-    const [orderCriteria, setOrderCriteria] = useState(['']);
+function OrderBar({onOrderChange, defaultValues = "", source}) {
+    const [orderCriteria, setOrderCriteria] = useState([...defaultValues.split(",").filter(c => c !== ''), '']);

    const handleChange = (index, value) => {
        const newCriteria = [...orderCriteria];
@ -484,31 +520,32 @@ function OrderBar({onOrderChange, source}) {
    );
 }

-let allClub = []
-
 function FiltreBar({
                       showLicenceState,
                       setShowLicenceState,
-                       data,
                       clubFilter,
                       setClubFilter,
                       source,
                       stateFilter,
                       setStateFilter,
                       paymentFilter,
-                       setPaymentFilter
+                       setPaymentFilter,
+                       catFilter,
+                       setCatFilter,
                   }) {
-    useEffect(() => {
-        if (!data)
-            return;
-        allClub.push(...data.result.map((e) => e.club?.name))
-        allClub = allClub.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
-    }, [data]);

    return <div>
        <div className="mb-3">
            <Checkbox value={showLicenceState} onChange={setShowLicenceState} label="Afficher l'état des licences"/>
        </div>
+        <div className="mb-3">
+            <select className="form-select" value={catFilter} onChange={event => setCatFilter(event.target.value)}>
+                <option value="">--- toute les catégories ---</option>
+                {Tools.CatList.map(cat => (
+                    <option key={cat} value={cat}>{getCatName(cat)}</option>
+                ))}
+            </select>
+        </div>
        {source !== "club" && <ClubSelectFilter clubFilter={clubFilter} setClubFilter={setClubFilter}/>}
        <div className="mb-3">
            <select className="form-select" value={stateFilter} onChange={event => setStateFilter(Number(event.target.value))}>
--- a/src/main/webapp/src/pages/admin/member/MemberPage.jsx
+++ b/src/main/webapp/src/pages/admin/member/MemberPage.jsx
@ -34,13 +34,13 @@ export function MemberPage() {
                }
            }
        ).then(_ => {
-            navigate("/admin/member")
+            navigate(-1)
        })
    }

    return <>
        <h2>Page membre</h2>
-        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
+        <button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
            &laquo; retour
        </button>
        {data
--- a/src/main/webapp/src/pages/club/member/MemberPage.jsx
+++ b/src/main/webapp/src/pages/club/member/MemberPage.jsx
@ -33,13 +33,13 @@ export function MemberPage() {
                }
            }
        ).then(_ => {
-            navigate("/club/member")
+            navigate(-1)
        })
    }

    return <>
        <h2>Page membre</h2>
-        <button type="button" className="btn btn-link" onClick={() => navigate("/club/member")}>
+        <button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
            &laquo; retour
        </button>
        {data
--- a/src/main/webapp/src/utils/Tools.js
+++ b/src/main/webapp/src/utils/Tools.js
@ -23,6 +23,20 @@ export const errFormater = (data, msg) => {
    return `${msg} (${data.response.statusText}: ${JSON.stringify(data.response.data)}) 😕`
 }

+export const CatList = [
+    "SUPER_MINI",
+    "MINI_POUSSIN",
+    "POUSSIN",
+    "BENJAMIN",
+    "MINIME",
+    "CADET",
+    "JUNIOR",
+    "SENIOR1",
+    "SENIOR2",
+    "VETERAN1",
+    "VETERAN2"
+];
+
 export function getCategoryFormBirthDate(birth_date, currentDate = new Date()) {
    const currentSaison = getSaison(currentDate)
    const birthYear = birth_date.getFullYear()
@ -60,3 +74,32 @@ export function getSaison(currentDate = new Date()) {
        return currentDate.getFullYear() - 1
    }
 }
+
+export function getCatName(cat) {
+    switch (cat) {
+        case "SUPER_MINI":
+            return "Super Mini";
+        case "MINI_POUSSIN":
+            return "Mini Poussin";
+        case "POUSSIN":
+            return "Poussin";
+        case "BENJAMIN":
+            return "Benjamin";
+        case "MINIME":
+            return "Minime";
+        case "CADET":
+            return "Cadet";
+        case "JUNIOR":
+            return "Junior";
+        case "SENIOR1":
+            return "Senior 1";
+        case "SENIOR2":
+            return "Senior 2";
+        case "VETERAN1":
+            return "Vétéran 1";
+        case "VETERAN2":
+            return "Vétéran 2";
+        default:
+            return cat;
+    }
+}
Author	SHA1	Message	Date
Thibaut Valentin	6e7eec0587	feat: membre list filter history All checks were successful Deploy Production Server / if_merged (pull_request) Successful in 10m16s Details	2025-11-18 15:45:18 +01:00
Thibaut Valentin	8c83668364	feat: add categorie filter membre search	2025-11-18 14:02:02 +01:00
Thibaut Valentin	771c06ccd8	feat: make user-friendly cat name	2025-11-18 13:27:49 +01:00