Mise en page complète + liaison partielle au backend

2026-02-09 10:20:16 +01:00 · 2025-08-26 23:33:22 +02:00
parent a373c38204
commit 4a8d005f44
21 changed files with 399 additions and 214 deletions
--- a/traque-front/components/admin/teamManager.jsx
+++ b/traque-front/components/admin/teamManager.jsx
@@ -0,0 +1,82 @@
+import useAdmin from '@/hook/useAdmin';
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import React, { useState } from 'react'
+
+function reorder(list, startIndex, endIndex) {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+};
+
+function TeamListItem({ team, index }) {
+    const { removeTeam } = useAdmin();
+
+    function handleRemove() {
+        removeTeam(team.id);
+    }
+
+    return (
+        <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
+            {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} />
+                        </div>
+                    </div>
+                </div>
+            )}
+        </Draggable>
+    );
+}
+
+export default function TeamList() {
+    const { teams, reorderTeams, addTeam } = useAdmin();
+    const [teamName, setTeamName] = useState('');
+    
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (teamName !== "") {
+            addTeam(teamName);
+            setTeamName("")
+        }
+    }
+    
+    function onDragEnd(result) {
+        if (!result.destination) return;
+        if (result.destination.index === result.source.index) return;
+        const newTeams = reorder(teams, result.source.index, result.destination.index);
+        reorderTeams(newTeams);
+    }
+
+    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>
+    );
+}