How to trigger loading in Field Macro when one of the fields is reactive
I'm creating a Field::macro modal that loads a select element which is reactive and populates the rest of the fields on the afterStateUpdated callback.
It's there a way to trigger the loading icon on the save button while the reactive action is doing it's job?
1 Reply
This is the modal
Field::macro('withImageCaption', fn($collection) => $this->hintAction(
fn(Closure $set, $record) => Action::make('Custom_properties')
->icon('heroicon-o-camera')
->tooltip(__('Add a caption to the images'))
->label(__('Image captions'))
->form([
Select::make('media_id')
->label(__('Image name'))
->options($this->getRecord()->getMedia($collection)->pluck('file_name', 'id')->toArray())
->required()
->reactive()
->afterStateUpdated(function($state, $record, Closure $set) {
$description_es = $record->media->find($state)?->getCustomProperty('description')['es'] ?? '';
$description_en = $record->media->find($state)?->getCustomProperty('description')['en'] ?? '';
$set('description_es', $description_es);
$set('description_en', $description_en);
}),
Section::make('description')
->heading(__('Image caption'))
->compact()
->schema(
[
TextInput::make('description_es')
->label(__('Spanish')),
TextInput::make('description_en')
->label(__('English')),
]
)->hidden(fn(callable $get) => ! $get('media_id')),
])
->modalButton(__('Save'))
->action(function($data) use ($record) {
$record->media->find($data['media_id'])->setCustomProperty('description', [
'es' => $data['description_es'],
'en' => $data['description_en'],
]);
$record->push();
})
));
Field::macro('withImageCaption', fn($collection) => $this->hintAction(
fn(Closure $set, $record) => Action::make('Custom_properties')
->icon('heroicon-o-camera')
->tooltip(__('Add a caption to the images'))
->label(__('Image captions'))
->form([
Select::make('media_id')
->label(__('Image name'))
->options($this->getRecord()->getMedia($collection)->pluck('file_name', 'id')->toArray())
->required()
->reactive()
->afterStateUpdated(function($state, $record, Closure $set) {
$description_es = $record->media->find($state)?->getCustomProperty('description')['es'] ?? '';
$description_en = $record->media->find($state)?->getCustomProperty('description')['en'] ?? '';
$set('description_es', $description_es);
$set('description_en', $description_en);
}),
Section::make('description')
->heading(__('Image caption'))
->compact()
->schema(
[
TextInput::make('description_es')
->label(__('Spanish')),
TextInput::make('description_en')
->label(__('English')),
]
)->hidden(fn(callable $get) => ! $get('media_id')),
])
->modalButton(__('Save'))
->action(function($data) use ($record) {
$record->media->find($data['media_id'])->setCustomProperty('description', [
'es' => $data['description_es'],
'en' => $data['description_en'],
]);
$record->push();
})
));