Jetstream inertia - adding new fields to manage profile

To add new fields to the "Profile" section in a Jetstream Inertia application, you'll need to modify a few files to pass the necessary data and handle the update logic. Here's a step-by-step guide to add a dropdown for selecting a soccer team in the UpdateProfileInformationForm.vue component:

1. Pass the Teams Data to the Vue Component:

First, you need to pass the list of soccer teams to the Vue component. You can do this by modifying the handle method of the Inertia\Jetstream\Http\Controllers\Inertia\UserProfileController to include the teams.

public function show(Request $request)
{
    return Inertia::render('Profile/Show', [
        'sessions' => $this->sessions($request)->all(),
        'teams' => Team::all(), // Assuming you have a Team model with the necessary data
    ]);
}

1. Modify the UpdateProfileInformationForm.vue Component:

Next, you'll need to add the dropdown to the UpdateProfileInformationForm.vue component.

<template>
    <!-- ... other fields ... -->
    <div class="col-span-6 sm:col-span-4">
        <jet-label for="team" value="Soccer Team" />
        <select v-model="form.team_id" id="team" class="block w-full mt-1">
            <option value="" disabled>Select a team</option>
            <option v-for="team in teams" :key="team.id" :value="team.id">{{ team.name }}</option>
        </select>
        <jet-input-error :message="form.errors.team_id" class="mt-2" />
    </div>
    <!-- ... other fields ... -->
</template>

<script>
export default {
    props: ['user', 'teams'],
    data() {
        return {
            form: this.$inertia.form({
                _method: 'PUT',
                name: this.user.name,
                email: this.user.email,
                team_id: this.user.team_id, // Add this line
                // ... other fields ...
            }),
        };
    },
    // ... other methods ...
};
</script>

1. Update the User Model:

Ensure that the team_id field is fillable in your User model.

class User extends Authenticatable
{
    // ...

    protected $fillable = [
        'name',
        'email',
        'password',
        'team_id', // Add this line
    ];

    // ...
}

1. Handle the Update Logic:

Modify the updateProfileInformation method in the UpdatesUserProfileInformation action to handle the new team_id field.

class UpdatesUserProfileInformation
{
    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),
            ],
            'team_id' => ['required', 'exists:teams,id'], // Add this validation rule
        ])->validateWithBag('updateProfileInformation');

        if (isset($input['team_id'])) {
            $user->forceFill([
                'team_id' => $input['team_id'],
            ])->save();
        }

        // ... existing update logic ...
    }
}

1. Run Migrations (if necessary):

If you haven't already, make sure to create a migration for the team_id column in the users table and run the migration.

Schema::table('users', function (Blueprint $table) {
    $table->unsignedBigInteger('team_id')->nullable();
    $table->foreign('team_id')->references('id')->on('teams');
});

After making these changes, you should be able to select a soccer team from a dropdown in the "Profile" section of your Jetstream Inertia application. Remember to replace Team::all() with the actual query you need to retrieve the teams, and ensure that the Team model exists and is properly set up.