feat: Toggle between summary and details view in itinerary panel #2232
Conversation
lib/dotcom_web/live/trip_planner.ex
Outdated
| @@ -88,7 +90,65 @@ defmodule DotcomWeb.Live.TripPlanner do | |||
| """ | |||
| end | |||
|
|
|||
| defp itinerary_panel(%{details_index: details_index} = assigns) do | |||
There was a problem hiding this comment.
I think I want to pull itinerary_panel out into a separate live component, and have it handle the summary versus details toggling, rather than having that logic handled in the top-level TripPlanner live.
The one complicating factor is the map, since on mobile the map gets rendered in the middle of the details panel. That complicating factor is why I left it like this in this PR, but I sort of do want to figure out at least some strategy for this before merging.
There was a problem hiding this comment.
I wound up pulling out TripPlannerResultsSection instead, which includes the map. I think this is a passable solution for now, and might wind up being actually good? Interested to know what you think.
| <button class="btn-link font-semibold underline" phx-click={JS.toggle(to: "##{@group_id}")}> | ||
| <button | ||
| class="btn-link font-semibold underline" | ||
| phx-click="show_itinerary_details" |
There was a problem hiding this comment.
In react-land, this would be a callback that would be explicitly passed into this component - onDetailsClick or something like that. I feel like we need some analogous strategy for that here, because I really don't like having "show_itinerary_details" being hard-coded in both this file and trip_planner.ex.
Do you have any suggestions? I can also experiment before merging, maybe by passing in a phx-details-click assign or something like that?
There was a problem hiding this comment.
☝️ this seems like a promising idea.
There was a problem hiding this comment.
ha, I was going to link to this exact doc! can totally do that.
There was a problem hiding this comment.
I didn't end up passing in a callback because itinerary_group isn't a live component (pretty sure only live components can do anything meaningful with callbacks?). I did pass details_click_event and target in as assigns, which sort of accomplishes the same goal.
...and rename it to expanded_itinerary_index
Screen.Recording.2024-11-21.at.11.52.59.AM.mov
Summary of changes
Asana Ticket: Trip Planner Preview | Toggle between list and details views