aymanalhattami / filament-context-menu

filament的上下文菜单（右键菜单）

维护者

详细信息

github.com/aymanalhattami/filament-context-menu

主页

源代码

问题

安装数: 1,989

依赖: 0

建议者: 0

安全: 0

星标: 86

关注者: 3

分支: 9

开放问题: 2

1.0.3 2024-09-22 10:47 UTC

Requires

Requires (Dev)

MIT 5118d36303e86891d3037e6e26882d548b880b9c

  • Ayman Alhattami <ayman.m.alhattami.woop@gmail.com>

laravelcontext menufilamentayman alhattamifilament_context_menufilament admin panelfilament context menu

This package is auto-updated.

Last update: 2024-09-22 14:11:50 UTC

README

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

为Filament管理面板的资源页面、自定义页面和表格单元格添加上下文菜单（右键菜单）。

  • 它使用Filament操作来设置菜单操作。
  • 它支持暗色和亮色模式。
  • 它支持从左到右和从右到左的方向。
  • 您可以在菜单操作之间设置分隔符。
  • 它支持资源页面和自定义页面。
  • 您可以为表格单元格设置上下文菜单。
  • 页面上下文菜单中有三个可用操作
    • AymanAlhattami\FilamentContextMenu\Actions\RefreshAction 用于刷新页面。
    • AymanAlhattami\FilamentContextMenu\Actions\GoBackAction 用于返回上一页。
    • AymanAlhattami\FilamentContextMenu\Actions\GoForward 用于返回下一页。

演示项目 | YouTube视频 | Laravel Daily (Povilas Korop) 视频

安装

您可以通过Composer安装此包

composer require aymanalhattami/filament-context-menu

使用 1: 资源页面和自定义页面

  1. 将特质 AymanAlhattami\FilamentContextMenu\PageHasContextMenu 添加到您想添加上下文菜单的页面。
  2. 然后，在页面内定义一个 getContextMenuActions 方法，该方法应返回一个Filament操作数组
use App\Filament\Resources\UserResource\Pages\CreateUser;
use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Actions\Action;
use Filament\Resources\Pages\ListRecords;

class ListUsers extends ListRecords
{
    use PageHasContextMenu;
    
    public function getContextMenuActions(): array
    {
        return [
            Action::make('Create user')
                ->url(CreateUser::getUrl())
        ];
    }
    
    // 
}

分隔符

您可以使用 AymanAlhattami\FilamentContextMenu\ContextMenuDivider 在菜单操作之间设置分隔符

use App\Filament\Resources\UserResource\Pages\CreateUser;
use App\Filament\Resources\UserResource\Pages\TrashedUsers;
use AymanAlhattami\FilamentContextMenu\ContextMenuDivider;
use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Actions\Action;
use Filament\Resources\Pages\ListRecords;

class ListUsers extends ListRecords
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            Action::make('Create user')
                ->url(CreateUser::getUrl()),
            ContextMenuDivider::make(),
            Action::make('Trashed user')
                ->url(TrashedUsers::getUrl()),
        ];
    }
    
    // 
}

创建操作

您可以使用 Filament\Actions\CreateAction，访问filament创建操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ListRecords;

class ListUsers extends ListRecords
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\CreateAction::make()
                ->model(App\Models\User::class)
                 ->form([
                    TextInput::make('name')
                        ->required(),
                    // ...
                ])
        ];
    }
    
    // 
}

编辑操作

您可以使用 Filament\Actions\EditAction，访问filament编辑操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ViewRecord;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\EditAction::make()
                ->record($this->user)
                ->form([
                    TextInput::make('name')
                        ->required(),
                    // ...
                ])
        ];
    }
    
    // 
}

查看操作

您可以使用 Filament\Actions\ViewAction，访问filament查看操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\EditRecord;

class EditUser extends EditRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\ViewAction::make()
                ->record($this->user)
                 ->form([
                    TextInput::make('name')
                        ->required(),
                    // ...
                ])
                
        ];
    }
    
    // 
}

删除操作

您可以使用 Filament\Actions\DeleteAction，访问filament删除操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ViewRecord;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\DeleteAction::make()
                ->record($this->user)
        ];
    }
    
    // 
}

复制操作

您可以使用 Filament\Actions\ReplicateAction，访问filament复制操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ViewRecord;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\ReplicateAction::make()
                ->record($this->user)
        ];
    }
    
    // 
}

强制删除操作

您可以使用 Filament\Actions\ForceDeleteAction，访问filament强制删除操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ViewRecord;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\ForceDeleteAction::make()
                ->record($this->user)
        ];
    }
    
    // 
}

恢复操作

您可以使用 Filament\Actions\RestoreAction，访问filament恢复操作获取更多信息。

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ListRecords;

class ListUsers extends ListRecords
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\RestoreAction::make()
                ->record($this->user)
        ];
    }
    
    // 
}

导入操作

您可以使用 Filament\Actions\ImportAction，访问 filament导入操作 获取更多信息。

use App\Filament\Imports\UserImporter;
use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ListRecords;

class ListUsers extends ListRecords
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\ImportAction::make()
                ->importer(UserImporter::class)
        ];
    }
    
    // 
}

导出操作

您可以使用 Filament\Actions\ExportAction，访问 filament导出操作 获取更多信息。

use App\Filament\Exports\UserExporter;
use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ListRecords;

class ListUsers extends ListRecords
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            \Filament\Actions\ExportAction::make()
                ->exporter(UserExporter::class)
        ];
    }
    
    // 
}

示例：带有模态框的操作

您可以使用filament操作与模态框一起使用

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ViewRecord;
use Filament\Actions\Action;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            Action::make('Quick edit user')
                ->form([
                    \Filament\Forms\Components\Grid::make(2)
                        ->schema([
                            TextInput::make('name'),
                            TextInput::make('email'),
                        ])
                ])
                ->action(function($data){
                    $this->getRecord()->update([
                        'name' => $data['name'],
                        'email' => $data['email'],
                    ]);
                })
        ];
    }
    
    // 
}

示例：刷新、后退和前进操作

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;
use Filament\Resources\Pages\ViewRecord;
use AymanAlhattami\FilamentContextMenu\Actions\{ RefreshAction, GoBackAction, GoForwardAction}; 

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [
            RefreshAction::make(),
            GoBackAction::make(),
            GoForwardAction::make()
        ];
    }
    
    // 
}

在资源页面和自定义页面中启用/禁用上下文菜单

方法1：要全局启用或禁用上下文菜单，您需要定义一个名为 CONTEXT_MENU_ENABLED 的环境变量，并将其值设置为 true 或 false。

方法2：您也可以在页面中定义一个名为 public static bool $contextMenuEnabled 的静态变量，并将其值设置为 true 或 false;

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;use Filament\Resources\Pages\ViewRecord;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;
    
    # enable / disable context menu
    public static bool $contextMenuEnabled = true;

    // 
    
    public static function getContextMenuActions(): array
    {
        return [];
    }
    
    // 
}

方法3：在页面中定义一个名为 isContextMenuEnabled 的静态方法

use AymanAlhattami\FilamentContextMenu\Traits\PageHasContextMenu;use Filament\Resources\Pages\ViewRecord;

class ViewUser extends ViewRecord
{
    use PageHasContextMenu;
    
    public static function isContextMenuEnabled(): bool
    {
        return true;
    }

    // 
    
    public static function getContextMenuActions(): array
    {
        return [];
    }
    
    // 
}

用法2：表格单元格

要为表格单元格添加上下文菜单，您可以使用以下列

 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuTextColumn;
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuCheckboxColumn;
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuSelectColumn;
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuColorColumn;
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuIconColumn;
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuImageColumn; 
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuTextInputColumn;
 AymanAlhattami\FilamentContextMenu\Columns\ContextMenuToggleColumn;
use Filament\Tables\Table;
use Filament\Tables\Actions\Action;
use AymanAlhattami\FilamentContextMenu\Columns\ContextMenuTextColumn;
use App\Filament\Resources\UserResource\Pages\{ ViewUser, EditUser };

//
public static function table(Table $table): Table
    {
        return $table
            ->columns([
                ContextMenuTextColumn::make('id')
                    ->searchable()
                    ->contextMenuActions(fn (Model $record) => [
                        Action::make('View user')
                            ->url(ViewUser::getUrl(['record' => $record]))
                            ->link()
                            ->icon('heroicon-o-user'),
                    ]),
                ContextMenuTextColumn::make('name')
                    ->searchable()
                    ->contextMenuActions(fn (Model $record) => [
                        Action::make('View user')
                            ->url(Pages\ViewUser::getUrl(['record' => $record]))
                            ->link()
                            ->icon('heroicon-o-user'),
                        Action::make('Edit user')
                            ->url(Pages\EditUser::getUrl(['record' => $record]))
                            ->link()
                            ->icon('heroicon-o-pencil'),
                    ])
                    ,
                ,
            ])
}

使用 AymanAlhattami\FilamentContextMenu\ContextMenuDivider 在菜单操作之间设置分隔符。

启用/禁用表格单元格上下文菜单

使用 ->contextMenuEnabled() 方法启用/禁用表格单元格的上下文菜单。

//
public static function table(Table $table): Table
    {
        return $table
            ->columns([
                ContextMenuTextColumn::make('id')
                    ->contextMenuEnabled(false)
                    ->contextMenuActions(fn (Model $record) => [
                        Action::make('View user')
                            ->url(ViewUser::getUrl(['record' => $record]))
                            ->link()
                            ->icon('heroicon-o-user'),
                    ]),
//

注意

为了使操作具有美观的样式，请使用操作的 ->link() 方法，有关更多信息，请参阅 选择触发样式

public static function getContextMenuActions(): array
{
    return [
        Action::make('Create user')
            ->url(CreateUser::getUrl())
            ->link()
        ];
}

测试

composer test

变更日志

有关最近更改的更多信息，请参阅 变更日志

贡献

有关详细信息，请参阅 贡献指南

安全漏洞

有关如何报告安全漏洞，请参阅我们的 安全策略

致谢

许可证

MIT许可证（MIT）。有关更多信息，请参阅 许可证文件