laravel8 jetstreamでprofileページを編集する

jetstreamに少しずつ慣れてきてprofileページのいじり方をアウトプットします。

#やりたいこと
・プロフィールページの写真を表示させる
・登録した名前とは別にユーザーネームを登録させる。

プロフィールページの写真を表示させるのはこの記事を参考にしました↓
https://qiita.com/kai0310/items/fc68340dd50df1e1e936

ユーザーネーム登録については
ユーザー一覧などで使う為に作っておこうと思いました。

#ユーザーネーム実装
livewireでの記事が多いですが私はvueに触れておきたいと思ったので
vueでの実装になります。

まず、UpdateProfileInfomation.vueにユーザーネームを追加します。

```UpdateProfileInfomation.php
<!-- Name -->
            <div class="col-span-6 sm:col-span-4">
                <jet-label for="name" value="名前" />
                <jet-input id="name" type="text" class="mt-1 block w-full" v-model="form.name" autocomplete="name" />
                <jet-input-error :message="form.errors.name" class="mt-2" />
            </div>

            <!-- Email -->
            <div class="col-span-6 sm:col-span-4">
                <jet-label for="email" value="メールアドレス" />
                <jet-input id="email" type="email" class="mt-1 block w-full" v-model="form.email" />
                <jet-input-error :message="form.errors.email" class="mt-2" />
            </div>

            <!-- Username -->
            <div class="col-span-6 sm:col-span-4">
                <jet-label for="username" value="ユーザーネーム" />
                <jet-input id="username" type="text" class="mt-1 block w-full" v-model="form.username" autocomplete="username" />
                <jet-input-error :message="form.errors.username" class="mt-2" />
            </div>
```


次に同じファイルのscriptタグに囲まれているdata()にusernameを追加します。

```UpdateProfileInfomation.php
        data() {
            return {
                form: this.$inertia.form({
                    _method: 'PUT',
                    name: this.user.name,
                    email: this.user.email,
                    username: this.user.username,
                    photo: null,
                }),

                photoPreview: null,
            }
        },
```
次に、DBに追加したいので
`php artisan make:migration add_username_to_users_table`
でテーブルを作成し以下のように編集します。
※usenameは任意。

```add_username_to_users_table.php
class AddUsernameToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // ユーザーとユーザーネームを紐付ける
        Schema::table('users', function (Blueprint $table) {
            $table->string('username')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
}
```
`php artisan migrate`を実行。

最後にfortify配下にあるUpdateUserProfileInfomation.phpを編集。

```UpdateUserProfileInfomation.php
public function update($user, array $input)
    {
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
            'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
            'username' => ['nullable', 'string', 'max:255'],
        ])->validateWithBag('updateProfileInformation');

        if (isset($input['photo'])) {
            $user->updateProfilePhoto($input['photo']);
        }

        if ($input['email'] !== $user->email &&
            $user instanceof MustVerifyEmail) {
            $this->updateVerifiedUser($user, $input);
        } else {
            $user->forceFill([
                'name' => $input['name'],
                'email' => $input['email'],
                'username' => $input['username'],
            ])->save();
        }
    }
```

livewireでの実装が多くこの方の動画を参考にしました。↓
https://youtu.be/d8YgWApHMfA

他にも色々動画があるので勉強していきます。
※情報に誤りがあったらすみません。