unexpectedjourney/filament-modal-resource-picker

Filament 的一个强大的资源选择器。

v1.0.2 2024-04-02 02:07 UTC

README

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

添加一个新的 ResourcePicker 表单组件,允许用户在模态中浏览和选择使用现有资源的模型。

安装

您可以通过 composer 安装此包

composer require unexpectedjourney/filament-modal-resource-picker

用法

将插件添加到您的面板提供者

use UnexpectedJourney\FilamentResourcePicker\FilamentResourcePickerPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentResourcePickerPlugin::make(),
        ])
    ])
}

然后添加组件到您的表单

use UnexpectedJourney\FilamentResourcePicker\Forms\Components\ResourcePicker;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            ResourcePicker::make('component_id')
                ->resource(ProductResource::class),
        ]);
}

这将在您的表单中添加一个按钮,点击后将打开一个包含指定在 resource() 方法中的资源表格的模态。所有列和过滤器都将可用,而所有操作都将被删除。

只需单击一条记录以选择它,然后再单击一次取消选择它。当记录被选中时,它将显示在右侧侧边栏中。您可以通过将鼠标悬停在侧边栏中的记录上并单击出现的垃圾箱图标来取消选中记录。

一旦您选择了记录(或多个选择的情况下的记录),请点击更新和关闭。模态将关闭,您将在表单中看到所选记录的反映。您可以通过将鼠标悬停在记录上并单击出现的垃圾箱图标来从选择中删除记录。

选择多个记录(和排序)

要选择多个记录,请使用 multiple() 方法。

use UnexpectedJourney\FilamentResourcePicker\Forms\Components\ResourcePicker;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            ResourcePicker::make('component_id')
                ->resource(ProductResource::class)
                ->multiple(),
        ]);
}

如果您希望选中的记录可排序,请调用 sortable() 方法。

use UnexpectedJourney\FilamentResourcePicker\Forms\Components\ResourcePicker;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            ResourcePicker::make('component_id')
                ->resource(ProductResource::class)
                ->multiple()
                ->sortable(),
        ]);
}

与 Eloquent 关系集成

您可以使用 ResourcePickerrelationship() 方法配置一个 HasMany 关系。当表单提交时,ResourcePicker 将从关系加载项目数据并将其保存回关系。如果没有传递到 relationship() 的自定义关系名称,则将使用字段名称作为关系名称。

use UnexpectedJourney\FilamentResourcePicker\Forms\Components\ResourcePicker;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            ResourcePicker::make('cross_sell_products')
                ->resource(ProductResource::class)
                ->relationship()
                ->multiple(),
        ]);
}

在关系中对项目进行排序

默认情况下,重新排序关系项是禁用的。这是因为您的相关模型需要一个排序列来存储相关记录的顺序。要启用排序,您可以使用 orderColumn() 方法,传入要存储顺序的相关模型的列名称。

use UnexpectedJourney\FilamentResourcePicker\Forms\Components\ResourcePicker;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            ResourcePicker::make('cross_sell_products')
                ->resource(ProductResource::class)
                ->relationship()
                ->multiple()
                ->orderColumn('sort')
        ]);
}

搜索所选记录

当选择多个记录时,您可以使用位于 ResourcePicker 模态右侧所选记录上方的文本输入来搜索所选记录。默认情况下,此过滤器将使用在资源上配置的 recordTitleAttribute 进行搜索。您可以通过配置资源选择器来根据资源配置用于此过滤器中搜索的列。

配置您的资源选择器

在服务提供者的 boot 方法内部调用 ResourcePickerManager::configure() 并传递一个键值数组。键是要配置的资源类的名称,值是一个闭包,它接收一个名为 $configurationResourcePickerConfiguration 参数。

use UnexpectedJourney\FilamentResourcePicker\Facades\ResourcePickerManager;

public function boot(): void
{
    ResourcePickerManager::configure([
        ProductResource::class => fn(ResourcePickerConfiguration $configuration) => $configuration,
    ]);
}

配置用于搜索结果的字段

使用 ResourcePickerConfigurationsearchColumns 方法传递一个数组,该数组包含在 ResourcePicker 模态中搜索结果时应使用的列。

use UnexpectedJourney\FilamentResourcePicker\Facades\ResourcePickerManager;

public function boot(): void
{
    ResourcePickerManager::configure([
        ProductResource::class => fn(ResourcePickerConfiguration $configuration) => $configuration
            ->searchColumns([
                'name',
                'part_number',
                'vendor.name',
            ]),
    ]);
}

配置所选记录预览

默认情况下,ResourcePicker 通过显示您的 Filament 资源上配置的记录标题来显示记录。使用 ResourcePickerConfiguration 上的 previewComponent() 方法并传递用于显示预览的 Blade 组件的名称。

use UnexpectedJourney\FilamentResourcePicker\Facades\ResourcePickerManager;

public function boot(): void
{
    ResourcePickerManager::configure([
        ProductResource::class => fn(ResourcePickerConfiguration $configuration) => $configuration
            ->previewComponent('products.card.mini')
    ]);
}

您的 Blade 组件可以通过添加一个 record 属性来访问所选记录,如文档 https://laravel.net.cn/docs/10.x/blade#data-properties-attributes 中所述。

配置自定义ResourceBrowser组件

在某些情况下,您可能想扩展ResourceBrowser组件以添加自己的功能,例如向表格添加对[高级表格](https://filamentphp.com/plugins/kenneth-sese-advanced-tables]插件)的支持。

首先创建您自己的ResourceBrowser组件,确保扩展UnexpectedJourney\FilamentResourcePicker\Livewire\ResourceBrowser

use UnexpectedJourney\FilamentResourcePicker\Livewire\ResourceBrowser;

class CustomResourceBrowser extends esourceBrowser
{
    // Add any custom functionality
}

然后配置插件以在插件面板提供者中使用您自定义的ResourceBrowser

use UnexpectedJourney\FilamentResourcePicker\FilamentResourcePickerPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentResourcePickerPlugin::make()
                ->resourceBrowserComponent(CustomResourceBrowser::class),
        ])
    ])
}

渲染钩子

Filament资源选择器暴露了一些渲染钩子,允许您将自定义HTML注入UI中。请参阅Filament文档了解如何注册渲染钩子。

可用的渲染钩子

use \UnexpectedJourney\FilamentResourcePicker\Support\ResourcePickerRenderHook
  • ResourcePickerRenderHook::RESOURCE_BROWSER_TABLE_BEFORE - 在资源浏览器表格之前

更新日志

请参阅更新日志获取有关最近更改的更多信息。

贡献

请参阅贡献指南获取详细信息。

安全漏洞

请审查我们的安全策略了解如何报告安全漏洞。

致谢

许可证

MIT许可证(MIT)。请参阅许可证文件获取更多信息。