Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

arcanaer's avatar

Inertia CRUD in single page but change query string

Hello, i'm trying to create a web to manage tasks, like trello, notion, etc. But i wan that user can have the ability to copy the link and share with their teammates.

I've noticed that when trello open a task to edit, it change the URL params, but stay in the same view. I'm trying to make my website as real time as possible. So everything runs on the same page, a user has boards, and when they click on a task, a modal opens for them to edit. The flow would be the following:

0 - Show the board (current route is /tools/boards/7/)

1 - Click on the task

2 - Open Modal

3 - Change Url params. ( route should be /tools/boards/7/25{or taskid})

** Example images https://ibb.co/TYhj6kZ https://ibb.co/kgH4Jmc

First I'm trying to define a store to hold the task to be modified, then I redirect to the route for the parameters to change.

const editTask = () => {
    storeBoards.value.showModal = true;
    storeBoards.value.task = props.task;
    router.visit(route('tools.boards.show', { board:props.task?.board_id, task:props.task?.id }), {
        preserveState:true,
    })
}

Also i've trying to redirect directly with Link component

<Link preserve-state :href="route('tools.boards.show', { board:task.board_id, task:task.id })" @click="store.showEditTaskModal = true; store.modalEditingTaskId = task.id" class="text-sm">{{ task.title }}</Link>

The problem? If I change to slow 3g or fast 4g in chrome, the page is not interactive until the server gives a response. In the first example it is, but the url changes until the new page finishes loading. I was also thinking of having the first method but using something like:

const editTask = () => {
    storeBoards.value.showModal = true;
    storeBoards.value.task = props.task;
    let url = route('tools.boards.show', {board:props.task.id, task:props.task.id});
    window.history.pushState(null, "", url)    
    router.visit(route('tools.boards.show', { board:props.task?.board_id, task:props.task?.id }), {
        preserveState:true,
    })
}

Suggestions?

0 likes
0 replies

Please or to participate in this conversation.