Laravel Filamentユーザー画面でプロフィール編集画面を作ってみた

前提

• Laravel Version11
• Docker for Windows Desktop
• Ubuntu環境下でLaravel Sailを使用
• 過去記事「Filamentでユーザー画面を作ってみた」の状態

概要

Laravel Filamentでユーザー用の画面を作ってみたが、通常だと画面右上のアバターアイコンをクリックするとプロフィール編集できるボタンがあるんだけど、それが無いので作ってみました。
なお、ユーザー画面にログインした直後、アバターアイコンがクリックされたような状態のようで、アバターメニューが表示された状態になっていて、しかも表示位置が変です。とりあえず、この問題は後回しにします。

参考

• https://filamentphp.com/docs/3.x/panels/users

策１

公式ドキュメントにパネルの認証機能設定に関する説明で以下の説明がありました。
簡単に機能追加できるようです。

Filament公式ドキュメント

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->login()
        ->registration()
        ->passwordReset()
        ->emailVerification()
        ->profile();
}

で、とりあえず、以下のように設定してみました。

/app/Providers/Filament/CustomerPanelProvider.php

class CustomerPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('customer')
            ->path('customer')
            ・・・
            ->authMiddleware([
                Authenticate::class,
            ])
            ->profile();//ここを追加
    }
}

アバターアイコンをクリックすると、こんな感じでProfileメニューが表示されました。

で、Profileをクリックすると、こんな感じの画面が表示されました。

策２

公式ドキュメントには他にも以下の説明がありました。

Filament公式ドキュメント

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->profile(isSimple: false);
}

これも試してみました。

/app/Providers/Filament/CustomerPanelProvider.php

class CustomerPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('customer')
            ->path('customer')
            ・・・
            ->authMiddleware([
                Authenticate::class,
            ])
            ->profile(isSimple: false);//ここを設定
    }
}

アバターアイコンをクリックすると、こんな感じです。策１と同じ

で、Profileをクリックすると、こんな感じの画面が表示されました。

策３

公式ドキュメントには他にも以下の説明がありました。

Filament公式ドキュメント

use App\Filament\Pages\Auth\EditProfile;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->profile(EditProfile::class);
}

これは、自分でプロフィール画面を作る感じです。
公式ドキュメントに例がありましたので、同じように作ってみました。

先ずはパネルの設定

/app/Providers/Filament/CustomerPanelProvider.php

・・・
use App\Filament\Pages\Auth\EditProfile;//ここを追加
・・・
class CustomerPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->id('customer')
            ->path('customer')
            ・・・
            ->authMiddleware([
                Authenticate::class,
            ])
            ->profile(EditProfile::class);//ここを設定
    }
}

次にプロフィール編集画面の作成

/app/Filament/Pages/Auth/EditProfile.php

<?php
 
namespace App\Filament\Pages\Auth;
 
use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use Filament\Pages\Auth\EditProfile as BaseEditProfile;
 
class EditProfile extends BaseEditProfile
{
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('username')
                    ->required()
                    ->maxLength(255),
                $this->getNameFormComponent(),
                $this->getEmailFormComponent(),
                $this->getPasswordFormComponent(),
                $this->getPasswordConfirmationFormComponent(),
            ]);
    }
}

で、
アバターアイコンをクリックすると、こんな感じです。策１、策２と同じ

で、Profileをクリックすると、こんな感じの画面が表示されました。
策１と同じような感じですね。設定できる項目は勉強しておきます。