Laravel Filamentで管理画面を作る②　一覧画面に検索条件、フィルターを設置する

こんにちは。今回はLaravel Filamentで作成した一覧画面にフィルターを追加していきます。フィルターは特にSQLでデータベースを操作することなく、Filamentの機能で実装することができます。比較的簡単に作れますので覚えていきましょう。

フリーワード検索

columnsに指定している項目に、searchableメソッドを設定します。

            ->columns([
                Tables\Columns\TextColumn::make('name')->label('顧客名')->searchable(),
                Tables\Columns\TextColumn::make('age')->label('年齢'),
            ])

テーブルの右上に虫眼鏡のテキストボックスが現れます。searchableを設定した項目を部分一致で絞込むことができます。

フィルター

項目単位にフィルターを付けることができます。

顧客テーブルに新たに「有効フラグ(is_ebabled」、「性別(gender)」を追加して、それらを絞込むフィルターを作成してみます。migrationで新たに以下のカラムを追加します。

        Schema::table('customers', function (Blueprint $table) {
            $table->integer('gender')->nullable();
            $table->boolean('is_enabled')->nullable();
        });

2択のフィルター

CustomerResourcesのtableメソッドに用意されているfiltersメソッドへ「有効フラグ(is_ebabled」に対するfilterを追加します。Filter::make()でフィルター名を指定します。これは画面内で一意でなくてはいけません。そのあとにqueryにBuilderを渡し、queryを作成します。is_enable = true条件に一致するものを抽出できます。

            ->filters([
                Filter::make('is_enabled')
                ->query(fn (Builder $query): Builder => $query->where('is_enabled', true))
            ])

Filterを追加すると、テーブルの右上に漏斗のアイコンが表示され、クリックすることでFilterを表示します。

作成したis enableが表示されます。こちらにチェックを入れると先ほど設定したフィルター条件が作動し、is_enabled = trueの顧客が絞り込まれます。２択のフィルターはTrue/False条件で絞り込むときに使用します。

選択フィルター

選択した値のみを表示する場合は、選択フィルターを使います。性別(1:男性, 2女性)に対して選択フィルターを設定してみましょう。

SelectFilter::make('gender')
    ->options([
        '1' => '男性',
        '2' => '女性',
    ])
])

フィルターを作成することができました。「ALL」、「男性」、「女性」の中から選択できます。

Laravel

Posted by kobainmac