74 lines
2.3 KiB
PHP
74 lines
2.3 KiB
PHP
|
<?php
|
||
|
|
|
||
|
|
use Livewire\Attributes\On;
|
||
|
|
use Livewire\Component;
|
||
|
|
use Livewire\WithPagination;
|
||
|
|
|
||
|
|
new class extends Component {
|
||
|
|
public bool $show = false;
|
||
|
|
public string $title = 'Confirm Delete';
|
||
|
|
public string $message = 'Are you sure you want to delete this item?';
|
||
|
|
public string $cancelText = 'Cancel';
|
||
|
|
public string $confirmText = 'Delete';
|
||
|
|
public $itemId;
|
||
|
|
public $itemType;
|
||
|
|
|
||
|
|
#[On('show-delete-modal')]
|
||
|
|
public function showModal($data = []): void
|
||
|
|
{
|
||
|
|
$description = $data['type'] ?? 'item';
|
||
|
|
$this->show = true;
|
||
|
|
$this->itemId = $data['id'] ?? null;
|
||
|
|
$this->itemType = $data['type'] ?? null;
|
||
|
|
$this->title = $data['title'] ?? 'Delete ' . ucfirst($description);
|
||
|
|
$this->message = $data['message'] ?? 'Are you sure you want to delete this ' . $description . '?';
|
||
|
|
$this->confirmText = $data['confirmText'] ?? 'Delete ' . ucfirst($description);
|
||
|
|
$this->cancelText = $data['cancelText'] ?? 'Cancel';
|
||
|
|
}
|
||
|
|
|
||
|
|
public function hideModal()
|
||
|
|
{
|
||
|
|
$this->show = false;
|
||
|
|
$this->reset(['itemId', 'itemType', 'title', 'message', 'confirmText', 'cancelText']);
|
||
|
|
}
|
||
|
|
|
||
|
|
public function confirmDelete()
|
||
|
|
{
|
||
|
|
if ($this->itemId && $this->itemType) {
|
||
|
|
$this->dispatch('confirmed-delete', [
|
||
|
|
'id' => $this->itemId,
|
||
|
|
'type' => $this->itemType,
|
||
|
|
]);
|
||
|
|
|
||
|
|
$this->hideModal();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
?>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<flux:modal wire:model.self="show" name="delete-confirm-modal">
|
||
|
|
<flux:modal.trigger></flux:modal.trigger>
|
||
|
|
|
||
|
|
<div class="space-y-6">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="flex-shrink-0">
|
||
|
|
<flux:icon.exclamation-triangle class="w-6 h-6 text-red-600"/>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<flux:heading size="lg">{{ $title }}</flux:heading>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-sm text-gray-600">
|
||
|
|
{!! $message !!}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex justify-end space-x-3">
|
||
|
|
<flux:button variant="ghost" wire:click="hideModal">{{ $cancelText }}</flux:button>
|
||
|
|
<flux:button variant="danger" wire:click="confirmDelete">{{ $confirmText }}</flux:button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</flux:modal>
|
||
|
|
</div>
|