如何表格操作触发后刷新插件

July 2, 2023 · 5 min read

Full Stack Developer

本文将介绍如何使用 Filament 插件(Widget)创建统计卡片，用来展示用户统计信息。我们将展示如何使用 Livewire 生命周期 hook 和事件，在用户表修改时刷新插件。

安装

首先，安装一个名为 filament-widget-examples 的 Laravel 应用：

laravel new filament-widget-examples

然后使用命令安装 Filament:

cd filament-widget-examples
composer require filament/filament

Filament 推荐添加以下内容到 composer.json 的 post-update-cmd:

"post-update-cmd": [
    // ...
    "@php artisan filament:upgrade"
]

编辑用户 Migration 文件：

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->timestamp('email_verified_at')->nullable();
    $table->string('password');
    $table->boolean('is_admin');
    $table->boolean('is_active');
    $table->rememberToken();
    $table->timestamps();
});

编辑用户工厂 definition 方法：

//database\factories\UserFactory.php
public function definition()
{
    return [
        'name' => fake()->name(),
        'email' => fake()->unique()->safeEmail(),
        'email_verified_at' => now(),
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),
        'is_admin' => fake()->boolean(),
        'is_active' => fake()->boolean(),
    ];
}

编辑 DatabaseSeeder 的 run 方法：

//database\seeders\DatabaseSeeder.php
public function run()
{
    \App\Models\User::factory(100)->create();
}

编辑用户模型：

//app/Models/User.php
protected $fillable = [
    'name',
    'email',
    'password',
    'is_active',
    'is_admin'
];

运行 migrate 命令：

php artisan migrate --seed

用户资源 User Resource

添加 User Resource 和插件 Widget:

php artisan make:filament-resource User --simple
php artisan make:filament-widget UserOverview --resource=UserResource --stats-overview

编辑用户资源文件：

表单：

//app/Filament/Resources/UserResource.php
public static function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255),
            Forms\Components\TextInput::make('email')
                ->email()
                ->required()
                ->maxLength(255),
            Forms\Components\Toggle::make('is_admin'),
            Forms\Components\Toggle::make('is_active'),
        ]);
}

表格：

//app/Filament/Resources/UserResource.php
public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\TextColumn::make('name'),
            Tables\Columns\TextColumn::make('email'),
            Tables\Columns\IconColumn::make('is_admin')
                ->boolean(),
            Tables\Columns\IconColumn::make('is_active')
                ->boolean(),
            Tables\Columns\TextColumn::make('created_at')
                ->date(),
            Tables\Columns\TextColumn::make('updated_at')
                ->date(),
        ])
        ->filters([
            Tables\Filters\TernaryFilter::make('is_admin'),
            Tables\Filters\TernaryFilter::make('is_active'),
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
            Tables\Actions\DeleteAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\DeleteBulkAction::make(),
        ]);
}

引入插件

添加 getWidgets 方法：

//app/Filament/Resources/UserResource.php
use App\Filament\Resources\UserResource\Widgets\UserOverview;
public static function getWidgets(): array
{
    return [
        UserOverview::class,
    ];
}

添加 getHeaderWidgets 方法：

//app/Filament/Resources/UserResource/Pages/ManageUsers.php
protected function getHeaderWidgets(): array
{
    return [
        UserOverview::class,
    ];
}

插件卡片

你可以使用插件卡，在一个插件内展示许多许多不同的统计。编辑用户概览插件：

//app/Filament/Resources/UserResource/Widgets/UserOverview.php
class UserOverview extends BaseWidget
{
    protected static ?string $pollingInterval = null;
 
    protected function getCards(): array
    {
        $usersCount = User::selectRaw('
            COUNT(*) as total,
            SUM(CASE WHEN is_admin THEN 1 ELSE 0 END) AS admin,
            SUM(CASE WHEN is_active THEN 1 ELSE 0 END) AS active
        ')->first();
 
        return [
            Card::make('Total', $usersCount->total)
                ->color('primary')
                ->description('Total users'),
 
            Card::make('Admin', $usersCount->admin)
                ->color('danger')
                ->description('Admin users'),
 
            Card::make('Active', $usersCount->active)
                ->color('success')
                ->description('Active users'),
        ];
    }
}

到浏览器中查看用户资源。其中有三个头部插件：Total users, Admin users 及 Active users.

你可以在用户表中删除用户，表格里的数据更新了，但是这些插件里的信息不会更新。你需要手动刷新才能更新插件。

自动刷新插件

Livewire 生命周期

每个 Livewire 组件都有生命周期。生命周期狗子让你可以在组件生命周期的任意一个地方运行代码。我们可以使用 Updated 钩子，在 Livewire 组件更新后运行。

Livewire 事件监听器

监听器是 key->value 键值对，key 是为监听的事件，值是组件上调用的方法。

我们可以使用 $refresh 魔术操作重新渲染组件。

在 UserOverviewWidget 文件中添加一个监听器：

//app/Filament/Resources/UserResource/Widgets/UserOverview.php
protected $listeners = ['updateUserOverview' => '$refresh'];

updated 钩子方法提供了两个属性：

$name: 触发的操作的名称。
$value: 触发的操作的值。

我们将使用 $name 属性监听两个表格事件：

mountedTableAction: 单个删除操作点击后执行。
mountedTableBulkAction: 批量删除操作点击后执行。

然后，我们可以在 updated 方法使用这些名字以及触发 updateUserOverview 事件：

//app/Filament/Resources/UserResource/Pages/ManageUsers.php
public function updated($name)
{
    if (Str::of($name)->contains(['mountedTableAction', 'mountedTableBulkAction'])) {
        $this->emit('updateUserOverview');
    }
}

现在，每次删除操作点击后都会更新插件。

你可以检查表格事件，比如：

//text input in the top right of the table
if (Str::of($name)->contains('tableSearchQuery')) {
    ...
}
 
//the table filter form
if (Str::of($name)->contains('tableFilters')) {
    ...
}

安装