ことはじめ

Laravelのユーザー認証ライブラリにある「JetStream」便利ですよね。
コマンド一発でそれっぽい画面が出来てテーブルも出来上がって素敵ですよね。
ただ、必要な項目はそれなりにそろっていても独自に拡張したいことはあるはず。
今日はアカウント設定周りでの拡張方法について学んだ事をシェア。
前提として「JetStream」導入済みかつカスタマイズしたい方向けのお話になります。

今回こんなことを更新画面でカスタマイズしたい。

更新画面であらかじめマスターデータを取得、プルダウンリストにしてユーザーに選択させたい

はい、よくあるやつですよね。「JetStream」ライブラリのカスタマイズはlaravelのリファレンスにも
用意はされてましたね。artisan コマンドでpublishしてあげると、view側のカスタマイズはできるような書きっぷり
ですね。

php artisan vendor:publish --tag=jetstream-views

でも今回治したいのはview側ではなくサーバー側のロジック修正したい。

grepしてみると初期表示周りはUpdateProfileInformationForm.phpが修正箇所みたい。
手順ものっていなく詰んだっぽい…検索してみた。

結論この参考サイトで救われた

どうやら同じように拡張したいけど、やり方わからんという仲間がいて
そして猛者が回答してくれている。ありがとう。

それによると、

app\Http\配下にLivewireフォルダーを作成する。
作成したLivewireフォルダーにUpdateProfileInformationForm.phpを作成する
\vendor\laravel\jetstream\src\Http\Livewire\UpdateProfileInformationForm.php　を作成したファイルにコピーする　※namespaceとかは適宜置き換えてね。
JetstreamServiceProvider.php の boot メソッドに作成したファイルを指定する。

JetstreamServiceProvider.php

<?php

namespace App\Providers;

use App\Actions\Jetstream\DeleteUser;
use Illuminate\Support\ServiceProvider;
use Laravel\Jetstream\Jetstream;
use App\Http\Livewire\UpdateProfileInformationForm; // こいつが追加したやつ
use Livewire\Livewire;

class JetstreamServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $this->configurePermissions();
        Livewire::component('profile.update-profile-information-form'
                            , UpdateProfileInformationForm::class); // 追加
        Jetstream::deleteUsersUsing(DeleteUser::class);
    }
}

動作確認

作成したファイルUpdateProfileInformationForm.phpにddで何かしら書いて呼ばれているか確認すると
良い。

ちなみに

画面への連携も書いておく。こんな感じに書いておくと画面に連携されてきます。

UpdateProfileInformationForm.php

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Facades\Auth;
use Laravel\Fortify\Contracts\UpdatesUserProfileInformation;
use Livewire\Component;
use Livewire\WithFileUploads;


class UpdateProfileInformationForm extends Component
{
    use WithFileUploads;

    // 色々省略
    /**
     * Prepare the component.
     *
     * @return void
     */
    public function mount()
    {
        $this->state = Auth::user()->withoutRelations()->toArray();
        $sample[] = array('list1'=>'リストa');
        $sample[] = array('list1'=>'リストb');
        $sample[] = array('list1'=>'リストc');
        $this->sample = $sample;

    }
    // 色々省略
}

update-profile-information-form.blade.php

<x-jet-form-section submit="updateProfileInformation">
    <x-slot name="title">
        {{ __('Profile Information') }}
    </x-slot>

    <x-slot name="description">
        {{ __('Update your account\'s profile information and email address.') }}
    </x-slot>

    <x-slot name="form">
        <!-- Name -->
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="name" value="{{ __('Name') }}" />
            <x-jet-input id="name" type="text" class="mt-1 block w-full" wire:model.defer="state.name" autocomplete="name" />
            <x-jet-input-error for="name" class="mt-2" />
        </div>

        <!-- Email -->
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="email" value="{{ __('Email') }}" />
            <x-jet-input id="email" type="email" class="mt-1 block w-full" wire:model.defer="state.email" />
            <x-jet-input-error for="email" class="mt-2" />
        </div>

        <!-- sample-->
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="sample" value="所属チーム" />
            <select id="sample" wire:model.defer="state.sample" lass="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm">
                <option value="">null</option>
                @foreach ($this->sample as $row)
                <option value="{{ $row['list1'] }}"> {{ $row['list1'] }}</option>
                @endforeach
            </select>
            <x-jet-input-error for="sample" class="mt-2" />
        </div>
    </x-slot>
</x-jet-form-section>

JetStreamのUpdateProfileInformationFormの拡張方法