public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 10:20:16 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Scrollable team list

Browse Source
This commit is contained in:
Sebastien Riviere
2025-08-30 16:19:30 +02:00
parent cb534ed1aa
commit e5d90d824e
39 changed files with 163 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
traque-front/app/admin/parameters/components/teamManager.jsx
View File

@@ -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>
);
}