Scrollable team list

traque-front/app/admin/parameters/components/teamManager.jsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import { List } from '@/components/list';
 import useAdmin from '@/hook/useAdmin';
 
 function reorder(list, startIndex, endIndex) {
@@ -9,23 +9,23 @@ function reorder(list, startIndex, endIndex) {
     return result;
 };
 
-function TeamListItem({ team, index }) {
-    const { removeTeam } = useAdmin();
+function TeamManagerItem({ team, index }) {
+    const { updateTeam, removeTeam } = useAdmin();
 
     function handleRemove() {
         removeTeam(team.id);
     }
 
     return (
-        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+        <Draggable draggableId={team.id.toString()} index={index}>
             {provided => (
                 <div className='w-full p-2 bg-white flex flex-row items-center text-xl gap-3 font-bold' {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}>
                     <div className='flex-1 w-full h-full flex flex-row items-center justify-between'>
                         <p>{team.name}</p>
                         <div className='flex flex-row items-center justify-between gap-3'>
                             <p>{String(team.id).padStart(6, '0').replace(/(\d{3})(\d{3})/, "$1 $2")}</p>
-                            <img src="/icons/home.png" className="w-8 h-8" />
-                            <img src="/icons/home.png" className="w-8 h-8" onClick={handleRemove} />
+                            <img src={`/icons/heart/${team.captured ? "grey" : "pink"}.png`} className="w-8 h-8" onClick={() => updateTeam(team.id, { captured: !team.captured })} />
+                            <img src="/icons/trash.png" className="w-8 h-8" onClick={handleRemove} />
                         </div>
                     </div>
                 </div>
@@ -34,17 +34,8 @@ function TeamListItem({ team, index }) {
     );
 }
 
-export default function TeamList() {
-    const { teams, reorderTeams, addTeam } = useAdmin();
-    const [teamName, setTeamName] = useState('');
-    
-    function handleSubmit(e) {
-        e.preventDefault();
-        if (teamName !== "") {
-            addTeam(teamName);
-            setTeamName("")
-        }
-    }
+export default function TeamManager() {
+    const { teams, reorderTeams } = useAdmin();
     
     function onDragEnd(result) {
         if (!result.destination) return;
@@ -54,29 +45,19 @@ export default function TeamList() {
     }
 
     return (
-        <div className='w-full h-full flex flex-col gap-3'>
-            <form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
-                <div className='w-full'>
-                    <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
-                </div>
-                <div className='w-1/5'>
-                    <button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
-                </div>
-            </form>
-            <DragDropContext onDragEnd={onDragEnd} >
-                <Droppable droppableId='team-list'>
-                    {provided => (
-                        <ul className='w-full h-full gap-1 flex flex-col bg-gray-300 p-1' ref={provided.innerRef} {...provided.droppableProps}>
-                            {teams.map((team, i) => (
-                                <li key={team.id}>
-                                    <TeamListItem index={i} team={team} />
-                                </li>
-                            ))}
-                            {provided.placeholder}
-                        </ul>
-                    )}
-                </Droppable>
-            </DragDropContext>
-        </div>
+        <DragDropContext onDragEnd={onDragEnd} >
+            <Droppable droppableId='team-list'>
+                {provided => (
+                    <div className='w-full h-full' ref={provided.innerRef} {...provided.droppableProps}>
+                        <List array={teams}>
+                            {(team, i) => (
+                                <TeamManagerItem index={i} team={team}/>
+                            )}
+                        </List>
+                        {provided.placeholder}
+                    </div>
+                )}
+            </Droppable>
+        </DragDropContext>
     );
 }

traque-front/app/admin/parameters/page.js

@@ -7,15 +7,16 @@ import { Section } from "@/components/section";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from '@/hook/useAdmin';
 import Messages from "./components/messages";
-import TeamList from './components/teamManager';
+import TeamManager from './components/teamManager';
 
 // Imported at runtime and not at compile time
 const ZoneSelector = dynamic(() => import('./components/polygonZoneMap'), { ssr: false });
 
 export default function AdminPage() {
-    const {penaltySettings, changePenaltySettings} = useAdmin();
+    const {penaltySettings, changePenaltySettings, addTeam} = useAdmin();
     const { useProtect } = useAdminConnexion();
     const [allowedTimeBetweenUpdates, setAllowedTimeBetweenUpdates] = useState("");
+    const [teamName, setTeamName] = useState('');
 
     useProtect();
     
@@ -30,10 +31,18 @@ export default function AdminPage() {
             changePenaltySettings({allowedTimeBetweenPositionUpdate: Number(allowedTimeBetweenUpdates)});
         }
     }
+    
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (teamName !== "") {
+            addTeam(teamName);
+            setTeamName("")
+        }
+    }
 
     return (
         <div className='h-full bg-gray-200 p-3 flex flex-row gap-3'>
-            <div className="h-full w-3/6 gap-3 flex flex-col">
+            <div className="h-full w-2/6 gap-3 flex flex-col">
                 <div className='w-full bg-custom-light-blue gap-5 p-5 flex flex-row shadow-2xl'>
                     <Link href="/admin">
                         <img src="/icons/backarrow.png" className="w-8 h-8" title="Main page" />
@@ -41,19 +50,27 @@ export default function AdminPage() {
                     <h2 className="text-3xl font-bold">Paramètres</h2>
                 </div>
                 <Messages/>
-                <Section className="h-full" title="Équipe">
-                    <div className="w-full h-full gap-3 flex flex-col items-center">
-                        <TeamList/>
-                        <div className="w-full flex flex-row gap-2 items-center justify-between">
-                            <p>Interval between position updates</p>
-                            <div className="w-16 h-10">
-                                <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
-                            </div>
+                <Section title="Équipe" outerClassName="flex-1 min-h-0" innerClassName="flex flex-col items-center gap-3">
+                    <form className='w-full flex flex-row gap-3' onSubmit={handleSubmit}>
+                        <div className='w-full'>
+                            <input name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)} type="text" className="w-full h-full p-4 ring-1 ring-inset ring-gray-300" />
+                        </div>
+                        <div className='w-1/5'>
+                            <button type="submit" className="w-full h-full bg-custom-light-blue hover:bg-blue-500 transition text-3xl font-bold">+</button>
+                        </div>
+                    </form>
+                    <div className="w-full flex-1 min-h-0 ">
+                        <TeamManager/>
+                    </div>
+                    <div className="w-full flex flex-row gap-2 items-center justify-between">
+                        <p>Interval between position updates</p>
+                        <div className="w-16 h-10">
+                            <TextInput value={allowedTimeBetweenUpdates} onChange={(e) => setAllowedTimeBetweenUpdates(e.target.value)} onBlur={applySettings} />
                         </div>
                     </div>
                 </Section>
             </div>
-            <div className="h-full w-full">
+            <div className="h-full flex-1">
                 <ZoneSelector />
             </div>
         </div>