feat: membre list filter history

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 + ")",
+                                            "id " + idf + " ?3 AND LOWER(club.name) LIKE LOWER(?2) AND (" + FIND_NAME_REQUEST + ") AND " + categorieFilter,
-                                            sort, finalSearch, club + "%", ids)
+                                            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);

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

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

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>}

src/main/webapp/src/components/SearchBar.jsx

@@ -7,8 +7,8 @@ const removeDiacritics = str => {
 }
 
 
-export function SearchBar({search}) {
+export function SearchBar({search, defaultValue = ""}) {
-    const [searchInput, setSearchInput] = useState("");
+    const [searchInput, setSearchInput] = useState(defaultValue);
 
     const handelChange = (e) => {
         setSearchInput(e.target.value);
@@ -40,4 +40,4 @@ export function SearchBar({search}) {
             </button>
         </div>
     </div>
-}
+}

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 setFilter = (filter) => {
-    const [lastSearch, setLastSearch] = useState("");
+        navigate("#" + encodeURI(JSON.stringify(filter)))
-    const [paymentFilter, setPaymentFilter] = useState(2);
+    }
-    const [order, setOrder] = useState("");
+    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}`);
+        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}`;
-    }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter, order]);
+        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);
+        setFilter({...filter, search: search});
-    }
-
-    const onOrderChange = (newOrder) => {
-        setOrder(newOrder.join(","));
     }
 
     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}
+                            <FiltreBar showLicenceState={showLicenceState}
-                                       clubFilter={clubFilter} setClubFilter={setClubFilter} source={source}
+                                       setShowLicenceState={setShowLicenceState}
-                                       stateFilter={stateFilter} setStateFilter={setStateFilter} paymentFilter={paymentFilter}
+                                       clubFilter={filter.club}
-                                       setPaymentFilter={setPaymentFilter}/>
+                                       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" ?
+        <div style={{verticalAlign: "center", margin: "auto 0"}}>
-            <small>{member.categorie}</small>
+            {source === "club" ?
-            : <small>{member.club?.name || "Sans club"}</small>}
+                <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
+        return <a className={"list-group-item d-flex justify-content-between align-items-start list-group-item-action list-group-item-"
-            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"))}
-                + (member.licence.validate ? "success" : (member.licence.certificate.length > 1 ? "warning" : "danger"))}
+                  style={{padding: "0 1em"}}
-            onClick={() => navigate("" + member.id)}>{rowContent}</div>
+                  onClick={e => {
-    } else {
+                      e.preventDefault();
-        return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                      navigate("" + member.id)
-                    onClick={() => 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}) {
+function OrderBar({onOrderChange, defaultValues = "", source}) {
-    const [orderCriteria, setOrderCriteria] = useState(['']);
+    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))}>

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

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

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;
+    }
+}