Interface Frontend

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

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