# Installation - Module Tooltip avec Sections Pliables

## 📋 Prérequis
- Framework TeamBrain existant
- Page des tickets fonctionnelle
- JavaScript ES6+ supporté

## 🚀 Installation Rapide

### 1. Fichiers à ajouter
Les fichiers suivants ont été créés et sont prêts à l'emploi :

```
application/helpdesk/admin/zlib_mod/front/ticket/js/
├── include_collapsible_tooltip.js      # Module principal
├── collapsible_tooltip_config.js       # Configuration
└── README_collapsible_tooltip.md       # Documentation

application/helpdesk/admin/
├── test_collapsible_tooltip.html       # Page de test simple
├── demo_collapsible_tooltip.html       # Démonstration complète
├── test_collapsible_functionality.js   # Script de test
└── INSTALL_collapsible_tooltip.md      # Ce fichier
```

### 2. Modifications apportées

#### Fichier modifié : `ticketO.js`
```javascript
// Ajout de l'inclusion des nouveaux modules
js_include('admin/zlib_mod/front/ticket/js/collapsible_tooltip_config.js');
js_include('admin/zlib_mod/front/ticket/js/include_collapsible_tooltip.js');
```

#### Fichier modifié : `include_ticket_status.js`
- Suppression des fonctions dupliquées
- Utilisation du module externe
- Intégration avec la configuration

## ✅ Vérification de l'installation

### 1. Test rapide
1. Ouvrir la page des tickets : `?application=helpdesk&module=admin&page=ticketO`
2. Cliquer sur le bouton "+" à côté des filtres
3. Vérifier que le tooltip s'ouvre avec des sections pliables
4. Tester le repliement/dépliement des sections

### 2. Test complet
1. Ouvrir `test_collapsible_tooltip.html` dans un navigateur
2. Tester toutes les interactions
3. Vérifier les animations et le filtrage

### 3. Test automatisé
1. Ouvrir la console du navigateur sur la page des tickets
2. Exécuter : `testCollapsibleFunctionality.runAllTests()`
3. Vérifier que tous les tests passent

## 🔧 Configuration

### Configuration par défaut
Le module utilise une configuration par défaut optimisée. Pour la personnaliser :

```javascript
// Modifier la configuration dans collapsible_tooltip_config.js
window.CollapsibleTooltipConfig = {
    animations: {
        duration: 300,        // Durée des animations
        easing: 'ease'        // Type d'animation
    },
    sections: {
        defaultState: 'collapsed',  // État par défaut (replié)
        enableGlobalControls: true // Contrôles globaux
    }
    // ... autres options
};
```

### Personnalisation des sections
```javascript
// Désactiver une section
window.CollapsibleTooltipConfig.sectionConfig.requester.enabled = false;

// Changer l'état par défaut (déplier une section spécifique)
window.CollapsibleTooltipConfig.sectionConfig.priority.defaultState = 'expanded';
```

## 🐛 Dépannage

### Problèmes courants

#### 1. Tooltip ne s'ouvre pas
**Cause :** Conflit de JavaScript ou module non chargé
**Solution :**
```javascript
// Vérifier dans la console
console.log(typeof createCollapsibleSection); // doit retourner 'function'
```

#### 2. Sections ne se replient pas
**Cause :** CSS non chargé ou conflit de classes
**Solution :**
```javascript
// Vérifier les classes CSS
document.querySelectorAll('.section-content').forEach(el => {
    console.log(el.classList.contains('expanded'));
});
```

#### 3. Filtrage ne fonctionne pas
**Cause :** `tbcomponent` non disponible
**Solution :**
```javascript
// Vérifier la disponibilité
console.log(typeof tbcomponent); // doit retourner 'object'
```

### Logs de débogage
Activer les logs pour diagnostiquer les problèmes :

```javascript
// Activer le débogage
window.CollapsibleTooltipConfig.debug.enabled = true;
window.CollapsibleTooltipConfig.debug.logLevel = 'debug';
```

## 📊 Fonctionnalités

### ✅ Implémentées
- [x] Sections pliables individuelles
- [x] Animations fluides CSS
- [x] Filtrage par section
- [x] Contrôles globaux (tout replier/déplier)
- [x] Configuration flexible
- [x] Intégration avec le système existant
- [x] Tests automatisés
- [x] Documentation complète

### 🔄 Améliorations possibles
- [ ] Sauvegarde de l'état des sections (localStorage)
- [ ] Recherche dans les sections
- [ ] Tri des éléments dans les sections
- [ ] Thèmes personnalisables
- [ ] Support des raccourcis clavier

## 📚 Documentation

### Fichiers de documentation
- `README_collapsible_tooltip.md` - Documentation technique complète
- `demo_collapsible_tooltip.html` - Démonstration interactive
- `test_collapsible_functionality.js` - Script de test automatisé

### API des fonctions
```javascript
// Fonctions principales
toggleSection(sectionId)                    // Replier/déplier une section
filterBySection(type, code, label)          // Appliquer un filtre
expandAllSections()                         // Déplier toutes les sections
collapseAllSections()                       // Replier toutes les sections

// Fonctions utilitaires
createCollapsibleSection(title, data, id)   // Créer une section
getSectionConfig(sectionId)                 // Obtenir la config d'une section
isSectionEnabled(sectionId)                 // Vérifier si une section est activée
```

## 🎯 Utilisation

### Intégration dans d'autres pages
Pour utiliser le module sur d'autres pages :

```javascript
// 1. Inclure les fichiers
js_include('admin/zlib_mod/front/ticket/js/collapsible_tooltip_config.js');
js_include('admin/zlib_mod/front/ticket/js/include_collapsible_tooltip.js');

// 2. Créer le tooltip
const tooltipHtml = createCollapsibleSection('Ma Section', data, 'ma_section');

// 3. Ajouter au DOM
document.getElementById('container').innerHTML = tooltipHtml;
```

### Personnalisation avancée
```javascript
// Créer une section personnalisée
const customSection = createCollapsibleSection(
    'Titre Personnalisé',
    [
        { code: 'option1', label: 'Option 1', nb: 5 },
        { code: 'option2', label: 'Option 2', nb: 3 }
    ],
    'custom_section'
);
```

## 📞 Support

### En cas de problème
1. Vérifier la console du navigateur pour les erreurs
2. Exécuter les tests automatisés
3. Consulter la documentation technique
4. Tester avec la page de démonstration

### Logs utiles
```javascript
// Activer tous les logs
window.CollapsibleTooltipConfig.debug.enabled = true;
window.CollapsibleTooltipConfig.debug.logLevel = 'debug';

// Vérifier l'état des sections
document.querySelectorAll('.collapsible-section').forEach(section => {
    const id = section.getAttribute('data-section');
    const content = document.getElementById(`content-${id}`);
    console.log(`${id}: ${content.classList.contains('expanded') ? 'déplié' : 'replié'}`);
});
```

---

## 🎉 Installation terminée !

Le module de tooltip avec sections pliables est maintenant opérationnel. Vous pouvez :

1. **Tester** : Ouvrir la page des tickets et cliquer sur le bouton "+"
2. **Personnaliser** : Modifier la configuration selon vos besoins
3. **Étendre** : Utiliser le module sur d'autres pages

Pour toute question ou problème, consultez la documentation technique ou exécutez les tests automatisés.