#Keeping menus open when switching to editing page.

1 messages · Page 1 of 1 (latest)

cunning chasm
#

I have a view with two parts in my website:

There are going to be two different parts to this view:

A file-hierarchy-like thing where you can click through tasks and reveal their subtasks

and the view part where you can see the information on the selected task and update it.

From doing the bootcamp that had the chirps, I got the impression that it was good if I separated (into two view files) the “view”-view, where you only look at a task, and the “edit”-view where you edit the task.

When my user has clicked on some tasks, and has selected a subtask that they want to edit, how can I keep the state of hierarchy the same, with the same collapsed/expanded tasks, but switch the second half (the “view”-view) to a editing view where they get to edit?

|| I am guessing it is a little tricky because menus tend to collapse when you reload/switch pages, and I’d like to keep it seamless. ||

gritty kernel
stray saffron
#

Or you could look at using something like Inertia, which doesn't do full page reloads, so won't lose the menu position, or which items have been collapsed/expanded.

cunning chasm
#

Thank you @gritty kernel and @stray saffron
Which one is better? And can I somehow use this with my breeze app I am building?

stray saffron
#

there is no "better" between the two

#

its just two options, depending on what you want one will be better for you

#

do you want to write your frontend using javascript and being able to decouple it from your backend eventually

or

do you want to build it primarily with php and only use bits of javascript for possible interactivity

?

#

based on the answer, you will choose either option

cunning chasm
stray saffron
#

probably?

cunning chasm
#

It’s my first time using laravel, I just thought I would use breeze because I needed people to have a user. I don’t really understand what exactly Livewire or Inertia are going to do in my app. Is there anything I should read?

stray saffron
#

okay so breeze is for authentication scaffoldign

#

inertia/livewire add what you want: no page refreshes and keeping the menu or oder things open if necessary

cunning chasm
#

So I can add inertia/livewire with my breeze app?

stray saffron
#

you can, breeze comes with an inertia setup IIRC even livewire?

normal jetty
#

Another option is to look into alpine.js if you don’t want to learn a whole new thing. Alpine.js is good for things like side menus, and opening/showing things, and you can use a plug-in called persist to remember it’s last state on page refresh

stray saffron
#

Breeze provides a wonderful starting point for beginning a fresh Laravel application and is also a great choice for projects that plan to take their Blade templates to the next level with Laravel Livewire.

#

well okay you need to install livewire yourself

#

but works

stray saffron
#

but you will have a screen flicker inbetween

normal jetty
#

Not if you cloak it

stray saffron
#

sounds hacky lol

normal jetty
#

It’s in the docs 😂

stray saffron
#

i dont know how it will do that if a page navigation in blade will cause the page to reload completely

#

you will have a flicker

cunning chasm
#

Alright thank you, I’ll look at alpine, inertia and livewire.

normal jetty
#

I use alpine. Don’t have a flicker ☺️. I didn’t want to learn livewire. Just giving another option ✌️

stray saffron
#

if you do a route - navigate in blade, the page will reload no?

#

so it probably is for a short moment, white?

cunning chasm
#

Wait, is there some kind of subview feature? Where I could have one menu that has the hierarchy and just switch the subview from view to editing?

stray saffron
#

for these app-like UI's you want something like an SPA

#

i am very unfamiliar with livewire, but check if they have nested routes/views

#

inertia gives you that

#

so you can route sub pages within your current view without switching

cunning chasm
stray saffron
#

single page application

#

basically the opposite of MPA, multi page application (classic laravel + blade)

#

a single page application lets you do fancy things

#

lets think of soundcloud or youtube, you have a media player that continues playing even if you switch pages

#

a MPA cannot do that, as the server sends you new html on a page route and the browser unloads the page

#

a SPA fetches data from the server and handles routing on the frontend, within the browser

#

so it does not unload the browser causing the player to stop

cunning chasm
#

That means a lot of js right?

stray saffron
#

well inertia uses vue or react or svelte

#

so yes, that has some javascript and has more javascript than using blade

#

i dont know if it is so much more

#

but if you are learning everything in parallel it may be overwhelming

#

so perhaps you may need to narrow down your scope

cunning chasm
#

What about livewire? How does that work, and why do you like inertia better?

stray saffron
#

personal preference

#

and someone who knows livewire should comment

cunning chasm
#

I have another question on SPA: Say the users wanted to share the task they selected, can I somehow include something in the URL so it sends people (who are logged in and has access) to the task? Like when you share YouTube videos by copying the url and sending it.

stray saffron
#

So with inertia the SPAs are a bit different

#

a classic SPA with a disconnected and calls the api for data, routing is completely done in the client, aka the SPA

#

inertia handles the routing as you do that backendside still

#

to answer your question, any route you define in laravel, you can access and route to

#

which can be a single task that is opened

cunning chasm
#

Thank you, also should I would like to know more about livewire vs. Inertia, should I ask here and wait for a livewire person to come, open another thread or is there something else that I could do?

stray saffron
#

Best is if you join each server and ask your specific questions there, they got the specialists in that term

cunning chasm
#

Alright

stray saffron
#

lemme grab a livewire invite

#

well that was easy

cunning chasm
#

I don’t think I have more questions so thanks for the help! I’ll close this now.

stray saffron
#

yw