julienfroidefond/iag-dev-evaluator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto-save notes candidat au blur avec indicateur de modification

Browse Source 
Le champ "Notes candidat" passe en bordure ambre tant qu'il y a des
changements non sauvegardés. Au défocus, la sauvegarde se déclenche
automatiquement et la bordure revient à la normale.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Froidefond
2026-02-25 08:17:58 +01:00
parent c1751a1ab6
commit 437b5db1da
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/DimensionCard.tsx
View File

@@ -51,6 +51,7 @@ interface DimensionCardProps {
index: number; index: number;
evaluationId?: string; evaluationId?: string;
onScoreChange: (dimensionId: string, data: Partial<DimensionScore>) => void; onScoreChange: (dimensionId: string, data: Partial<DimensionScore>) => void;
onSave?: () => void;
/** Increment to collapse this card (e.g. from "Tout fermer" button) */ /** Increment to collapse this card (e.g. from "Tout fermer" button) */
collapseAllTrigger?: number; collapseAllTrigger?: number;
} }
@@ -78,8 +79,9 @@ function parseQuestions(s: string | null | undefined): string[] {
const inputClass = const inputClass =
"w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700/80 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30"; "w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-700/80 px-2.5 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30";
export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, collapseAllTrigger }: DimensionCardProps) { export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, onSave, collapseAllTrigger }: DimensionCardProps) {
const [notes, setNotes] = useState(score?.candidateNotes ?? ""); const [notes, setNotes] = useState(score?.candidateNotes ?? "");
const [notesDirty, setNotesDirty] = useState(false);
const hasQuestions = parseQuestions(dimension.suggestedQuestions).length > 0; const hasQuestions = parseQuestions(dimension.suggestedQuestions).length > 0;
const [expanded, setExpanded] = useState(hasQuestions); const [expanded, setExpanded] = useState(hasQuestions);
@@ -191,10 +193,19 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
value={notes} value={notes}
onChange={(e) => { onChange={(e) => {
setNotes(e.target.value); setNotes(e.target.value);
setNotesDirty(true);
onScoreChange(dimension.id, { candidateNotes: e.target.value }); onScoreChange(dimension.id, { candidateNotes: e.target.value });
}} }}
onBlur={() => {
if (notesDirty) {
setNotesDirty(false);
onSave?.();
}
}}
rows={2} rows={2}
className={inputClass} className={`${inputClass} transition-colors duration-200 ${
notesDirty ? "!border-amber-400 dark:!border-amber-500" : ""
}`}
placeholder="Réponses du candidat..." placeholder="Réponses du candidat..."
/> />
</div> </div>

1
src/components/EvaluationEditor.tsx
View File

@@ -318,6 +318,7 @@ export function EvaluationEditor({ id, initialEvaluation, templates, users }: Ev
evaluationId={id} evaluationId={id}
score={scoreMap.get(dim.id) ?? null} score={scoreMap.get(dim.id) ?? null}
onScoreChange={handleScoreChange} onScoreChange={handleScoreChange}
onSave={() => handleSave()}
collapseAllTrigger={collapseAllTrigger} collapseAllTrigger={collapseAllTrigger}
/> />
</div> </div>