Filament Translatable Tabs Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require abdulmajeed-jamaan/filament-translatable-tabs
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="AbdulmajeedJamaan\FilamentTranslatableTabs\FilamentTranslatableTabsServiceProvider"
   

2. Register in Filament Add to your app/Providers/Filament/AdminPanelProvider.php:

   public function panel(Panel $panel): Panel
   {
       return $panel
           ->tabs([
               Tab::make('Translations')
                   ->translatableTabs(), // <-- Add this line
           ]);
   }
   

3. First Use Case For a translatable model (e.g., using spatie/laravel-translatable):

   use AbdulmajeedJamaan\FilamentTranslatableTabs\Tab;
   
   Tab::make('Translations')
       ->translatableTabs()
       ->columns(2) // Optional: Adjust layout
       ->locales(['en', 'fr', 'es']) // Optional: Custom locales
       ->fields([
           TextInput::make('title')->translatable(),
           RichEditor::make('description')->translatable(),
       ]);
   

Implementation Patterns

Workflows

1. Basic Tab Integration Replace default tabs with translatable ones in a Filament resource:

   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               Tab::make('Translations')
                   ->translatableTabs()
                   ->fields([
                       TextInput::make('name')->translatable(),
                       Select::make('category')->translatable(),
                   ]),
           ]);
   }
   

2. Dynamic Locale Handling Fetch locales dynamically from a config or database:

   Tab::make('Translations')
       ->translatableTabs()
       ->locales(config('app.available_locales'))
       ->defaultLocale(app()->getLocale());
   

3. Nested Translatable Fields Combine with other translatable packages (e.g., filament-translatable-fields):

   Tab::make('Translations')
       ->translatableTabs()
       ->fields([
           TranslatableTextInput::make('bio'),
           TranslatableRichEditor::make('content'),
       ]);
   

4. Conditional Rendering Show/hide tabs based on user roles or permissions:

   Tab::make('Translations')
       ->translatableTabs()
       ->visible(fn (User $user) => $user->can('manage_translations')),
   

5. Custom Tab Icons/Colors Style tabs per locale:

   Tab::make('Translations')
       ->translatableTabs()
       ->tabs([
           'en' => Tab::make('English')->icon('heroicon-o-globe-americas'),
           'fr' => Tab::make('Français')->icon('heroicon-o-globe-europe'),
       ]);
   

Integration Tips

• Spatie Translatable Models Ensure your model uses HasTranslations trait:

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

• Filament Resource Integration Override editForm or createForm to inject translatable tabs:

  public static function form(Form $form): Form
  {
      return $form->schema([
          // ... other fields
          Tab::make('Translations')->translatableTabs(),
      ]);
  }
  

• Livewire + Filament Sync For real-time updates, pair with filament-livewire:

  Tab::make('Translations')
      ->translatableTabs()
      ->wireModel('translations'); // Sync with Livewire property
  

Gotchas and Tips

Pitfalls

1. Locale Mismatch

   • Issue: Fields may not save if the locale isn’t explicitly set.
   • Fix: Always define locales in translatableTabs() or use a default:

     ->locales(['en', 'fr']) // Explicit locales
     ->defaultLocale('en')   // Fallback
     

2. JSON Serialization Errors

   • Issue: Complex fields (e.g., nested arrays) may fail to serialize.
   • Fix: Use ->json() for custom serialization:

     TextInput::make('tags')->translatable()->json(),
     

3. Caching Conflicts

   • Issue: Translations may not reflect changes if Filament’s cache is aggressive.
   • Fix: Clear Filament cache after updates:

     php artisan filament:cache-clear
     

4. Field Validation

   • Issue: Validation rules may not apply per-locale.
   • Fix: Use ->rules() per field:

     TextInput::make('title')
         ->translatable()
         ->rules(['required', 'max:255']),
     

5. Permission Overrides

   • Issue: Translatable tabs may inherit parent permissions incorrectly.
   • Fix: Explicitly set permissions:

     Tab::make('Translations')
         ->translatableTabs()
         ->canSee(fn (User $user) => $user->can('edit_translations')),
     

Debugging

1. Check JSON Output Inspect the raw JSON stored in the database:

   $post->getTranslations('en')->toJson();
   

2. Log Locale Switches Debug locale changes in the browser console:

   console.log(window.FilamentTranslatableTabs.locale);
   

3. Validate Model Events Listen for saving/saved events to debug translation logic:

   $model->saved(function ($model) {
       \Log::info('Translations saved:', $model->getTranslations());
   });
   

Extension Points

1. Custom Tab Components Extend the base tab class:

   namespace App\Filament\Tabs;
   
   use AbdulmajeedJamaan\FilamentTranslatableTabs\Tab;
   
   class CustomTranslatableTab extends Tab
   {
       protected static string $view = 'filament-tabs.custom';
   }
   

2. Override Default Views Publish and modify views:

   php artisan vendor:publish --tag="filament-translatable-tabs-views"
   

   Edit resources/views/vendor/filament-translatable-tabs/....

3. Add Custom Actions Attach actions to translatable tabs:

   Tab::make('Translations')
       ->translatableTabs()
       ->actions([
           Action::make('export')
               ->label('Export Translations')
               ->url(fn ($record) => route('translations.export', $record)),
       ]),
   

4. Hook into Translation Events Listen for translatable-tab-updated events:

   event(new TranslatableTabUpdated($record, $locale, $data));
   

5. Theme Customization Override Tailwind/AlpineJS via config:

   'tab_colors' => [
       'en' => 'bg-blue-500',
       'fr' => 'bg-green-500',
   ],