Nov 27, 2024
0
Level 1
Filament custom field
I'm trying to create a custom field and I have problems rendering the data that I pass to the field. Thanks in advance !! My component:
<?php
namespace App\Forms\Components;
use Filament\Forms\Components\Field;
use Closure;
class DragAndDropSelect extends Field
{
protected string $view = 'forms.components.drag-and-drop-select';
protected array | Closure | null $options = [];
public function options(array | Closure | null $options): static
{
$this->options = $options;
return $this;
}
public function getOptions(): array
{
// Ensure we always return an array
$options = $this->evaluate($this->options);
// Log for debugging
\Log::info('DragAndDropSelect getOptions:', [
'raw_options' => $this->options,
'evaluated_options' => $options,
'type' => gettype($options)
]);
return is_array($options) ? $options : [];
}
}
This is the blade modified just for test:
<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div x-data="{
state: $wire.$entangle('{{ $getStatePath() }}'),
options: {{ json_encode($getOptions()) }}
}">
<template x-for="(value, key) in options" :key="key">
<p x-text="value"></p>
</template>
</div>
</x-dynamic-component>
And this is part of my resource:
Forms\Components\Select::make('department')
->reactive()
->options(Department::pluck('name', 'id')->all())
->afterStateUpdated(function ($state, $set) {
$options = JobPosition::where('department_id',$state)->pluck('name', 'id')->toArray();
$set('job_positions', $options);
$set('jobPosition', null);
}),
Forms\Components\Select::make('jobPosition')
->reactive()
->options(function (Get $get) {
return $get('job_positions') ?? [];
})
->afterStateUpdated(function ($state, $set, Get $get) {
$employees = Employee::where('establishment_id', \Session::get('main_hotel_id'))
->whereIn('job_position_id', $state)
->orderBy('seniority', 'desc')
->get()
->mapWithKeys(function ($employee) {
return [$employee->id => $employee->full_name.' '.$employee->seniority_diff];
})
->toArray();
self::$employees_options = $employees;
$set('employeesopt', $employees);
})
->multiple(),
DragAndDropSelect::make('employeese')
->live()
->options(function (Get $get) {
return $get('employeesopt') ?? [];
}),
When I select a job position, the data is correctly sent to the component—I can see it in the logs. However, the data never gets rendered in the Blade.
Please or to participate in this conversation.