Réalisation finale
This commit is contained in:
Logshiro
205
INLINE_EDITING.md
Normal file
205
INLINE_EDITING.md
Normal file
@@ -0,0 +1,205 @@
|
||||
# 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
|
||||
```javascript
|
||||
// Clic sur une cellule éditables
|
||||
// → Acquisition automatique du verrou
|
||||
// → Création d'un input
|
||||
// → Sauvegarde automatique après 2s
|
||||
```
|
||||
|
||||
### 2. Gestion des Verrous
|
||||
```bash
|
||||
# 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
|
||||
```php
|
||||
// Dans Lock.php
|
||||
$this->expiresAt = new \DateTime('+30 minutes');
|
||||
```
|
||||
|
||||
### Vérification des Verrous
|
||||
```javascript
|
||||
// Dans inline-editing.js
|
||||
this.lockCheckInterval = setInterval(() => {
|
||||
this.checkLocks();
|
||||
}, 30000); // Toutes les 30 secondes
|
||||
```
|
||||
|
||||
### Sauvegarde Automatique
|
||||
```javascript
|
||||
// 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
|
||||
```bash
|
||||
# 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** :
|
||||
```php
|
||||
// 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** :
|
||||
```html
|
||||
<td class="editable-cell"
|
||||
data-entity-type="Projet"
|
||||
data-entity-id="{{ projet.id }}"
|
||||
data-field="nom">
|
||||
{{ projet.nom }}
|
||||
</td>
|
||||
```
|
||||
|
||||
3. **Ajouter les Styles** :
|
||||
```css
|
||||
.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
|
||||
```bash
|
||||
# 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
|
||||
```bash
|
||||
# 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`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user