2026-01-20 15:17:22 +01:00

7.6 KiB

Raw Blame History

🎨 Fonctionnalité : Modification de la couleur des calendriers de groupes

📋 Vue d'ensemble

Cette fonctionnalité permet aux membres d'un groupe de personnaliser la couleur de la pastille du calendrier associé à leur groupe. Chaque groupe créé possède un calendrier automatique nommé "Groupe: {nom}", et cette couleur est visible dans tous les affichages de calendrier (agenda, vision, etc.).

✨ Fonctionnalités implémentées

1. API Backend (`/app/api/groups/[groupId]/calendar/route.ts`)

Nouveaux endpoints :

GET /api/groups/[groupId]/calendar

Récupère le calendrier associé à un groupe
Retourne l'objet calendrier avec sa couleur actuelle

PATCH /api/groups/[groupId]/calendar

Modifie uniquement la couleur du calendrier d'un groupe
Body : { "color": "#FF5733" }
Validation du format hexadécimal
Vérification que l'utilisateur est membre du groupe
Retourne le calendrier mis à jour

Sécurité :

✅ Authentification requise
✅ Vérification de l'appartenance au groupe via Keycloak
✅ Validation du format de couleur (hex : #RRGGBB ou #RGB)

2. Interface utilisateur - Page Groupes (`/components/groups/groups-table.tsx`)

Modifications :

Affichage de la pastille de couleur
- Chaque groupe affiche maintenant une pastille colorée à côté de son nom
- Couleur par défaut : #4f46e5 (indigo)
Nouveau bouton "Couleur du calendrier"
- Accessible via le menu actions (icône ⋯)
- Icône palette (🎨)
Dialog de sélection de couleur
- Palette de 16 couleurs prédéfinies
- Input manuel pour code hexadécimal
- Aperçu en temps réel de la couleur sélectionnée
- Validation avant sauvegarde

Palette de couleurs disponibles :

const colorPalette = [
  "#4f46e5", // Indigo
  "#0891b2", // Cyan
  "#0e7490", // Teal
  "#16a34a", // Green
  "#65a30d", // Lime
  "#ca8a04", // Amber
  "#d97706", // Orange
  "#dc2626", // Red
  "#e11d48", // Rose
  "#9333ea", // Purple
  "#7c3aed", // Violet
  "#2563eb", // Blue
  "#0284c7", // Sky
  "#059669", // Emerald
  "#84cc16", // Lime
  "#eab308", // Yellow
];

3. Interface utilisateur - Page Missions/Équipe (`/app/missions/equipe/page.tsx`)

Modifications identiques à GroupsTable :

Affichage de la couleur
- Icône du groupe (👥) affichée sur fond de la couleur du calendrier
- Texte en blanc pour meilleure lisibilité
Bouton direct dans la table
- Icône palette (🎨) directement dans les actions
- Tooltip "Couleur du calendrier"
Dialog de sélection
- Même interface que dans GroupsTable
- Sauvegarde avec loader pendant l'opération

🔄 Flux de données

Chargement initial :

1. Page charge les groupes via GET /api/groups
2. Pour chaque groupe :
   └─> GET /api/groups/{groupId}/calendar
   └─> Récupère la couleur du calendrier
   └─> Stocke dans state local : group.calendarColor

Modification de couleur :

1. Utilisateur clique sur icône palette
2. Dialog s'ouvre avec couleur actuelle
3. Utilisateur sélectionne nouvelle couleur
4. Clic "Enregistrer"
   └─> PATCH /api/groups/{groupId}/calendar { color: "#newcolor" }
   └─> Vérification membre du groupe (Keycloak)
   └─> Mise à jour en base de données (Prisma)
   └─> Mise à jour du state local
   └─> Toast de confirmation
5. Couleur visible immédiatement partout

🎯 Points d'affichage de la couleur

La couleur du calendrier de groupe est maintenant visible dans :

/groups - Page groupes
- Table des groupes (pastille à côté du nom)
/missions/equipe - Page gestion équipe
- Table des groupes (icône colorée)
/agenda - Page agenda
- Liste des calendriers (pastille à gauche)
- Événements dans le calendrier (barre colorée)
/vision - Page visioconférences
- Calendrier des réunions
- Événements du jour
Widgets calendrier - Tous les composants calendrier
- calendar-widget.tsx
- calendar-client.tsx
- calendar.tsx

🧪 Tests suggérés

Test 1 : Modification de couleur

Aller sur /groups ou /missions/equipe
Cliquer sur ⋯ → "Couleur du calendrier"
Choisir une nouvelle couleur
Cliquer "Enregistrer"
✅ Vérifier : Pastille mise à jour immédiatement

Test 2 : Validation format

Ouvrir dialog couleur
Entrer manuellement un code invalide : #GGGGGG
Cliquer "Enregistrer"
✅ Vérifier : Message d'erreur affiché

Test 3 : Permissions

Se connecter avec utilisateur NON membre du groupe
Essayer de modifier la couleur
✅ Vérifier : Erreur 403 "Vous devez être membre du groupe"

Test 4 : Persistance

Modifier couleur d'un groupe
Actualiser la page
✅ Vérifier : Couleur conservée
Aller sur /agenda
✅ Vérifier : Couleur visible dans le calendrier

📁 Fichiers modifiés

Nouveaux fichiers :

app/api/groups/[groupId]/calendar/route.ts (nouveau endpoint API)

Fichiers modifiés :

components/groups/groups-table.tsx
- Import Palette de lucide-react
- Ajout interface calendarColor? à Group
- Ajout états colorPickerDialog, selectedGroupForColor, selectedColor
- Fonction fetchGroups() modifiée pour charger couleurs
- Fonctions handleOpenColorPicker() et handleSaveColor()
- Palette de couleurs colorPalette
- Dialog de sélection de couleur
- Affichage pastille dans table
app/missions/equipe/page.tsx
- Import Palette de lucide-react
- Ajout interface calendarColor? à Group
- Ajout états color picker
- Fonction fetchData() modifiée pour charger couleurs
- Fonctions handleOpenColorPicker() et handleSaveColor()
- Palette de couleurs
- Bouton palette dans actions
- Dialog de sélection de couleur
- Affichage icône colorée

🔮 Améliorations futures possibles

Color picker avancé
- Utiliser un vrai color picker (ex: react-color)
- Support HSL, RGB en plus de hex
Thèmes prédéfinis
- Palettes thématiques (pastel, vif, entreprise, etc.)
- Sauvegarde de palettes personnalisées
Permissions granulaires
- Seuls les admins du groupe peuvent changer la couleur
- Rôle "gestionnaire de groupe" dans Keycloak
Historique des couleurs
- Log des changements de couleur
- Possibilité de revenir en arrière
Synchronisation
- Webhook pour notifier les autres utilisateurs en temps réel
- WebSocket pour mise à jour instantanée sans refresh

📊 Impact sur les performances

Chargement initial : +1 requête API par groupe (GET calendar)
Modification : 1 requête PATCH, pas de refresh complet
Cache : Les calendriers sont déjà en cache Redis (GET /api/calendars)
Optimisation : Possibilité de batch les requêtes GET calendar en une seule

🐛 Problèmes connus

Aucun problème connu pour le moment.

✅ Checklist de déploiement

API créée et testée
Interface utilisateur implémentée
Validation des permissions
Gestion des erreurs
Pas d'erreurs de linting
Tests unitaires (à ajouter)
Tests E2E (à ajouter)
Documentation utilisateur (à ajouter)

📞 Support

Pour toute question ou problème :

Vérifier que l'utilisateur est bien membre du groupe
Vérifier le format de la couleur (hex valide)
Vérifier les logs serveur pour les erreurs Keycloak
Vérifier que le calendrier du groupe existe en base

Date de création : 20 janvier 2026
Version : 1.0
Auteur : Senior Developer Assistant

7.6 KiB Raw Blame History