feat: cm admin poule selector

src/main/webapp/src/pages/competition/editor/CategoryAdminContent.jsx

@@ -48,9 +48,9 @@ export function CategoryContent({cat, catId, setCat}) {
             combDispatch({type: 'SET_ALL', payload: {source: "match", data: [data.c1, data.c2].filter(d => d != null)}});
 
             if (data.c1 !== null && !groupsRef.current.some(g => g.id === data.c1?.id))
-                setGroups(prev => [...prev, {id: data.c1?.id, poule: data.poule}])
+                setGroups(prev => [...prev, {id: data.c1?.id, poule: data.poule}]);
             if (data.c2 !== null && !groupsRef.current.some(g => g.id === data.c2?.id))
-                setGroups(prev => [...prev, {id: data.c2?.id, poule: data.poule}])
+                setGroups(prev => [...prev, {id: data.c2?.id, poule: data.poule}]);
         }
 
         dispatch({type: 'addListener', payload: {callback: treeListener, code: 'sendTreeCategory'}})
@@ -92,10 +92,22 @@ export function CategoryContent({cat, catId, setCat}) {
             }).finally(() => setLoading(0))
     }, [catId]);
 
+    const removeGroup = (combId) => {
+        if (matches.some(d => d.c1 === combId || d.c2 === combId)) {
+            setGroups(prev => prev.map(g => {
+                if (g.id === combId)
+                    return {...g, poule: "-"}
+                return g;
+            }))
+        } else {
+            setGroups(prev => prev.filter(g => g.id !== combId))
+        }
+    }
+
 
     return <>
         <div className="col-md-3">
-            <AddComb groups={groups} setGroups={setGroups}/>
+            <AddComb groups={groups} setGroups={setGroups} removeGroup={removeGroup}/>
         </div>
         <div className="col-md-9">
             {cat && <ListMatch cat={cat} matches={matches} groups={groups}/>}
@@ -103,10 +115,11 @@ export function CategoryContent({cat, catId, setCat}) {
     </>
 }
 
-function AddComb({groups, setGroups}) {
+function AddComb({groups, setGroups, removeGroup}) {
     const {data, setData} = useRequestWS("getRegister", null)
-    const combDispatch = useCombsDispatch();
+    const combDispatch = useCombsDispatch()
-    const {dispatch} = useWS();
+    const {dispatch} = useWS()
+    const [modalId, setModalId] = useState(null)
 
     useEffect(() => {
         const sendRegister = ({data}) => {
@@ -139,14 +152,7 @@ function AddComb({groups, setGroups}) {
     }, [data]);
 
     return <>
-        <ol className="list-group list-group-numbered">
+        <GroupsList groups={groups} setModalId={setModalId}/>
-            {groups.map((comb) => (
-                <li key={comb.id} className="list-group-item list-group-item-action d-flex justify-content-between align-items-start">
-                    <div className="ms-2 me-auto"><CombName combId={comb.id}/></div>
-                    <span className="badge text-bg-primary rounded-pill">{comb.poule}</span>
-                </li>)
-            )}
-        </ol>
         <button type="button" className="btn btn-primary mt-3 w-100" data-bs-toggle="modal" data-bs-target="#selectCombModal"
                 disabled={data === null}>Ajouter des combattants
         </button>
@@ -158,9 +164,108 @@ function AddComb({groups, setGroups}) {
                 </div>
             </div>
         </div>
+
+        <div className="modal fade" id="groupeModal" tabIndex="-1">
+            <div className="modal-dialog">
+                <div className="modal-content">
+                    <GroupModalContent combId={modalId} groups={groups} setGroups={setGroups} removeGroup={removeGroup}/>
+                </div>
+            </div>
+        </div>
     </>
 }
 
+function GroupsList({groups, setModalId}) {
+    const {getComb} = useCombs();
+
+    const groups2 = groups.map(g => {
+        const comb = getComb(g.id);
+        return {...g, name: comb ? comb.fname + " " + comb.lname : ""};
+    }).sort((a, b) => {
+        if (a.poule !== b.poule)
+            return a.poule.localeCompare(b.poule);
+        return a.name.localeCompare(b.name);
+    }).reduce((acc, curr) => {
+        const poule = curr.poule;
+        if (!acc[poule]) {
+            acc[poule] = [];
+        }
+        acc[poule].push(curr);
+        return acc;
+    }, {});
+
+    return <>
+        {Object.keys(groups2).map((poule) => (
+            <div key={poule} className="mb-3">
+                <h5>{poule !== '-' ? "Poule: " + poule : "Sans poule"}</h5>
+                <ol className="list-group list-group-numbered">
+                    {groups2[poule].map((comb) => (
+                        <li key={comb.id} className="list-group-item list-group-item-action d-flex justify-content-between align-items-start"
+                            data-bs-toggle="modal" data-bs-target="#groupeModal" onClick={_ => setModalId(comb.id)}>
+                            <div className="ms-2 me-auto"><CombName combId={comb.id}/></div>
+                            <span className="badge text-bg-primary rounded-pill">{comb.poule}</span>
+                        </li>)
+                    )}
+                </ol>
+            </div>
+        ))}
+    </>
+}
+
+function GroupModalContent({combId, groups, setGroups, removeGroup}) {
+    const inputRef = useRef(null);
+    const [pouleInput, setPouleInput] = useState(groups.find(g => g.id === combId)?.poule || "")
+
+    useEffect(() => {
+        setPouleInput(groups.find(g => g.id === combId)?.poule || "")
+    }, [combId]);
+
+    const handleClick = () => {
+        if (pouleInput.trim().length !== 1 || pouleInput === "-")
+            return;
+
+        setGroups(prev => prev.map(g => {
+            if (g.id === combId)
+                return {...g, poule: pouleInput}
+            return g;
+        }))
+        // close modal
+        const modal = document.getElementById("groupeModal");
+        const modalInstance = window.bootstrap.Modal.getInstance(modal);
+        modalInstance.hide();
+    }
+
+    if (inputRef.current) {
+        setTimeout(() => {
+            inputRef.current.focus()
+            inputRef.current.select()
+        }, 500);
+    }
+
+    return <>
+        <div className="modal-header">
+            <h5 className="modal-title">Poule pour: <CombName combId={combId}/></h5>
+            <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div className="modal-body">
+            <input ref={inputRef} type="text" className="form-control" value={pouleInput} maxLength="1" onChange={e => setPouleInput(e.target.value)}
+                   onKeyDown={event => {
+                       if (event.key === 'Enter')
+                           handleClick();
+                   }}/>
+        </div>
+        <div className="modal-footer">
+            <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" className="btn btn-primary" onClick={handleClick}>Enregister</button>
+            <button type="button" className="btn btn-danger" data-bs-dismiss="modal" onClick={() => {
+                removeGroup(combId)
+            }}>Supprimer
+            </button>
+        </div>
+    </>
+
+}
+
 function ListMatch({cat, matches, groups}) {
     const [type, setType] = useState(1);
 

src/main/webapp/src/pages/competition/editor/SelectCombModalContent.jsx

@@ -277,7 +277,10 @@ export function SelectCombModalContent({data, setGroups}) {
             <div className="vr"></div>
             <label htmlFor="input6" className="form-label">Poule</label>
             <input type="text" className="form-control" id="input6" style={{width: "3em"}} maxLength={1} value={targetGroupe}
-                   onChange={(e) => setTargetGroupe(e.target.value)}/>
+                   onChange={(e) => {
+                       if (/^[a-zA-Z0-9]$/.test(e.target.value))
+                           setTargetGroupe(e.target.value)
+                   }}/>
             <button type="submit" className="btn btn-primary" data-bs-dismiss="modal" onClick={handleSubmit}>Ajouter</button>
         </div>
     </>