Front : programmation des artistes et vœux des bénévoles
Aligne le frontend sur le back-end (étape 13). - Types : retrait de `tshirt_size` / `diet` (Volunteer et mapping d'import) ; ajout de `ArtistRead/Create/Update` et des champs `artist_ids` / `wished_position_ids` sur la fiche bénévole. - Surface API `artists` (HTTP + mock) et hooks `useArtists` / `useCreateArtist` / `useUpdateArtist` / `useDeleteArtist`. - Nouvel onglet Configuration « Programmation » : liste d'artistes éditable, colonne par jour de l'édition (création, renommage, suppression ; 409 doublon, 422 nom vide). - Fiche bénévole & formulaire d'ajout manuel : champs t-shirt / régime retirés, sélecteurs « Artistes à voir » et « Postes souhaités » (puces retirables, 422 si id étranger). - Mock : jeu de démo enrichi (2 artistes par jour, vœux aléatoires), cascade sur suppression d'artiste / de poste, import CSV sans t-shirt / régime. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017uUsRg7XzopkCPWimwg9ZM
This commit is contained in:
AdamThomas
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
24caece7df
commit
81609eecc5
@@ -0,0 +1,167 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import {
|
||||
useArtists,
|
||||
useCreateArtist,
|
||||
useDeleteArtist,
|
||||
useEdition,
|
||||
useUpdateArtist,
|
||||
} from '@/api/hooks';
|
||||
import type { ArtistRead } from '@/api/schema';
|
||||
import { ErrorNote, Loading } from '@/components/state';
|
||||
import { Panel, PanelHeader } from '@/components/ui';
|
||||
import { t } from '@/i18n';
|
||||
import { longDayLabel } from '@/lib/time';
|
||||
|
||||
function editionDays(start: string, end: string): string[] {
|
||||
const out: string[] = [];
|
||||
for (
|
||||
let d = Date.parse(`${start}T00:00:00Z`);
|
||||
d <= Date.parse(`${end}T00:00:00Z`);
|
||||
d += 86_400_000
|
||||
) {
|
||||
out.push(new Date(d).toISOString().slice(0, 10));
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// Programmation de l'édition : la liste d'artistes que les bénévoles pourront
|
||||
// choisir (voir onglet « Bénévoles & import »). Constituée jour par jour.
|
||||
export function ConfigArtists() {
|
||||
const edition = useEdition();
|
||||
const artists = useArtists();
|
||||
|
||||
const byDate = useMemo(() => {
|
||||
const map = new Map<string, ArtistRead[]>();
|
||||
for (const a of artists.data ?? []) {
|
||||
const list = map.get(a.performance_date) ?? [];
|
||||
list.push(a);
|
||||
map.set(a.performance_date, list);
|
||||
}
|
||||
for (const list of map.values()) {
|
||||
list.sort((a, b) => a.name.localeCompare(b.name, 'fr'));
|
||||
}
|
||||
return map;
|
||||
}, [artists.data]);
|
||||
|
||||
if (edition.isLoading || artists.isLoading) return <Loading />;
|
||||
const error = edition.error ?? artists.error;
|
||||
if (error) return <ErrorNote error={error} />;
|
||||
|
||||
const days = edition.data
|
||||
? editionDays(edition.data.start_date, edition.data.end_date)
|
||||
: [];
|
||||
const extraDays = [...byDate.keys()].filter((d) => !days.includes(d)).sort();
|
||||
const total = artists.data?.length ?? 0;
|
||||
|
||||
return (
|
||||
<div className="max-h-[calc(100vh-118px)] min-h-0 flex-1 overflow-auto p-4">
|
||||
<div className="mb-[14px] flex flex-wrap items-stretch gap-3">
|
||||
<div className="flex flex-1 flex-col justify-center gap-1 border-[3px] border-ink bg-paper p-[14px] shadow-brutal-lg">
|
||||
<span className="font-display text-[15px] font-black">{t('config.artists.title')}</span>
|
||||
<span className="font-mono text-[10px] leading-relaxed opacity-70">
|
||||
{t('config.artists.hint')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-none border-[3px] border-ink bg-paper px-[14px] py-3 shadow-brutal-lg">
|
||||
<div className="font-mono text-[24px] font-bold">{total}</div>
|
||||
<div className="mt-1 font-display text-[9px] font-extrabold uppercase tracking-wide">
|
||||
{t('config.artists.count')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid items-start gap-4 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
|
||||
{days.map((date) => (
|
||||
<DayColumn key={date} date={date} artists={byDate.get(date) ?? []} />
|
||||
))}
|
||||
{extraDays.map((date) => (
|
||||
<DayColumn key={date} date={date} artists={byDate.get(date) ?? []} outside />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DayColumn({
|
||||
date,
|
||||
artists,
|
||||
outside = false,
|
||||
}: {
|
||||
date: string;
|
||||
artists: ArtistRead[];
|
||||
outside?: boolean;
|
||||
}) {
|
||||
const create = useCreateArtist();
|
||||
const update = useUpdateArtist();
|
||||
const remove = useDeleteArtist();
|
||||
const [draft, setDraft] = useState('');
|
||||
|
||||
const add = () => {
|
||||
const name = draft.trim();
|
||||
if (!name) return;
|
||||
create.mutate(
|
||||
{ name, performance_date: date },
|
||||
{ onSuccess: () => setDraft('') },
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Panel shadow="lg">
|
||||
<PanelHeader>
|
||||
{longDayLabel(`${date}T12:00`)}
|
||||
{outside ? ` · ${t('config.artists.outside')}` : ''}
|
||||
</PanelHeader>
|
||||
<div className="flex flex-col gap-[6px] p-[13px]">
|
||||
{artists.length === 0 ? (
|
||||
<div className="font-mono text-[10px] opacity-55">{t('config.artists.empty')}</div>
|
||||
) : null}
|
||||
{artists.map((a) => (
|
||||
<div key={a.id} className="flex items-center gap-1">
|
||||
<input
|
||||
defaultValue={a.name}
|
||||
onBlur={(e) => {
|
||||
const v = e.target.value.trim();
|
||||
if (v && v !== a.name) update.mutate({ id: a.id, body: { name: v } });
|
||||
}}
|
||||
className="min-w-0 flex-1 border-2 border-ink bg-paper px-2 py-1 font-display text-[12px] font-bold"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove.mutate(a.id)}
|
||||
aria-label={t('action.remove')}
|
||||
className="h-[26px] w-[26px] flex-none cursor-pointer border-2 border-ink bg-cream font-display text-[11px] font-bold hover:bg-orange"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="mt-1 flex items-center gap-1 border-t-2 border-ink pt-2">
|
||||
<input
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
add();
|
||||
}
|
||||
}}
|
||||
placeholder={t('config.artists.namePlaceholder')}
|
||||
className="min-w-0 flex-1 border-2 border-ink bg-yellow px-2 py-1 font-display text-[12px] font-bold"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!draft.trim() || create.isPending}
|
||||
onClick={add}
|
||||
className="h-[26px] flex-none cursor-pointer border-2 border-ink bg-ink px-2 font-display text-[10px] font-extrabold uppercase text-cream hover:bg-yellow hover:text-ink disabled:opacity-50"
|
||||
>
|
||||
{t('action.add')}
|
||||
</button>
|
||||
</div>
|
||||
{create.isError ? <ErrorNote error={create.error} /> : null}
|
||||
{update.isError ? <ErrorNote error={update.error} /> : null}
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user