Rende ad accordion l'elenco Profili in admin: una sola scheda aperta
Lo stato "quale giocatore è aperto" sale a Dashboard invece di essere locale a ogni SchedaGiocatore, così aprirne una chiude quella precedente. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+15
-7
@@ -380,13 +380,16 @@ function SchedaGiocatore({
|
|||||||
profilo,
|
profilo,
|
||||||
oggi,
|
oggi,
|
||||||
indice,
|
indice,
|
||||||
|
aperta,
|
||||||
|
onToggle,
|
||||||
}: {
|
}: {
|
||||||
g: GiocatoreSquadra;
|
g: GiocatoreSquadra;
|
||||||
profilo: Profilo | undefined;
|
profilo: Profilo | undefined;
|
||||||
oggi: string;
|
oggi: string;
|
||||||
indice: number;
|
indice: number;
|
||||||
|
aperta: boolean;
|
||||||
|
onToggle: () => void;
|
||||||
}) {
|
}) {
|
||||||
const [aperta, setAperta] = useState(false);
|
|
||||||
const nome = nomeCompleto(g);
|
const nome = nomeCompleto(g);
|
||||||
const { ruolo, numero } = g;
|
const { ruolo, numero } = g;
|
||||||
const perc = completamento(profilo);
|
const perc = completamento(profilo);
|
||||||
@@ -397,11 +400,7 @@ function SchedaGiocatore({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Reveal indice={indice} className="rounded-2xl bg-card p-4 shadow-card">
|
<Reveal indice={indice} className="rounded-2xl bg-card p-4 shadow-card">
|
||||||
<button
|
<button type="button" onClick={onToggle} className="flex w-full items-center gap-3 text-left">
|
||||||
type="button"
|
|
||||||
onClick={() => setAperta((v) => !v)}
|
|
||||||
className="flex w-full items-center gap-3 text-left"
|
|
||||||
>
|
|
||||||
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-secondary font-display text-sm tabular-nums">
|
<div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-secondary font-display text-sm tabular-nums">
|
||||||
{numero}
|
{numero}
|
||||||
</div>
|
</div>
|
||||||
@@ -620,6 +619,7 @@ function Dashboard() {
|
|||||||
const { righe: squadra } = useGiocatoriSquadra();
|
const { righe: squadra } = useGiocatoriSquadra();
|
||||||
const { profili, isPending } = useProfili();
|
const { profili, isPending } = useProfili();
|
||||||
const { data: notificheAttive } = useNotificheAttive();
|
const { data: notificheAttive } = useNotificheAttive();
|
||||||
|
const [schedaAperta, setSchedaAperta] = useState<string | null>(null);
|
||||||
const oggi = oggiISO();
|
const oggi = oggiISO();
|
||||||
|
|
||||||
if (!admin) {
|
if (!admin) {
|
||||||
@@ -676,7 +676,15 @@ function Dashboard() {
|
|||||||
) : (
|
) : (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{attivi.map((g, i) => (
|
{attivi.map((g, i) => (
|
||||||
<SchedaGiocatore key={g.id} g={g} profilo={profili[g.id]} oggi={oggi} indice={i} />
|
<SchedaGiocatore
|
||||||
|
key={g.id}
|
||||||
|
g={g}
|
||||||
|
profilo={profili[g.id]}
|
||||||
|
oggi={oggi}
|
||||||
|
indice={i}
|
||||||
|
aperta={schedaAperta === g.id}
|
||||||
|
onToggle={() => setSchedaAperta((v) => (v === g.id ? null : g.id))}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user