【Filament v3】ボタンをクリックしたら関数を呼び出して結果をモーダルに表示

自分用メモシリーズ。
LaravelとFilamentはまだ勉強中なので、「とりあえず動く」を目標にやっています。
自分用メモシリーズの記事は参考程度にしてください。
Filamentのバージョンは3.xです。

はじめに

(1)Filamentには独自ページを作成する機能があります。
管理画面に「設定」などのページを追加することができます。
Pages - Panel Builder - Filament
ページを作成すると、2つのファイルが作成されます。

トップ/app/Filament/Pages/Settings.php（←ページクラス）

トップ/resources/views/filament/pages/upload.settings.php（ビュー）

　
(2)上記で作成したページに、ある関数を呼び出すボタンを設置したいと思います。
ボタンはActionパッケージで作成することができます。
Installation - Actions - Filament
　
(3)そして、最後に関数の返り値をモーダルで表示させます。
　
これらの３ステップが長い長い道のりだったのでメモします。

答え

まずは動いたものから下記に表示します。ダメな例はこのあと下に書いていきます。

ページクラス側

こちらは、Pages - Panel Builder - Filamentの解説に従って作成したページクラスです。ただ、冒頭のuse …などの構成はAdding an action to a Livewire component - Actions - Filamentに従って追加しています。
よく分かりませんがFormを作成したときに、Livewireのページに従ったら上手くいったからです。
　
流れとしては、hogeAction()でボタンを設置。クリックされたらstartHogeFuga()を呼び出します。
startHogeFuga()では、別の場所に作ったHogeServiceのfuga()という関数を呼び出しています。返り値をモーダルに入れ、表示させています。

<?php

namespace App\Filament\Pages;

use Filament\Pages\Page;

use Filament\Actions\Action;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;
use Illuminate\Contracts\View\View;

use App\Services\HogeService;

class Settings extends Page implements HasForms, HasActions
{
	use InteractsWithActions;
	use InteractsWithForms;

	protected static ?string $navigationIcon = 'heroicon-o-document-text';

	protected static string $view = 'filament.pages.settings';

	public $result;

	public function hogeAction(): Action
	{

		return Action::make('start')
		->action("startHogeFuga");
	}

	public function startHogeFuga(): void
	{
		$service = new HogeService();
		$this->result = $service->fuga();
		$this->dispatch('open-modal', id: 'fuga-result');
	}

}

ビュー側

こちらはまず$this->hogeActionでボタンを表示させています。
<x-filament::modal >のところでモーダルを仕込んでおきます。
id="fuga-result"の属性を付与して、ページクラスでモーダルを指定して起動（dispatch()）することができるというわけです。
$resultは文字列ですが、HTML形式で返ってくるようにしてるので、{!! !!}で囲むとそのまま表示することができます。

<x-filament-panels::page>
{{ $this->hogeAction }}

<x-filament::modal id="fuga-result">
 @if ($result)
	{!! $result !!}
@endif
</x-filament::modal>

</x-filament-panels::page>

ダメな例

関数動かないシリーズ


//その１
Action::make('start')
->action(fn () => $this->startHogeFuga());

//その２
Action::make('start')
->action(function(){
	$service = new HogeService();
	$this->result = $service->fuga();
});

解説のとおりにやってるつもりですが･･･なぜか動かなかった。きっとどこかがおかしいんでしょう。

モーダル開かないシリーズ


Action::make('start')
->action(fn (HogeService $hoge) => $hoge->fuga())
->modalContent(view('filament.pages.settings'));

//確認用モーダルも動かない
Action::make('start')
->requiresConfirmation();

確認用モーダルも開かないのは謎ですね。

動くけど、ページの表示時にstartHogeFuga()が勝手に動作してしまう


function hogeAction(){
	$this->startHogeFuga();

	return Action::make('start');
}

function startHogeFuga(){
	/* */
}

最初これでできた！と思ったけど、ページの表示時にも関数が呼び出されてしまうので却下になりました。