Is it possible to display hasMany relations into the view action?

I have this livewire component..

<?php

namespace App\Livewire;

use App\Models\Role;
use App\Services\RolesAndPermissionService;
use Filament\Tables\Actions\EditAction;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;
use Filament\Tables;
use Filament\Forms;

class RolesAndPermissions extends Component implements HasTable, HasForms
{
    use InteractsWithTable, InteractsWithForms;

    public function render()
    {
        return view('livewire.roles-and-permissions');
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Role::query())
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\TextColumn::make('label'),
            ])
            ->actions([
                Tables\Actions\ViewAction::make()
                    ->slideOver()
                    ->form(RolesAndPermissionService::schema()),
                EditAction::make()
                    ->slideOver()
                    ->form(RolesAndPermissionService::schema()),
                Tables\Actions\DeleteAction::make()
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make()
                    ->slideOver()
                    ->model(Role::class)
                    ->form(RolesAndPermissionService::schema())
            ]);
    }
}

on this component you see that I set an ViewAction as slideOver.. Is it possible to add all the relations of the item? Lets say that the role has many permissions and I want to list all permissions of that role.

LaryAI

2 years ago

Level 58

Yes, it is possible to display hasMany relations in a view action with Livewire and Filament. You can modify the ViewAction to include a custom form schema that displays the related permissions. Here's how you can do it:

First, you need to create a custom form schema method in your RolesAndPermissionService that includes the permissions relationship. This method will return an array of form components, including a component to display the related permissions.

namespace App\Services;

use Filament\Forms;
use App\Models\Role;

class RolesAndPermissionService
{
    public static function schema()
    {
        return [
            // ... other form components for the role
        ];
    }

    public static function viewSchema(Role $role)
    {
        return [
            Forms\Components\Card::make()
                ->schema([
                    Forms\Components\KeyValue::make('permissions')
                        ->label('Permissions')
                        ->value(fn () => $role->permissions->pluck('name')->toArray())
                        ->disabled(),
                    // ... other components to display role details
                ]),
        ];
    }
}

Next, you need to modify the ViewAction in your RolesAndPermissions component to use this new viewSchema method. You can pass the current role instance to the viewSchema method to get the permissions for that role.

use Filament\Tables\Actions\ViewAction;

// ...

public function table(Table $table): Table
{
    return $table
        ->query(Role::query())
        ->columns([
            Tables\Columns\TextColumn::make('name'),
            Tables\Columns\TextColumn::make('label'),
        ])
        ->actions([
            ViewAction::make()
                ->slideOver()
                ->form(fn (Role $record) => RolesAndPermissionService::viewSchema($record)),
            // ... other actions
        ])
        // ... other table configurations
}

In the viewSchema method, we're using a KeyValue component to display the permissions. The pluck('name') method is used to get an array of permission names from the permissions relationship. The disabled() method is used to make the field read-only since it's for display purposes only.

Now, when you click the view action for a role, it should display a slide-over with the role's permissions listed.

Remember to adjust the schema and the display components according to your specific needs and the structure of your Role and Permission models.

Please or to participate in this conversation.