singleloginsystem/resources/views/pages/connected-apps/⚡create.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, ConnectionProvider, ConnectionStatus};
use App\Services\{ConnectedAppService, ConnectionProtocolService, ConnectionProviderService, ConnectionStatusService};
use Illuminate\Database\Eloquent\Collection;
use Livewire\Attributes\{Computed, Title};
use Livewire\Component;
use Mary\Traits\Toast;
use Spatie\LaravelData\DataCollection;

new
#[Title('Create a service')]
class extends Component {
    use HandlesOperations;

    public StoreConnectedAppFrom $form;
    protected ConnectedAppService $appService;

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

    #[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()->map(function (ConnectionStatusData $status) {
            if ($status->name === ConnectionStatusEnum::Disconnected) {
                $this->form->statusId = $status->id;
            }
            return $status;
        });
    }

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

    public function save(bool $goBack = true): void
    {
        $this->form->validate();
        $data = 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->attempt(
            action: function () use ($data, $goBack) {
                $this->appService->create($data);
                $this->form->reset();
                if ($goBack) {
                    $this->goBack();
                }
            }
        );
    }

    public function create()
    {

    }

    public function goBack(): void
    {
        $this->redirectRoute('apps.index', navigate: true);
    }
};
?>

<div>
    <x-shared.card :title="__('Create a service')" class="">
        <x-mary-form wire:submit="save" class="p-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 class="md:col-span-2 flex gap-x-4 font-medium justify-end">
                <x-mary-button wire:click.prevent="goBack" spinner="goBack">Cancel</x-mary-button>
                <x-mary-button wire:click.prevent="save(false)">Save & Add Another</x-mary-button>
                <x-mary-button type="submit"
                               class="btn-primary">
                    Save
                </x-mary-button>
            </div>
        </x-mary-form>
    </x-shared.card>
</div>