Projet_Symfony_IA_Quentin/INLINE_EDITING.md

Système d'Édition Inline avec Verrouillage

Vue d'ensemble

Ce système permet l'édition directe des données dans les listes avec un mécanisme de verrouillage pour éviter les modifications concurrentes.

Fonctionnalités

✅ Édition Inline

• Clic pour éditer : Cliquez sur une cellule éditables pour la modifier
• Sauvegarde automatique : Les modifications sont sauvegardées après 2 secondes d'inactivité
• Validation en temps réel : Vérification des données avant sauvegarde
• Raccourcis clavier :
  • Entrée : Sauvegarder
  • Échap : Annuler

✅ Système de Verrouillage

• Verrous automatiques : Acquisition automatique lors de l'édition
• Expiration : Les verrous expirent après 30 minutes
• Prolongation : Les verrous sont automatiquement prolongés
• Protection concurrente : Empêche les modifications simultanées

✅ Interface Utilisateur

• Indicateurs visuels : Cellules verrouillées avec icône 🔒
• Messages d'état : Notifications de succès/erreur
• Styles adaptatifs : Couleurs différentes selon l'état

Architecture

Entités

• Lock : Gestion des verrous avec expiration
• Membre : Entité principale avec édition inline

Services

• LockService : Gestion des verrous (création, suppression, vérification)
• MembreApiController : API REST pour l'édition inline

JavaScript

• InlineEditing : Classe principale pour l'édition inline
• Gestion des verrous : Acquisition, prolongation, libération
• Interface utilisateur : Création d'inputs, validation, sauvegarde

Utilisation

1. Édition d'un Membre

// Clic sur une cellule éditables
// → Acquisition automatique du verrou
// → Création d'un input
// → Sauvegarde automatique après 2s

2. Gestion des Verrous

# Nettoyer les verrous expirés
php bin/console app:cleanup-locks

# Voir les statistiques
/lock/stats

3. API Endpoints

POST /api/membre/{id}/lock          # Acquérir un verrou
POST /api/membre/{id}/unlock        # Libérer un verrou
POST /api/membre/{id}/extend-lock   # Prolonger un verrou
POST /api/membre/{id}/update-field  # Mettre à jour un champ
GET  /api/membre/{id}/lock-status   # Statut du verrou

Configuration

Durée des Verrous

// Dans Lock.php
$this->expiresAt = new \DateTime('+30 minutes');

Vérification des Verrous

// Dans inline-editing.js
this.lockCheckInterval = setInterval(() => {
    this.checkLocks();
}, 30000); // Toutes les 30 secondes

Sauvegarde Automatique

// Dans inline-editing.js
input.addEventListener('input', () => {
    clearTimeout(saveTimeout);
    saveTimeout = setTimeout(() => {
        this.saveField(entityType, entityId, field, input.value);
    }, 2000); // 2 secondes
});

Sécurité

Protection des Données

• Validation côté serveur : Vérification des données avant sauvegarde
• Vérification des verrous : Contrôle d'accès basé sur les verrous
• Nettoyage automatique : Suppression des verrous expirés

Gestion des Conflits

• Détection de verrous : Vérification avant édition
• Messages d'erreur : Notification si élément verrouillé
• Libération automatique : Nettoyage à la fermeture de page

Monitoring

Statistiques

• Verrous actifs : Nombre de verrous en cours
• Verrous expirés : Éléments à nettoyer
• Utilisateurs : Qui modifie quoi

Commandes de Maintenance

# Nettoyer les verrous expirés
php bin/console app:cleanup-locks

# Voir les statistiques
curl /lock/stats

Extension

Ajouter l'Édition Inline à d'Autres Entités

1. Créer l'API Controller :

// src/Controller/Api/ProjetApiController.php
#[Route('/api/projet')]
class ProjetApiController extends AbstractController
{
    // Implémenter les mêmes méthodes que MembreApiController
}

2. Mettre à jour le Template :

<td class="editable-cell" 
    data-entity-type="Projet" 
    data-entity-id="{{ projet.id }}" 
    data-field="nom">
    {{ projet.nom }}
</td>

3. Ajouter les Styles :

.editable-cell {
    cursor: pointer;
    transition: background-color 0.2s;
}

Dépannage

Problèmes Courants

1. Verrous non libérés :

   • Vérifier la console JavaScript
   • Utiliser /lock/stats pour voir les verrous actifs
   • Exécuter php bin/console app:cleanup-locks

2. Édition ne fonctionne pas :

   • Vérifier que le JavaScript est chargé
   • Contrôler les erreurs dans la console
   • Vérifier les routes API

3. Conflits de verrous :

   • Attendre l'expiration (30 minutes)
   • Utiliser "Libérer tous mes verrous" dans /lock/stats

Logs

# Voir les logs Symfony
tail -f var/log/dev.log

# Voir les erreurs JavaScript
# Ouvrir la console du navigateur (F12)

Performance

Optimisations

• Vérification périodique : Toutes les 30 secondes
• Nettoyage automatique : Commande cron recommandée
• Cache des verrous : Éviter les requêtes répétées

Recommandations

# Ajouter au crontab
*/5 * * * * php /path/to/project/bin/console app:cleanup-locks

Support

Pour toute question ou problème :

1. Vérifier les logs Symfony
2. Contrôler la console JavaScript
3. Utiliser les outils de diagnostic dans /lock/stats