How to use modal included in Laravel Jetstream installation

Laravel Jetstream includes two modals in the components after installation, namely confirmation-modal and dialog-modal. Both components, use the modal component (modal.blade.php) located in the components folder. I am going to discuss the use case of each and how you would use it in your laravel application. 

1. Confirmation-modal 

Best fitted for confirmation forms. For example, you can use this modal in scenarios to confirm if a user should proceed with deleting a task.

2. Dialog-modal

A generic modal. One use case is for create and update operations. For example if you want a user to be able to create a task, you can use this modal by embedding a form on top of it.

I will show you how to set-up the confirmation-modal and you can apply the same principle for the dialog-modal to work.

Assume we want to modal to confirm if the admin would like to proceed in deleting a particular user.  We could use the following modal from the documentation. 

<x-confirmation-modal wire:model="confirmingUserDeletion">
    <x-slot name="title">
        Delete Account
    </x-slot>

    <x-slot name="content">
        Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
            Nevermind
        </x-secondary-button>

        <x-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
            Delete Account
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

Jetstream had a good documentation how to use this but I've seen some developers (in Laracast and Stack Overflow) struggling how to use it.

First create a livewire component. 

php artisan make:livewire users.delete

It will create  a class (App\Livewire\Users\Delete.php) and a view component (resources\livewire\users\delete.php)

In delete.php, include the confirmation model plus a button to trigger the modal to pop-up

<div>

    <!-- The button that triggers the modal to open -->
    <x-button wire:click="$toggle('confirmingUserDeletion')">
        Delete a User
    </x-button>

    <x-confirmation-modal wire:model="confirmingUserDeletion">
        <x-slot name="title">
            Delete Account
        </x-slot>
    
        <x-slot name="content">
            Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
        </x-slot>
    
        <x-slot name="footer">
            <x-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
                Nevermind
            </x-secondary-button>
    
            <x-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
                Delete Account
            </x-danger-button>
        </x-slot>
    </x-confirmation-modal> 
</div>

Don't forget to include a button or any html element that when clicked will pop-up the modal. In the code above, its the

  <!-- The button that triggers the modal to open -->
    <x-button wire:click="$toggle('confirmingUserDeletion')">
        Delete a User
    </x-button>

Now in the class component.

Delete.php

<?php

namespace App\Livewire\Users;

use Livewire\Component;

class Delete extends Component
{
    public $confirmingUserDeletion = false;

    public function deleteUser() {
        //write logic to delete user
    }

    public function render()
    {
        return view('livewire.users.delete');
    }
}

Initially, the modal won't pop-up because the confirmingUserDeletion value is initially false as shown in the component. When the user clicks the button, the value changed to true courtesy of the $toggle function

   <x-button wire:click="$toggle('confirmingUserDeletion')"

If the user clicks on the never mind button,  the modal will again close because the confirmingUserDeletion is changed back to false.

This is how easy to use the jetstream modal ui.

Don't forget to call the livewire component to actually show the trigger button

  <livewire:users.delete />