feat: membre list filter history

2025-11-18 15:45:18 +01:00 · 2025-11-18 15:45:18 +01:00 · b2ad633b21
commit b2ad633b21
parent 1b5bf8ba6c
4 changed files with 56 additions and 38 deletions
--- 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);
--- a/src/main/webapp/src/pages/MemberList.jsx
+++ b/src/main/webapp/src/pages/MemberList.jsx
@ -14,37 +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 [catFilter, setCatFilter] = 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}&categorie=${catFilter}`, 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}&categorie=${catFilter}`);
-    }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter, order, catFilter]);
+        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({
@ -81,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/>
@ -117,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}
-                                       clubFilter={clubFilter} setClubFilter={setClubFilter} source={source}
-                                       stateFilter={stateFilter} setStateFilter={setStateFilter} paymentFilter={paymentFilter}
-                                       setPaymentFilter={setPaymentFilter} catFilter={catFilter} setCatFilter={setCatFilter}/>
+                            <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>

@ -355,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>);
    }

@ -376,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>
@ -430,8 +448,8 @@ function MakeRow({member, showLicenceState, navigate, source}) {
    }
 }

-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];
--- 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