# Affichage dynamique

**Résumé express :** Créer des types de données, configurer le store global et utiliser les boucles pour afficher dynamiquement les cartes et tâches.

---

## Problématique : Scalabilité des composants

Actuellement, nous avons seulement deux cartes dans notre application. Si nous en avions 10, il ne serait pas pratique de placer 10 composants manuellement. Nous devons créer une liste de cartes accessible partout dans l'application.

## 1. Définir les types de données

### Créer le type CardType
1. Clic droit → **New** → **Type**
2. Nommer le type **CardType**
3. Définir la structure :
    - **Type** : Card
    - **Structure** : Object (car une carte a plusieurs propriétés)

### Propriétés du type Card
- **title** : string (le titre de la carte)
- **tasks** : array of strings (liste des tâches)

Cette structure définit le "schéma" qu'aura chaque carte dans notre application.

## 2. Configurer le store global

### Créer la structure de données
1. Aller dans le **Store**
2. Redéfinir le schéma :
    - **Nom** : cards (avec un S pour le pluriel)
    - **Type** : Array de CardType

### Initialiser les données par défaut
Remplir le store avec des données d'exemple :

**Carte 1 - "À faire" :**
- title: "À faire"
- tasks: ["tâche 1", "tâche 2"]

**Carte 2 - "En cours" :**
- title: "En cours"
- tasks: [] (aucune tâche)

**Carte 3 - "Terminé" :**
- title: "Terminé"
- tasks: ["tâche 3", "tâche 4", "tâche 5"]

### Tester le store
1. Cliquer sur **Reset to Store** dans l'onglet Preview
2. Le preview affiche maintenant les données du store par défaut

## 3. Affichage dynamique des cartes

### Transformer l'affichage statique en boucle
1. Retourner sur la page **Main**
2. Clic droit sur une carte → **Wrap in component**
3. Choisir **Template**

### Configurer la boucle
1. Dans le Template, sélectionner **For** (pour une boucle)
2. Définir l'itération sur **cards** (données du store)
3. Passer le Preview de **Once** à **All** pour voir toutes les cartes

### Connecter les données dynamiques
1. Sélectionner le composant Card
2. Modifier la propriété **title** : `template.value.title`
3. Les titres se mettent à jour automatiquement

## 4. Affichage dynamique des tâches

### Ajouter la propriété tasks au composant Card
1. Aller dans le composant **Card**
2. Ajouter une nouvelle propriété :
    - **Nom** : tasks
    - **Type** : array of strings
    - **Valeurs par défaut** : ["tâche 1", "tâche 2"]

### Créer une boucle pour les tâches
1. Dans le composant Card, sélectionner la zone des tâches
2. **Wrap in component** → **Template**
3. Configurer une boucle **For** sur la propriété **tasks**
4. Passer le Preview en mode **All**

### Rendre le contenu des tâches dynamique
1. Sélectionner le texte d'une tâche
2. Remplacer le texte fixe par une variable : `{taskName}`
3. Créer la propriété **taskName** liée à `template.value`
4. Les tâches s'affichent maintenant dynamiquement

## 5. Connecter tout ensemble

### Lier les cartes aux données du store
1. Retourner sur la page **Main**
2. Sélectionner le composant Card dans la boucle
3. Modifier la propriété **tasks** : `template.value.tasks`
4. Chaque carte affiche maintenant ses propres tâches

### Tester l'affichage complet
1. **Reset to Store** pour charger les données
2. Les trois cartes s'affichent avec leurs titres et tâches respectifs
3. Ajouter une carte dans le store pour tester la réactivité

## Concepts clés

### Les Types
- Définissent la structure des données
- Garantissent la cohérence dans toute l'application
- Permettent la validation automatique

### Le Store
- Stockage global des données de l'application
- Source unique de vérité
- Permet la synchronisation entre composants

### Les Templates avec boucles
- **For** : itère sur des tableaux ou objets
- `template.value` : accède à l'élément courant de la boucle
- Affichage dynamique basé sur les données

### Preview modes
- **Once** : affiche un seul élément (pour le design)
- **All** : affiche tous les éléments (pour tester les boucles)

## Avantages de cette approche

- **Scalabilité** : ajouter des cartes ne nécessite que de modifier le store
- **Maintenance** : une seule définition de carte pour toute l'app
- **Cohérence** : les types garantissent la structure des données
- **Réactivité** : les changements du store se reflètent automatiquement

---

*Prochainement : Implémentation de la logique interactive pour ajouter et manipuler les cartes et tâches.*