Laravel Filament を WSL2 docker sail laravel12 インストールと、1対Nサンプルアプリ、Filamentリレーションマネージャー

1対N（filament-relation-manager） サンプルアプリづくり

ubuntu起動

laravelインストール

curl -s https://laravel.build/filavel | bash

cd filavel

code . #VS CODE 起動

.env の編集

# DB_CONNECTION=mysql
# DB_HOST=mysql
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=sail
# DB_PASSWORD=password
DB_CONNECTION=sqlite

sail up -d

http://localhost/

sail artisan migrate #エラー出る場合マイグレーション実行

filamentインストール

sail composer require filament/filament:"^3.2" -W

filamentのPanel Builderをインストール

sail artisan filament:install --panels

admin、Yesと入力

http://localhost/admin/login

Filament用管理ユーザ作成

sail artisan migrate

sail artisan make:filament-user

admin

admin@test.co.jp

password

サンプルモデル作成

sail artisan make:model -m Post

sail artisan make:model -m Tag

モデルのマイグレーション作成

database/migrations/yyyy_mm_dd_hhmmss_create_posts_table.php

    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');	//追加
            $table->text('body');	    //追加
            $table->timestamps();
        });
    }

database/migrations/yyyy_mm_dd_hhmmss_create_tags_table.php

    public function up(): void
    {
        Schema::create('tags', function (Blueprint $table) {
            $table->id();
            $table->string('name')->unique();	//追加
            $table->timestamps();
        });
    }

モデルリレーションシップテーブル作成

sail artisan make:migration create_post_tag_table

database/migrations/yyyy_mm_dd_hhmmss_create_post_tag_table.php

    public function up(): void
    {
        Schema::create('post_tag', function (Blueprint $table) {
            $table->id();
            $table->unsignedInteger('post_id');
            $table->unsignedInteger('tag_id');
            $table->foreign('post_id')->references('id')->on('posts')->cascadeOnDelete();
            $table->foreign('tag_id')->references('id')->on('tags')->cascadeOnDelete();
            $table->unique(['post_id','tag_id']);
            $table->timestamps();
        });
    }

マイグレーション実行

sail artisan migrate

モデルの設定

app/Models/Post.php

class Post extends Model
{
    //
    use HasFactory;
    protected $fillable = ['title', 'body'];  //追加
    
    //下記も追加
    public function tags() 
    {
        return $this->belongsToMany(Tag::class);
    }
}

app/Models/Tag.php

class Tag extends Model
{
    //
    use HasFactory;
    protected $fillable = ['name'];  //追加
}

Filament用管理リソースを作成する

Filamentの管理画面でモデルのデータが扱えるようにリソースを作成します。

※参考）凄く楽する方法は、

https://github.com/askdkc/filamentphp_howto/blob/main/sub/easiest-way.md

リソース作成の基本を見たい人は、このまま手順を進めてください

sail artisan make:filament-resource Post

sail artisan make:filament-resource Tag

ファイルの編集

app/Filament/Resources/PostResource.php

public static function form(Form $form): Form
{
    return $form
        ->schema([
            // ここに編集したい項目を追加する
            Forms\Components\TextInput::make('title')->required()->label('タイトル')
                ->hint("ブログのタイトル入力"),
            Forms\Components\Textarea::make('body')->required()->label('本文')
                ->helperText('本文を入力します')
                ->columnSpan('full'),
        ]);
}

public static function table(Table $table): Table
{
    return $table
        ->columns([
            // ここに表示したい項目を追加する
            Tables\Columns\TextColumn::make('title')->label('タイトル'),
            Tables\Columns\TextColumn::make('body')->label('本文'),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}

app/Filament/Resources/TagResource.php

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // ここに編集したい項目を追加する
                Forms\Components\TextInput::make('name')->required()->label('タグ')
                ->hint("タグ名を入力"),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                // ここに表示したい項目を追加する
                Tables\Columns\TextColumn::make('name')->label('タグ'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

postをクリックして下記のエラーが出たら

モデル Post.php、Tag.php に以下を追加

use Illuminate\Database\Eloquent\Factories\HasFactory;

データがまだない状態。New postクリック

データを登録してみる

Filamentメニューの日本語化

.envの編集

APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP

リロードすると、

Filamentリレーションマネージャーで1対N

Filamentリレーションリソースの追加

sail artisan make:filament-relation-manager PostResource tags name

PostモデルからTagの新規作成＆割当を可能にするボタン追加

app/Filament/Resources/PostResource/RelationManagers/TagsRelationManager.php

    public function table(Table $table): Table
    {
        return $table
            ->recordTitleAttribute('name')
            ->columns([
                Tables\Columns\TextColumn::make('name'),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make(),
                Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'), //追加
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

PostResourceにTagとのリレーションシップを追加

app/Filament/Resources/PostResource.php

    public static function getRelations(): array
    {
        return [
            //
            PostResource\RelationManagers\TagsRelationManager::class, //追加
        ];
    }

Post画面でデータを編集モードで開くと、

そこで、Postの編集画面で「タグ追加」ボタンを押下すると、エラーとなる。

解決方法は、Tag.phpに、

class Tag extends Model
{
    //
    use HasFactory;
    protected $fillable = ['name'];  //追加

    //下記も追加
    public function posts() 
    {
        return $this->belongsToMany(Post::class);
    }
    
}

タグの選択画面も表示OK

注意）リレーションシップの付け替えについて

この画面の削除ボタンをクリックするとリレーションシップが外れるのではなく、sampleタグ自体が削除されてしまいます。

これを防ぐには TagsRelationManager.php を以下のように、Delete → Detach にする。

app/Filament/Resources/PostResource/RelationManagers/TagsRelationManager.php

    public function table(Table $table): Table
    {
        return $table
            ->recordTitleAttribute('name')
            ->columns([
                Tables\Columns\TextColumn::make('name'),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make(),
                Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'), //追加
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                // Tables\Actions\DeleteAction::make(), //Delete コメント
                Tables\Actions\DetachAction::make(),  //Detach 追加
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

削除→解除に変わった。

参考

https://github.com/askdkc/filamentphp_howto

https://filamentphp.com