= 3c6e4bf4bd feat: add delete confirmation modal for ConnectionProviders
- Introduced a Livewire-powered confirmation modal for deleting connection providers.
- Updated `delete` method to support selected provider deletion and modal interaction.
- Added `connectedApps` relationship to `ConnectionProvider` model for mass soft-deletes.
- Refactored delete logic to handle associated connected apps during provider deletion.
- Updated UI to include modal trigger and actions for enhanced user safety.
2026-05-15 11:52:31 +00:00

107 lines
3.2 KiB
PHP

<?php
use App\Concerns\HandlesOperations;
use App\Data\Ui\TableHeader;
use App\Services\ConnectionProviderService;
use Livewire\Attributes\Computed;
use Livewire\Component;
use Livewire\WithPagination;
use Spatie\LaravelData\Attributes\DataCollectionOf;
use Spatie\LaravelData\DataCollection;
new class extends Component {
use WithPagination, HandlesOperations;
protected ConnectionProviderService $service;
#[DataCollectionOf(TableHeader::class)]
public DataCollection $headers;
public bool $cnfModal = false;
public string $selectedProvider = '';
public function boot(ConnectionProviderService $service): void
{
$this->service = $service;
}
public function mount(): void
{
$this->initTableHeaders();
}
private function initTableHeaders(): void
{
$this->headers = TableHeader::collect([
new TableHeader(key: 'name', label: 'Name',),
], DataCollection::class);
}
#[Computed]
public function getAllProviders()
{
return $this->service->getAll();
}
public function edit(string $providerSlug): void
{
$this->redirectRoute('apps.connectionProviders.edit', ['slug' => $providerSlug]);
}
public function delete(): void
{
$this->cnfModal = false;
$this->attempt(
action: function () {
$this->service->delete($this->selectedProvider);
}
);
}
public function showModal(string $providerSlug): void
{
$this->selectedProvider = $providerSlug;
$this->cnfModal = true;
}
public function cancelModal(): void
{
$this->selectedProvider = '';
$this->cnfModal = false;
}
};
?>
<div>
<x-shared.card title="Connection Providers" class="pb-2">
<x-slot:actions>
<x-mary-button :link="route('apps.connectionProviders.create')" wire:navigate icon="lucide.plus">Add
Provider
</x-mary-button>
</x-slot:actions>
<x-mary-table :headers="$headers->toArray()" :rows="$this->getAllProviders->items()" with-pagination>
@scope('actions', $row)
<div class="flex">
<x-mary-button icon="lucide.edit" wire:click="edit('{{$row->slug}}')" spinner="edit('{{$row->slug}}')"
class="mr-2 btn-sm text-gray-500"/>
<x-mary-button icon="lucide.trash" wire:click="showModal('{{$row->slug}}')"
spinner="showModal('{{$row->slug}}')"
variant="danger"
class="btn-sm btn-error btn-soft"/>
</div>
@endscope
</x-mary-table>
</x-shared.card>
<x-mary-modal wire:model="cnfModal" title="Delete Confirmation" persistent separator>
<x-mary-alert title="This will delete all the connected apps of this provider."
icon="o-exclamation-triangle"
class="alert-warning"
/>
<x-slot:actions>
<x-mary-button label="Cancel" wire:click="cancelModal"/>
<x-mary-button label="Proceed" wire:click="delete" spinner="delete" class="btn-error"/>
</x-slot:actions>
</x-mary-modal>
</div>