Filament Title With Slug Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require camya/filament-title-with-slug
   

   Publish the config (optional):

   php artisan vendor:publish --provider="Camya\FilamentTitleWithSlug\FilamentTitleWithSlugServiceProvider" --tag="config"
   

2. First Usage: Add the component to a Filament form in your resource:

   use Camya\FilamentTitleWithSlug\Components\TitleWithSlugInput;
   
   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               TitleWithSlugInput::make(
                   fieldTitle: 'title',
                   fieldSlug: 'slug',
               ),
               // Other fields...
           ]);
   }
   

3. Model Requirements: Ensure your model has title and slug fields (or adjust the field names in the component).

First Use Case

Creating a Blog Post Resource:

• Use TitleWithSlugInput in the form() method of your Filament resource.
• The component auto-generates slugs from titles (e.g., "Hello World" → "hello-world").
• Test by creating a new record—verify the slug updates dynamically as you type the title.

Implementation Patterns

Common Workflows

1. Basic Integration:

   TitleWithSlugInput::make(
       fieldTitle: 'name',  // Customize field names
       fieldSlug: 'url',
       columnSpanFull: true, // Full-width layout
   )
   ->required(),
   

2. Custom Slug Generation: Override the default slugifier (e.g., for SEO-friendly URLs):

   TitleWithSlugInput::make(
       fieldTitle: 'title',
       fieldSlug: 'slug',
       slugifier: fn(string $title) => Str::slug($title, '-').'-custom',
   )
   

3. Dynamic "Visit" Links: Use a route helper to generate clickable URLs:

   TitleWithSlugInput::make(
       fieldTitle: 'title',
       fieldSlug: 'slug',
       visitRoute: fn($record) => route('posts.show', $record),
   )
   

4. Conditional Slug Editing: Disable slug editing for specific records (e.g., admin-only):

   TitleWithSlugInput::make(
       fieldTitle: 'title',
       fieldSlug: 'slug',
       disableSlugEditing: fn($record) => $record->is_admin,
   )
   

5. Localization: Translate labels via config or language files:

   TitleWithSlugInput::make(
       fieldTitle: 'title',
       fieldSlug: 'slug',
       titleLabel: __('filament-title-with-slug::title'),
       slugLabel: __('filament-title-with-slug::slug'),
   )
   

Integration Tips

• Validation: Combine with Filament’s validation rules:

  TitleWithSlugInput::make(
      fieldTitle: 'title',
      fieldSlug: 'slug',
  )->rules([
      'title' => 'required|max:255',
      'slug' => 'required|unique:posts,slug,'.$record->id,
  ]),
  

• Livewire Hooks: Extend functionality with Livewire events:

  protected static function getUpdatedSchema(Form $form): array
  {
      return array_merge($form->getSchema(), [
          TitleWithSlugInput::make(...)->afterStateUpdated(fn($state, $set) => {
              // Custom logic after slug/title changes
          }),
      ]);
  }
  

• Dark Mode: The component supports Filament’s dark mode out-of-the-box. No additional config needed.

Gotchas and Tips

Pitfalls

1. Slug Conflicts:

   • If unique validation fails, ensure your model’s slug field is indexed in the database.
   • Use slugifier to handle edge cases (e.g., accented characters):

     slugifier: fn($title) => Str::ascii($title)->slug('-'),
     

2. Route Resolution:

   • If visitRoute returns null or invalid, the "Visit" link will be hidden. Test with:

     visitRoute: fn($record) => $record->slug ? route('posts.show', $record) : null,
     

3. Livewire State:

   • Avoid manual $record->slug updates outside the component—use the component’s built-in logic to prevent desync.

4. Config Overrides:

   • Published config (config/filament-title-with-slug.php) takes precedence over defaults. Override globally:

     'default_slugifier' => fn($title) => Str::slug($title, '_'),
     

Debugging

1. Slug Not Updating:

   • Check if the fieldTitle/fieldSlug names match your model’s fillable fields.
   • Verify the slugifier callback isn’t throwing errors (wrap in try-catch for debugging).

2. CSS/Styling Issues:

   • Ensure Filament’s Tailwind CSS is properly loaded. If styles are missing, run:

     npm run dev
     

3. Livewire Errors:

   • Clear Livewire cache if slugs behave erratically:

     php artisan cache:clear
     php artisan view:clear
     

Extension Points

1. Custom Components: Extend the base component for reusable logic:

   class CustomTitleWithSlugInput extends TitleWithSlugInput
   {
       protected static string $defaultSlugifier = 'custom-slugifier';
       // Override methods as needed
   }
   

2. Event Listeners: Listen for slug changes in your model:

   protected static function booted()
   {
       static::saved(function ($model) {
           if ($model->wasChanged('slug')) {
               // Log or trigger side effects
           }
       });
   }
   

3. Testing: Use Filament’s testing helpers to assert slug behavior:

   $this->create(Post::class, [
       'title' => 'Test Post',
       'slug' => null, // Should auto-generate
   ]);
   $this->assertDatabaseHas('posts', ['slug' => 'test-post']);
   

4. Performance: For large datasets, lazy-load slug suggestions:

   TitleWithSlugInput::make(
       fieldTitle: 'title',
       fieldSlug: 'slug',
       slugSuggestions: fn($query) => $query->limit(10), // Limit DB queries
   )