Getting Started

First Steps

Installation

composer require tomatophp/filament-translation-component

Publish the package assets (if needed):

php artisan vendor:publish --provider="TomatoPHP\FilamentTranslationComponent\FilamentTranslationComponentServiceProvider" --tag="filament-translation-component:views"

Prerequisites Ensure you have:
- FilamentPHP installed (v3.x recommended).
- Spatie Laravel Translatable for model translations (v3.x+).
- A Filament resource where translations will be managed.

Basic Setup Add the component to a Filament resource’s form/tables using:

use TomatoPHP\FilamentTranslationComponent\Components\TranslationField;

TranslationField::make('name')
    ->translatable()
    ->languages(['en', 'fr', 'es'])
    ->required();

First Use Case Display a translatable field in a Filament form for a model with Spatie’s HasTranslations trait:

use Spatie\Translatable\HasTranslations;

class Post extends Model implements HasTranslations
{
    public $translatable = ['title', 'content'];
}

Implementation Patterns

Common Workflows

Form Integration Use TranslationField in Filament forms to edit translations:

Form::components([
    TranslationField::make('title')
        ->languages(config('app.locales'))
        ->columns(2), // Adjust layout
]);

Table Display Show translations in Filament tables with:

Tables\Columns\TranslationColumn::make('title')
    ->languages(['en', 'fr'])
    ->sortable();

Dynamic Languages Fetch languages from config or a database:

TranslationField::make('description')
    ->languages(config('app.available_locales'))
    ->defaultLanguage(auth()->user()->locale);

Validation Add validation rules per language:

TranslationField::make('slug')
    ->rules([
        'en' => 'required|unique:posts,slug',
        'fr' => 'required|unique:posts,slug',
    ]);

Nested Resources For deeply nested translatable models, use:

TranslationField::make('nested.field')
    ->translatablePath('nested') // Custom path for nested attributes
    ->languages(['en', 'de']);

State Updates (v4.0.1 Fix) Ensure state updates for inputs work correctly by explicitly binding the field:

TranslationField::make('content')
    ->languages(['en', 'fr'])
    ->bindToModel(); // Explicitly bind to model to avoid state update issues

Integration Tips

Localization Sync: Use Filament’s afterSave to sync translations to a json column if needed:
```
$record->saveTranslations();
```
Default Fallback: Set a default language for missing translations:
```
TranslationField::make('bio')
    ->fallbackLanguage('en');
```
Custom UI: Override Blade views in resources/views/vendor/filament-translation-component/.
API Responses: Use the package’s translate() helper to format responses:
```
return $post->translate(['title', 'content']);
```
Filament v3 Compatibility: Ensure your Filament version is v3.x, as v4.0.1 includes fixes for state management that rely on Filament’s latest event system.

Gotchas and Tips

Pitfalls

Model Trait Conflict Ensure your model uses HasTranslations and not Translatable (deprecated in Spatie v3+). Fix: Update to:
```
use Spatie\Translatable\HasTranslations;
```
Language Mismatch If translations don’t save, verify:
- The languages() array matches your app.locales config.
- The model’s $translatable array includes the field name.
State Update Issues (v4.0.1) If inputs in TranslationField don’t update the state correctly, ensure:
- The field is properly bound to the model using bindToModel().
- You’re using Filament v3.x, as this fix relies on updated event handling.
CSRF Token Issues When using the component in modals or AJAX forms, ensure CSRF protection is configured:
```
TranslationField::make('content')->deferCsrf();
```
Performance with Large Data Avoid loading all translations at once. Use lazy loading:
```
TranslationField::make('content')->lazyLoad();
```
Filament Version Lock The package may not support Filament v2. Check the release notes for compatibility.

Debugging Tips

Check Saved Data: Dump the model after save to verify translations:
```
dd($record->getTranslations('title'));
```
Log Validation Errors: Enable Filament’s debug mode:
```
FILAMENT_DEBUG=true
```
Clear Cached Views: If UI breaks after updates:
```
php artisan view:clear
```

State Binding Debugging: If state updates fail, check if the field is bound to the model:

TranslationField::make('field')->bindToModel()->debug(); // Use debug mode if available

Extension Points

Custom Translatable Attributes Extend the component to support non-Spatie translatable models:

TranslationField::make('custom_field')
    ->customTranslator(fn ($model, $attribute, $locale) => $model->{"get{$attribute}Translation"}($locale));

Add Language Switcher Use Filament’s Action to toggle languages dynamically:

Action::make('switchLanguage')
    ->label('Switch to French')
    ->action(fn () => session()->put('locale', 'fr'));

Hook into Translation Events Listen for translation updates via Spatie’s events:

\Spatie\Translatable\Events\TranslationSaved::dispatch($model, $attribute, $locale);

Override Default Behavior Publish and modify the component’s logic:
```
php artisan vendor:publish --tag="filament-translation-component"
```
Then edit app/Providers/FilamentTranslationComponentServiceProvider.php.

Pro Tips

Use with Filament Spatie Plugin: Combine with filament-spatie-translatable for tighter integration.
Localization in Filament Panels: Set default locale per panel:
```
Panel::make()->defaultLocale('fr');
```

Test Translations: Use Filament’s testing helpers:

$this->filament()->actingAs($user)
    ->fillForm([
        'title' => [
            'en' => 'Hello',
            'fr' => 'Bonjour',
        ],
    ]);

Leverage v4.0.1 Fix: If you experienced state update issues in previous versions, explicitly bind fields to resolve them:
```
TranslationField::make('dynamic_field')->bindToModel();
```

Filament Translation Component Laravel Package