feat: add cat filter on mass license validation

src/main/webapp/src/pages/PayAndValidateList.jsx

@@ -4,13 +4,14 @@ import {AxiosError} from "../components/AxiosError.jsx";
 import {ThreeDots} from "react-loader-spinner";
 import {useEffect, useRef, useState} from "react";
 import {useLocation, useNavigate} from "react-router-dom";
-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 {ConfirmDialog} from "../components/ConfirmDialog.jsx";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faCircleInfo, faEuroSign} from "@fortawesome/free-solid-svg-icons";
 import "./PayAndValidateList.css";
+import * as Tools from "../utils/Tools.js";
 
 export function PayAndValidateList({source}) {
 
@@ -22,6 +23,7 @@ export function PayAndValidateList({source}) {
     const [memberData, setMemberData] = useState([]);
     const [licenceData, setLicenceData] = useState([]);
     const [clubFilter, setClubFilter] = useState("");
+    const [catFilter, setCatFilter] = useState("");
     const [stateFilter, setStateFilter] = useState((source === "club") ? 1 : 2)
     const [lastSearch, setLastSearch] = useState("");
     const [paymentFilter, setPaymentFilter] = useState((source === "club") ? 0 : 2);
@@ -34,15 +36,15 @@ export function PayAndValidateList({source}) {
         data,
         error,
         refresh
-    } = useFetch(`/member/find/${source}?page=${page}&licenceRequest=${stateFilter}&payment=${paymentFilter}`, setLoading, 1)
+    } = useFetch(`/member/find/${source}?page=${page}&licenceRequest=${stateFilter}&payment=${paymentFilter}&categorie=${catFilter}`, setLoading, 1)
 
     useEffect(() => {
         sessionStorage.setItem("selectedMembers", JSON.stringify(selectedMembers));
     }, [selectedMembers]);
 
     useEffect(() => {
-        refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}`);
-    }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter]);
+        refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}&categorie=${catFilter}`);
+    }, [hash, clubFilter, stateFilter, lastSearch, paymentFilter, catFilter]);
 
     useEffect(() => {
         if (!data)
@@ -62,7 +64,7 @@ export function PayAndValidateList({source}) {
         setMemberData(data2);
     }, [data, licenceData]);
 
-    useEffect(() => {
+    const fetchLicenceData = () => {
         toast.promise(
             apiAxios.get(`/licence/current/${source}`),
             {
@@ -77,6 +79,10 @@ export function PayAndValidateList({source}) {
             .then(data => {
                 setLicenceData(data.data);
             });
+    };
+
+    useEffect(() => {
+        fetchLicenceData();
     }, []);
 
     const search = (search) => {
@@ -104,7 +110,31 @@ export function PayAndValidateList({source}) {
             }
         ).then(() => {
             setSelectedMembers([]);
-            refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}`);
+            refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}&categorie=${catFilter}`);
+        });
+    }
+
+    const handlePayment = () => {
+        if (selectedMembers.length === 0) {
+            toast.error("Aucun membre sélectionné");
+            return;
+        }
+
+        toast.promise(
+            apiAxios.post(`/licence/validate-pay`, selectedMembers),
+            {
+                pending: "Validation des licences en cours...",
+                success: "Licences validées avec succès 🎉",
+                error: {
+                    render({data}) {
+                        return errFormater(data, "Échec de la validation des licences")
+                    }
+                }
+            }
+        ).then(() => {
+            setSelectedMembers([]);
+            fetchLicenceData();
+            refresh(`/member/find/${source}?page=${page}&search=${lastSearch}&club=${clubFilter}&licenceRequest=${stateFilter}&payment=${paymentFilter}&categorie=${catFilter}`);
         });
     }
 
@@ -153,13 +183,20 @@ export function PayAndValidateList({source}) {
                         <div className="card-body">
                             <FiltreBar data={data} clubFilter={clubFilter} setClubFilter={setClubFilter} source={source}
                                        stateFilter={stateFilter} setStateFilter={setStateFilter} paymentFilter={paymentFilter}
-                                       setPaymentFilter={setPaymentFilter}/>
+                                       setPaymentFilter={setPaymentFilter} setCatFilter={setCatFilter} catFilter={catFilter}/>
                         </div>
                     </div>
 
                     <div className="mb-4">
                         {source === "admin" && <>
-                            <button className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm-validation">Valider
+                            <button className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm-pay">Valider le payement
+                                des {selectedMembers.length} licences sélectionnée
+                            </button>
+                            <ConfirmDialog title="Payment des licences"
+                                           message={"Êtes-vous sûr de vouloir marquer comme payées les " + selectedMembers.length + " licences ?"}
+                                           onConfirm={handlePayment} id="confirm-pay"/>
+
+                            <button className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm-validation" style={{marginTop: "0.5em"}}>Valider
                                 les {selectedMembers.length} licences sélectionnée
                             </button>
                             <ConfirmDialog title="Validation des licences"
@@ -385,7 +422,7 @@ function MakeRow({member, source, isChecked, onCheckboxClick, onRowClick}) {
 
 let allClub = []
 
-function FiltreBar({data, clubFilter, setClubFilter, source, stateFilter, setStateFilter, paymentFilter, setPaymentFilter}) {
+function FiltreBar({data, clubFilter, setClubFilter, source, stateFilter, setStateFilter, paymentFilter, setPaymentFilter, setCatFilter, catFilter}) {
     useEffect(() => {
         if (!data)
             return;
@@ -395,6 +432,14 @@ function FiltreBar({data, clubFilter, setClubFilter, source, stateFilter, setSta
 
     return <div>
         {source !== "club" && <ClubSelectFilter clubFilter={clubFilter} setClubFilter={setClubFilter}/>}
+        <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>
         <div className="mb-3">
             <select className="form-select" value={stateFilter} onChange={event => setStateFilter(Number(event.target.value))}>
                 <option value={1}>Avec demande ou licence validée</option>

src/main/webapp/src/pages/admin/member/InformationForm.jsx

@@ -67,10 +67,10 @@ export function InformationForm({data}) {
                     'Content-Type': 'multipart/form-data',
                 }
             }).then(_ => {
-                toast.success('Profile mis à jours avec succès 🎉');
+                toast.success('Profil mis à jours avec succès 🎉');
             }).catch(e => {
                 console.log(e.response)
-                toast.error(errFormater(e,'Échec de la mise à jours du profile 😕'));
+                toast.error(errFormater(e,'Échec de la mise à jours du profil 😕'));
             }).finally(() => {
                 if (setLoading)
                     setLoading(0)
@@ -114,4 +114,4 @@ export function InformationForm({data}) {
             </div>
         </div>
     </form>;
-}
+}