From 134732603fb49893c93c068ba494093eb9f9cba0 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 19 Nov 2024 09:39:11 -0500
Subject: [PATCH 1/8] refactor(trip_planner_form): Extract search_box to its
 own private component

---
 .../live_components/trip_planner_form.ex      | 53 +++++++++++--------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 9e7e99e7cf..b134631a30 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -56,27 +56,8 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         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 form_name={@form_name} form={f} location_keys={@location_keys} field={:from} />
+        <.search_box form_name={@form_name} form={f} location_keys={@location_keys} field={:to} />
         <div>
           <.input_group
             legend="When"
@@ -151,6 +132,36 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
     """
   end
 
+  defp search_box(assigns) do
+    ~H"""
+    <div 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={@form[@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, _} <- @form[@field].errors}
+          :if={used_input?(@form[@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.

From 4bc9c1325c45a3997febc6470c422ca712f86932 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 19 Nov 2024 09:56:12 -0500
Subject: [PATCH 2/8] refactor(trip_planner_form): Clean up inputs to
 <.search_box />

---
 .../live_components/trip_planner_form.ex      | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index b134631a30..1853b82450 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -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
     }
 
@@ -56,8 +55,8 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         phx-change="handle_change"
         phx-target={@myself}
       >
-        <.search_box form_name={@form_name} form={f} location_keys={@location_keys} field={:from} />
-        <.search_box form_name={@form_name} form={f} location_keys={@location_keys} field={:to} />
+        <.search_box name={"#{@form_name}--from"} field={f[:from]} />
+        <.search_box name={"#{@form_name}--to"} field={f[:to]} />
         <div>
           <.input_group
             legend="When"
@@ -133,14 +132,12 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
   end
 
   defp search_box(assigns) do
+    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={"#{@form_name}--#{@field}"}
-      >
-        <.inputs_for :let={location_f} field={@form[@field]} skip_hidden={true}>
+      <.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"
@@ -150,11 +147,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
             name={location_f[subfield].name}
           />
         </.inputs_for>
-        <.feedback
-          :for={{msg, _} <- @form[@field].errors}
-          :if={used_input?(@form[@field])}
-          kind={:error}
-        >
+        <.feedback :for={{msg, _} <- @field.errors} :if={used_input?(@field)} kind={:error}>
           <%= msg %>
         </.feedback>
       </.algolia_autocomplete>

From 49dfdb3718859cf0f8a2c59c7528bb30f17a382c Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 19 Nov 2024 13:47:12 -0500
Subject: [PATCH 3/8] feat: Add swap-to-and-from button to Trip Planner Form

---
 .../components/live_components/trip_planner_form.ex      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 1853b82450..7e667e8a9e 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -47,7 +47,7 @@ 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="md:grid md:grid-cols-[1fr_max-content_1fr] gap-x-8 gap-y-2"
         id={@id}
         for={@form}
         method="get"
@@ -56,7 +56,9 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         phx-target={@myself}
       >
         <.search_box name={"#{@form_name}--from"} field={f[:from]} />
+        <.icon class="fill-brand-primary h-6 w-6 rotate-90 md:rotate-0 self-center justify-self-end my-4 md:my-0" name="right-left" />
         <.search_box name={"#{@form_name}--to"} field={f[:to]} />
+
         <div>
           <.input_group
             legend="When"
@@ -91,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>
@@ -121,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>

From 4f292379fa62227e12c3a4b25e0696882ee57645 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 19 Nov 2024 16:23:55 -0500
Subject: [PATCH 4/8] fix(mobile): Make TripPlannerForm a flex and push the
 swap button to the right

---
 .../components/live_components/trip_planner_form.ex           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 7e667e8a9e..8bdd1b3ca1 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -47,7 +47,7 @@ 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-[1fr_max-content_1fr] 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"
@@ -56,7 +56,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         phx-target={@myself}
       >
         <.search_box name={"#{@form_name}--from"} field={f[:from]} />
-        <.icon class="fill-brand-primary h-6 w-6 rotate-90 md:rotate-0 self-center justify-self-end my-4 md:my-0" name="right-left" />
+        <.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" />
         <.search_box name={"#{@form_name}--to"} field={f[:to]} />
 
         <div>

From f5b108f28bc4f0177560ad347ab45f4588202bc8 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 19 Nov 2024 16:58:19 -0500
Subject: [PATCH 5/8] refactor: Rename search_box to location_search_box and
 fix formatting

---
 .../components/live_components/trip_planner_form.ex | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 8bdd1b3ca1..8b9cfc86de 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -55,9 +55,12 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         phx-change="handle_change"
         phx-target={@myself}
       >
-        <.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" />
-        <.search_box name={"#{@form_name}--to"} field={f[:to]} />
+        <.location_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"
+        />
+        <.location_search_box name={"#{@form_name}--to"} field={f[:to]} />
 
         <div>
           <.input_group
@@ -94,7 +97,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
           </.feedback>
         </div>
 
-        <div class="col-start-3" >
+        <div class="col-start-3">
           <.fieldset id="modes" legend="Modes">
             <.accordion id="accordion">
               <:heading>
@@ -134,7 +137,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
     """
   end
 
-  defp search_box(assigns) do
+  defp location_search_box(assigns) do
     assigns = assigns |> assign(:location_keys, InputForm.Location.fields())
 
     ~H"""

From 7957ffbbbca68b34a4f8cf6995365a0167ca3972 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 19 Nov 2024 17:07:08 -0500
Subject: [PATCH 6/8] fix: Margin around the swap button on mobile

---
 .../components/live_components/trip_planner_form.ex           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 8b9cfc86de..1b53452b1d 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -47,7 +47,7 @@ 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="flex flex-col md:grid md:grid-cols-[1fr_max-content_1fr] gap-x-8 gap-y-2"
+        class="flex flex-col md:grid md:grid-cols-[1fr_max-content_1fr] gap-x-8 gap-y-4 md:gap-y-2"
         id={@id}
         for={@form}
         method="get"
@@ -57,7 +57,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
       >
         <.location_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"
+          class="fill-brand-primary h-6 w-6 rotate-90 self-end md:rotate-0 md:self-center"
           name="right-left"
         />
         <.location_search_box name={"#{@form_name}--to"} field={f[:to]} />

From 840cf9fb67f1bab3d4bd046a9a6b29019d8d70ac Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Wed, 20 Nov 2024 09:20:49 -0500
Subject: [PATCH 7/8] WIP feat: Make the swap button actually swap origin and
 destination

---
 .../live_components/trip_planner_form.ex      | 45 +++++++++++++++++--
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 1b53452b1d..81dac63516 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -56,10 +56,16 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         phx-target={@myself}
       >
         <.location_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"
-          name="right-left"
-        />
+        <div class="self-end md:self-center rotate-90 md:rotate-0">
+          <button
+            type="button"
+            phx-click="swap_direction"
+            phx-target={@myself}
+            class="h-6 w-6 p-0 bg-transparent"
+          >
+            <.icon class="fill-brand-primary" name="right-left" />
+          </button>
+        </div>
         <.location_search_box name={"#{@form_name}--to"} field={f[:to]} />
 
         <div>
@@ -138,6 +144,8 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
   end
 
   defp location_search_box(assigns) do
+    dbg(assigns)
+
     assigns = assigns |> assign(:location_keys, InputForm.Location.fields())
 
     ~H"""
@@ -201,6 +209,35 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
     {:noreply, save_form(params, socket)}
   end
 
+  def handle_event(
+        "swap_direction",
+        _params,
+        %{assigns: %{form: %{params: %{"from" => from, "to" => to} = form_params}}} = socket
+      ) do
+    new_form_params =
+      form_params
+      |> Map.put("to", from)
+      |> Map.put("from", to)
+
+    send(self(), {:changed_form, new_form_params})
+
+    # dbg(new_form_params)
+
+    validated_params =
+      new_form_params
+      |> InputForm.validate_params()
+
+    # dbg(validated_params)
+
+    new_form =
+      validated_params
+      |> Phoenix.Component.to_form()
+
+    # dbg(new_form)
+
+    {:noreply, assign(socket, %{form: new_form})}
+  end
+
   defp datepicker_config do
     %{
       default_date: Timex.now("America/New_York"),

From 49d834f5392e7f8aa94706eb912e0067bcca453d Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Wed, 20 Nov 2024 12:46:59 -0500
Subject: [PATCH 8/8] dbg: Add <pre /> tags to make it clearer what's going on

---
 .../components/live_components/trip_planner_form.ex   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/dotcom_web/components/live_components/trip_planner_form.ex b/lib/dotcom_web/components/live_components/trip_planner_form.ex
index 81dac63516..e60fe33f8f 100644
--- a/lib/dotcom_web/components/live_components/trip_planner_form.ex
+++ b/lib/dotcom_web/components/live_components/trip_planner_form.ex
@@ -45,6 +45,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
   def render(assigns) do
     ~H"""
     <section class="px-10 py-8 lg:px-20 lg:py-12 mb-4 bg-gray-100">
+      <!-- <pre><%= inspect @form, pretty: true %></pre> -->
       <.form
         :let={f}
         class="flex flex-col md:grid md:grid-cols-[1fr_max-content_1fr] gap-x-8 gap-y-4 md:gap-y-2"
@@ -55,6 +56,12 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         phx-change="handle_change"
         phx-target={@myself}
       >
+        <h1 class="col-span-3">FROM</h1>
+        <pre class="col-span-3"><%= inspect f[:from].value, pretty: true %></pre>
+
+        <h1 class="col-span-3">TO</h1>
+        <pre class="col-span-3"><%= inspect f[:to].value, pretty: true %></pre>
+
         <.location_search_box name={"#{@form_name}--from"} field={f[:from]} />
         <div class="self-end md:self-center rotate-90 md:rotate-0">
           <button
@@ -144,8 +151,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
   end
 
   defp location_search_box(assigns) do
-    dbg(assigns)
-
     assigns = assigns |> assign(:location_keys, InputForm.Location.fields())
 
     ~H"""
@@ -154,7 +159,6 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
         <.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}
@@ -165,6 +169,7 @@ defmodule DotcomWeb.Components.LiveComponents.TripPlannerForm do
           <%= msg %>
         </.feedback>
       </.algolia_autocomplete>
+      <pre><%= inspect @field, pretty: true %></pre>
     </div>
     """
   end