How to return back to a paginated page?

612 views Asked by At

Using Laraver Inertia Vue

I use a vue with a paginated list of posts. For each post I only load a few column from the database such as title and author. Then I visit url to load the details of a chosen post in the list. I do so using visit url with the lazy loading functionality. After that I am ready to edit the post without reloading the full page. Once the post is updated I submit it and correctly save it into the database. After that I can return back to the page. Everything happens without any reloading on the list. In order to be able to load the details on a specific post lazily, my on controller is like this.

class PostController extends Controller
{
    public function Index($id = null)
    {
        $this->id = $id;
        return Inertia::render('Posts/Index', [
            'posts' => Post::select('id', 'title',  'created_at')
                ->addSelect([
                    'userfirstname' => User::select('firstname')->whereColumn('id', 'posts.user_id'),
                    'userlastname' => User::select('familyname')->whereColumn('id', 'posts.user_id')
                ])
                ->orderBy('created_at', 'DESC')
                ->paginate(10),

            //lazily evaluated
            'details' => function () {
                if ($this->id) {
                    $post = Post::find($this->id);
                } else {
                    $post = null;
                }
                return $post;
            },
        ]);
    }

    public function Update(Request $request)
    {
       $request->validate([
           'id'=>'required',
           'abstract'=>'required',
           //TODO :to be completed
       ]);
       $post=Post::find($request->input('id'));
       $post->abstract=$request->input('abstract');
       $post->title=$request->input('title');
       //TODO to be completed
       $post->save();
       return Redirect::back();
    }
}

and the method I use to load page and details are these:

    //visit this url to get the lazzy evaluation of post details
    if (to_visit) {
        this.$inertia
            .visit(`/posts/${to_visit}`, {
                method: "get",
                data: {},
                replace: false,
                preserveState: true,
                preserveScroll: true,
                only: ["details"],
                headers: {}
            })
            .then(to_visit => {
                console.log("fetched " + this.details.title);
            });
    }

},
updatePost(form) {
    console.log("form submitted");
    this.$inertia.visit(`/post`, {
        method: "put",
        data: form,
        replace: false,
        preserveState: true,
        preserveScroll: true,
        only: [],
        headers: {}
    });
},

This works fine as long as the particular post I update is on the first page, but when it is on the any other paginated page on the list, post saving is ok but I don't return on the paginated page but always on the first one. Would be happy to ear about a solution!

0

There are 0 answers