Filament Modal Repeater Laravel Package

Getting Started

Minimal Steps

1. Installation:

   composer require yousefaman/filament-modal-repeater
   php artisan modal-repeater:install
   

   Register the plugin in your PanelProvider (optional but recommended):

   ->plugin(ModalRepeaterPlugin::make())
   

2. First Use Case: Add a ModalRepeater to a Filament form (e.g., Create or Edit resource):

   use YousefAman\ModalRepeater\ModalRepeater;
   
   ModalRepeater::make('items')
       ->tableColumns([
           Column::make('name')->label('Name'),
           Column::make('price')->label('Price'),
       ])
       ->modalHeading('Edit Item')
       ->modalSubmitAction('Update')
       ->modalCancelAction('Cancel')
       ->columns([
           TextInput::make('name')->required(),
           TextInput::make('price')->numeric(),
       ]);
   

Where to Look First

• Demo: Check the art/demo.jpeg in the repo for visual guidance.
• Documentation: Focus on the Usage section in the README for basic syntax.
• Source: Explore src/ModalRepeater.php and src/Column.php for customization hooks.

Implementation Patterns

Core Workflow

1. Define Repeater Structure: Use ModalRepeater::make('key') to initialize, where 'key' maps to your model’s array field (e.g., $model->items).

   ModalRepeater::make('features')
       ->tableColumns([...]) // Display columns in the table view
       ->columns([...])      // Form fields in the modal
   

2. Modal Configuration: Customize the modal with:

   • modalHeading(), modalSubmitAction(), modalCancelAction().
   • modalWidth() (e.g., '500px' for fixed width).
   • modalMaxHeight() (e.g., '80vh' for scrollable content).

3. Dynamic Columns: Use Column::make('field')->label('Label') for table columns. Add actions like:

   Column::make('status')
       ->toggle()
       ->label('Active')
   

4. Form Fields: Nest standard Filament fields (e.g., TextInput, Select) inside columns():

   ->columns([
       TextInput::make('description')->rows(3),
       Select::make('category')->options(['A', 'B']),
   ])
   

5. Data Binding: Ensure your model uses protected $casts = ['items' => 'array'] for array fields.

Integration Tips

• Resource Integration: Attach to a Filament Form or Table via getFormSchema() or getTableColumns():

  public static function form(Form $form): Form
  {
      return $form->schema([
          ModalRepeater::make('items')->...,
      ]);
  }
  

• Validation: Use Filament’s validation rules within columns():

  TextInput::make('email')->email()->required()
  

• Conditional Logic: Leverage Filament’s visible() or required() on nested fields:

  TextInput::make('notes')->visible(fn ($record) => $record->is_active)
  

• Livewire Events: Listen for repeater changes via ModalRepeater's events (e.g., saved, deleted):

  protected $listeners = ['modalRepeaterSaved' => 'handleRepeaterSave'];
  

Gotchas and Tips

Pitfalls

1. Key Mismatch:

   • Ensure the ModalRepeater::make('key') matches the array key in your model’s $casts.
   • Fix: Verify protected $casts = ['items' => 'array'] in your model.

2. Modal Persistence:

   • Modals may not auto-close after submission if modalSubmitAction() isn’t set.
   • Fix: Always define modalSubmitAction('Save') or similar.

3. Nested Repeaters:

   • Avoid nesting ModalRepeater inside another ModalRepeater (untested/unsupported).
   • Workaround: Use a separate form or flatten the structure.

4. CSRF Issues:

   • If modals fail to submit, ensure your Filament panel includes @csrf in layouts.
   • Fix: Check resources/views/layouts/filament-app.blade.php.

5. Performance:

   • Large repeaters (>100 items) may lag. Use modalMaxHeight() to limit modal size.
   • Optimization: Paginate table view with ->paginate(10).

Debugging

1. Console Logs: Enable Filament’s debug mode to log repeater interactions:

   FILAMENT_DEBUG=true
   

2. Data Dumping: Use dd($this->data) in your model’s save() method to inspect repeater payloads.

3. Event Listeners: Debug repeater events by listening to ModalRepeaterSaved:

   public function handleRepeaterSave(array $data)
   {
       logger()->info('Repeater data:', $data);
   }
   

Extension Points

1. Custom Modal Content: Override the modal template by publishing views:

   php artisan vendor:publish --tag=modal-repeater-views
   

   Then modify resources/views/vendor/modal-repeater/modal.blade.php.

2. Dynamic Columns: Use closures for dynamic column generation:

   ->tableColumns([
       Column::make('created_at')
           ->dateTime()
           ->label('Added')
           ->sortable(),
   ])
   

3. API Integration: Extend the repeater to work with API resources by overriding getState():

   ModalRepeater::make('metadata')
       ->state(fn () => $this->metadata ?? [])
       ->mutateStateUsing(fn (array $state) => $state)
   

4. Localization: Translate labels/actions via Filament’s __() helper:

   ->modalHeading(__('Edit Item'))
   ->modalSubmitAction(__('Save Changes'))