Emit confirmable livewire alert in row actions after confirm don't emit confirm event

[victorioustr]

First of all, did you see if your problem has happened to other people before?

• [X] Yes - I did not find it
• [ ] No

Did you read the documentation ?

• [X] Yes - I did not find it
• [ ] No

Is there an error in the console?

• [X] Yes - I'll put a screenshot
• [ ] No

Describe the bug

• I add an emit action to the actions section of the table. With the event I defined here, I open a confirmable alert modal with the Livewire Alert package. If Yes is called from this modal, another event should be triggered. But I am getting the console message that I have sent the screenshot. When I look at the Livewire debug tool, no events are triggered.

To Reproduce

• Got to ..

Laravel version (exactly)

• 8.81.0

Livewire version (exactly)

• 2.10.1

AlpineJS:

• 3.8.1

Theme:

• [ ] Tailwind 2.x
• [X] Tailwind 3.x
  • [X] With tailwind/forms
• [ ] Bootstrap - Version:

Screenshots (This helps to understand better)

Do you have any idea how we can fix it? No any idea...

Put part of your code, an html screenshot of the problem element:

public function actions(): array
{
    return [
        Button::add('view')
            ->class('fad fa-eye cursor-pointer text-green-500 px-1 py-1.5 m-1 text-sm')
            ->openModal('modules.system.workspace.workspace-view', ['id' => 'id'])
            ->can(auth()->user()->can('system.workspace.view')),

        Button::add('edit')
            ->class('fad fa-edit cursor-pointer text-indigo-500 px-1 py-1.5 m-1 text-sm')
            ->openModal('modules.system.workspace.workspace-edit', ['id' => 'id'])
            ->can(auth()->user()->can('system.workspace.edit')),

        Button::add('destroy')
            ->class('fad fa-trash cursor-pointer text-red-500 px-1 py-1.5 m-1 text-sm')
            ->emit('deleteWorkspace', ['id' => 'id', 'workspace' => 'name'])
            ->can(auth()->user()->can('system.workspace.delete')),
    ];
}

protected function getListeners(): array
{
  return array_merge(
      parent::getListeners(),
      [
          'deleteWorkspace',
          'confirmedDelete'
      ]);
}

public function deleteWorkspace($workspace)
{
    $this->confirm('Dikkat?', [
        "text" => "{$workspace['workspace']} çalışma alanını silmek istediğinize emin misiniz ?",
        'onConfirmed' => 'confirmedDelete',
        'inputAttributes' => ["id" => $workspace['id']],
    ]);
}

public function confirmedDelete()
{
    debug('its ok');
}

[luanfreitasdev]

Hi @victorioustr .

It looks like your implementation is correct, I can't know where this error comes from in the $wire console. Would it be possible to debug all the way to see how far it gets?

[victorioustr]

I'm afraid I'm not very good at Javascript debug. My goal is to get an approval to have the record in the table deleted. Is there any other way to do this? Can you debug me in a demo setup?

[luanfreitasdev]

I've inserted a delete demo with confirmation in the demo:

https://github.com/Power-Components/powergrid-demo

[victorioustr]

@luanfreitasdev thank you. I tried to make the example you gave generic in my own way. I'm leaving it here in case it's useful to others. Although not as easy as the Laravel Alert package, it worked that way as well.

*Table.php Action

Button::add('destroy')
    ->class('fad fa-trash cursor-pointer text-red-500 px-1 py-1.5 m-1 text-sm')
    ->openModal('globals.delete-confirm', [
        'modelId' => 'id',
        'model' => Customer::class,
        'modelName' => 'short_name',
        'confirmationTitle' => 'Customer Delete Confirm',
        'confirmationDescription' => 'Are you sure you want to delete {modelName} customer?',
    ])
    ->can(auth()->user()->can('system.customer.delete')),

DeleteConfirm.php (ModalComponent)

namespace App\Http\Livewire\Globals;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Gate;
use LivewireUI\Modal\ModalComponent;
use function view;

class DeleteConfirm extends ModalComponent
{
    public ?int $modelId = null;

    public ?string $model = null;

    public ?string $modelName = null;

    public string $confirmationTitle = '';

    public string $confirmationDescription = '';

    public Model $data;

    public static function modalMaxWidth(): string
    {
        return 'md';
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }

    public static function closeModalOnClickAway(): bool
    {
        return false;
    }

    public function mount()
    {
        $this->data = (new $this->model())->findOrFail($this->modelId);
        $this->confirmationDescription = str_replace('{modelName}', $this->modelName, $this->confirmationDescription);
    }

    public function cancel()
    {
        $this->closeModal();
    }

    public function confirm()
    {
        Gate::authorize('destroy', $this->data);

        $this->data->delete();

        $this->closeModalWithEvents([
            'pg:eventRefresh-default',
        ]);
    }

    public function render()
    {
        return view('livewire.globals.delete-confirm');
    }
}

delete-confirm.blade.php

<div class="p-3">
    <div class="font-semibold font-gray-700 text-lg">{{ $confirmationTitle }}</div>

    <div class="py-2">
        <div class="font-normal text-gray-600">{{ $confirmationDescription }}</div>
        <div class="space-x-2 flex justify-end mt-3">
            <button class="bg-gray-200 cursor-pointer text-black border border-gray-400 px-3 py-2 m-1 rounded text-sm"
                    wire:click="cancel">
                İptal
            </button>
            <button class="bg-red-500 cursor-pointer text-white px-3 py-2 m-1 rounded text-sm"
                    wire:click="confirm">
                Onayla
            </button>
        </div>
    </div>

</div>

Livewire Alert Version (SweetAlert)

<div aria-labelledby="swal2-title" aria-describedby="swal2-html-container"
     class="swal2-popup swal2-modal swal2-icon-warning swal2-show" tabindex="-1" role="dialog" aria-live="assertive"
     aria-modal="true" style="display: grid;">
    <div class="swal2-icon swal2-warning swal2-icon-show" style="display: flex;">
        <div class="swal2-icon-content">!</div>
    </div>
    <h2 class="swal2-title" id="swal2-title" style="display: block;">{{ $confirmationTitle }}</h2>
    <div class="swal2-html-container" id="swal2-html-container" style="display: block;">{{ $confirmationDescription }}
    </div>
    <div class="swal2-actions" style="display: flex;">
        <div class="swal2-loader"></div>
        <button type="button" class="swal2-confirm swal2-styled swal2-default-outline" aria-label=""
                style="display: inline-block; background-color: rgb(48, 133, 214);" wire:click="confirm">Yes
        </button>
        <button type="button" class="swal2-cancel swal2-styled swal2-default-outline" aria-label=""
                style="display: inline-block; background-color: rgb(221, 51, 51);" wire:click="cancel">No
        </button>
    </div>
</div>

[odin88]

I try to replicate latest delete dish in demo repo. When it tries to closeModal, it returns an error. I believe this is related to this issue. if not i can create another issue.

AdminProspect.php

 public function actions(): array
    {
       return [

           Button::add('destroy')
               ->caption('Delete')
               ->class('bg-red-500 cursor-pointer text-white px-3 py-2 m-1 rounded text-sm')
               ->openModal('delete-prospect', [
                   'prospectId' => 'id',
                   'confirmationTitle' => 'Delete prospect',
                   'confirmationDescription' => 'Are you sure you want to delete this prospect ?',
               ]),
        ];
    }

DeleteProspect.php

public function cancel()
    {
        $this->closeModal();
    }

public function confirm()
    {
        if ($this->prospectId) {
            Prospect::query()->find($this->prospectId)->delete();
        }

        if ($this->prospectIds) {
            Prospect::query()->whereIn('id', $this->prospectIds)->delete();
        }

        #$this->closeModal();

        $this->closeModalWithEvents([
            'pg:eventRefresh-default',
        ]);
    }

[luanfreitasdev]

@odin88 when you invoke "closeModal" you are invoking a method from the wire elements modal package, besides I can't understand this error in the console, it doesn't seem to be from the powergrid. Can you give more details? for example:

• How is the button being rendered in the html?
• What is inside this error in the console?