Filament•12h ago

Trying to modify filament form fields from custom Livewire Field component.

I want to be able to update a couple of fields in a filament 'step' based form by using a google-maps-api clickable map. I'm trying to learn livewire a bit more while doing it and am loading the map code into a livewire component, but I can't seem to figure out how you are supposed to take data coming back from the map 'click' listener event and then have filament update the lat and lng fields in the form. Since I strongly suspect all my attempts have been blind shots in the dark or are offtrack. So does anyone have any suggestions on how to do this?

3 Replies

treii28OP•12h ago

First I create a rather bare-bones extension of 'Field' that points to a blade template:

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }" x-init="await fetchGoogle('initializeMap')">
        @livewire('click-map')
    </div>
</x-dynamic-component>

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }" x-init="await fetchGoogle('initializeMap')">
        @livewire('click-map')
    </div>
</x-dynamic-component>

fetchGoogle is just a promise based series of steps that first gets my API key, then downloads the google.maps api code using the key, then launches my initializeMap function. The map code works fine, but I don't know how to handle the 'click' listener or how to grab any of the resulting details back in filament to update the form:

// Configure the click listener.
window.clickmap.addListener("click", (mapsMouseEvent) => {
    this.state = {
        lat: mapsMouseEvent.latLng.lat(),
        lng: mapsMouseEvent.latLng.lng()
    };
});

// Configure the click listener.
window.clickmap.addListener("click", (mapsMouseEvent) => {
    this.state = {
        lat: mapsMouseEvent.latLng.lat(),
        lng: mapsMouseEvent.latLng.lng()
    };
});

The Filament Step form schema is rather basic:

protected function getSteps(): array
{
    return [
        FormComponents\Wizard\Step::make('Blind Location')
            ->description('Where is the blind located?')
            ->schema([
                AppFormComponents\GmapLocation::make('location')
                    ->live()
                    ->afterStateUpdated(function (Set $set, $state) {
                        set('lat', $state['location']['lat']);
                        set('lng', $state['location']['lng']);
                    })
                    ->label('Blind Location'),
                FormComponents\TextInput::make('lat')
                    ->reactive()
                    ->required(),
                FormComponents\TextInput::make('lng')
                    ->reactive()
                    ->required(),
            ])
            ->icon('heroicon-o-map-pin'),

protected function getSteps(): array
{
    return [
        FormComponents\Wizard\Step::make('Blind Location')
            ->description('Where is the blind located?')
            ->schema([
                AppFormComponents\GmapLocation::make('location')
                    ->live()
                    ->afterStateUpdated(function (Set $set, $state) {
                        set('lat', $state['location']['lat']);
                        set('lng', $state['location']['lng']);
                    })
                    ->label('Blind Location'),
                FormComponents\TextInput::make('lat')
                    ->reactive()
                    ->required(),
                FormComponents\TextInput::make('lng')
                    ->reactive()
                    ->required(),
            ])
            ->icon('heroicon-o-map-pin'),

the 'afterStateUpdated code never seems to run, so I'm not sure how to update the lat and lng fields using the map click. Any help is appreciated.

awcodes•11h ago

Maybe one of these will work for you or at least give you some insight if you source dive. https://filamentphp.com/plugins?search=Maps

Filament

Plugins - Filament

Community made packages for Filament projects, which give you access to awesome new features.

bardolf_6969•10h ago

one thing.. looking at your step you are using ->reactive(), in filament v3 use ->live() instead. reactive was v1 and v2 I believe

Gaming

Programming

Trying to modify filament form fields from custom Livewire Field component.