Updating elements in Interia

In my app I have a table of items and a button that says submit, when I press submit I thought Inertia would refresh the state in the background.

Here is the Vue file:

<template>
    <Head title="My nominations" />
    <Container>
        <div class="max-w-6xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
            <Breadcrumbs
                :breadcrumbs="[
                    { text: 'Home', link: '/' },
                    { text: 'Values Awards', link: '/' },
                    { text: 'My Nominations' },
                ]"
            />

            <div class="mb-5 flex justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        My Nominations
                    </h1>
                    <p>The nominations you have submitted.</p>
                </div>
                <div>
                    <Link
                        :href="route('values-awards.nominations.create')"
                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                        >Create nomination</Link
                    >
                </div>
            </div>

            <div class="relative overflow-x-auto">
                <table
                    class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"
                >
                    <thead
                        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
                    >
                        <tr>
                            <th scope="col" class="px-6 py-3">Nominee</th>
                            <th scope="col" class="px-6 py-3">
                                Value nominated for
                            </th>
                            <th scope="col" class="px-6 py-3">Description</th>
                            <th scope="col" class="px-6 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="nomination in nominations.data"
                            :key="nomination.id"
                            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
                        >
                            <th
                                scope="row"
                                class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
                            >
                                {{ nomination?.nominee?.name ?? "N/A" }}
                            </th>
                            <td class="px-6 py-4">
                                {{ nomination.pretty_value }}
                            </td>
                            <td
                                class="px-6 py-4"
                                v-html="nomination.description"
                            ></td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <Link
                                        v-if="!nomination.submitted_at"
                                        :href="
                                            route(
                                                'values-awards.nominations.edit',
                                                {
                                                    nomination: nomination.id,
                                                }
                                            )
                                        "
                                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                                        >Edit nomination</Link
                                    >

                                    <a
                                        href="#"
                                        v-if="!nomination.submitted_at"
                                        @click.prevent="
                                            submitNomination(nomination)
                                        "
                                        class="font-medium text-red-600 dark:text-blue-500 hover:underline"
                                        >Submit nomination</a
                                    >
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- Pagination -->
                <div class="mt-4">
                    <Pagination :links="nominations.links" />
                </div>
            </div>
        </div>
    </Container>
</template>

<script setup>
import Container from "@/Components/Container.vue";
import Breadcrumbs from "@/Components/Breadcrumbs.vue";
import Pagination from "@/Components/Pagination.vue";
import { Inertia } from "@inertiajs/inertia";
import { Head } from "@inertiajs/vue3";
import { router } from "@inertiajs/vue3";

defineProps({
    nominations: {
        type: Object,
        default: () => [],
    },
});

const submitNomination = (nomination) => {
    const url = route("values-awards.nominations.submit", nomination.id);

    Inertia.post(
        url,
        {},
        {
            preserveScroll: true,
            preserveState: true, // This ensures pagination or other states are not lost
            onSuccess: () => {
                Inertia.reload();
            },
        }
    );
};
</script>

<style lang="scss" scoped></style>

Also note that I'm using Ziggy.

Then in my Controller:

<?php
namespace App\Http\Controllers\ValuesAwards;

use App\Http\Controllers\Controller;
use App\Http\Requests\StoreNominationRequest;
use App\Http\Requests\UpdateNominationRequest;
use App\Models\Nomination;
use App\Service\UserService;
use Inertia\Inertia;
use App\Service\ValuesAwardsService;
use Carbon\Carbon;
use Illuminate\Support\Facades\Gate;

class NominationController extends Controller
{
    protected $userService;
    protected $valuesAwardsService;

    public function __construct(UserService $userService, ValuesAwardsService $valuesAwardsService)
    {
        $this->userService = $userService;
        $this->valuesAwardsService = $valuesAwardsService;
    }

    /**
     * Display a listing of the current user's submitted or in progress nominations.
     *
     * @return void
     */
    public function index()
    {
        $nominationsByUser = auth()->user()->nominationsMade()
            ->with('nominee')
            ->paginate(10)
            ->withQueryString()
            ->through(fn ($nomination) => [
                'id' => $nomination->id,
                'user_id' => $nomination->user_id,
                'nominee_id' => $nomination->nominee->name,
                'value_type' => $nomination->value_type,
                'description' => $nomination->description,
                'submitted_at' => $nomination->submitted_at,
                'nominee' => $nomination->nominee,
                'can' => [
                    'edit' => Gate::allows('update', $nomination),
                    'submit' => Gate::allows('submit', $nomination),
                ]
            ]);

        return Inertia::render('ValuesAwards/Nominations/Index', [
            'nominations' => $nominationsByUser
        ]);
    }

    /**
     * Display a page or form to allow the user to submit a nomination.
     *
     * @return void
     */
    public function create()
    {
        $users = $this->userService->getAllExceptUser(auth()->user()->id);
        $valuesLeftToVoteOn = $this->valuesAwardsService->getValuesLeft(auth()->user()->id);

        $users = $users->map(function ($user) {
            return [
                'id' => $user->id,
                'name' => $user->name
            ];
        });

        if (count($valuesLeftToVoteOn) === 0) {
            return redirect()->route('values-awards.success');
        }

        return Inertia::render('ValuesAwards/Create', [
            'users' => $users,
            'valuesLeftToVoteOn' => $valuesLeftToVoteOn
        ]);
    }

    public function edit(Nomination $nomination)
    {
        $nomination->load('nominee');

        return Inertia::render('ValuesAwards/Nominations/Edit', [
            'nomination' => $nomination,
        ]);
    }

    public function store(StoreNominationRequest $request)
    {
        $nominations = $request->input('nominations');

        try {
            foreach ($nominations as $nominationData) {
                Nomination::create([
                    'user_id' => auth()->user()->id,
                    'nominee_id' => $nominationData['nominee_id'],
                    'value_type' => $nominationData['value_type'],
                    'description' => $nominationData['description'],
                ]);
            }
        } catch (\Exception $e) {
            dd($e->getMessage());
        }

        return redirect()->back()->with('success', 'Nominations submitted successfully.');
    }

    /**
     * Update an individual nomination.
     *
     * @param \Illuminate\Http\Request $request
     * @param \App\Models\Nomination   $nomination
     *
     * @return void
     */
    public function update(UpdateNominationRequest $request, Nomination $nomination)
    {
        Gate::authorize('update', $nomination);

        $data = $request->validated();

        $nomination->update([
            'description' => $data['description']
        ]);

        return redirect()->route('values-awards.nominations.index');
    }

    /**
     * Mark a nomination as submitted.
     *
     * @param \App\Models\Nomination $nomination
     *
     * @return void
     */
    public function submit(Nomination $nomination)
    {
        Gate::authorize('submit', $nomination);

        $nomination->update([
            'submitted_at' => Carbon::now()
        ]);

        return redirect()->route('values-awards.nominations.index');
    }
}

It is my understanding that the submit function should return the Index component but with updated data. Am I being silly or is there an Inertia thing I'm not seeing?

LaryAI

1 year ago

Level 58

To ensure that your Inertia.js application updates the state correctly after submitting a nomination, you need to make sure that the data is being re-fetched and updated in the Vue component. Here are a few steps to ensure this works correctly:

Ensure the Controller Returns Updated Data: After submitting a nomination, the controller should return the updated list of nominations. This is already being done in your submit method by redirecting to the index route.
Update the Vue Component: Ensure that the Vue component correctly handles the updated data. You are using Inertia.reload() in the onSuccess callback of the Inertia.post method, which should re-fetch the data.
Check the Inertia Response: Make sure that the response from the server includes the updated data. Inertia should automatically update the component's props with the new data.

Here is a refined version of your Vue component and controller to ensure everything works as expected:

Vue Component

<template>
    <Head title="My nominations" />
    <Container>
        <div class="max-w-6xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto">
            <Breadcrumbs
                :breadcrumbs="[
                    { text: 'Home', link: '/' },
                    { text: 'Values Awards', link: '/' },
                    { text: 'My Nominations' },
                ]"
            />

            <div class="mb-5 flex justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">
                        My Nominations
                    </h1>
                    <p>The nominations you have submitted.</p>
                </div>
                <div>
                    <Link
                        :href="route('values-awards.nominations.create')"
                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                    >Create nomination</Link>
                </div>
            </div>

            <div class="relative overflow-x-auto">
                <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                            <th scope="col" class="px-6 py-3">Nominee</th>
                            <th scope="col" class="px-6 py-3">Value nominated for</th>
                            <th scope="col" class="px-6 py-3">Description</th>
                            <th scope="col" class="px-6 py-3">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="nomination in nominations.data"
                            :key="nomination.id"
                            class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
                        >
                            <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                {{ nomination?.nominee?.name ?? "N/A" }}
                            </th>
                            <td class="px-6 py-4">
                                {{ nomination.pretty_value }}
                            </td>
                            <td class="px-6 py-4" v-html="nomination.description"></td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col gap-1">
                                    <Link
                                        v-if="!nomination.submitted_at"
                                        :href="route('values-awards.nominations.edit', { nomination: nomination.id })"
                                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
                                    >Edit nomination</Link>

                                    <a
                                        href="#"
                                        v-if="!nomination.submitted_at"
                                        @click.prevent="submitNomination(nomination)"
                                        class="font-medium text-red-600 dark:text-blue-500 hover:underline"
                                    >Submit nomination</a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- Pagination -->
                <div class="mt-4">
                    <Pagination :links="nominations.links" />
                </div>
            </div>
        </div>
    </Container>
</template>

<script setup>
import Container from "@/Components/Container.vue";
import Breadcrumbs from "@/Components/Breadcrumbs.vue";
import Pagination from "@/Components/Pagination.vue";
import { Inertia } from "@inertiajs/inertia";
import { Head } from "@inertiajs/vue3";
import { router } from "@inertiajs/vue3";

defineProps({
    nominations: {
        type: Object,
        default: () => [],
    },
});

const submitNomination = (nomination) => {
    const url = route("values-awards.nominations.submit", nomination.id);

    Inertia.post(
        url,
        {},
        {
            preserveScroll: true,
            preserveState: true, // This ensures pagination or other states are not lost
            onSuccess: () => {
                Inertia.reload();
            },
        }
    );
};
</script>

<style lang="scss" scoped></style>

Controller

Ensure that the submit method in your controller returns the updated data correctly:

public function submit(Nomination $nomination)
{
    Gate::authorize('submit', $nomination);

    $nomination->update([
        'submitted_at' => Carbon::now()
    ]);

    return redirect()->route('values-awards.nominations.index');
}

Summary

The submit method in the controller updates the nomination and redirects to the index route.
The Vue component uses Inertia.reload() to re-fetch the data after the nomination is submitted.
Ensure that the index method in the controller returns the updated list of nominations.

By following these steps, your Inertia.js application should correctly update the state and display the updated list of nominations after a nomination is submitted.

Please or to participate in this conversation.