ObsiViewer/docs/KANBAN/KANBAN_INTEGRATION_GUIDE.md

# Guide d'Intégration Kanban Board - 5 Minutes ⚡

## 🎯 Objectif

Intégrer le Kanban Board comme nouveau type de bloc dans ObsiViewer.

---

## 📝 Étapes d'intégration

### Étape 1: Modifier BlockHostComponent (2 min)

**Fichier**: `src/app/editor/components/block/block-host.component.ts`

#### 1.1 Ajouter l'import

Ajouter en haut du fichier:

```typescript
import { KanbanBoardComponent } from '../../../blocks/kanban/kanban-board.component';
```

#### 1.2 Ajouter le case dans ngOnInit()

Dans la méthode `ngOnInit()`, dans le switch sur `this.block.type`, ajouter:

```typescript
case 'kanban':
  this.dynamicComponentRef = viewContainerRef.createComponent(KanbanBoardComponent);
  this.dynamicComponentRef.setInput('blockId', this.block.id);
  
  // Load existing board data
  if (this.block.data) {
    try {
      const boardData = JSON.parse(this.block.data);
      this.dynamicComponentRef.setInput('initialData', boardData);
      console.log('[Kanban] Board loaded:', boardData);
    } catch (e) {
      console.error('[Kanban] Error parsing board data:', e);
    }
  }
  break;
```

#### 1.3 Ajouter la sauvegarde dans onMenuAction()

Dans la méthode `onMenuAction()`, ajouter:

```typescript
case 'kanban':
  if (this.dynamicComponentRef?.instance) {
    const kanbanInstance = this.dynamicComponentRef.instance as any;
    
    // Check if exportData method exists
    if (typeof kanbanInstance.exportData === 'function') {
      const boardData = kanbanInstance.exportData();
      
      if (boardData) {
        this.block.data = JSON.stringify(boardData);
        console.log('[Kanban] Board saved:', boardData);
        
        // Emit save event
        this.blockUpdated.emit(this.block);
      }
    }
  }
  break;
```

---

### Étape 2: Ajouter au menu de création de blocs (1 min)

**Fichier où le menu de blocs est défini** (chercher "excalidraw", "code-block", etc.)

Ajouter l'option Kanban Board:

```typescript
{
  type: 'kanban',
  label: 'Kanban Board',
  icon: '📋', // ou une icône SVG
  description: 'Task board with columns, cards, and time tracking',
  category: 'productivity' // si catégories disponibles
}
```

---

### Étape 3: Tester (2 min)

#### 3.1 Build

```bash
npm run build
```

Vérifier qu'il n'y a pas d'erreurs de compilation.

#### 3.2 Lancer le serveur

```bash
npm start
```

#### 3.3 Tests manuels

1. **Créer un bloc Kanban**
   - Ouvrir une note
   - Menu → Insérer bloc → Kanban Board
   - Vérifier: 2 colonnes apparaissent

2. **Tester les fonctionnalités de base**
   - Renommer colonne (clic sur titre)
   - Ajouter tâche (bouton + Task)
   - Cliquer tâche → panneau s'ouvre
   - Drag & drop tâche

3. **Tester les dialogues**
   - Labels → dialog s'ouvre
   - Date → calendrier s'ouvre
   - Estimated time → roues s'ouvrent
   - Actual time → dialog complet s'ouvre

4. **Tester la persistance**
   - Créer board avec tâches
   - Sauvegarder note (Ctrl+S)
   - Fermer/rouvrir note
   - Vérifier: board restauré identique

---

## 🔍 Vérification de l'intégration

### Checklist

- [ ] Import KanbanBoardComponent ajouté
- [ ] Case 'kanban' dans ngOnInit()
- [ ] Case 'kanban' dans onMenuAction()
- [ ] Option menu création visible
- [ ] Build réussi sans erreurs
- [ ] Création de board fonctionne
- [ ] Colonnes créées par défaut
- [ ] Tâches créables
- [ ] Panneau détails s'ouvre
- [ ] Dialogues fonctionnels
- [ ] Drag & drop opérationnel
- [ ] Sauvegarde/chargement OK

---

## 📊 Structure JSON du board

Le board est sauvegardé dans `block.data` au format JSON:

```json
{
  "id": "block-123",
  "title": "Board",
  "columns": [
    {
      "id": "col-1",
      "title": "Column 1",
      "order": 0,
      "boardId": "block-123",
      "tasks": [
        {
          "id": "task-1",
          "title": "Task one",
          "description": "",
          "completed": false,
          "columnId": "col-1",
          "order": 0,
          "createdBy": { "id": "user-1", "name": "Bruno Charest" },
          "createdAt": "2025-11-16T16:00:00.000Z",
          "updatedAt": "2025-11-16T16:00:00.000Z",
          "labels": [],
          "attachments": [],
          "comments": []
        }
      ]
    }
  ],
  "createdAt": "2025-11-16T16:00:00.000Z",
  "updatedAt": "2025-11-16T16:00:00.000Z"
}
```

---

## 🐛 Troubleshooting

### Problème: Board ne se charge pas

**Solution**: Vérifier la console browser pour erreurs de parsing JSON.

```typescript
// Ajouter plus de logging
console.log('[Kanban] Raw data:', this.block.data);
const boardData = JSON.parse(this.block.data);
console.log('[Kanban] Parsed data:', boardData);
```

### Problème: Sauvegarde ne fonctionne pas

**Solution**: Vérifier que `exportData()` retourne bien les données.

```typescript
const boardData = kanbanInstance.exportData();
console.log('[Kanban] Exported data:', boardData);
```

### Problème: Dialogues ne s'affichent pas

**Solution**: Vérifier que tous les imports sont présents dans `TaskDetailPanelComponent`.

### Problème: Drag & drop ne fonctionne pas

**Solution**: Vérifier que Angular CDK Drag-Drop est installé:

```bash
npm list @angular/cdk
```

Si manquant:

```bash
npm install @angular/cdk
```

---

## 🚀 Fonctionnalités disponibles

### Colonnes
✅ Création/suppression/renommage  
✅ Drag & drop (réordonnancement)  
✅ Menu contextuel (7 options)  
✅ Duplication  

### Tâches
✅ Création/suppression/édition  
✅ Checkbox completion  
✅ Drag & drop entre colonnes  
✅ Menu contextuel (5 options)  
✅ Duplication/copie  

### Détails Tâche
✅ Titre et description éditables  
✅ Labels colorés (11 couleurs)  
✅ Date avec calendrier + time picker  
✅ Temps estimé (jours/heures/minutes)  
✅ Temps réel avec work types  
✅ Attachments (upload + preview)  
✅ Assignation utilisateur  
✅ Comments  

---

## 📚 Documentation complète

Pour plus de détails, consulter:

- **Architecture**: `docs/KANBAN_BOARD_REFACTORING.md`
- **Status**: `docs/KANBAN_FINAL_STATUS.md`
- **Tests**: Section "Tests Complets" dans KANBAN_FINAL_STATUS.md

---

## ✅ Validation finale

Une fois l'intégration terminée:

1. Créer un board de test complet
2. Tester toutes les fonctionnalités (checklist ci-dessus)
3. Sauvegarder et recharger la note
4. Vérifier que tout fonctionne après rechargement

**Status**: ✅ L'implémentation est complète et prête à l'emploi!

---

**Temps d'intégration estimé**: 5 minutes  
**Difficulté**: ⭐⭐☆☆☆ (Facile)  
**Impact**: 🚀🚀🚀🚀🚀 (Très élevé)