F
Filament•5w ago
tjodalv

Multiple RelationManager's on custom ManageRelatedRecords page

Hello everyone! I’m using Spatie Media Library with Filament and want to create a dedicated page to manage product media. My Product model has registered collections: Images and Downloads, but each model can also have its own custom collections. I attempted to create a MediaManageRelatedRecords page with multiple relation managers—one for each media collection. While I managed to get it working, I encountered an issue: whenever I click on any action in the RelationManager table, I receive an error stating "Unable to find component: [...]". ProductResource class: 
// src/Filament/Resources/ProductResource.php
...
    public static function getRecordSubNavigation(Page $page): array
    {
        return $page->generateNavigationItems([
            // ...
            Pages\EditProduct::class,
            Pages\ManageProductImages::class,
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListProducts::route('/'),
            'view' => Pages\ViewProduct::route('/{record}'),
            'edit' => Pages\EditProduct::route('/{record}/edit'),
            'images' => Pages\ManageProductImages::route('/{record}/images'),
        ];
    }
// src/Filament/Resources/ProductResource.php
...
    public static function getRecordSubNavigation(Page $page): array
    {
        return $page->generateNavigationItems([
            // ...
            Pages\EditProduct::class,
            Pages\ManageProductImages::class,
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListProducts::route('/'),
            'view' => Pages\ViewProduct::route('/{record}'),
            'edit' => Pages\EditProduct::route('/{record}/edit'),
            'images' => Pages\ManageProductImages::route('/{record}/images'),
        ];
    }
ManageProductImages page class: 
// src/Filament/Resources/ProductResource/Pages/ManageProductImages.php
class ManageProductImages extends ManageMediasRelatedRecords
{
    protected static string $resource = ProductResource::class;
}
// src/Filament/Resources/ProductResource/Pages/ManageProductImages.php
class ManageProductImages extends ManageMediasRelatedRecords
{
    protected static string $resource = ProductResource::class;
}
1 Reply
tjodalv
tjodalvOP•5w ago
ManageMediasRelatedRecords page class The idea is to use generic class that can be used in multiple places across application to handle record media: 
use Filament\Resources\Pages\ManageRelatedRecords;

class ManageMediasRelatedRecords extends ManageRelatedRecords
{
    protected static string $relationship = 'media';

    public function getRelationManagers(): array
    {
        $mediaCollections = $this->getOwnerRecord()->getRegisteredMediaCollections();

        $relationManagers = [];

        foreach ($mediaCollections as $mediaCollection) {
            $relationManagers[] = MediaRelationManager::make([
                'mediaCollection' => $mediaCollection->name,
            ]);
        }

        return [
            RelationGroup::make('MediaGroups', $relationManagers),
        ];
    }
}
use Filament\Resources\Pages\ManageRelatedRecords;

class ManageMediasRelatedRecords extends ManageRelatedRecords
{
    protected static string $relationship = 'media';

    public function getRelationManagers(): array
    {
        $mediaCollections = $this->getOwnerRecord()->getRegisteredMediaCollections();

        $relationManagers = [];

        foreach ($mediaCollections as $mediaCollection) {
            $relationManagers[] = MediaRelationManager::make([
                'mediaCollection' => $mediaCollection->name,
            ]);
        }

        return [
            RelationGroup::make('MediaGroups', $relationManagers),
        ];
    }
}
And finally this is my MediaRelationManager class that handles media for each collection: 
class MediaRelationManager extends RelationManager
{
    protected static bool $isLazy = false;

    protected static string $relationship = 'media';

    public string $mediaCollection = 'default';

    public function form(Form $form): Form
    {
        return $form->...
    }

    public function table(Table $table): Table
    {
        return $table->...
    }
}
class MediaRelationManager extends RelationManager
{
    protected static bool $isLazy = false;

    protected static string $relationship = 'media';

    public string $mediaCollection = 'default';

    public function form(Form $form): Form
    {
        return $form->...
    }

    public function table(Table $table): Table
    {
        return $table->...
    }
}

Did you find this page helpful?