DEV Community

Nasrul Hazim Bin Mohamad
Nasrul Hazim Bin Mohamad

Posted on

Livewire Confirm

Let's create a confirmation dialog using Livewire.

The confirm dialog will display and do what ever it needs after the user click on confirm button.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Confirm extends Component
{
    public $displayingModal = false;

    protected $listeners = [
        'displayConfirmation' => 'display',
    ];

    public $state = [
        'title' => '',
        'message' => '',
        'return' => [
            'component' => '',
            'args' => [],
        ],
    ];

    public function display($title, $message, $component, ...$args)
    {
        $this->state['title'] = $title;
        $this->state['message'] = $message;
        $this->state['return'] = [
            'component' => $component,
            'args' => $args,
        ];

        $this->displayingModal = true;
    }

    public function confirm()
    {
        $this->emitTo(
            $this->state['return']['component'],
            ...$this->state['return']['args']
        );

        $this->displayingModal = false;
    }

    public function cancel()
    {
        $this->state = [
            'title' => '',
            'message' => '',
            'return' => [
                'component' => '',
                'args' => [],
            ],
        ];
        $this->displayingModal = false;
    }

    public function render()
    {
        return view('livewire.confirm');
    }
}
Enter fullscreen mode Exit fullscreen mode

The blade file:

<div>
    <x-jet-dialog-modal wire:model="displayingModal">
        <x-slot name="title">
            {{ $state['title'] }}
        </x-slot>

        <x-slot name="content">
            <p>
                {{ $state['message'] }}
            </p>
        </x-slot>

        <x-slot name="footer">
            <x-jet-secondary-button wire:click="cancel" wire:loading.attr="disabled">
                {{ __('No') }}
            </x-jet-secondary-button>

            <x-jet-button class="ml-3" wire:click="confirm" wire:loading.attr="disabled">
                {{ __('Yes') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>
Enter fullscreen mode Exit fullscreen mode

And the usage will be like:

$this->emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', 'livewire-component-name', 'destroyRecord', '11234');
Enter fullscreen mode Exit fullscreen mode

OR

<div class="cursor-pointer"
    wire:click="$emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', 'livewire-component-name', 'destroyRecord', '11234')">
    <x-icon name="o-trash" class="text-indigo hover:text-red-500 mr-3 flex-shrink-0 h-6 w-6">
    </x-icon>
</div>
Enter fullscreen mode Exit fullscreen mode

The emitTo basically trigger to given Livewire component's name, call the method, and pass whatever arguments required for the method.

Do take note the livewire-component-name is responsible to handle whatever methods defined for further actions. destroyRecord is a method to be call i livewire-component-name, and '1234' argument expected to received in destroyRecord in livewire-component-name.

Top comments (2)

Collapse
 
wanadri profile image
Wan Adri

public function cancel() {
$this->reset('state');
....
}

is it possible?

Collapse
 
nasrulhazim profile image
Nasrul Hazim Bin Mohamad

yeah it is possible.