// Extensions généralistes de l'Agenda : lecture et modification des Staff/RCP
// (la maquette n'en crée plus).
// Elles enveloppent les feuilles V5 sans modifier la référence gelée.
(function installGeneralAgenda() {
'use strict';
const contract = window.VascoAgendaGeneral;
const LegacyNewRdvSheet = NewRdvSheet;
const LegacyRdvCard = RdvCard;
const LegacyWidgetRDV = WidgetRDV;
const LegacyAgendaScreen = AgendaScreen;
const LegacyViewToggleAG = ViewToggleAG;
const AgendaChoice = window.VascoUI?.SimpleSelect;
const AgendaScopeTabs = window.VascoUI?.ScopeTabs;
const AGENDA_PATIENT_SCOPES = Object.freeze([
{ id: 'living', label: 'Vivants' },
{ id: 'deceased', label: 'Décédés' },
]);
// L'application lit toujours les tokens officiels. Le second objet ne sert
// qu'aux harnais unitaires qui montent cet écran sans charger la coque Web.
const AG_MOTION = window.VascoUI?.tokens?.motion || Object.freeze({
quick: 150, responsive: 160, selectEnter: 180,
standard: 'cubic-bezier(.2,.7,.2,1)',
});
TYPE_STYLE.staff_rcp = {
bg: 'rgba(91,69,139,.09)', border: '#6d5797', text: '#58417f', label: 'Staff / RCP',
};
// Un type historique se lit sous son propre nom : l'imagerie s'affichait
// jusqu'ici avec l'étiquette « Suivi », qui n'était pas la sienne.
TYPE_STYLE.imagerie = {
bg: 'rgba(124,58,237,.09)', border: '#7c3aed', text: '#6d28d9', label: 'Imagerie',
};
// L'intervention devient orange pour rester distincte de la priorité urgente.
// Cette même palette pilote la pastille, le fond et le bord du rendez-vous.
TYPE_STYLE.intervention = {
bg: 'rgba(249,115,22,.10)', border: '#f97316', text: '#c2410c', label: 'Intervention',
};
// « Urgence » n'est plus un type : c'est une priorité cumulable avec le type.
// Elle reste rouge partout (badge, bascule, point et bord de timeline), tandis
// que l'ambre reste réservé aux conflits d'horaire.
const URGENT_STYLE = Object.freeze({
bg: 'rgba(185,28,28,.10)', border: '#b91c1c', text: '#991b1b', label: 'Urgent',
});
// Le résumé du jour écrit l'urgence dans le type – « 1 intervention · urgent »
// – et non à côté. Le mot ne s'accorde pas : il ne qualifie pas le nom, il
// marque la pastille. Il reste donc « urgent » au féminin comme au pluriel,
// séparé du décompte par un point médian plutôt que soudé à lui.
function summaryLabel(type, label, urgent, count) {
const noun = `${count} ${label}${count > 1 ? 's' : ''}`;
// « Urgence · urgent » ne se dit pas : le type historique porte déjà le mot.
if (!urgent || type === 'urgence') return noun;
return `${noun} · urgent`;
}
// Le repère de l'heure courante est rouge, comme dans Apple Calendar. Il ne
// porte pas l'accent de l'organisation : l'accent dit « ceci est à vous », il
// ne dit pas l'heure, et il change d'un cabinet à l'autre – le trait du temps,
// lui, doit se reconnaître partout. Il n'est pas non plus l'ambre du conflit
// d'horaire (`AG_WARN`, #d97706) qui borde déjà les blocs en litige : deux
// messages différents ne partagent pas une couleur.
const AG_NOW = '#ff3b30';
// La couche de ce qui reste collé en haut d'une zone qui défile – la bande des
// jours de l'écran Agenda, l'en-tête horaire de la feuille de création. Une
// seule constante pour les deux : elle se lit entre les couches de la journée
// (voile du passé 5, repère « maintenant » 6, qui passent dessous) et les
// feuilles posées sur la couche overlay officielle (200, au-dessus de tout).
// Écrite en clair des deux côtés, elle valait 6 dans la création : à égalité
// avec le repère, et aucun des cadres de la timeline ne créant de contexte
// d'empilement, c'est l'ordre du DOM qui tranchait – le trait rouge, rendu
// après, traversait la carte DÉBUT/FIN.
const AG_STICKY_Z = 8;
// Le refus que le serveur pose sur les événements des confrères : il se lit en
// toutes lettres là où la feuille V5 affiche déjà les autres raisons.
AG_REASONS[contract.FOREIGN_REASON] = 'Événement d’un autre praticien';
const fieldStyle = {
width: '100%', minHeight: 44, borderRadius: 14, border: `1px solid ${AG_HAIR2}`,
padding: '0 12px', fontFamily: 'inherit', fontSize: 13, color: AG_INK,
background: AG_SURF, outline: 'none',
};
const buttonStyle = {
minHeight: 44, borderRadius: 14, padding: '0 14px', fontFamily: 'inherit',
fontSize: 13, fontWeight: 700, cursor: 'pointer',
};
// Le libellé d'un champ, en petites capitales : c'est la grammaire de l'étape
// Détails de la création, et la fiche parle la même. Il ne s'écrit qu'une
// fois – il était recopié à chaque champ.
const captionStyle = {
display: 'block', fontSize: 10, fontWeight: 600, color: AG_SUB,
letterSpacing: '0.4px', textTransform: 'uppercase', marginBottom: 6,
};
function sheet(children, onClose, title, layout = null, contentRef = null, headingAside = null) {
const stableAvailability = layout === 'availability';
const { BottomSheet } = window.VascoUI;
return
{children}
;
}
// Un choix parmi quelques possibilités, dans le gabarit de la pastille V5 :
// même hauteur, même arrondi, la sélection en encre pleine.
function ChoiceChips({ legend, options, value, onChange, columns = 2, disabled = false, error = false, alert }) {
const { ChoiceChip } = window.VascoUI;
return (
);
}
// Une seule palette pour la création et la modification : le type garde la
// couleur qui le représente dans l'agenda, même lorsqu'il est sélectionné.
// Le noir plein de l'ancien éditeur effaçait le sens bleu / orange.
function typeChoiceAppearance(type, selected, disabled = false) {
const typeStyle = TYPE_STYLE[type] || TYPE_STYLE.consultation;
return {
typeStyle,
style: {
border: `1px solid ${selected ? typeStyle.border : AG_HAIR}`,
background: selected ? typeStyle.bg : AG_SURF,
color: selected ? typeStyle.text : AG_INK,
cursor: disabled ? 'default' : 'pointer',
opacity: disabled ? 0.45 : 1,
},
};
}
// La feuille gelée conserve ses anciennes couleurs en dur. La couche active
// remet donc sur chaque choix la palette du type qui colore aussi le rendez-vous.
function restyleCreationTypeChip(chip, type) {
const selected = chip.props.style?.background && chip.props.style.background !== AG_SURF;
const appearance = typeChoiceAppearance(type, selected);
const { typeStyle } = appearance;
const children = React.Children.toArray(chip.props.children).map((child) => {
if (!React.isValidElement(child)) return child;
if (child.type === 'div') {
return React.cloneElement(child, {
style: { ...child.props.style, background: typeStyle.border },
});
}
if (child.type === 'span') {
return React.cloneElement(child, {
style: { ...child.props.style, color: selected ? typeStyle.text : AG_INK },
});
}
return child;
});
return React.cloneElement(chip, {
style: {
...chip.props.style,
...appearance.style,
},
}, ...children);
}
// Le type d'un rendez-vous existant se change entre les deux types encore
// créables – la fiche pose la même question que la création, dans le même
// geste. Un type historique (suivi, imagerie, Staff / RCP) ne se recrée pas :
// il se lit sous son nom, et `updateFields` s'abstient déjà de le réécrire.
function TypeChoice({ type, onType, disabled = false }) {
const { ChoiceChip } = window.VascoUI;
const ts = TYPE_STYLE[type] || TYPE_STYLE.consultation;
if (!contract.CREATION_TYPES.some((entry) => entry.id === type)) {
return (
Type
{ts.label}
Ce type ne se crée plus : il se lit, il ne se réécrit pas.
);
}
return (
);
}
// Une consultation ne se saisit pas en deux horodatages : le praticien pose
// un début, puis une durée. La fin en découle et reste modifiable – soit à la
// minute ici, soit par le champ « Fin » là où il existe.
function DurationField({ start, end, onEnd, label = 'Durée' }) {
const { ChoiceChip } = window.VascoUI;
const minutes = contract.durationOf(start, end);
const [free, setFree] = React.useState(() => (minutes == null ? '' : String(minutes)));
React.useEffect(() => { setFree(minutes == null ? '' : String(minutes)); }, [minutes]);
const apply = (value) => { const next = contract.endFromDuration(start, value); if (next) onEnd(next); };
return (
);
}
// ═══════════════════════════════════════════════════════════════════════
// La journée à l'échelle – timeline de l'étape « Choisir l'horaire »
//
// La grille de pilules supposait que tout est constant : trente minutes,
// toutes pareilles, toutes libres ou « occupées ». Une journée de cabinet
// n'est pas ça. On la regarde maintenant comme dans Apple Calendar – un axe
// vertical d'heures, les rendez-vous déjà posés à leur vraie hauteur, et le
// nouveau rendez-vous posé du doigt là où il reste de la place.
//
// Toute l'arithmétique temps ↔ pixels vit dans le contrat ; ce qui suit n'en
// est que l'habillage.
// ═══════════════════════════════════════════════════════════════════════
// Réglage fin, toujours disponible : le glissement est le geste naturel, mais
// il ne doit jamais être le seul moyen d'atteindre la minute voulue.
function TimeStepper({ label, value, onStep, disabled }) {
const { IconButton } = window.VascoUI;
const round = {
width: 28, height: 28, borderRadius: 10, flexShrink: 0, padding: 0,
border: `1px solid ${AG_HAIR2}`, background: AG_SURF, color: AG_INK,
fontFamily: 'inherit', fontSize: 16, fontWeight: 600, lineHeight: 1,
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.35 : 1,
transition: `opacity ${AG_MOTION.quick}ms ease`,
};
const step = contract.TIMELINE_SNAP_MINUTES;
return (
{label}
onStep(-step)}>−{value} onStep(step)}>+
);
}
function WarnGlyph({ size = 13, color = AG_WARN }) {
return (
);
}
// Un rendez-vous posé sur l'axe. Le même bloc sert aux deux écrans, et c'est
// `onSelect` qui les sépare :
//
// – à la création, il n'y en a pas : le bloc laisse passer le doigt
// (`pointerEvents: none`), parce que le geste attendu là est de poser le
// nouveau rendez-vous, y compris par-dessus. Programmer en parallèle d'une
// urgence est légitime – le chevauchement se voit, il ne s'interdit pas ;
// – à l'affichage, il y en a un : le bloc devient le bouton qui ouvre la
// fiche, comme la carte de la liste qu'il remplace.
//
// Un événement de confrère reste touchable : c'est sa fiche qui dit le refus
// que le serveur y a posé, et la désaturation dit qu'il n'est pas à nous.
function TimelineEvent({ event, geometry, onSelect }) {
const ts = TYPE_STYLE[event.type] || TYPE_STYLE.consultation;
const top = contract.minutesToOffset(event.startMinutes, geometry);
const height = contract.minutesToOffset(event.endMinutes, geometry) - top;
const density = contract.blockDensity(height);
const width = 100 / event.columns;
const foreign = contract.isOtherPractitioner(event);
const clash = event.clashing;
const urgent = event.urgent === true;
// L'urgence a la priorité visuelle sur le type : sa pastille est rouge,
// donc le rendez-vous l'est aussi. Sans urgence, la couleur reste celle du type.
const eventStyle = urgent ? URGENT_STYLE : ts;
const mark = urgent ? contract.urgentMark(density) : 'none';
const line = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' };
const edge = clash ? AG_WARN : urgent ? URGENT_STYLE.border : ts.border;
const dot = (
);
const style = {
position: 'absolute', top, height: Math.max(height, 4),
left: `${event.column * width}%`,
width: `calc(${width}% - ${contract.TIMELINE_COLUMN_GAP}px)`,
background: eventStyle.bg, borderRadius: 7,
border: `1px solid ${clash ? AG_WARN : `${eventStyle.border}30`}`,
borderLeft: `3px solid ${edge}`,
boxShadow: clash ? `0 0 0 2px ${AG_WARN}22` : 'none',
padding: density === 'bare' ? 0 : '2px 7px',
overflow: 'hidden',
opacity: foreign ? 0.7 : 1,
transition: `box-shadow ${AG_MOTION.quick}ms ease, border-color ${AG_MOTION.quick}ms ease`,
};
// Le marqueur d'urgence n'ajoute une rangée que lorsqu'il a quelque chose à
// montrer : sans urgence, le bloc garde exactement la forme qu'il avait.
const body = <>
{density === 'full' && <>
{mark === 'badge' ? (
{event.start}–{event.end}
) : (
{event.start}–{event.end}
)}
{event.patient}
{contract.appointmentReason(event) || ts.label}
}
{density === 'single' && <>
{event.start}
{mark === 'dot' ? (
{dot}
{event.patient}
) : (
{event.patient}
)}
}
{density === 'tight' && (
{event.patient}
)}
;
if (typeof onSelect !== 'function') {
return
{body}
;
}
return (
);
}
// ── Ouvrir la journée au bon endroit ────────────────────────────────────
// Les deux écrans qui montrent la timeline défilent dans deux conteneurs
// différents – la zone de contenu de l'écran Agenda gelé d'un côté, le corps
// de la feuille de création de l'autre – et aucun des deux n'est le document.
// On remonte donc jusqu'à celui qui a réellement de quoi défiler, plutôt que
// d'en nommer un.
function scrollingParent(node) {
let parent = node && node.parentElement;
while (parent) {
if (parent.scrollHeight - parent.clientHeight > 1) {
const style = typeof window !== 'undefined' && typeof window.getComputedStyle === 'function'
? window.getComputedStyle(parent) : null;
const flow = style ? `${style.overflowY} ${style.overflow}` : 'auto';
if (/auto|scroll|overlay/.test(flow)) return parent;
}
parent = parent.parentElement;
}
return null;
}
// Amener un repère au centre de la zone visible. `scrollIntoView({block:
// 'center'})` semblait suffire et ne suffit pas : la maquette entière est mise
// à l'échelle par une transformation CSS (voir `index.html`), et les rectangles
// écran ne sont alors plus les pixels de mise en page dans lesquels `scrollTop`
// se compte – la même erreur avait déjà été payée sur le fil de discussion. On
// mesure donc l'échelle et on pose le défilement soi-même.
//
// Rend `false` quand rien n'a pu être mesuré : l'appelant ne retiendra pas le
// cadrage comme fait, et le prochain rendu réessaiera.
function centerOnMarker(node, topInsetNode = null) {
if (!node) return false;
if (typeof node.getBoundingClientRect === 'function') {
const view = scrollingParent(node);
if (view) {
const viewBox = view.getBoundingClientRect();
const scale = (viewBox.height / (view.clientHeight || 1)) || 1;
const offset = view.scrollTop + (node.getBoundingClientRect().top - viewBox.top) / scale;
const topInset = topInsetNode && typeof topInsetNode.getBoundingClientRect === 'function'
? topInsetNode.getBoundingClientRect().height / scale : 0;
const usableHeight = Math.max(1, view.clientHeight - topInset);
const top = contract.centeredScrollTop(offset - topInset, usableHeight,
view.scrollHeight - view.clientHeight);
if (top !== null) { view.scrollTop = top; return true; }
}
}
// Hors navigateur mis à l'échelle – et pour les contrôles, qui ne montent
// aucune géométrie – le centrage natif reste la meilleure approximation.
if (typeof node.scrollIntoView !== 'function') return false;
node.scrollIntoView({ block: 'center' });
return true;
}
// ── Le cadre de la journée, partagé ─────────────────────────────────────
// L'axe des heures, le filet des demies, le voile du passé et le repère de
// maintenant : c'est la grammaire de la journée, et elle est la même qu'on
// vienne poser un rendez-vous ou qu'on vienne lire ceux du jour. Elle vit
// donc ici une seule fois. Ce qui diffère entre les deux écrans passe en
// paramètre – la hauteur du voile, le curseur, ce qu'on empile dans la
// colonne du temps – et rien d'autre.
//
// `clockMinutes` est l'heure murale, quelle que soit la journée regardée :
// c'est elle qui dit quelles heures sont révolues. `nowMinutes` n'est posée
// que si la journée regardée est bien aujourd'hui : c'est elle qui trace le
// repère.
function TimelineCanvas({
dayKey, geometry, todayKey, clockMinutes, nowMinutes,
pastHeight = 0, pastDashed = false, empty = false, emptyLabel, emptyOffset,
gridRef, onGridClick, cursor = 'default', ariaLabel, roomGrid = false,
nowMarkerRef = null, scrollable = false, viewportStyle = null, children,
}) {
const gutter = contract.TIMELINE_GUTTER;
const hours = contract.timelineHours(geometry);
const hourRailPosition = roomGrid ? 'sticky' : 'absolute';
const timelineContent = (
{hours.map((hour) => {
return (
{hour.minutes + 30 < geometry.endMinutes && (
)}
);
})}
{/* Sur une journée de vingt-quatre heures, le milieu de l'axe n'est
plus sous les yeux : le message se pose là où la journée s'ouvre,
sans quoi il resterait à quatre heures de défilement de là. */}
{empty && (
{emptyLabel}
)}
{/* La colonne du temps : les rendez-vous, et ce que l'écran y ajoute. */}
{children}
{/* Le passé : éteint, hachuré. */}
{pastHeight > 0 && (
)}
{/* Le repère de l'heure courante, comme dans Apple Calendar : un trait
rouge et sa pastille. Il passe au-dessus du voile du passé – c'est
lui qui en marque le bord, et un repère à moitié couvert ne
repérerait plus rien. */}
{Number.isFinite(nowMinutes) && nowMinutes > geometry.startMinutes
&& nowMinutes < geometry.endMinutes && (
)}
);
return (
{scrollable ? (
{timelineContent}
) : timelineContent}
);
}
// ── La timeline elle-même ───────────────────────────────────────────────
// Le même cadre sert à poser un rendez-vous et à corriger celui qui existe :
// c'est la même journée, le même bloc, le même geste. Ce qui les sépare tient
// en quelques paramètres –
//
// – `excludeId` : la fiche d'un rendez-vous existant écarte ce rendez-vous de
// ses voisins, son bloc d'accent le représentant déjà ;
// – `onDayChange` : la création a le calendrier interne de la feuille gelée,
// la fiche n'en a pas – le jour s'y change par un contrôle de date sobre,
// posé à la place du libellé du jour ;
// – `locked` : un refus du serveur (confrère, terminé, annulé, patient
// décédé) ou un horaire déjà commencé fige le bloc. La journée reste
// montrée – c'est ce qu'on est venu lire – mais rien ne s'y règle, et la
// raison est écrite ;
// – `armSlot` : seule la création a une feuille gelée à piloter.
function DayTimeline({
dayKey, rdvs, minutes, onMinutes, startMinutes, onStart, armSlot, accent,
excludeId = null, onDayChange = null, locked = false, lockedReason = null,
title = 'Choisir l’horaire', blockLabel = 'nouveau rendez-vous', compactControls = false,
}) {
const gridRef = React.useRef(null);
const blockRef = React.useRef(null);
const dragRef = React.useRef(null);
const scrolledRef = React.useRef(null);
const [dragging, setDragging] = React.useState(false);
const todayKey = agendaTodayKey();
const now = agendaNowInZone();
const nowMinutes = now && now.dayKey === dayKey ? now.minutes : null;
const posed = Number.isFinite(startMinutes);
const events = contract.dayTimelineEvents(rdvs, dayKey, excludeId);
// La journée entière, toujours : le bloc ne peut plus déborder d'un cadre
// qui s'arrêtait au soir, et il n'y a donc plus rien à élargir.
const geometry = contract.timelineGeometry();
const floor = contract.timelineFloor(dayKey, todayKey, now ? now.minutes : null, geometry);
// Une journée révolue ferme la création ; elle ne ferme pas la lecture d'un
// rendez-vous qui s'y trouve déjà.
const closed = !locked && floor === null;
const conflicts = posed ? contract.overlappingEvents(events, startMinutes, startMinutes + minutes) : [];
const clashing = new Set(conflicts.map((event) => event.id));
const laid = contract.layoutTimelineEvents(events)
.map((event) => ({ ...event, clashing: clashing.has(event.id) }));
const fits = locked
|| (!closed && contract.clampBlockStart(floor, { geometry, duration: minutes, floor }) !== null);
const spanMinutes = (px) => contract.offsetToMinutes(px, geometry) - geometry.startMinutes;
// Arrivée sur l'étape, ou changement de jour : le bloc se pose tout seul
// sur la première plage réellement libre, plutôt que d'attendre un geste
// devant une journée vide de sens. Un bloc déjà posé n'est jamais
// repositionné – revenir de l'étape suivante ne défait pas le choix. Mais
// changer de jour peut le laisser sous le plancher du nouveau jour : il y
// remonte, plutôt que de partir se faire refuser par le serveur.
React.useEffect(() => {
if (locked) return;
if (closed) { if (posed) onStart(null); return; }
if (posed) {
const bounded = contract.clampBlockStart(startMinutes, { geometry, duration: minutes, floor });
if (bounded !== null && bounded !== startMinutes) onStart(bounded);
return;
}
const proposed = contract.firstProposedStart(events, {
floor, duration: minutes, until: geometry.endMinutes,
});
onStart(contract.clampBlockStart(proposed, { geometry, duration: minutes, floor }));
}, [dayKey, closed, posed, locked]);
// La feuille gelée ne sait rien de la timeline : elle veut un créneau
// retenu pour laisser passer à l'étape suivante. On lui donne le plus
// proche ; l'horaire qui part au serveur, lui, vient d'ici. La fiche d'un
// rendez-vous existant n'a aucune feuille gelée à piloter.
React.useEffect(() => {
if (posed && typeof armSlot === 'function') armSlot(startMinutes);
}, [startMinutes, armSlot, posed]);
// Défilement initial : la journée s'ouvre sur le bloc, pas sur minuit – et
// le bloc se pose au milieu de la zone visible, comme sur l'écran Agenda.
// Les deux écrans montrent la même journée : ils doivent l'ouvrir de la
// même façon.
React.useEffect(() => {
if (!posed || scrolledRef.current === dayKey) return;
if (centerOnMarker(blockRef.current)) scrolledRef.current = dayKey;
}, [dayKey, posed, startMinutes]);
const setDuration = (value) => {
if (locked) return;
const bounded = Math.max(contract.MIN_DURATION_MINUTES,
Math.min(contract.MAX_DURATION_MINUTES, value));
onMinutes(bounded);
if (!posed) return;
// Allonger un rendez-vous du soir le remonte s'il ne tient plus avant
// minuit : le cadre ne s'ouvre plus pour lui, c'est déjà la journée.
const next = contract.clampBlockStart(startMinutes, { geometry, duration: bounded, floor });
if (next !== null && next !== startMinutes) onStart(next);
};
const stepStart = (delta) => {
if (!posed || locked) return;
const next = contract.clampBlockStart(startMinutes + delta, { geometry, duration: minutes, floor });
if (next !== null) onStart(next);
};
const beginDrag = (mode) => (event) => {
if (!posed || closed || locked) return;
event.preventDefault();
event.stopPropagation();
try { event.currentTarget.setPointerCapture?.(event.pointerId); } catch (failure) { /* capture optionnelle */ }
dragRef.current = { mode, pointerId: event.pointerId, originY: event.clientY, startMinutes, minutes };
setDragging(true);
};
const moveDrag = (event) => {
const drag = dragRef.current;
if (!drag || drag.pointerId !== event.pointerId) return;
const span = spanMinutes(event.clientY - drag.originY);
if (drag.mode === 'move') {
const next = contract.clampBlockStart(contract.snapToStep(drag.startMinutes + span),
{ geometry, duration: minutes, floor });
if (next !== null && next !== startMinutes) onStart(next);
return;
}
if (drag.mode === 'end') {
const raw = contract.snapToStep(drag.startMinutes + drag.minutes + span);
const value = Math.max(contract.MIN_DURATION_MINUTES,
Math.min(contract.MAX_DURATION_MINUTES, raw - drag.startMinutes));
if (value !== minutes) onMinutes(value);
return;
}
// Étirement par le haut : le début recule, la fin ne bouge pas.
const highest = drag.startMinutes + drag.minutes - contract.MIN_DURATION_MINUTES;
const raw = Math.min(contract.snapToStep(drag.startMinutes + span), highest);
const next = contract.clampBlockStart(raw, { geometry, duration: contract.MIN_DURATION_MINUTES, floor });
if (next === null || next === startMinutes) return;
onStart(next);
onMinutes(drag.startMinutes + drag.minutes - next);
};
const endDrag = (event) => {
const drag = dragRef.current;
if (!drag || drag.pointerId !== event.pointerId) return;
dragRef.current = null;
setDragging(false);
};
const dragProps = (mode) => ({
onPointerDown: beginDrag(mode), onPointerMove: moveDrag,
onPointerUp: endDrag, onPointerCancel: endDrag,
onClick: (event) => event.stopPropagation(),
});
// Toucher un espace libre pose le bloc à cet endroit, arrondi à la
// graduation fine. Toucher le passé le ramène au plancher : la règle se
// montre par le mouvement plutôt que par un refus muet.
const placeAt = (event) => {
if (dragRef.current || closed || locked || !fits || !gridRef.current) return;
const rect = gridRef.current.getBoundingClientRect();
const raw = contract.offsetToMinutes(event.clientY - rect.top, geometry);
const next = contract.clampBlockStart(contract.snapToStep(raw), { geometry, duration: minutes, floor });
if (next !== null) onStart(next);
};
// Le passé en création n'est pas le passé en lecture : créer refuse ce qui
// est révolu et le voile tout ; relire un rendez-vous ne refuse rien, et
// seule la part écoulée d'aujourd'hui s'estompe – c'est déjà la règle de
// l'écran Agenda.
const pastHeight = locked
? contract.pastVeilHeight(dayKey, todayKey, nowMinutes, geometry)
: (closed ? geometry.height : Math.max(0, contract.minutesToOffset(floor, geometry)));
const blockTop = posed ? contract.minutesToOffset(startMinutes, geometry) : 0;
const blockHeight = posed
? contract.minutesToOffset(startMinutes + minutes, geometry) - blockTop : 0;
const posedDensity = contract.blockDensity(blockHeight);
// Sur un bloc court, la poignée d'étirement prend le pas sur le
// déplacement : c'est l'ajustement qu'on cherche à cette taille, et le
// déplacement reste accessible par un toucher ailleurs ou par les ±.
const handleHeight = Math.max(8, Math.min(16, blockHeight / 3));
const rangeLabel = posed ? contract.timelineRangeLabel(startMinutes, minutes) : '–';
const dayLabel = `${JOURS_FULL[new Date(`${dayKey}T12:00`).getDay()]} ${Number(dayKey.slice(8))} ${MOIS[Number(dayKey.slice(5, 7)) - 1].toLowerCase()}`;
const grip = {
position: 'absolute', left: '50%', marginLeft: -13, width: 26, height: 3,
borderRadius: 2, background: 'rgba(255,255,255,0.85)', pointerEvents: 'none',
};
return (
{/* Changer de jour : la création a le calendrier interne de la
feuille gelée, la fiche n'en a pas. Le geste le plus sobre est
alors le contrôle de date natif, posé exactement là où le libellé
du jour se lisait – le libellé reste à côté, parce qu'un jour de
la semaine n'est pas dans « 03/09/2026 ». */}
{typeof onDayChange === 'function' ? (
{ if (event.target.value) onDayChange(event.target.value); }}
style={{ ...fieldStyle, width: 'auto', minHeight: 34, fontSize: 12, padding: '0 8px', opacity: locked ? 0.45 : 1 }} />
{dayLabel}
) : (
{dayLabel}
)}
{events.length === 0 ? 'journée libre' : `${events.length} rendez-vous`}
{/* Ce qui part réellement au serveur reste sous les yeux pendant qu'on
fait défiler la journée : c'est la seule chose qui mérite de coller.
Fond opaque et couche collante partagée : la journée passe dessous,
repère « maintenant » compris, et ne se lit pas au travers. */}
{compactControls ? (
{rangeLabel}
) :
{/* L'horaire retenu change sous le doigt : c'est une vraie zone
vivante, pas seulement un titre. */}
{rangeLabel}
{conflicts.length > 0 && }
{conflicts.length > 0
? `avec ${conflicts[0].patient}${conflicts.length > 1 ? ` +${conflicts.length - 1}` : ''}`
: contract.formatDuration(minutes)}
}
setDuration(minutes + delta)} />
{/* La journée, à l'échelle – le cadre est celui que l'écran Agenda
dessine aussi ; ici il porte en plus le bloc qu'on pose. */}
)}
{/* Les poignées ne se dessinent que là où elles servent : un
bloc figé qui montrerait ses prises mentirait sur le geste. */}
{!locked && blockHeight >= 44 && <>
}
{!locked && blockHeight >= 30 && (
)}
{!locked && }
)}
{/* Ce qui empêche de régler l'horaire, dit en toutes lettres et à la
place du geste – annoncer un glissement impossible serait pire que
de ne rien dire. */}
{locked && lockedReason && (
{lockedReason}
)}
{/* Le geste se dit une fois, en petit : sur écran tactile rien ne
l'annonce, et les ± de l'en-tête ne se devinent pas non plus. */}
{posed && !closed && !locked && (
Touchez la journée pour déplacer le rendez-vous, glissez ses bords pour
l’allonger. Les boutons ± règlent à {contract.TIMELINE_SNAP_MINUTES} minutes près.
)}
{/* Ce qui empêche, dit en toutes lettres. */}
{closed && (
Cette journée est révolue : revenez à l’étape précédente pour choisir une autre date.
)}
{!closed && !fits && (
{contract.formatDuration(minutes)} ne tient plus dans ce qu’il reste de la journée : raccourcissez, ou choisissez une autre date.
)}
{/* Le détail du chevauchement, comme la feuille V5 le disait déjà. */}
{conflicts.length > 0 && (
{locked
? 'Ce rendez-vous se tient en parallèle d’un autre.'
: 'Déplacez le bloc, ou continuez pour programmer en parallèle.'}
)}
);
}
// L'urgence se pose et se retire d'un geste, à côté du type et jamais à sa
// place. Le contrôle reprend la pastille de type de la V5 – même hauteur,
// même arrondi, la couleur de l'ancien type « Urgence ».
function UrgentToggle({ urgent, onToggle, label = 'Urgence', disabled = false }) {
const { InteractiveRow } = window.VascoUI;
return (
Urgent
);
}
// Le motif tient sur une ligne et part en 160 caractères ; la note du
// praticien est le texte long, celui qu'on relit avant d'entrer en salle.
// Les deux existent côté serveur depuis toujours – seule la saisie manquait.
function NotesField({ value, onChange, label = 'Notes' }) {
return (