Checkpoint: Trois corrections appliquées
✅ **1. "Tous" dans le formulaire nouvelle séquence** Ajout de l'option "Tous" dans la liste des publics cible du formulaire de création de séquence, avec badge violet et labels correspondants. ✅ **2. Couleurs de la barre de progression** Correction du composant Progress pour supporter `indicatorClassName`. La barre affiche maintenant les bonnes couleurs selon le taux de remplissage : vert (<70%), orange (70-90%), rouge (>90%). ✅ **3. Informations complètes dans le calendrier** Enrichissement des cases du calendrier avec lieu, formateur et nombre d'inscrits pour chaque séquence, permettant une vue d'ensemble plus complète.
This commit is contained in:
@@ -3,11 +3,16 @@ import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
|
||||||
|
indicatorClassName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
function Progress({
|
function Progress({
|
||||||
className,
|
className,
|
||||||
value,
|
value,
|
||||||
|
indicatorClassName,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
}: ProgressProps) {
|
||||||
return (
|
return (
|
||||||
<ProgressPrimitive.Root
|
<ProgressPrimitive.Root
|
||||||
data-slot="progress"
|
data-slot="progress"
|
||||||
@@ -19,7 +24,10 @@ function Progress({
|
|||||||
>
|
>
|
||||||
<ProgressPrimitive.Indicator
|
<ProgressPrimitive.Indicator
|
||||||
data-slot="progress-indicator"
|
data-slot="progress-indicator"
|
||||||
className="bg-primary h-full w-full flex-1 transition-all"
|
className={cn(
|
||||||
|
"h-full w-full flex-1 transition-all",
|
||||||
|
indicatorClassName || "bg-primary"
|
||||||
|
)}
|
||||||
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
/>
|
/>
|
||||||
</ProgressPrimitive.Root>
|
</ProgressPrimitive.Root>
|
||||||
|
|||||||
@@ -166,9 +166,15 @@ export default function AdminCalendrier() {
|
|||||||
<button
|
<button
|
||||||
key={seq.id}
|
key={seq.id}
|
||||||
onClick={() => handleSequenceClick(seq)}
|
onClick={() => handleSequenceClick(seq)}
|
||||||
className="w-full text-left text-xs p-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-800 truncate"
|
className="w-full text-left text-xs p-1.5 rounded bg-blue-100 hover:bg-blue-200 text-blue-800 space-y-0.5"
|
||||||
>
|
>
|
||||||
{seq.formation?.titre || "Sans titre"}
|
<div className="font-medium truncate">{seq.formation?.titre || "Sans titre"}</div>
|
||||||
|
<div className="text-[10px] opacity-80 truncate">
|
||||||
|
{seq.lieu} {seq.formateur && `• ${seq.formateur}`}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] opacity-80">
|
||||||
|
{seq.nbInscrits || 0}/{seq.capaciteMax} inscrits
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -294,6 +294,7 @@ export default function AdminSequences() {
|
|||||||
const colors = {
|
const colors = {
|
||||||
directeur: "bg-blue-100 text-blue-800",
|
directeur: "bg-blue-100 text-blue-800",
|
||||||
chef_service: "bg-green-100 text-green-800",
|
chef_service: "bg-green-100 text-green-800",
|
||||||
|
tous: "bg-purple-100 text-purple-800",
|
||||||
autre: "bg-gray-100 text-gray-800",
|
autre: "bg-gray-100 text-gray-800",
|
||||||
};
|
};
|
||||||
return colors[publicCible as keyof typeof colors] || colors.autre;
|
return colors[publicCible as keyof typeof colors] || colors.autre;
|
||||||
@@ -303,6 +304,7 @@ export default function AdminSequences() {
|
|||||||
const labels = {
|
const labels = {
|
||||||
directeur: "Directeur",
|
directeur: "Directeur",
|
||||||
chef_service: "Chef de service",
|
chef_service: "Chef de service",
|
||||||
|
tous: "Tous",
|
||||||
autre: "Autre",
|
autre: "Autre",
|
||||||
};
|
};
|
||||||
return labels[publicCible as keyof typeof labels] || "Autre";
|
return labels[publicCible as keyof typeof labels] || "Autre";
|
||||||
@@ -380,7 +382,7 @@ export default function AdminSequences() {
|
|||||||
<Label htmlFor="publicCible">Public cible *</Label>
|
<Label htmlFor="publicCible">Public cible *</Label>
|
||||||
<Select
|
<Select
|
||||||
value={formData.publicCible}
|
value={formData.publicCible}
|
||||||
onValueChange={(value: "directeur" | "chef_service" | "autre") => setFormData({ ...formData, publicCible: value })}
|
onValueChange={(value: "directeur" | "chef_service" | "tous" | "autre") => setFormData({ ...formData, publicCible: value })}
|
||||||
>
|
>
|
||||||
<SelectTrigger id="publicCible">
|
<SelectTrigger id="publicCible">
|
||||||
<SelectValue placeholder="Sélectionner le public cible" />
|
<SelectValue placeholder="Sélectionner le public cible" />
|
||||||
@@ -388,6 +390,7 @@ export default function AdminSequences() {
|
|||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="directeur">Directeur</SelectItem>
|
<SelectItem value="directeur">Directeur</SelectItem>
|
||||||
<SelectItem value="chef_service">Chef de service</SelectItem>
|
<SelectItem value="chef_service">Chef de service</SelectItem>
|
||||||
|
<SelectItem value="tous">Tous</SelectItem>
|
||||||
<SelectItem value="autre">Autre</SelectItem>
|
<SelectItem value="autre">Autre</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
|
|||||||
8
todo.md
8
todo.md
@@ -295,3 +295,11 @@
|
|||||||
- [x] Corriger l'erreur "e.split is not a function" dans AdminCalendrier
|
- [x] Corriger l'erreur "e.split is not a function" dans AdminCalendrier
|
||||||
- [x] Ajouter une vérification du type de dateDebut avant parseISO
|
- [x] Ajouter une vérification du type de dateDebut avant parseISO
|
||||||
- [x] Gérer le cas où dateDebut est déjà un objet Date ou une chaîne
|
- [x] Gérer le cas où dateDebut est déjà un objet Date ou une chaîne
|
||||||
|
|
||||||
|
## Trois corrections demandées
|
||||||
|
|
||||||
|
- [x] Ajouter "Tous" dans la liste des publics cible du formulaire "Nouvelle séquence"
|
||||||
|
- [x] Ajouter "Tous" dans les fonctions de badge et label
|
||||||
|
- [x] Corriger le composant Progress pour supporter indicatorClassName
|
||||||
|
- [x] Corriger les couleurs de la barre de progression (vert/orange/rouge) selon le taux de remplissage
|
||||||
|
- [x] Compléter les informations des séquences affichées dans le calendrier (lieu, formateur, nb inscrits)
|
||||||
|
|||||||
Reference in New Issue
Block a user