Merge tags not triggered in custom page
I have built a custom page with Filament 4.1. The page lists some records of a model. Each record can be edited in a modal. The form in this model contains a rich editor field.
The rich editor field has some merge tags. But when I type {{ nothing happens. The same rich editor field works perfectly on a default resource page.
Does it relate to this fix?
public ?array $data = [
'feedback' => '', // otherwise RichEditor throws a JS error on loading the page ];
'feedback' => '', // otherwise RichEditor throws a JS error on loading the page ];
5 Replies
Please share some code
class BusinessCaseOverview extends Page implements HasForms
{
...
// form data
// set '' otherwise RichEditor throws a JS error on loading the page
public ?array $data = [
'text' => '',
'help' => '',
'feedback' => '',
];
public bool $showAddRecordModal = true;
public Collection $businessCases;
public BusinessCase $selectedBusinessCase;
public Solution $selectedSolution;
public function mount($type, $id): void
{
$this->businessCases = BusinessCase::query()
->with('solutions.entries.businessCase')
->with('solutions.entries.debitAccount')
->with('solutions.entries.creditAccount')
->where('fk_topic_id', $this->topicId)
->orderBy('sorting_number')
->get();
}
public function form(Schema $schema): Schema
{
return $schema
->components([
TextInput::make('sorting_number')
->label('Nummer')
//->required()
->hidden(
fn($get): bool => ! $this->isExerciseMode(),
),
RichEditor::make('text')
->label('Text')
->mergeTags(
collect(PlaceholderEnum::cases())
->mapWithKeys(fn ($case) => [$case->value => $case->getLabel()])
->toArray()
)
->activePanel('mergeTags'),
RichEditor::make('help')
->label("Lösungshilfe"),
RichEditor::make('feedback')
->label("Feedback (Erste Schritte)"),
])
->statePath('data'); // fill the form
}
protected function getFormActions(): array
{
return [
Action::make('save')
->label('speichern')
->submit('save'),
];
}
public function openModal($businessCaseId): void
{
$this->selectedBusinessCase = BusinessCase::query()
->with('solutions.entries.businessCase')
->with('solutions.entries.debitAccount')
->with('solutions.entries.debitAccount')
->with('solutions.entries.creditAccount')
->where('fk_exercise_id', $this->exerciseId)
->orderBy('sorting_number')
->find($businessCaseId);
$this->selectedSolution = $this->selectedBusinessCase->solutions->first();
$this->form->fill([
'businessCaseId' => $this->selectedBusinessCase->id,
'solutionId' => $this->selectedSolution->id,
'sorting_number' => $this->selectedBusinessCase->sorting_number,
'text' => (string) $this->selectedBusinessCase->text ?? '',
'help' => (string) $this->selectedBusinessCase->help ?? '',
'feedback' => (string) $this->selectedBusinessCase->feedback ?? '',
'is_amount_irrelevant' => $this->selectedBusinessCase->is_amount_irrelevant,
'net_amount' => $this->selectedBusinessCase->net_amount,
'vat_rate' => $this->selectedBusinessCase->vat_rate,
'entries' => $this->selectedSolution->entries,
]);
$this->dispatch('open-modal', id: 'new-modal');
}
public function onShowModalForNewBusinessCase(): void
{
$this->selectedBusinessCase = new BusinessCase(['is_amount_irrelevant' => 'false']);
$this->selectedSolution = new Solution();
$this->isNewBusinessCase = true;
$this->dispatch('open-modal', id: 'new-modal');
}
Hm, otherwise the RichEditor works fine? Any Console errors?
You forgot
$this->form->fill([]); inside mount()
Oh, that's inside openModal(). I feel like the issue is that you are reusing the form on the component in the modal?
I'd recommend to use the Actions for this. Here are the docs on how to use actions (your modal) inside a Livewire component (the page) and pass some arguments: https://filamentphp.com/docs/4.x/components/action#passing-action-argumentsThank you very much, Dennis.
No, there are no errors in the console. And it is the same either Chrome or FF.
It is not really re-using. I just fill the form in the modal according the selected record (businessCase).
Anyway, I will try using the actions.
Currently, I have this in the blade view:
<div>
<x-filament::button wire:click="openModal({{ $businessCase->id }})" >
Editieren
</x-filament::button>
{{ ($this->deleteAction)(['businessCaseId' => $businessCase->id]) }}
</div>
It is not really re-using. I just fill the form in the modal according the selected record (businessCase).That's what I meant. You are using the form on the page from inside the Action. Might work, but might also be the issue here.