Filament•2mo ago

Custom form component

Hello there, For a field called main_subject_id, I created a custom form component and added a Livewire component. The reason is because the user should be able to collapse a tree (built on the nested-set package, see screenshot) and choose a certain value . I have the frontend working but I don't know how to write the chosen value to the DB when submitting. If I understand correctly, I have to bind the new value to the Alpine js variable? I have this now in my form component file:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('mainSubjectId') }" >
        <livewire:main-subject-tree-dropdown />
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('mainSubjectId') }" >
        <livewire:main-subject-tree-dropdown />
    </div>
</x-dynamic-component>

1 Reply

ChristopheOP•2mo ago

My Livewire component:

<div 
    x-data="{ 
        open: false,
        isFocused: false,
        currentSubject: null,
    }"
>
    <div
        @click="open = !open"
        @focusin="isFocused = true"
        @focusout="isFocused = false"
    >
        <div class="flex-1 min-w-0">
           <span x-text="currentSubject ? currentSubject : 'Selecteer een onderwerp'"></span>
        </div>
    </div>
    <div
        x-show="open"
        x-cloak
        x-on:click.away="open = false"
        class="absolute z-10"
    >
        @foreach($subjects as $subject)
            <div class="flex flex-col px-4 py-2 rounded-lg"
                x-data="{ expanded: false }" >
                <div class="flex justify-between space-x-8" >
                    <span 
                        @click="
                            state = '{{ $subject['id'] }}';
                            currentSubject = '{{ $subject['title'] }}';
                            open = false;
                    >
                        {{ $subject['title'] }}
                    </span>
                    @if($subject['hasChildren'])
                        <span 
                            :class="{ 'transform rotate-180': expanded }"
                            @click="expanded = !expanded"
                            wire:click='toggleItem({{ $subject['id'] }})'    
                        >
                            +
                        </span>
                    @endif
                </div>
                <div 
                    x-show="expanded" 
                    x-transition
                    class="p-2"
                >
                        @foreach($children[$subject['id']] ?? [] as $child)
                            <x-subject-node :subject="$child" :expandedItems="$expandedItems" :children="$children" :key="$child['id']" />
                        @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>

<div 
    x-data="{ 
        open: false,
        isFocused: false,
        currentSubject: null,
    }"
>
    <div
        @click="open = !open"
        @focusin="isFocused = true"
        @focusout="isFocused = false"
    >
        <div class="flex-1 min-w-0">
           <span x-text="currentSubject ? currentSubject : 'Selecteer een onderwerp'"></span>
        </div>
    </div>
    <div
        x-show="open"
        x-cloak
        x-on:click.away="open = false"
        class="absolute z-10"
    >
        @foreach($subjects as $subject)
            <div class="flex flex-col px-4 py-2 rounded-lg"
                x-data="{ expanded: false }" >
                <div class="flex justify-between space-x-8" >
                    <span 
                        @click="
                            state = '{{ $subject['id'] }}';
                            currentSubject = '{{ $subject['title'] }}';
                            open = false;
                    >
                        {{ $subject['title'] }}
                    </span>
                    @if($subject['hasChildren'])
                        <span 
                            :class="{ 'transform rotate-180': expanded }"
                            @click="expanded = !expanded"
                            wire:click='toggleItem({{ $subject['id'] }})'    
                        >
                            +
                        </span>
                    @endif
                </div>
                <div 
                    x-show="expanded" 
                    x-transition
                    class="p-2"
                >
                        @foreach($children[$subject['id']] ?? [] as $child)
                            <x-subject-node :subject="$child" :expandedItems="$expandedItems" :children="$children" :key="$child['id']" />
                        @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>

So I guess I have to bind the new clicked value (in this case an id) to the state-variable, which works, but it doesnt update when submitting the form I found it. Not sure if it's the right way, but it does work. I update the record when the state is changed in my Resource file:

MainSubjectSelect::make('main_subject_id')
    ->label('Hoofdonderwerp')
    ->columnSpanFull()
    ->statePath('main_subject_id')
    ->afterStateUpdated(function ($state, $record) {
        $record->main_subject_id = $state;
        $record->save();
    }),

MainSubjectSelect::make('main_subject_id')
    ->label('Hoofdonderwerp')
    ->columnSpanFull()
    ->statePath('main_subject_id')
    ->afterStateUpdated(function ($state, $record) {
        $record->main_subject_id = $state;
        $record->save();
    }),

Gaming

Programming

Custom form component