Closed victorioustr closed 2 years ago
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?
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?
I've inserted a delete demo with confirmation in the demo:
@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>
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',
]);
}
@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:
First of all, did you see if your problem has happened to other people before?
Did you read the documentation ?
Is there an error in the console?
Describe the bug
To Reproduce
Laravel version (exactly)
Livewire version (exactly)
AlpineJS:
Theme:
Screenshots (This helps to understand better)
![Screenshot_20220131_165800](https://user-images.githubusercontent.com/7466590/151806657-15a5a5c6-46e2-4cf1-bf1f-f2c2cf2147c0.png)
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: