inertiajs / pingcrm

A demo application to illustrate how Inertia.js works.
http://demo.inertiajs.com
MIT License
2.14k stars 781 forks source link

Partial reloads example #100

Closed RobertBoes closed 3 years ago

RobertBoes commented 3 years ago

At Discord there was some confusion about partial reloads. The use-case that was mention was quite interesting: a sidebar list with all items and an edit screen next to it. There was quite some discussion and trial/error going on, because this only seemed possible to do with inertiajs/inertia#315 or with persistent layouts. @chefhasteeth came up with the solution to leverage Partial Reloads for this, by lazy evaluating the whole list it's possible to load a sub-view without loading the full list again. At first it didn't seem to work, but later we managed to get it working :)

image

image

In my own project I would combine the two routes into a single route, and then using an optional parameter to load the individual report. But the example in this PR is more in-line with the rest of the controllers and might give a better overview to users looking for examples.

public function index(string $reportDate = null)
{
    return Inertia::render('Reports/Index', [
        'reports' => function() {
            return $this->reports();
        },
        'report' => function() {
            if (is_null($reportDate)) {
                return null;
            }

            [$year, $month] = explode('-', $reportDate);
            return [
                'date' => $reportDate,
                'contacts' => Contact::latest()
                    ->with('organization')
                    ->whereYear('created_at', '=', $year)
                    ->whereMonth('created_at', '=', $month)
                    ->get()
                    ->transform(function ($contact) {
                        return [
                            'id' => $contact->id,
                            'name' => $contact->name,
                            'phone' => $contact->phone,
                            'city' => $contact->city,
                            'region' => $contact->region,
                            'deleted_at' => $contact->deleted_at,
                            'organization' => $contact->organization ? $contact->organization->only('name', 'id') : null,
                        ];
                    }),
            ],
        },
    ]);
}

I hope this would be a good addition to the demo app :)

ed-mor commented 3 years ago

Approved...

reinink commented 3 years ago

Hey there @RobertBoes! Thanks so much for your ongoing work with Inertia.js, and for this contribution. However, in the interest of keeping this particular demo as simple as possible, I think I'm going to pass on this PR. It might make for an excellent blog post though! Hope that makes sense. 👍