feat: affiliation request list

src/main/webapp/src/pages/admin/AdminRoot.jsx

@@ -8,6 +8,7 @@ import {ClubList} from "./club/ClubList.jsx";
 import {AffiliationReqPage} from "./affiliation/AffiliationReqPage.jsx";
 import {NewClubPage} from "./club/NewClubPage.jsx";
 import {ClubPage} from "./club/ClubPage.jsx";
+import {AffiliationReqList} from "./affiliation/AffiliationReqList.jsx";
 
 export function AdminRoot() {
     return <>
@@ -44,6 +45,10 @@ export function getAdminChildren() {
             path: 'affiliation/request/:id',
             element: <AffiliationReqPage/>
         },
+        {
+            path: 'affiliation/request',
+            element: <AffiliationReqList/>
+        },
         {
             path: 'club/new',
             element: <NewClubPage/>

src/main/webapp/src/pages/admin/affiliation/AffiliationReqList.jsx

@@ -0,0 +1,107 @@
+import {AxiosError} from "../../../components/AxiosError.jsx";
+import {useNavigate} from "react-router-dom";
+import {useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
+import {useFetch} from "../../../hooks/useFetch.js";
+import {ThreeDots} from "react-loader-spinner";
+import {useEffect, useState} from "react";
+import {Checkbox} from "../../../components/MemberCustomFiels.jsx";
+
+export function AffiliationReqList() {
+    const navigate = useNavigate();
+
+    const setLoading = useLoadingSwitcher()
+    const {data, refresh, error} = useFetch(`/affiliation/request`, setLoading, 1)
+
+    const [saisonFilter, setSaisonFilter] = useState(null)
+    const visibleRequest = (data == null) ? [] : data.filter(e => !(saisonFilter && e.saison !== saisonFilter)).sort((a, b) => {
+        if (a.saison > b.saison) return 1
+        if (a.saison < b.saison) return -1
+        if (a.name.toLowerCase() > b.name.toLowerCase()) return 1
+        if (a.name.toLowerCase() < b.name.toLowerCase()) return -1
+        return 0
+    });
+
+    return <>
+        <h2>Demande d'affiliation</h2>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/club")}>
+            &laquo; retour
+        </button>
+
+        <div>
+            <div className="row">
+                <div className="col-lg-9">
+                    {data
+                        ? <MakeCentralPanel data={data} visibleRequest={visibleRequest} navigate={navigate}/>
+                        : error
+                            ? <AxiosError error={error}/>
+                            : <Def/>
+                    }
+                </div>
+                <div className="col-lg-3">
+                    <div className="card mb-4">
+                        <div className="card-header">Filtre</div>
+                        <div className="card-body">
+                            <FiltreBar data={data} saisonFilter={saisonFilter} setSaisonFilter={setSaisonFilter}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+}
+
+function MakeCentralPanel({data, visibleRequest, navigate}) {
+
+    return <>
+        <div className="mb-4">
+            <small>{visibleRequest.length} ligne(s) affichée(s) sur {data.length}</small>
+            <div className="list-group">
+                {visibleRequest.map(req => (<MakeRow key={req.id} request={req} navigate={navigate}/>))}
+            </div>
+        </div>
+    </>
+}
+
+function MakeRow({request, navigate}) {
+    return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                onClick={() => navigate("" + request.id)}>
+        <div className="ms-2 col-auto">
+            <div className="fw-bold">{request.name}</div>
+        </div>
+        <small style={{textAlign: 'right'}}>{request.saison}-{request.saison + 1}<br/>{request.siret}</small>
+    </div>
+}
+
+let allSaison = []
+
+function FiltreBar({data, saisonFilter, setSaisonFilter}) {
+    useEffect(() => {
+        if (!data)
+            return;
+        allSaison.push(...data.map((e) => e.saison))
+        allSaison = allSaison.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
+    }, [data]);
+
+    return <div>
+        <div className="mb-3">
+            <select className="form-select" value={String(saisonFilter)} onChange={event => setSaisonFilter(Number(event.target.value))}>
+                <option value="">--- tout les saisons ---</option>
+                {allSaison && allSaison.map((value, index) => {
+                    return <option key={index} value={value}>{value}-{value+1}</option>
+                })
+                }
+            </select>
+        </div>
+    </div>
+}
+
+
+function Def() {
+    return <div className="list-group">
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+    </div>
+}

src/main/webapp/src/pages/admin/affiliation/AffiliationReqPage.jsx

@@ -21,7 +21,7 @@ export function AffiliationReqPage() {
 
     return <>
         <h2>Demande d'affiliation</h2>
-        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/affiliation")}>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/admin/affiliation/request")}>
             &laquo; retour
         </button>
         <div>
@@ -47,7 +47,7 @@ function Content({data, refresh}) {
                 error: "Échec de la suppression de la demande d'affiliation 😕"
             }
         ).then(_ => {
-            navigate("/admin/affiliation")
+            navigate("/admin/affiliation/request")
         })
     }
 
@@ -142,7 +142,7 @@ function Content({data, refresh}) {
                     error: "Échec de l'acceptation de l'affiliation 😕"
                 }
             ).then(_ => {
-                navigate("/admin/affiliation")
+                navigate("/admin/affiliation/request")
             })
         }
     }