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

feat: auto-save ciblé au blur avec feedback violet sur tous les champs
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 7m6s
Details

Browse Source 
- Nouvelle action updateDimensionScore pour sauvegarder un seul champ
  en base sans envoyer tout le formulaire
- DimensionCard : blur sur notes, justification, exemples, confiance
  → upsert ciblé + bordure violette 800ms
- CandidateForm : même pattern sur tous les champs du cartouche
- Bouton save passe aussi en violet (cohérence visuelle)

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

61
src/components/DimensionCard.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { useState, useEffect } from "react";
import { updateDimensionScore } from "@/actions/evaluations";
const STORAGE_KEY_PREFIX = "eval-dim-expanded";
@@ -51,7 +52,6 @@ interface DimensionCardProps {
index: number;
evaluationId?: string;
onScoreChange: (dimensionId: string, data: Partial<DimensionScore>) => void;
onSave?: () => void;
/** Increment to collapse this card (e.g. from "Tout fermer" button) */
collapseAllTrigger?: number;
}
@@ -79,9 +79,23 @@ function parseQuestions(s: string | null | undefined): string[] {
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";
export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, onSave, collapseAllTrigger }: DimensionCardProps) {
export function DimensionCard({ dimension, score, index, evaluationId, onScoreChange, collapseAllTrigger }: DimensionCardProps) {
const [notes, setNotes] = useState(score?.candidateNotes ?? "");
const [notesDirty, setNotesDirty] = useState(false);
const [dirtyFields, setDirtyFields] = useState<Record<string, boolean>>({});
const [savedField, setSavedField] = useState<string | null>(null);
const markDirty = (field: string) => {
setDirtyFields((p) => ({ ...p, [field]: true }));
setSavedField(null);
};
const saveOnBlur = (field: string, data: Parameters<typeof updateDimensionScore>[2]) => {
if (!dirtyFields[field] || !evaluationId) return;
setDirtyFields((p) => ({ ...p, [field]: false }));
setSavedField(field);
updateDimensionScore(evaluationId, dimension.id, data);
setTimeout(() => setSavedField((cur) => (cur === field ? null : cur)), 800);
};
const savedStyle = { borderColor: "#a855f7", boxShadow: "0 0 0 1px #a855f733" };
const hasQuestions = parseQuestions(dimension.suggestedQuestions).length > 0;
const [expanded, setExpanded] = useState(hasQuestions);
@@ -193,19 +207,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
value={notes}
onChange={(e) => {
setNotes(e.target.value);
setNotesDirty(true);
markDirty("notes");
onScoreChange(dimension.id, { candidateNotes: e.target.value });
}}
onBlur={() => {
if (notesDirty) {
setNotesDirty(false);
onSave?.();
}
}}
onBlur={() => saveOnBlur("notes", { candidateNotes: notes })}
rows={2}
className={`${inputClass} transition-colors duration-200 ${
notesDirty ? "!border-amber-400 dark:!border-amber-500" : ""
}`}
className={`${inputClass} transition-colors duration-200`}
style={savedField === "notes" ? savedStyle : undefined}
placeholder="Réponses du candidat..."
/>
</div>
@@ -217,8 +225,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
<input
type="text"
value={score?.justification ?? ""}
onChange={(e) => onScoreChange(dimension.id, { justification: e.target.value || null })}
className={inputClass}
onChange={(e) => {
markDirty("justification");
onScoreChange(dimension.id, { justification: e.target.value || null });
}}
onBlur={(e) => saveOnBlur("justification", { justification: e.target.value || null })}
className={`${inputClass} transition-colors duration-200`}
style={savedField === "justification" ? savedStyle : undefined}
placeholder="Courte..."
/>
</div>
@@ -227,8 +240,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
<input
type="text"
value={score?.examplesObserved ?? ""}
onChange={(e) => onScoreChange(dimension.id, { examplesObserved: e.target.value || null })}
className={inputClass}
onChange={(e) => {
markDirty("examples");
onScoreChange(dimension.id, { examplesObserved: e.target.value || null });
}}
onBlur={(e) => saveOnBlur("examples", { examplesObserved: e.target.value || null })}
className={`${inputClass} transition-colors duration-200`}
style={savedField === "examples" ? savedStyle : undefined}
placeholder="Concrets..."
/>
</div>
@@ -236,8 +254,13 @@ export function DimensionCard({ dimension, score, index, evaluationId, onScoreCh
<label className="text-xs text-zinc-500">Confiance</label>
<select
value={score?.confidence ?? ""}
onChange={(e) => onScoreChange(dimension.id, { confidence: e.target.value || null })}
className={inputClass}
onChange={(e) => {
markDirty("confidence");
onScoreChange(dimension.id, { confidence: e.target.value || null });
}}
onBlur={(e) => saveOnBlur("confidence", { confidence: e.target.value || null })}
className={`${inputClass} transition-colors duration-200`}
style={savedField === "confidence" ? savedStyle : undefined}
>
<option value="">—</option>
<option value="low">Faible</option>