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:

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:

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:

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:

{
  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

npm run build

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

3.2 Lancer le serveur

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:

{
  "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.

// 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.

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é:

npm list @angular/cdk

Si manquant:

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é)