singleloginsystem/resources/views/pages/connected-apps/⚡edit.blade.php

<?php

use App\Concerns\HandlesOperations;
use App\Data\ConnectedApp\ConnectAppRequest;
use App\Data\ConnectedApp\ConnectionStatusData;
use App\Enums\ConnectionStatusEnum;
use App\Livewire\Forms\StoreConnectedAppFrom;
use App\Models\ConnectionProtocol;
use App\Models\ConnectionProvider;
use App\Models\ConnectionStatus;
use App\Services\ConnectedAppService;
use App\Services\ConnectionProtocolService;
use App\Services\ConnectionProviderService;
use App\Services\ConnectionStatusService;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Lazy;
use Livewire\Component;
use Livewire\Attributes\Title;
use Mary\Traits\Toast;
use Spatie\LaravelData\DataCollection;

new
#[Lazy]
#[Title('Edit a connected app')]
class extends Component {
    use HandlesOperations;

    public StoreConnectedAppFrom $form;
    protected ConnectedAppService $service;
    public int $recordId = 0;

    public function boot(ConnectedAppService $service): void
    {
        $this->service = $service;
    }

    public function mount(int $id): void
    {
        $this->attempt(
            action: function () use ($id) {
                $record = $this->service->getConnectedApp($id);
                $this->form->set($record);
                $this->recordId = $id;
            },
            onError: function () {
                $this->redirectRoute('apps.index', navigate: true);
            },
            showSuccess: false
        );
    }

    #[Computed]
    public function providers()
    {
        return ConnectionProvider::query()->get();
    }


    #[Computed]
    public function protocols(): Collection
    {
        $protocolService = app(ConnectionProtocolService::class);

        return $protocolService->getAll()->map(function (ConnectionProtocol $protocol) {
            $protocol->name = strtoupper($protocol->name);
            return $protocol;
        });
    }

    /**
     * @returns DataCollection<int, ConnectionStatus>
     */
    #[Computed]
    public function connectionStatuses(): DataCollection
    {
        $statusService = app(ConnectionStatusService::class);

        return $statusService->getAll();
    }

    public function searchProvider(string $name): void
    {
        $providerService = app(ConnectionProviderService::class);
        $this->providers = $providerService->search($name);
    }

    public function save(): void
    {
        $this->attempt(
            action: function () {
                $this->form->validate();
                $serviceData = new ConnectAppRequest(
                    name: $this->form->name,
                    connectionProviderId: $this->form->providerId,
                    connectionProtocolId: $this->form->protocolId,
                    slug: str($this->form->name)->slug()->toString(),
                    connectionStatusId: $this->form->statusId,
                );
                $this->service->update($this->recordId, $serviceData);
                $this->redirectRoute('apps.index', navigate: true);
            },
        );
    }
};
?>

<div>
    <x-shared.card :title="__('Edit an connected app')">
        <x-mary-form wire:submit="save" class="pb-2">
            <div class="px-4 grid grid-cols-1 gap-4 md:grid-cols-2">

                <x-mary-input wire:model.live.blur="form.name" required :label="__('Name')"/>
                <x-mary-choices
                    required
                    wire:model="form.protocolId"
                    :label="__('Protocol')"
                    :single="true"
                    :options="$this->protocols"
                    placeholder="Select"
                />
                <x-mary-choices required
                                wire:model="form.providerId"
                                :label="__('Provider')"
                                placeholder="Search ..."
                                :single="true"
                                :options="$this->providers"
                                searchable
                                search-function="searchProvider"
                                debounce="300"
                />
                <x-mary-choices
                    required
                    wire:model="form.statusId"
                    :label="__('Status')"
                    :single="true"
                    :options="$this->connectionStatuses->toArray()"
                    placeholder="Select"
                />
            </div>
            <x-slot:actions class="pr-2">
                <x-mary-button :link="route('apps.index')" wire:navigate>
                    {{ __('Cancel') }}
                </x-mary-button>
                <x-mary-button type="submit" spinner="save" class="btn-primary">
                    {{ __('Save') }}
                </x-mary-button>
            </x-slot:actions>
        </x-mary-form>
    </x-shared.card>
</div>