Filament Plugin Translatable Inline Laravel Package

## Getting Started

### Minimal Setup
1. **Install Dependencies**
   Update the installation commands to reflect Filament 5 compatibility:
   ```bash
   composer require lara-zeus/spatie-translatable parfaitementweb/filament-plugin-translatable-inline:"^4.1"

Ensure you have Filament v5 installed (this is now required).

2. Publish Config (if needed) The package remains mostly configuration-free, but verify config/filament.php includes:

   'plugins' => [
       // ...
       \Parfaitementweb\FilamentPluginTranslatableInline\FilamentPluginTranslatableInlinePlugin::make(),
   ],
   

   Note: Filament 5 may require additional plugin registration in app/Providers/FilamentPluginServiceProvider.php:

   public function register(): void
   {
       FilamentPluginServiceProvider::register(
           plugins: [
               \Parfaitementweb\FilamentPluginTranslatableInline\FilamentPluginTranslatableInlinePlugin::make(),
           ],
       );
   }
   

3. First Use Case: Translatable Model Add the Translatable trait to your model (unchanged):

   use Spatie\Translatable\HasTranslations;
   
   class Post extends Model
   {
       use HasTranslations;
   
       public $translatable = ['title', 'content'];
   }
   

   Then, in your Filament 5 Resource, use the plugin’s field wrapper:

   use Parfaitementweb\FilamentPluginTranslatableInline\Fields\TranslatableInlineField;
   
   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               TranslatableInlineField::make('title')
                   ->required()
                   ->maxLength(255),
               // Other fields...
           ]);
   }
   

4. View Translations Inline Open the Filament 5 form—translatable fields now show a language toggle dropdown (e.g., en, fr) and a missing translation indicator (⚠️). The UI may have subtle Filament 5 styling updates (e.g., dark mode support).

Implementation Patterns

Workflows

1. Bulk Translation Editing (Filament 5)

   • The inline panel now supports Filament 5’s new modal and drawer components for better UX:

   TranslatableInlineField::make('title')
       ->availableLocales(['en', 'fr', 'es'])
       ->defaultLocale('en')
       ->modalMaxWidth('4xl') // Customize modal size
       ->useDrawer(); // Optional: Use Filament 5's drawer instead of modal
   

2. Conditional Translatable Fields (Filament 5)

   • Updated syntax for Filament 5’s visible() and disabled() methods:

   TranslatableInlineField::make('content')
       ->visible(fn ($record) => $record->is_translatable)
       ->disabled(fn ($record) => !$record->is_editable),
   

3. Nested Translatable Relationships (Filament 5)

   • Updated relationship handling for Filament 5’s resource relationships:

   use Parfaitementweb\FilamentPluginTranslatableInline\Fields\TranslatableInlineRelationship;
   
   TranslatableInlineRelationship::make('comments')
       ->relationName('translatableComments')
       ->translatable(['body'])
       ->resource(\App\Filament\Resources\CommentResource::class); // Explicit resource binding
   

4. Customizing the UI (Filament 5)

   • Leverage Filament 5’s new icon system and styling hooks:

   TranslatableInlineField::make('title')
       ->languageSelectorPosition('top')
       ->missingTranslationBadgeIcon('heroicon-o-globe-alt')
       ->color('success') // Filament 5 color palette
       ->extraAttributes(['class' => 'filament-translatable-field']);
   

5. Validation Across Locales (Filament 5)

   • Updated validation syntax for Filament 5’s form builder:

   TranslatableInlineField::make('title')
       ->rules([
           'en' => ['required', 'max:255'],
           'fr' => ['required', 'max:255'],
       ])
       ->validationAttribute('title'); // Custom validation message attribute
   

Integration Tips

• Filament 5 Tables: Updated column syntax for Filament 5’s table builder:

  use Parfaitementweb\FilamentPluginTranslatableInline\Columns\TranslatableInlineColumn;
  
  TranslatableInlineColumn::make('title')
      ->searchable(isGloballySearchable: true)
      ->sortable(sort: 'asc')
      ->toggleable(isToggleable: true),
  

• Livewire Components: Continues to work seamlessly with Filament 5’s Livewire integration.
• API Resources: No changes—translations are still handled by spatie/laravel-translatable.
• Filament 5 Dark Mode: The plugin now respects Filament 5’s dark mode settings automatically.

Gotchas and Tips

Pitfalls

1. Filament 5 Migration Issues

   • Error: Plugin fields not rendering after upgrading to Filament 5.
   • Fix:
     • Ensure app/Providers/FilamentPluginServiceProvider.php is properly configured (see Getting Started).
     • Clear Filament 5’s cache:

       php artisan filament:cache-reset
       php artisan optimize:clear
       

2. Locale Mismatch (Filament 5)

   • Error: Translations not appearing in Filament 5’s new locale picker.
   • Fix:
     • Verify config/app.php includes all locales:

       'locales' => ['en', 'fr', 'es'],
       

     • Ensure the plugin’s availableLocales match:

       TranslatableInlineField::make('title')
           ->availableLocales(config('app.locales')),
       

3. Caching Issues (Filament 5)

   • Error: Changes to translations not reflecting in Filament 5’s new reactive forms.
   • Fix:
     • Use Filament 5’s livewire:update event debugging:

       php artisan filament:livewire-debug
       

     • Clear Filament 5’s view cache:

       php artisan view:clear
       

4. Nested Model Conflicts (Filament 5)

   • Error: Translatable fields in nested resources fail with Method [resource] does not exist.
   • Fix:
     • Explicitly bind the resource class in Filament 5:

       TranslatableInlineRelationship::make('comments')
           ->relationName('comments')
           ->translatable(['body'])
           ->resource(CommentResource::class),
       

     • Ensure the relationship method exists in your model:

       public function comments(): HasMany
       {
           return $this->hasMany(Comment::class);
       }
       

5. Filament 5 Plugin Registration

   • Error: Plugin not appearing in Filament 5’s admin panel.
   • Fix:
     • Register the plugin in app/Providers/FilamentPluginServiceProvider.php:

       public function register(): void
       {
           FilamentPluginServiceProvider::register(
               plugins: [
                   \Parfaitementweb\FilamentPluginTranslatableInline\FilamentPluginTranslatableInlinePlugin::make(),
               ],
           );
       }
       

     • Ensure the provider is listed in config/app.php under providers.

Debugging

• Check the Database (Filament 5) Use Filament 5’s Tinker integration:

  php artisan tinker
  

  $post = App\Models\Post::find(1);
  $post->getTranslation('title', 'fr'); // Debug translations
  

• Enable Debugging (Filament 5) Add to config/filament.php:

  'plugins' => [
      \Parfaitementweb\FilamentPluginTranslatableInline\FilamentPluginTranslatableInlinePlugin::make()
          ->debug(true) // Logs missing translations and locale issues
          ->debugMode('dev'), // 'dev' | 'production'
  ],
  

  Check logs at storage/logs/filament.log.

Extension Points

1. Custom Translatable Attributes (Filament 5) Extend the plugin to support Filament 5’s new field types (e.g., RichEditor):

   // In a service provider
   \Parfaitementweb\FilamentPluginTranslatableInline\FilamentPluginTranslatableInlinePlugin::macro(
       'richEditorTranslatableField',
       fn ($attribute) => new \YourNamespace\Fields\RichEditorTranslatableInlineField($attribute)
   );
   

   Usage:

   TranslatableInlineField::make('content')