Filamentで開発2(ウィジェットの作成)

ウィジェット

既存のウィジェットを配置する

2.x系

https://filamentphp.com/docs/2.x/admin/dashboard/getting-started#customizing-the-widgets-grid

3.x系

チュートリアルにあったphp artisan filament:install --panelsを行っていれば使えるっぽい。下記の3種類がある。

  • chart-widget
  • stats-overview-widget
  • table-widget.blade

テンプレートファイルの作成

php artisan make:filament-widget UserInformation --stats-overview

リソースリンクを作るか聞かれるが、今回は作らない。(Enter)。別にDashboardとフォルダを作らなくてもOK。

以下のファイルが作成される

  • app\Filament\Widgets\UserInformation.php

ファイルの編集

<?php

namespace App\Filament\Widgets\Dashboard;

use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Card;
use Illuminate\Support\Facades\Auth;

class UserInformation extends BaseWidget
{
    protected function getCards(): array
    {
        // 現在の認証されているユーザーを取得
        $user = Auth::user();
        $onamae = '';

        if($user->hasRole('admin')){
            $onamae = 'あどみんさん';
        }
        else{
            $onamae = 'Gamerさん';
        }

        return [
            Card::make(label: $onamae, value: 100)
                ->icon(icon: 'heroicon-o-users')
                ->description(description: 'お前に権限はない!')
                ->descriptionicon(icon: 'heroicon-o-trending-up')
                ->descriptionColor(color: 'success')
                ->chart([2, 4, 7, 12, 10, 11, 3, 104])
                ->extraAttributes([
                    'class' => 'cursor-pointer'
                ]),
        ];
    }
}

アイコンについて

アイコンはBlade UI KitのBlade Iconsパッケージを使用している。また、デフォルトはHeroiconsになっているが、変更することも可能だそうだ。アイコンを検索したい場合は、下記のサイトで、Heroiconsでフィルターを掛けてキーワードを入力すればOK。

オリジナルウィジェットの作成

自分で

artisanで作る感じではなく、自分でファイル作れって感じだったよ。

⚠オリジナルウィジェットを作成するにはnpm run buildが出てくるので、今回は見送ることにした。

作成するファイル

  • src\app\Filament\Widgets
  • src\resources\views

コメントする