= c0086ddb6a feature: implement ConnectedApp management with creation and editing support
- Added `ConnectedAppData` DTO for structured data representation.
- Implemented Livewire components for ConnectedApp list (`index`) and edit (`edit`).
- Integrated `ConnectedAppService` with CRUD operations.
- Updated routing to include ConnectedApp management paths.
- Enhanced UI with reusable components and dynamic dropdowns for protocols, providers, and statuses.
2026-05-14 14:03:53 +00:00

77 lines
2.3 KiB
PHP

<?php
use App\Data\Ui\ConnectedApps\ConnectedAppData;
use App\Data\Ui\TableHeader;
use App\Services\ConnectedAppService;
use Livewire\Attributes\Computed;
use Livewire\Component;
use Livewire\WithPagination;
use Spatie\LaravelData\Attributes\DataCollectionOf;
use Spatie\LaravelData\DataCollection;
use Spatie\LaravelData\PaginatedDataCollection;
new class extends Component {
use WithPagination;
#[DataCollectionOf(TableHeader::class)]
public DataCollection $headers;
public function mount(): void
{
$this->initTableHeaders();
}
private function initTableHeaders(): void
{
$this->headers = TableHeader::collect([
new TableHeader(key: 'name', label: 'Name',),
new TableHeader(key: 'provider', label: 'Provider'),
new TableHeader(key: 'protocol', label: 'Protocol'),
new TableHeader(key: 'status', label: 'Status'),
], DataCollection::class);
}
/**
* @return PaginatedDataCollection<int, ConnectedAppData>
*/
#[Computed]
public function getConnectedApps(): PaginatedDataCollection
{
$service = app(ConnectedAppService::class);
return $service->getAll();
}
public function edit(int $appId): void
{
$this->redirectRoute('connected-apps.edit', ['id' => $appId], navigate: true);
}
};
?>
<div>
<x-shared.card title="Connected Apps" class="pb-2">
<x-slot:actions>
<x-mary-button icon="lucide.plus">Add App</x-mary-button>
</x-slot:actions>
<x-mary-table
:headers="$headers->toArray()"
:rows="$this->getConnectedApps->items()"
with-pagination
>
@scope('cell_protocol', $row)
{{$row->protocol->name}}
@endscope
@scope('cell_status', $row)
<x-shared.connection-status :status="$row->status"/>
@endscope
@scope('actions', $row)
<div class="flex">
<x-mary-button icon="lucide.edit" wire:click="edit({{$row->id}})" class="mr-2 btn-sm text-gray-500"/>
<x-mary-button icon="lucide.trash" variant="danger" class="btn-sm btn-error btn-soft"/>
</div>
@endscope
</x-mary-table>
</x-shared.card>
</div>