Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add swap-to-and-from button to Trip Planner Form #2231

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
+75 −23
Draft

feat: Add swap-to-and-from button to Trip Planner Form #2231

Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1347326
refactor(trip_planner_form): Extract search_box to its own private co…
joshlarson Nov 19, 2024
4bc9c13
refactor(trip_planner_form): Clean up inputs to <.search_box />
joshlarson Nov 19, 2024
49dfdb3
feat: Add swap-to-and-from button to Trip Planner Form
joshlarson Nov 19, 2024
4f29237
fix(mobile): Make TripPlannerForm a flex and push the swap button to …
joshlarson Nov 19, 2024
f5b108f
refactor: Rename search_box to location_search_box and fix formatting
joshlarson Nov 19, 2024
7957ffb
fix: Margin around the swap button on mobile
joshlarson Nov 19, 2024
840cf9f
WIP feat: Make the swap button actually swap origin and destination
joshlarson Nov 20, 2024
49d834f
dbg: Add <pre /> tags to make it clearer what's going on
joshlarson Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 32 additions & 25 deletions lib/dotcom_web/components/live_components/trip_planner_form.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do

defaults = %{
form: %InputForm{} |> InputForm.changeset(form_defaults) |> to_form(),
location_keys: InputForm.Location.fields(),
show_datepicker: false
}

Expand All @@ -48,35 +47,18 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
<section class="px-10 py-8 lg:px-20 lg:py-12 mb-4 bg-gray-100">
<.form
:let={f}
class="md:grid md:grid-cols-2 gap-x-8 gap-y-2"
class="flex flex-col md:grid md:grid-cols-[1fr_max-content_1fr] gap-x-8 gap-y-2"
id={@id}
for={@form}
method="get"
phx-submit="save_form"
phx-change="handle_change"
phx-target={@myself}
>
<div :for={field <- [:from, :to]} class="mb-1" id="trip-planner-locations" phx-update="ignore">
<.algolia_autocomplete
config_type="trip-planner"
placeholder="Enter a location"
id={"#{@form_name}--#{field}"}
>
<.inputs_for :let={location_f} field={f[field]} skip_hidden={true}>
<input
:for={subfield <- @location_keys}
type="hidden"
class="location-input"
id={location_f[subfield].id}
value={location_f[subfield].value}
name={location_f[subfield].name}
/>
</.inputs_for>
<.feedback :for={{msg, _} <- f[field].errors} :if={used_input?(f[field])} kind={:error}>
<%= msg %>
</.feedback>
</.algolia_autocomplete>
</div>
<.search_box name={"#{@form_name}--from"} field={f[:from]} />
<.icon class="fill-brand-primary h-6 w-6 rotate-90 self-end md:rotate-0 md:self-center my-4 md:my-0" name="right-left" />
joshlarson marked this conversation as resolved.
Show resolved Hide resolved
<.search_box name={"#{@form_name}--to"} field={f[:to]} />

<div>
<.input_group
legend="When"
Expand Down Expand Up @@ -111,7 +93,8 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
<%= msg %>
</.feedback>
</div>
<div>

<div class="col-start-3" >
<.fieldset id="modes" legend="Modes">
<.accordion id="accordion">
<:heading>
Expand Down Expand Up @@ -141,7 +124,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
<.icon type="icon-svg" name="icon-accessible-small" class="h-5 w-5" />
</div>
</div>
<div class="col-start-2 justify-self-end">
<div class="col-start-3 justify-self-end">
<.button type="submit" phx-disable-with="Planning your trip...">
Get trip suggestions
</.button>
Expand All @@ -151,6 +134,30 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
"""
end

defp search_box(assigns) do
joshlarson marked this conversation as resolved.
Show resolved Hide resolved
assigns = assigns |> assign(:location_keys, InputForm.Location.fields())

~H"""
<div class="mb-1" id="trip-planner-locations" phx-update="ignore">
<.algolia_autocomplete config_type="trip-planner" placeholder="Enter a location" id={@name}>
<.inputs_for :let={location_f} field={@field} skip_hidden={true}>
<input
:for={subfield <- @location_keys}
type="hidden"
class="location-input"
id={location_f[subfield].id}
value={location_f[subfield].value}
name={location_f[subfield].name}
/>
</.inputs_for>
<.feedback :for={{msg, _} <- @field.errors} :if={used_input?(@field)} kind={:error}>
<%= msg %>
</.feedback>
</.algolia_autocomplete>
</div>
"""
end

@impl true
@doc """
If the user selects "now" for the date and time, hide the datepicker.
Expand Down
Loading