Support for Spatie translation plugin in Modals

[mahfoudfx]

Package

filament/filament

Package Version

v2.15.33

Laravel Version

v9.27.0

Livewire Version

v2.10.7

PHP Version

PHP 8.1.9

Problem description

Using Spatie Translation Plugin, Filament Admin is not able to show data correctly in modals, even for edit/view. The create insert data correctly with used locale.

Modal View

Modal Edit

Expected behavior

Displaying data correctly as in classic form.

Steps to reproduce

Try to insert data (if you'll use my repo, you can try in Items Category Names).

Reproduction repository

https://github.com/mahfoudfx/filamentdev

Relevant log output

No response

[danharrin]

Hey, this is not an issue, we just haven't added support for this at the current time. From what I understand, Livewire v3 will make this feature possible.

[mahfoudfx]

Hey, this is not an issue, we just haven't added support for this at the current time. From what I understand, Livewire v3 will make this feature possible.

Sorry, I didn't found any mention of this detail, or maybe I missed it. BTW, is it possible to have a workaround for example for Edit action using Lifecycle hooks, with the method beforeFormFilled() ?

use Filament\Tables\Actions\EditAction;

EditAction::make()
    ->beforeFormFilled(function () {
        // Runs before the form fields are populated from the database.
    })

[danharrin]

BTW, is it possible to have a workaround for example for Edit action using Lifecycle hooks, with the method beforeFormFilled() ?

Whats the use case?

[mahfoudfx]

To display the translation in Edit modal, using Spatie Translatable. Something like :

EditAction::make()
    ->beforeFormFilled(function () {
        return $query->name->getTranslations('hello', app()->getLocale(), true);
    })

[mahfoudfx]

``> > BTW, is it possible to have a workaround for example for Edit action using Lifecycle hooks, with the method beforeFormFilled() ?

Whats the use case?

I think that I found the cleanest workaround using Field lifecycle Hydration which will display the correct translation on both View & Edit Modal and allow the Create action. If you will agree, I can add it to the Filament Tricks section for poeple who are using the translatable package and dealing with the same issue awaiting for a core solution.

return $form
            ->schema([
                TextInput::make('name')
                    ->afterStateHydrated(function (TextInput $component, $state) {
                        if ($state !== null) {
                            (isset($state[app()->getLocale()]))
                                ? $component->state($state[app()->getLocale()])
                                : $component->state($state[config('app.fallback_locale')]);
                        }
                    }),
                TextInput::make('description'),
            ]);

This will give the below display.

However, I noticed abnormal behaviour. Excluding the Create action, the following combinations will fire a Console warnings and errors without disturbing the operability of Filament, also data is filled and read correctly.

• View different entries (starting from the second view click).
• Edit different entries (starting from the second edit click).
• View followed by Edit or the reverse: Edit followed by View of the same or different table entries.

You can check below the fired errors.

[francoism90]

Any news on this?

[mahfoudfx]

It seems to not be supported using Livewire V2, maybe available with the next V3. Awaiting for an official support, I have written a Workaround to display Spatie Translation on Modals that you can find on the Tricks section on the filamentphp website.

[francoism90]

@mahfoudfx Thanks for sharing your solution. :)

Unfortunately this doesn't work when a user switches to a locale using the switcher action. It always uses the (current) app locale (not model), right?

I was thinking of using something like a keyValue or even a repeater instead. But it would be great if it could be included as Livewire V3 will take a long time to be completed.

[mahfoudfx]

@francoism90 I think that you can customize the condition according to your usecase. The most important thing in this workaround is the use of the Field lifecycle Hydration advanced feature of filament.

[francoism90]

@mahfoudfx Thanks, I'm new to Filament, it would be great if it could get the locale from the parent.