{{ $this->user->name }}

——EEEE » Maintenant quand on entre l'index dans la zone de texte le nom de /'utilisateur correspondant apparait au-dessous Dupont La évidemment ca devient bien plus intéressant parce qu'on n'a pas a se soucier de toute Vintendance d'Ajax ! Un petit schéma a nouveau pour bien visualiser le fonctionnement : Cree ray Poe a PMs ne eee) ee er oct MU MUe ese CSU 9) rans tame Pere Be Cne Les actions Une action dans Livewire c'est la capacité & écouter une action sur la page web et d'appeler une méthode dans le composant pour modifier la page. C'est donc un pas de plus danslinteractivité par rapport aux propriétés calculées vues ci-dessus. Préparation Pour montrer ca on va ajouter une colonne dans notre table users. On crée donc une migration php artisan make:migration alter_users_table --table-users On compléte le code de la migration integer(‘note’); Ys y* * Reverse the migrations. */ public function down(): void { Schem table('users', function (Blueprint $table) { $table->dropColumn(‘note" ); Ds Bs Et on lance la migrationphp artisan migrate Maintenant on dispose d'une colonne note, Action simple On va coder ainsi notre composant note = $this->note; $user->save(); + public function render() { return view('livewire. show-posts')->layout( ‘layouts. guest"); } + Ona * une propriété note © une action noter Dans la vue Ona: : wire:[Link] # eeuliaisondeddonnées avec la propriété not pour éviter les multiples requétes) ‘note" (on prevoit defer * un bouton pour noter avec une action sur le click : wire:click="noter" Maintenant quand on met une note dans la zone de texte et qu’on clique sur le bouton on retrouve la valeur de la note dans la colonne note de I'utilisateur (ici on a pris simplement le premier, mais on pourrait évidemment rendre ca dynamique ou prendre l'utilisateur connecté) 10 id name note email 4 Durand 10 durand@[Link] Et sy PT ek ey public function noter() Ve cL BenPassage de paramétre On peut passer un paramétre pour |'action. Poursuivons notre exemple en transmettant I'index de l'utilisateur. Dans la classe on ajoute une propriété $index et on utilise le paramétre dans laction public $note = 0; public $index = 1; public function noter($indexUser) { $user = User: :find($indexUser); $user->note = $this->note; $user->save(); + Dans la vue on ajoute la saisie de l'index et la transmission du paramétre La partie intéressante est le passage du paramétre wire:click="noter({{ $index }})"On a donc deux zones de texte Index de Uutilisateur ( 1 Note eS On peut maintenant choisir I'utilisateur & noter. Bon, c'est sommaire et pas du tout réaliste, mais ca donne le principe de fonctionnement. On pourrait par exemple remplir une liste de choix avec les noms des utilisateurs. Je ne vais pas le faire pour rester simplement dans les orincipes de fonctionnement. CPC marc} ees ree Pa ee eet issuance est) ct ca La validation Nee easy Saat Ree sea a pu Eien) fires Re, rex de tuiisotew 2 Note 15 Dans mon exemple précédent je n'ai prévu aucun contréle quant aux valeurs transmises. Dans une approche réaliste il nous faut évidemment une validation des valeurs. La bonne nouvelle clest que le systéme est le méme que pour la validation dans Laravel.Validation classique On va changer le code pour adopter quelque chose de plus réaliste avec un formulaire Pout affichage de erreurs de validation j'utilise le composant de Breeze x-input-errors. Pour notre composant on a maintenant ce code 'required|integer|between:0,20', ‘index’ => 'required|exists:users, id’, public function submit() { $this->validate(); $user = User: :find($this->index) ;$user->note = $this->note; $user->save()5 + public function render() { return view('livewire. show-posts')->layout(' layouts. guest) ; } Le nom du composant n'est pas trop appropié mais bon, on le garde. On a donc deux propriétés * note «index On prévoie une validation des deux propriétés protected $rules = [ ‘note’ => ‘required| integer |between:0, 20", ‘index’ => ‘required|exists:users,id', Lb Et pour le reste c'est pratiquement pareil. Maintenant on a un contrdle de la validité des entrées Index de l'utilisateur 10 The selected index is invalid Note 23 The note field must be between 0 and 20. Prony Bon je n'ai pas traduit en francais mais c'est une autre histoire qu'on a déja rencontrée plusieurs fois... Mais on peut personnaliser les messages selon l'erreurprotected $messages ‘note. integer’ C *C\‘est quand méme mieux un nombre pour une note !', Note vingt Crest quand méme mieux un nombre pour une note! Validation en temps réel Livewire va plus loin en permettant une validation en temps réel lors de la saisie de la valeur sans attendre la soumission. I suffit d'ajouter un hook : public function updated($note) { $this->validateonly($note) ; On choisi la propriété qu'on veut valider avec validateOnly (sinon on validerait toutes les valeurs) Mais pour que ca fonctionne il faut évidemment enlever le defer layout(' layouts. guest"); } + LA notre composant récupére bien le paramétre, va chercher dans la base lesinformations de Vutilisateur, et affecte la propriété $user qui sera disponible dans la vue Avec une url de la forme .../user/1 on obtient les renseignements sur l'utilisateur Nom = Durand Email = durand@chezluifr On va maintenant inclure le composant pour noter l'utilisateur. On code la classe NoteUser ‘required| integer |between:0,20', $this->user-snote = $this->note; $this->user->save(); public function render() { return view('[Link]-user');Et la vue note-user