Laravel Livewire CRUD Exemple02 2/2

• Créez un fichier resources/js/utilisateurs.js
• Nous ajoutons le code nécessaire à ce fichier au fur et à mesure qu’on avance dans notre application.

• Continuons avec la création de nouveaux utilisateurs.
• Ouvrez le fichier crée à l’étape précédente resources/views/livewire/utilisateurs.blade.php et ajoutez un bouton pour créer un nouvel utilisateur.



• Encore une fois, nous utilisons wire:click pour déclencher un événement appelé triggerCreate:

• Ensuite, dans votre fichier resources/js/utilisateus.js, écoutez cet événement et ouvrez le modal:

Livewire.on("triggerCreate", () => {
    $("#user-modal").modal("show");
});

• Remarque: le code ci-dessus n’est pas vraiment la manière «Livewire Purist» de faire les choses. Normalement, si vous utilisez Livewire, vous voulez que toute l’interactivité soit gérée par Livewire et cela inclut les modaux. Dans ce cas, nous utilisons jQuery pour ouvrir le modal. C’est pardonnable car ce n’est qu’une ligne de code. Mais si vous souhaitez utiliser Livewire, la bonne façon de faire est d’utiliser Livewire pour tout. Vous ne pouvez pas le mélanger et le faire correspondre avec jQuery. Cela aidera à rendre les choses plus faciles lorsque vous aurez besoin d’ajouter des tests frontaux plus tard.

• Pour créer le composant livewire exécutez la commande suivante : php artisan make:livewire UserForm
• Tout comme la table en direct, cela crée la classe de composant ainsi que le fichier de vue:
• app/Http/Livewire/UserForm.php
• resources/views/livewire/user-form.blade.php
• Tout d’abord, ouvrez le fichier de vue et ajoutez ce qui suit. Ce code vous semblera familier car la plupart ne sont qu’un modèle Blade standard pour le rendu d’un formulaire. La seule différence est que nous l’avons ajouté de quelques attributs Livewire, que vous connaissez déjà tous:



• À ce stade, vous savez déjà qu’il wire:submit.prevent= »save »sera déclenché lorsque vous cliquerez sur le bouton Enregistrer. .preventempêche l’action par défaut, qui est la soumission réelle du formulaire. Ensuite, nous utilisons wire:model pour lier chaque champ à une propriété spécifique dans la classe de composant.
• Une autre chose avec ce code: c’est le code de modèle standard de Blade pour afficher les erreurs de formulaire. Vous vous demandez peut-être ce que cela fait ici lorsque nous sommes dans un composant Livewire. Eh bien, la réponse est que Livewire peut également utiliser ce code pour nous montrer des erreurs de formulaire. Donc, si un utilisateur n’a pas fourni de valeur à un champ spécifique lors de la soumission du formulaire, le serveur va grincer et cela déclenchera ces erreurs:

@error('name') <span class="text-danger">{{ $message }}</span> @enderror

• Ensuite, ouvrez le fichier resources/views/index.blade.php et ajoutez le balisage pour le modal:

• Maintenant que nous avons le code pour le front-end, jetons un coup d’œil au back-end. Ouvrez le app/Http/Livewire/UserForm.php et ajoutez ce qui suit :
• Importer la classe model

• use App\Models\Utilisateur;

• Puis après la déclaration de votre classe class UserForm extends Component{

// Ajouter ça
    public $cin;
    public $prenomNom;
    public $dteNaissance;
    public $genre;
    public $pays;
    public $email;

• puis
• Nous avons utilisé à la place de emit() emitTo(). Cela permet à différents composants de communiquer entre eux via des événements. Il accepte le nom du composant comme premier argument et le nom de l’événement comme second:

$this->dispatchBrowserEvent('user-saved', ['action' => 'créé', 'user_name' => $this->prenomNom]);
    }
$this->emitTo('utilisateurs', 'triggerRefresh');

• Pourquoi utilisons-nous deux événements distincts (un événement de navigateur et un événement Livewire) alors que nous ne pouvons en utiliser qu’un seul? Eh bien, c’est vrai que nous ne pouvons utiliser qu’un seul événement. Le problème est que nous devons également actualiser la table de données une fois l’utilisateur créé. Je ne connais actuellement aucun moyen de déclencher le rechargement d’un composant spécifique du côté client, c’est pourquoi j’ai utilisé deux événements distincts – un pour masquer le modal et afficher une alerte, et un autre pour actualiser la table de données.
• Une dernière modification dans ce fichier consiste à ajouter la méthode suivante:

public function resetForm()
    {
        $this->cin = null;
        $this->prenomNom = null;
        $this->dteNaissance = null;
        $this->genre = null;
        $this->pays = null;
        $this->email = null;
    }

window.addEventListener("user-saved", (event) => {
    $("#user-modal").modal("hide");
    alert(`User ${event.detail.user_name} was ${event.detail.action}!`);
});

• Ensuite, dans votre classe de composants Utilisateurs, ajoutez l’écouteur pour triggerRefresh.

// app/Http/Livewire/LiveTable.php
    protected $listeners = ['delete', 'triggerRefresh' => '$refresh'];

• Bravo bravo encore, à ce stade, les utilisateurs peuvent désormais être créés lorsque vous l’essayez sur votre navigateur.
• Le résultat souhaité est représenté par l’image suivant:



• Vous remarquez que la validation front-end est fonctionnel

• A la fin du fichier ajoutez le lignes de code suivantes

@livewireScripts
<script src="https://127.0.0.1:8000/js/utilisateurs.js"></script>
<script src="https://127.0.0.1:8000/js/app.js"></script>

• Enfin, n’oubliez pas d’ajouter le fichier utilisateurs.js à webpack.mix.js:

// webpack.mix.js
mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .js("resources/js/utilisateurs.js", "public/js") // Ajouter ça
    .sourceMaps();

<td align="center">
                            <button type="button" class="btn btn-sm text-success" wire:click="$emitTo('user-form', 'triggerEdit',  {{ $utilisateur }})">
                                <i class="fas fa-edit" ></i>
                            </button>
                        </td>

• En haut de votre classe ajouter la déclaration suivante:

 protected $listeners = ['triggerEdit'];

• Ajouter la méthode avant la méthode render()

• Écoutez l’événement dataFetched du côté client. Puisque nous avons déjà rempli les champs individuels avec des valeurs à ce stade, nous pouvons simplement ouvrir le modal:

// resources/js/utilisateurs.js
Livewire.on("dataFetched", (utilisateur) => {
  $("#user-modal").modal("show");
});

• Enfin, mettez à jour la save() méthode dans la classe de composant UserForm pour gérer également les mises à jour. Pour ce faire, vérifiez la valeur du user_idchamp. S’il a une valeur, cela signifie qu’un utilisateur est en cours de mise à jour. Sinon, nous le créons:



• À ce stade,Je vous félicite pour les efforts que vous déployez, les détails de l’utilisateur peuvent désormais être modifiés lorsque vous l’essayez sur votre navigateur.
• Voila le résultat de votre travail

• Ouvrez le resources/views/livewire/utilisateurs.blade.phpfichier et mettez à jour le code du bouton de suppression:

 <button type="button" class="btn btn-sm text-danger" 
           wire:click="$emit('triggerDelete', {{ $utilisateur->cin }}, '{{ $utilisateur->prenom }}')">
           <i class="fas fa-user-minus"></i>
 </button>

• Nous pouvons ensuite écouter cet événement soit sur le serveur, soit côté client. Puisque tout ce que nous voulons, c’est montrer une confirmation lorsque cet événement est déclenché, nous l’écoutons côté client.

Livewire.on("triggerDelete", (cin, prenomNom) => {
    const proceed = confirm('Etes-vous sûr que vous voulez supprimer ${prenomNom}');

    if (proceed) {
        Livewire.emit("delete", cin);
    }
});

• Comme vous pouvez le voir, nous avons accès au cin et prenomNom de l’utilisateur via les arguments passés à l’auditeur:
• Une fois que l’utilisateur accepte, nous émettons l’événement qui supprimera effectivement l’utilisateur.
• Pour écouter les événements dans le back-end, créez un tableau $listeners qui contient le nom des écouteurs et les méthodes de classe auxquelles ils sont mappés.
• Dans ce cas, le nom de l’événement et la méthode sont les mêmes donc nous ajoutons simplement delete. La méthode delete() supprimera alors l’utilisateur avec le correspondant cin.

• Modifier la déclaration réalisée précédemment comme suit:protected $listeners = ['delete', 'triggerRefresh' => '$refresh'];
• Avant la méthode render() ajoutez ce qui suit:



• La dernière ligne représente une sorte de notification lorsque l’utilisateur est supprimé, un événement est envoyé de navigateur.
• Ensuite, du côté client, écoutez cet événement via l’ API standard de l’ écouteur d’événements du navigateur . Ici, nous affichons simplement une alerte contenant le nom de l’utilisateur supprimé.



• Pour le faire ajoutez les lignes suivantes au fichier utilisateurs.js

window.addEventListener("user-deleted", (event) => {
    alert('${event.detail.user_name} a été supprimée!');
});