Créneaux types : paramétrage + génération auto des créneaux
Le paramétrage des créneaux se fait dans « Règles & édition » : la coordination
définit des créneaux types (DayPart). À la création d'un poste, un créneau à
besoin 0/0 est généré pour chaque jour de l'édition et chaque créneau type ;
les coordinateurs ajustent ensuite min/idéal.
Back-end :
- DayPart CRUD (GET/POST/PATCH/DELETE /editions/{id}/day-parts). Code figé
après création (slugifié depuis le libellé si absent), unique par édition.
- Shift.day_part_id (nullable, SET NULL) + migration 0004.
- create_position génère les créneaux ; POST .../positions/{pid}/generate-shifts
recrée les manquants (idempotent, ne touche pas aux besoins déjà réglés).
- 13 tests (day-parts, génération, extension d'édition, ajout de type).
Front-end :
- api/hooks/mock : dayParts CRUD + positions.generateShifts.
- ConfigRules : panneau « Créneaux types » (libellé + horaires éditables,
ajout, suppression).
- ConfigGrid : bouton « Générer les créneaux » sur l'en-tête du poste.
- GrillePage : case « à définir » (gris, glyphe ·) quand min=idéal=0, avec
entrée de légende.
155 tests back OK ; typecheck + lint + build + smoke front OK.
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
cee581b832
commit
f58ec00e30
@@ -10,6 +10,8 @@ import type {
|
||||
AssignmentCreate,
|
||||
AssignmentUpdate,
|
||||
AssignmentValidateResult,
|
||||
DayPartCreate,
|
||||
DayPartUpdate,
|
||||
EditionUpdate,
|
||||
PlanningNotificationRequest,
|
||||
PositionCreate,
|
||||
@@ -41,6 +43,10 @@ export function useEdition() {
|
||||
return useQuery({ queryKey: queryKeys.edition, queryFn: () => api.editions.get(edition) });
|
||||
}
|
||||
|
||||
export function useDayParts() {
|
||||
return useQuery({ queryKey: ['dayParts', edition], queryFn: () => api.dayParts.list(edition) });
|
||||
}
|
||||
|
||||
export function useVolunteers(options?: { enabled?: boolean }) {
|
||||
return useQuery({
|
||||
queryKey: queryKeys.volunteers,
|
||||
@@ -122,6 +128,47 @@ export function useUpdateEdition() {
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateDayPart() {
|
||||
const client = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: (body: DayPartCreate) => api.dayParts.create(edition, body),
|
||||
onSuccess: () => client.invalidateQueries({ queryKey: ['dayParts', edition] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useUpdateDayPart() {
|
||||
const client = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, body }: { id: string; body: DayPartUpdate }) =>
|
||||
api.dayParts.update(edition, id, body),
|
||||
onSuccess: () => client.invalidateQueries({ queryKey: ['dayParts', edition] }),
|
||||
});
|
||||
}
|
||||
|
||||
export function useDeleteDayPart() {
|
||||
const client = useQueryClient();
|
||||
const invalidate = useInvalidate();
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => api.dayParts.remove(edition, id),
|
||||
onSuccess: () => {
|
||||
client.invalidateQueries({ queryKey: ['dayParts', edition] });
|
||||
invalidate.shifts();
|
||||
invalidate.planning();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useGenerateShifts() {
|
||||
const invalidate = useInvalidate();
|
||||
return useMutation({
|
||||
mutationFn: (positionId: string) => api.positions.generateShifts(edition, positionId),
|
||||
onSuccess: () => {
|
||||
invalidate.shifts();
|
||||
invalidate.planning();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useCreateVolunteer() {
|
||||
const invalidate = useInvalidate();
|
||||
return useMutation({
|
||||
@@ -156,6 +203,7 @@ export function useCreatePosition() {
|
||||
mutationFn: (body: PositionCreate) => api.positions.create(edition, body),
|
||||
onSuccess: () => {
|
||||
invalidate.positions();
|
||||
invalidate.shifts();
|
||||
invalidate.planning();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -2,6 +2,8 @@ import type {
|
||||
AssignmentCreate,
|
||||
AssignmentUpdate,
|
||||
AssignmentValidateRequest,
|
||||
DayPartCreate,
|
||||
DayPartUpdate,
|
||||
EditionUpdate,
|
||||
LoginRequest,
|
||||
MagicLinkRequest,
|
||||
@@ -72,6 +74,15 @@ export function createHttpApi(baseUrl: string): PlanningApi {
|
||||
update: (editionId, body: EditionUpdate) =>
|
||||
request(base(editionId), { method: 'PATCH', body: JSON.stringify(body) }),
|
||||
},
|
||||
dayParts: {
|
||||
list: (editionId) => request(`${base(editionId)}/day-parts`),
|
||||
create: (editionId, body: DayPartCreate) =>
|
||||
request(`${base(editionId)}/day-parts`, { method: 'POST', body: JSON.stringify(body) }),
|
||||
update: (editionId, id, body: DayPartUpdate) =>
|
||||
request(`${base(editionId)}/day-parts/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
|
||||
remove: (editionId, id) =>
|
||||
request(`${base(editionId)}/day-parts/${id}`, { method: 'DELETE' }),
|
||||
},
|
||||
volunteers: {
|
||||
list: (editionId) => request(`${base(editionId)}/volunteers`),
|
||||
get: (editionId, id) => request(`${base(editionId)}/volunteers/${id}`),
|
||||
@@ -91,6 +102,8 @@ export function createHttpApi(baseUrl: string): PlanningApi {
|
||||
request(`${base(editionId)}/positions/${id}`, { method: 'PATCH', body: JSON.stringify(body) }),
|
||||
remove: (editionId, id) =>
|
||||
request(`${base(editionId)}/positions/${id}`, { method: 'DELETE' }),
|
||||
generateShifts: (editionId, id) =>
|
||||
request(`${base(editionId)}/positions/${id}/generate-shifts`, { method: 'POST' }),
|
||||
},
|
||||
shifts: {
|
||||
list: (editionId, params) =>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { hoursBetween } from '@/lib/time';
|
||||
import type {
|
||||
AccountRead,
|
||||
AssignmentRead,
|
||||
DayPartRead,
|
||||
EditionRead,
|
||||
PositionCategory,
|
||||
PositionRead,
|
||||
@@ -10,6 +11,10 @@ import type {
|
||||
VolunteerRead,
|
||||
} from '../schema';
|
||||
|
||||
const PART_LABELS: Record<string, string> = { M: 'Matin', A: 'Après-midi', S: 'Soirée', N: 'Nuit' };
|
||||
const PART_CODES: Record<string, string> = { M: 'MATIN', A: 'APRES_MIDI', S: 'SOIREE', N: 'NUIT' };
|
||||
const hhmm = (h: number) => `${String(h % 24).padStart(2, '0')}:00:00`;
|
||||
|
||||
// Jeu de démonstration déterministe, mis en forme comme les réponses de l'API.
|
||||
// Sert quand `VITE_API_MODE=mock` (défaut tant que le back-end n'a pas de seed).
|
||||
|
||||
@@ -21,6 +26,7 @@ export const DEMO_COORDINATOR_PASSWORD = 'demo';
|
||||
|
||||
export interface MockState {
|
||||
edition: EditionRead;
|
||||
dayParts: DayPartRead[];
|
||||
volunteers: VolunteerRead[];
|
||||
positions: PositionRead[];
|
||||
shifts: ShiftRead[];
|
||||
@@ -126,6 +132,18 @@ export function buildMockState(): MockState {
|
||||
updated_at: NOW,
|
||||
}));
|
||||
|
||||
const dayParts: DayPartRead[] = PART_BOUNDS.map(([code, start, end], i) => ({
|
||||
id: `dp_${code}`,
|
||||
edition_id,
|
||||
code: PART_CODES[code] ?? code,
|
||||
label: PART_LABELS[code] ?? code,
|
||||
start_time: hhmm(start),
|
||||
end_time: hhmm(end),
|
||||
order: i,
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
}));
|
||||
|
||||
const shifts: ShiftRead[] = [];
|
||||
let shiftSeq = 1;
|
||||
for (const raw of RAW_POSITIONS) {
|
||||
@@ -136,6 +154,7 @@ export function buildMockState(): MockState {
|
||||
id: `s${shiftSeq}`,
|
||||
edition_id,
|
||||
position_id: raw.id,
|
||||
day_part_id: `dp_${code}`,
|
||||
starts_at: iso(dateStr, bounds[1]),
|
||||
ends_at: iso(dateStr, bounds[2]),
|
||||
min_staff,
|
||||
@@ -341,6 +360,7 @@ export function buildMockState(): MockState {
|
||||
|
||||
return {
|
||||
edition,
|
||||
dayParts,
|
||||
volunteers,
|
||||
positions,
|
||||
shifts,
|
||||
|
||||
@@ -4,6 +4,9 @@ import type {
|
||||
AccountRead,
|
||||
AssignmentRead,
|
||||
AssignmentValidateResult,
|
||||
DayPartCreate,
|
||||
DayPartRead,
|
||||
DayPartUpdate,
|
||||
EditionUpdate,
|
||||
MatrixResponse,
|
||||
PlanningNotificationRequest,
|
||||
@@ -67,6 +70,57 @@ const notFound = (): never => {
|
||||
|
||||
const touch = () => new Date().toISOString().replace(/\.\d+Z$/, '');
|
||||
|
||||
const addDays = (day: string, n: number): string => {
|
||||
const [y, m, d] = day.split('-').map(Number);
|
||||
return new Date(Date.UTC(y, m - 1, d + n)).toISOString().slice(0, 10);
|
||||
};
|
||||
|
||||
const slugCode = (label: string): string =>
|
||||
label
|
||||
.trim()
|
||||
.toUpperCase()
|
||||
.normalize('NFD')
|
||||
.replace(/[^A-Z0-9]+/g, '_')
|
||||
.replace(/^_+|_+$/g, '');
|
||||
|
||||
function shiftWindow(day: string, dp: DayPartRead): [string, string] {
|
||||
const endDay = dp.end_time <= dp.start_time ? addDays(day, 1) : day;
|
||||
return [`${day}T${dp.start_time}`, `${endDay}T${dp.end_time}`];
|
||||
}
|
||||
|
||||
function generateMissingShifts(positionId: string): number {
|
||||
const existing = new Set(
|
||||
state.shifts
|
||||
.filter((s) => s.position_id === positionId)
|
||||
.map((s) => `${s.day_part_id}|${s.starts_at.slice(0, 10)}`),
|
||||
);
|
||||
let created = 0;
|
||||
let day = state.edition.start_date;
|
||||
while (day <= state.edition.end_date) {
|
||||
for (const dp of state.dayParts) {
|
||||
if (existing.has(`${dp.id}|${day}`)) continue;
|
||||
const [starts_at, ends_at] = shiftWindow(day, dp);
|
||||
const now = touch();
|
||||
state.shifts.push({
|
||||
id: `s${state.seq++}`,
|
||||
edition_id: state.edition.id,
|
||||
position_id: positionId,
|
||||
day_part_id: dp.id,
|
||||
starts_at,
|
||||
ends_at,
|
||||
min_staff: 0,
|
||||
ideal_staff: 0,
|
||||
required_skill_codes: [],
|
||||
created_at: now,
|
||||
updated_at: now,
|
||||
});
|
||||
created += 1;
|
||||
}
|
||||
day = addDays(day, 1);
|
||||
}
|
||||
return created;
|
||||
}
|
||||
|
||||
function shiftById(id: string): ShiftRead {
|
||||
const shift = state.shifts.find((s) => s.id === id);
|
||||
if (!shift) return notFound();
|
||||
@@ -228,6 +282,50 @@ export function createMockApi(): PlanningApi {
|
||||
return delay(state.edition);
|
||||
},
|
||||
},
|
||||
dayParts: {
|
||||
list: () =>
|
||||
delay([...state.dayParts].sort((a, b) => a.order - b.order || a.start_time.localeCompare(b.start_time))),
|
||||
create: (_edition, body: DayPartCreate) => {
|
||||
const code = (body.code ?? slugCode(body.label)).trim();
|
||||
if (!code) throw new ApiError(422, 'day_part.code_required');
|
||||
if (state.dayParts.some((d) => d.code === code)) {
|
||||
throw new ApiError(409, 'day_part.duplicate_code');
|
||||
}
|
||||
const now = touch();
|
||||
const dp: DayPartRead = {
|
||||
id: `dp_${state.seq++}`,
|
||||
edition_id: state.edition.id,
|
||||
code,
|
||||
label: body.label.trim(),
|
||||
start_time: body.start_time,
|
||||
end_time: body.end_time,
|
||||
order: body.order ?? 0,
|
||||
created_at: now,
|
||||
updated_at: now,
|
||||
};
|
||||
state.dayParts.push(dp);
|
||||
return delay(dp);
|
||||
},
|
||||
update: (_edition, id, body: DayPartUpdate) => {
|
||||
const dp = state.dayParts.find((d) => d.id === id) ?? notFound();
|
||||
Object.assign(dp, {
|
||||
...('label' in body ? { label: body.label } : {}),
|
||||
...('start_time' in body ? { start_time: body.start_time } : {}),
|
||||
...('end_time' in body ? { end_time: body.end_time } : {}),
|
||||
...('order' in body ? { order: body.order } : {}),
|
||||
updated_at: touch(),
|
||||
});
|
||||
return delay(dp);
|
||||
},
|
||||
remove: (_edition, id) => {
|
||||
state.dayParts = state.dayParts.filter((d) => d.id !== id);
|
||||
state.shifts.forEach((s) => {
|
||||
if (s.day_part_id === id) s.day_part_id = null;
|
||||
});
|
||||
return delay(undefined);
|
||||
},
|
||||
},
|
||||
|
||||
volunteers: {
|
||||
list: () =>
|
||||
delay(
|
||||
@@ -301,6 +399,7 @@ export function createMockApi(): PlanningApi {
|
||||
updated_at: now,
|
||||
};
|
||||
state.positions.push(position);
|
||||
generateMissingShifts(position.id);
|
||||
return delay(position);
|
||||
},
|
||||
update: (_edition, id, body) => {
|
||||
@@ -321,6 +420,10 @@ export function createMockApi(): PlanningApi {
|
||||
state.assignments = state.assignments.filter((a) => !shiftIds.has(a.shift_id));
|
||||
return delay(undefined);
|
||||
},
|
||||
generateShifts: (_edition, id) => {
|
||||
if (!state.positions.some((x) => x.id === id)) return notFound();
|
||||
return delay({ created: generateMissingShifts(id) });
|
||||
},
|
||||
},
|
||||
|
||||
shifts: {
|
||||
@@ -343,6 +446,7 @@ export function createMockApi(): PlanningApi {
|
||||
id: `s${state.seq++}`,
|
||||
edition_id: state.positions[0].edition_id,
|
||||
position_id: body.position_id,
|
||||
day_part_id: null,
|
||||
starts_at: body.starts_at,
|
||||
ends_at: body.ends_at,
|
||||
min_staff: body.min_staff ?? 0,
|
||||
|
||||
@@ -58,6 +58,42 @@ export interface EditionUpdate {
|
||||
retention_days?: number | null;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// DayPart (créneau type) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export interface DayPartRead {
|
||||
id: string;
|
||||
edition_id: string;
|
||||
code: string;
|
||||
label: string;
|
||||
/** Heures « HH:MM:SS ». end < start ⇒ passe minuit. */
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
order: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface DayPartCreate {
|
||||
label: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
/** Déduit du label si absent ; figé ensuite. */
|
||||
code?: string;
|
||||
order?: number;
|
||||
}
|
||||
|
||||
export interface DayPartUpdate {
|
||||
label?: string;
|
||||
start_time?: string;
|
||||
end_time?: string;
|
||||
order?: number;
|
||||
}
|
||||
|
||||
export interface GenerateShiftsResult {
|
||||
created: number;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Volunteer //
|
||||
// --------------------------------------------------------------------------- //
|
||||
@@ -134,6 +170,8 @@ export interface ShiftRead {
|
||||
id: string;
|
||||
edition_id: string;
|
||||
position_id: string;
|
||||
/** Créneau type d'origine, ou null pour un créneau ad hoc. */
|
||||
day_part_id: string | null;
|
||||
/** Datetime naïf, heure locale Europe/Paris (ISO sans fuseau). */
|
||||
starts_at: string;
|
||||
ends_at: string;
|
||||
|
||||
@@ -6,8 +6,12 @@ import type {
|
||||
AssignmentValidateRequest,
|
||||
AssignmentValidateResult,
|
||||
AssignmentWriteResult,
|
||||
DayPartCreate,
|
||||
DayPartRead,
|
||||
DayPartUpdate,
|
||||
EditionRead,
|
||||
EditionUpdate,
|
||||
GenerateShiftsResult,
|
||||
LoginRequest,
|
||||
MagicLinkRequest,
|
||||
MatrixResponse,
|
||||
@@ -36,6 +40,12 @@ export interface PlanningApi {
|
||||
get(editionId: string): Promise<EditionRead>;
|
||||
update(editionId: string, body: EditionUpdate): Promise<EditionRead>;
|
||||
};
|
||||
dayParts: {
|
||||
list(editionId: string): Promise<DayPartRead[]>;
|
||||
create(editionId: string, body: DayPartCreate): Promise<DayPartRead>;
|
||||
update(editionId: string, id: string, body: DayPartUpdate): Promise<DayPartRead>;
|
||||
remove(editionId: string, id: string): Promise<void>;
|
||||
};
|
||||
volunteers: {
|
||||
list(editionId: string): Promise<VolunteerRead[]>;
|
||||
get(editionId: string, id: string): Promise<VolunteerRead>;
|
||||
@@ -49,6 +59,8 @@ export interface PlanningApi {
|
||||
create(editionId: string, body: PositionCreate): Promise<PositionRead>;
|
||||
update(editionId: string, id: string, body: PositionUpdate): Promise<PositionRead>;
|
||||
remove(editionId: string, id: string): Promise<void>;
|
||||
/** (Re)crée les créneaux manquants (0/0) d'après les créneaux types. */
|
||||
generateShifts(editionId: string, id: string): Promise<GenerateShiftsResult>;
|
||||
};
|
||||
shifts: {
|
||||
list(editionId: string, params?: { positionId?: string }): Promise<ShiftRead[]>;
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
"grille.legend.incomplete": "INCOMPLET",
|
||||
"grille.legend.complete": "COMPLET",
|
||||
"grille.legend.overstaffed": "SUREFFECTIF",
|
||||
"grille.legend.undefined": "À DÉFINIR",
|
||||
"grille.positionsCount": "{count} POSTES",
|
||||
"grille.assignedRequired": "AFFECTÉS / IDÉAL",
|
||||
"grille.footnote": "Chaque cellule est un créneau. Nombre = bénévoles affectés, / = effectif idéal. Cliquer ouvre le panneau d'affectation à droite.",
|
||||
@@ -168,6 +169,8 @@
|
||||
"config.grid.emptyDay": "Aucun créneau ce jour.",
|
||||
"config.grid.deletePosition": "SUPPRIMER LE POSTE",
|
||||
"config.grid.deletePositionConfirm": "Supprimer ce poste et tous ses créneaux ?",
|
||||
"config.grid.generateShifts": "GÉNÉRER LES CRÉNEAUX",
|
||||
"config.grid.generated": "{count} créneau(x) ajouté(s).",
|
||||
"config.grid.note": "Effectifs, créneaux, nom et catégorie du poste sont enregistrés immédiatement via l'API. Pour ajouter ou retirer des jours, modifiez les dates de l'édition dans l'onglet « Règles & édition ».",
|
||||
|
||||
"config.vol.importTitle": "IMPORTER DES INSCRIPTIONS",
|
||||
@@ -218,6 +221,12 @@
|
||||
"config.rules.positionsCount": "Postes",
|
||||
"config.rules.shiftsCount": "Créneaux",
|
||||
"edition.dates_inconsistent": "La date de fin doit être postérieure ou égale à la date de début.",
|
||||
"day_part.code_required": "Le libellé du créneau type est requis.",
|
||||
"day_part.duplicate_code": "Un créneau type porte déjà ce libellé.",
|
||||
"config.rules.slotsTitle": "CRÉNEAUX TYPES",
|
||||
"config.rules.slotLabel": "Libellé",
|
||||
"config.rules.slotAdd": "AJOUTER",
|
||||
"config.rules.slotsNote": "Ces créneaux sont ajoutés à besoin 0/0 sur chaque jour à la création d'un poste. Après un ajout ici (ou une extension des dates), utilisez « Générer les créneaux » sur le poste.",
|
||||
"config.rules.thresholdsTitle": "MOTEUR DE VALIDATION",
|
||||
"config.rules.maxDaily": "Maximum d'heures par journée",
|
||||
"config.rules.minRest": "Repos minimum entre deux créneaux",
|
||||
|
||||
@@ -86,6 +86,9 @@ export function GrillePage() {
|
||||
<LegendItem swatch="bg-mauve" glyph="▼">
|
||||
{t('grille.legend.overstaffed')}
|
||||
</LegendItem>
|
||||
<LegendItem swatch="bg-sand-dark" glyph="·">
|
||||
{t('grille.legend.undefined')}
|
||||
</LegendItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -214,11 +217,20 @@ function PositionRow({
|
||||
return <div key={column.key} className="h-9 border-b border-r border-ink bg-hatch-sand" />;
|
||||
}
|
||||
const assigned = shift.assigned;
|
||||
const isCrit = assigned < shift.min_staff;
|
||||
const isOver = assigned > shift.ideal_staff;
|
||||
const isInc = !isCrit && !isOver && assigned < shift.ideal_staff;
|
||||
const isOk = !isCrit && !isOver && !isInc;
|
||||
const glyph = isCrit ? '▲' : isOver ? '▼' : isInc ? '◧' : '✓';
|
||||
const undefinedNeed = shift.min_staff === 0 && shift.ideal_staff === 0;
|
||||
const isCrit = !undefinedNeed && assigned < shift.min_staff;
|
||||
const isOver = !undefinedNeed && assigned > shift.ideal_staff;
|
||||
const isInc = !undefinedNeed && !isCrit && !isOver && assigned < shift.ideal_staff;
|
||||
const isOk = !undefinedNeed && !isCrit && !isOver && !isInc;
|
||||
const glyph = undefinedNeed
|
||||
? '·'
|
||||
: isCrit
|
||||
? '▲'
|
||||
: isOver
|
||||
? '▼'
|
||||
: isInc
|
||||
? '◧'
|
||||
: '✓';
|
||||
const selected = selectedShiftId === shift.shift_id;
|
||||
return (
|
||||
<div
|
||||
@@ -226,6 +238,7 @@ function PositionRow({
|
||||
onClick={() => onSelect(shift.shift_id)}
|
||||
className={cx(
|
||||
'relative flex h-9 cursor-pointer items-center justify-center gap-[3px] border-b border-r border-ink',
|
||||
undefinedNeed && 'bg-sand-dark hover:bg-sand',
|
||||
isCrit && 'bg-hatch-orange',
|
||||
isOver && 'bg-mauve hover:bg-mauve-hover',
|
||||
isInc && 'bg-yellow-soft hover:bg-yellow',
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
useDeletePosition,
|
||||
useDeleteShift,
|
||||
useEdition,
|
||||
useGenerateShifts,
|
||||
usePositions,
|
||||
useShifts,
|
||||
useUpdatePosition,
|
||||
@@ -233,6 +234,7 @@ function PositionHeader({
|
||||
}) {
|
||||
const updatePosition = useUpdatePosition();
|
||||
const deletePosition = useDeletePosition();
|
||||
const generate = useGenerateShifts();
|
||||
const [name, setName] = useState(position.name);
|
||||
|
||||
const commitName = () => {
|
||||
@@ -269,6 +271,14 @@ function PositionHeader({
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
disabled={generate.isPending}
|
||||
onClick={() => generate.mutate(position.id)}
|
||||
className="cursor-pointer border-2 border-ink bg-cream px-2 py-1 font-display text-[10px] font-extrabold uppercase hover:bg-yellow disabled:opacity-50"
|
||||
>
|
||||
{t('config.grid.generateShifts')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
@@ -281,7 +291,13 @@ function PositionHeader({
|
||||
{t('config.grid.deletePosition')}
|
||||
</button>
|
||||
</div>
|
||||
{generate.isSuccess ? (
|
||||
<div className="font-mono text-[10px] text-green">
|
||||
{t('config.grid.generated', { count: generate.data.created })}
|
||||
</div>
|
||||
) : null}
|
||||
{updatePosition.isError ? <ErrorNote error={updatePosition.error} /> : null}
|
||||
{generate.isError ? <ErrorNote error={generate.error} /> : null}
|
||||
</div>
|
||||
<div className="ml-auto flex gap-2">
|
||||
<MiniStat value={`${totals.min} h`} label={t('config.grid.minTotal')} />
|
||||
|
||||
@@ -2,9 +2,13 @@ import { useEffect, useState } from 'react';
|
||||
|
||||
import { API_MODE } from '@/api';
|
||||
import {
|
||||
useCreateDayPart,
|
||||
useDayParts,
|
||||
useDeleteDayPart,
|
||||
useEdition,
|
||||
usePositions,
|
||||
useShifts,
|
||||
useUpdateDayPart,
|
||||
useUpdateEdition,
|
||||
useVolunteers,
|
||||
} from '@/api/hooks';
|
||||
@@ -12,6 +16,8 @@ import { ErrorNote } from '@/components/state';
|
||||
import { Btn, Panel, PanelHeader } from '@/components/ui';
|
||||
import { t } from '@/i18n';
|
||||
|
||||
const hm = (time: string) => time.slice(0, 5); // "HH:MM:SS" -> "HH:MM"
|
||||
|
||||
const RULE_CODES = [
|
||||
'SHIFT_OVERLAP',
|
||||
'OUTSIDE_AVAILABILITY',
|
||||
@@ -42,6 +48,16 @@ export function ConfigRules() {
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel shadow="lg">
|
||||
<PanelHeader>{t('config.rules.slotsTitle')}</PanelHeader>
|
||||
<div className="flex flex-col gap-2 p-[13px]">
|
||||
<DayPartsForm />
|
||||
<div className="mt-1 border-t-2 border-ink pt-2 font-mono text-[10px] leading-relaxed opacity-70">
|
||||
{t('config.rules.slotsNote')}
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
<Panel shadow="lg">
|
||||
<PanelHeader>{t('config.rules.thresholdsTitle')}</PanelHeader>
|
||||
<div className="flex flex-col gap-2 p-[13px]">
|
||||
@@ -152,6 +168,107 @@ function EditionForm() {
|
||||
);
|
||||
}
|
||||
|
||||
function DayPartsForm() {
|
||||
const dayParts = useDayParts();
|
||||
const create = useCreateDayPart();
|
||||
const update = useUpdateDayPart();
|
||||
const remove = useDeleteDayPart();
|
||||
const [label, setLabel] = useState('');
|
||||
const [start, setStart] = useState('09:00');
|
||||
const [end, setEnd] = useState('13:00');
|
||||
|
||||
if (dayParts.isLoading) return <div className="font-mono text-[10px] opacity-60">…</div>;
|
||||
if (dayParts.error) return <ErrorNote error={dayParts.error} />;
|
||||
|
||||
const rows = [...(dayParts.data ?? [])].sort(
|
||||
(a, b) => a.order - b.order || a.start_time.localeCompare(b.start_time),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[6px]">
|
||||
{rows.map((dp) => (
|
||||
<div key={dp.id} className="flex items-center gap-1">
|
||||
<input
|
||||
defaultValue={dp.label}
|
||||
onBlur={(e) => {
|
||||
const v = e.target.value.trim();
|
||||
if (v && v !== dp.label) update.mutate({ id: dp.id, body: { label: v } });
|
||||
}}
|
||||
className="min-w-0 flex-1 border-2 border-ink bg-paper px-2 py-1 font-display text-[12px] font-bold"
|
||||
/>
|
||||
<input
|
||||
type="time"
|
||||
defaultValue={hm(dp.start_time)}
|
||||
onBlur={(e) =>
|
||||
e.target.value &&
|
||||
update.mutate({ id: dp.id, body: { start_time: `${e.target.value}:00` } })
|
||||
}
|
||||
className="border-2 border-ink bg-paper px-1 py-1 font-mono text-[11px]"
|
||||
/>
|
||||
<input
|
||||
type="time"
|
||||
defaultValue={hm(dp.end_time)}
|
||||
onBlur={(e) =>
|
||||
e.target.value &&
|
||||
update.mutate({ id: dp.id, body: { end_time: `${e.target.value}:00` } })
|
||||
}
|
||||
className="border-2 border-ink bg-paper px-1 py-1 font-mono text-[11px]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove.mutate(dp.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={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
placeholder={t('config.rules.slotLabel')}
|
||||
className="min-w-0 flex-1 border-2 border-ink bg-yellow px-2 py-1 font-display text-[12px] font-bold"
|
||||
/>
|
||||
<input
|
||||
type="time"
|
||||
value={start}
|
||||
onChange={(e) => setStart(e.target.value)}
|
||||
className="border-2 border-ink bg-paper px-1 py-1 font-mono text-[11px]"
|
||||
/>
|
||||
<input
|
||||
type="time"
|
||||
value={end}
|
||||
onChange={(e) => setEnd(e.target.value)}
|
||||
className="border-2 border-ink bg-paper px-1 py-1 font-mono text-[11px]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!label.trim() || create.isPending}
|
||||
onClick={() =>
|
||||
create.mutate(
|
||||
{
|
||||
label: label.trim(),
|
||||
start_time: `${start}:00`,
|
||||
end_time: `${end}:00`,
|
||||
order: rows.length,
|
||||
},
|
||||
{ onSuccess: () => setLabel('') },
|
||||
)
|
||||
}
|
||||
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('config.rules.slotAdd')}
|
||||
</button>
|
||||
</div>
|
||||
{create.isError ? <ErrorNote error={create.error} /> : null}
|
||||
{update.isError ? <ErrorNote error={update.error} /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) {
|
||||
return (
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
|
||||
Reference in New Issue
Block a user