# Frontend et interactions CRUD

**Résumé express :** Connecter le backend à une interface utilisateur pour afficher, créer, modifier et supprimer des livres avec un système de store et de composants réutilisables.

---

## 1. Structure de la page principale

### Créer la page frontend
1. Créer une nouvelle page pour l'interface
2. Design : liste de livres à gauche, interactions à droite

### Configuration du conteneur principal
1. Créer un bloc conteneur avec les styles :
   - **Display** : flex
   - **Gap** : valeur aléatoire (ex: 12px)
   - **Align-items** : flex-start (alignement en haut)
   - **Width** : 100%
   - **Padding** : 12px

### Créer le conteneur de liste (booklist)
1. Ajouter un bloc nommé **booklist** dans le conteneur
2. Configurer les styles :
   - **Display** : grid
   - **Gap** : 2px
   - **Grid-template-columns** : 2 colonnes
   - **Width** : 50% (moitié de l'espace)
   - **Height** : 100vh

## 2. Composant BookInfo

### Créer le composant de base
1. Créer un nouveau composant nommé **book-info**
2. Définir les styles :
   - **Width** : 100%
   - **Height** : 80px
   - **Background** : utiliser un token (ex: background-lightest)
   - **Padding** : 12px
   - **Border-radius** : 8px

> Si le composant n'est pas visible, changer le mode preview de "Compact" à "Stretch"

### Ajouter les propriétés dynamiques
1. Créer deux **custom text** dans le composant
2. Premier texte : écrire `{title}`
   - Les accolades créent une propriété dynamique (devient bleue)
3. Deuxième texte : écrire `{author}`

### Configurer les propriétés du composant
1. Cliquer sur le composant **book-info**
2. Définir les propriétés en entrée :
   - **title** (string)
   - **author** (string)
   - **id** (string) - à ajouter pour les interactions futures
3. Définir des valeurs par défaut pour les tests

### Lier les propriétés aux textes
1. Cliquer sur le premier custom text
2. Cliquer sur l'icône **éclair** (⚡)
3. Sélectionner la propriété **title** du composant
4. Répéter pour **author**

### Styliser le titre
1. Sélectionner le custom text du titre
2. Modifier les styles :
   - **Font-size** : 24px
   - **Color** : content-deepest (pour plus de contraste)

## 3. Store - Gestion des données

### Créer le store
1. Créer un nouveau store nommé **book-store**
2. Le store stocke les données côté frontend
3. Avantage : une seule requête à la base de données, puis réutilisation des données

### Définir le schéma du store
Créer la structure suivante :
```
books (array of objects)
  ├─ id (string)
  ├─ author (string)
  └─ title (string)
```

## 4. Charger les données au montage

### Logique de chargement
1. Aller dans l'onglet **Logique** de la page
2. Utiliser le trigger **onMounted** (au chargement de la page)

### Récupérer les données
1. Tirer un fil d'exécution depuis onMounted
2. Appeler la route **getbooks** (créée dans l'épisode précédent)
3. La route renvoie une **réponse** avec toutes les données

### Mettre à jour le store
1. Créer un node **get** pour récupérer **bookstore**
2. Créer un node **setproperty**
3. Relier bookstore à **target**
4. Sélectionner la propriété **books**
5. Relier la **réponse** de getbooks au champ books
6. Relier le fil d'exécution

> Tester avec Execute et Ctrl+Espace : les données de db-books apparaissent dans le store

## 5. Afficher les livres avec Template

### Créer la boucle
1. Dans la page, supprimer les composants book-info de test
2. Ajouter un composant book-info
3. Clic droit sur book-info → **Wrap a component**
4. Sélectionner **Template**
5. Changer de **if** à **for** (pour itérer)
6. Sélectionner **books** du store

### Lier les données dynamiques
1. Cliquer sur le composant book-info dans le template
2. Définir les propriétés :
   - **title** : cliquer sur l'éclair → sélectionner **title** du template
   - **author** : cliquer sur l'éclair → sélectionner **author** du template
   - **id** : cliquer sur l'éclair → sélectionner **id** du template

> En mode Builder, mettre le template sur "All" pour voir tous les éléments (au lieu de "Once")

## 6. Pop-up de création

### Créer la structure de la pop-up
1. Cliquer sur **+** ou taper "pop-up" dans la recherche
2. Ajouter un **bloc** dans la pop-up contenant :
   - Deux **text input**
   - Un **button**

### Styliser la pop-up
1. Pour visualiser en mode développement, forcer l'affichage dans les propriétés
2. Configurer le bloc :
   - **Width** : 200px
   - **Display** : flex
   - **Flex-direction** : column
   - **Gap** : 12px
3. Configurer le bouton :
   - **Width** : 100%
   - **Text** : "Create"

### Configurer les inputs
1. Premier input :
   - **Placeholder** : "book title"
2. Deuxième input :
   - **Placeholder** : "author"

### Créer les variables de page
1. Dans la page, ajouter deux variables :
   - **title** (string)
   - **author** (string)

### Lier les inputs aux variables
1. Premier text input : sélectionner **model** → choisir **title**
2. Deuxième text input : sélectionner **model** → choisir **author**

> Le model crée une liaison bidirectionnelle entre l'input et la variable

## 7. Logique de création

### Tester la récupération des valeurs
1. Sur le bouton Create, ajouter un événement **onClick**
2. Créer un **get title** et l'afficher dans la console
3. Tester en preview : écrire dans l'input → cliquer Create → voir la valeur

### Appeler la route de création
1. Supprimer le test console
2. Tirer un fil depuis onClick
3. Appeler la route **createbooks**
4. Pour le **body** :
   - Tirer un fil → créer automatiquement un **create object**
   - Relier **get title** au champ title
   - Relier **get author** au champ author

### Mettre à jour le store
1. Créer un **get bookstore**
2. Créer un **setproperty**
3. Sélectionner **books**
4. Relier la **réponse** de createbooks

> Le livre est maintenant ajouté à la liste !

## 8. Gestion de l'affichage de la pop-up

### Créer la variable de contrôle
1. Ajouter une variable **createBook** (boolean) dans la page
2. Sur la pop-up, définir le **model** : **createBook**
   - Si createBook = true → pop-up visible
   - Si createBook = false → pop-up cachée

### Ouvrir la pop-up avec le bouton +
1. Créer un **button** dans la page
2. Configurer le bouton :
   - **Icon** : plus
   - **Size** : large
   - **Shape** : round
3. Styliser avec position :
   - **Position** : absolute
   - **Bottom** : 16px
   - **Right** : 16px
4. Ajouter un événement **onClick**
5. Créer un **set createBook** → cocher (passer à true)

### Fermer la pop-up après création
1. Dans la logique du bouton Create
2. Ajouter un **set createBook** → décocher (passer à false)
3. Placer après la mise à jour du store

> Cliquer en dehors de la pop-up la ferme automatiquement

## 9. Affichage du livre sélectionné

### Ajouter au schéma du store
Créer un nouvel objet dans **book-store** :
```
selectedBook (object)
  ├─ id (string)
  ├─ author (string)
  └─ title (string)
```

### Créer le conteneur d'informations
1. Ajouter un bloc **bookinfo** (différent du composant)
2. Placer en haut pour clarté
3. Configurer :
   - **Width** : 50%
4. Ajouter :
   - Un **custom text** pour le titre
   - Un **bloc** avec deux icônes

### Ajouter les icônes d'action
1. Première icône :
   - **Icon** : poubelle (trash)
   - **Size** : plus grande
   - **Color** : couleur distincte
   - **Cursor** : pointer
2. Deuxième icône :
   - **Icon** : crayon (edit)
   - **Color** : autre couleur
   - **Cursor** : pointer

### Logique de sélection dans le composant
1. Dans le composant **book-info**, ajouter un événement **onClick** sur le container
2. Créer un **get bookstore**
3. Créer un **setproperty** → sélectionner **selectedBook**
4. Créer un **create object** automatiquement
5. Relier les propriétés :
   - **get id** → id
   - **get author** → author
   - **get title** → title

### Afficher le titre sélectionné
1. Dans le custom text du conteneur bookinfo
2. Écrire `{selectedTitle}` pour créer la propriété
3. Définir **selectedTitle** = `bookstore.selectedBook.title`

> Cliquer sur un livre met à jour l'affichage automatiquement

## 10. Suppression d'un livre

### Logique de suppression
1. Sur l'icône poubelle, ajouter un événement **onClick**
2. Appeler la route **deletebook**
3. Créer un **create object** pour le body :
   - **id** : récupérer avec **get bookstore** → propriété **selectedBook.id**

### Mettre à jour le store
1. Créer un **setproperty** pour **books**
2. Relier la **réponse**

### Réinitialiser la sélection
1. Créer un autre **setproperty** pour **selectedBook**
2. Ne rien relier (laisser vide)
3. Raison : le livre n'existe plus, on vide la sélection

### Amélioration avec condition
1. Wrapper le conteneur bookinfo dans un **template**
2. Utiliser la logique **if**
3. Condition : `bookstore.selectedBook.id` existe (non vide)
4. Décocher pour inverser : afficher seulement si id existe

> Après suppression, les icônes disparaissent automatiquement

## 11. Modification d'un livre

### Créer la pop-up de modification
1. Copier la pop-up de création
2. Renommer en "Modify" (et l'autre en "Create" pour différencier)
3. Changer le texte du bouton en "Modify"

### Créer la variable de contrôle
1. Ajouter une variable **modifyBook** (boolean)
2. Sur la pop-up Modify, définir le **model** : **modifyBook**

### Ouvrir la pop-up et pré-remplir
1. Sur l'icône crayon, ajouter un événement **onClick**
2. Créer un **set modifyBook** → true
3. Pré-remplir les inputs :
   - Créer un **get bookstore**
   - Récupérer **selectedBook**
   - Créer un **spread** pour déstructurer
   - **set title** → relier title du spread
   - **set author** → relier author du spread

### Logique de modification
1. Sur le bouton Modify, ajouter un événement **onClick**
2. Appeler la route **updatebooks**
3. Créer le **body** :
   - **id** : récupérer depuis bookstore.selectedBook.id
   - **title** : **get title** (de la variable)
   - **author** : **get author** (de la variable)

### Mettre à jour le store
1. **setproperty** pour **books** → relier la réponse
2. **setproperty** pour **selectedBook** → relier le body (pour afficher les nouvelles valeurs)
3. **set modifyBook** → false (fermer la pop-up)

## Récapitulatif des concepts clés

| Concept | Utilisation |
|---------|-------------|
| **Store** | Stockage centralisé des données frontend |
| **Template (for)** | Itérer sur un tableau pour afficher plusieurs éléments |
| **Template (if)** | Afficher conditionnellement des éléments |
| **Model** | Liaison bidirectionnelle entre input et variable |
| **Get property** | Extraire une propriété d'un objet |
| **Set property** | Modifier une propriété d'un objet ou store |
| **Spread** | Déstructurer toutes les propriétés d'un objet |
| **Variables de page** | Stocker des valeurs temporaires (inputs, états) |
| **onMounted** | Exécuter du code au chargement de la page |

## Architecture des données

```
Page Variables
├─ title (string) - input temporaire
├─ author (string) - input temporaire
├─ createBook (boolean) - contrôle pop-up création
└─ modifyBook (boolean) - contrôle pop-up modification

Book Store
├─ books (array) - liste complète
└─ selectedBook (object) - livre actuellement sélectionné
```

## Conseils pratiques

- **Toujours nommer clairement** les variables et composants
- Utiliser le **mode "All"** dans les templates pour voir tous les éléments en développement
- **Tester avec Ctrl+Espace** pour visualiser les données à chaque étape
- Les **pop-ups se ferment automatiquement** en cliquant à l'extérieur
- Utiliser les **tokens** du store pour accéder aux données imbriquées
- **Réinitialiser selectedBook** après suppression pour éviter les erreurs
- Le **model** crée une liaison bidirectionnelle (changement dans l'input = changement dans la variable)
- Penser à **fermer les pop-ups** après les actions (create/modify)
- Utiliser **spread** pour déstructurer facilement les objets complexes

---