ryan/friends
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Progress on address edit form

Browse Source
This commit is contained in:
Ryan Pandya 2022-11-08 01:13:40 -08:00
parent ce011e7d87
commit c495373a81
9 changed files with 170 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
friends/assets/js/app.js
View File

@ -41,4 +41,25 @@ liveSocket.connect()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
window.onload = function () {
window.address_results = document.querySelector("#address-results");
window.addressInput = document.querySelector("input#friend_address_query");
window.addressID = document.querySelector("input#addressID");
}
window.hideResults = function () {
window.address_results.classList.add("hidden");
}
window.showResults = function () {
document.getElementById("address-results").classList.remove("hidden");
}
window.selectAddressSearchResult = function (result) {
const selectedResult = document.querySelector("#" + result);
const mapboxID = selectedResult.attributes.id.value;
const display = selectedResult.innerText;
window.addressInput.value = display;
window.addressID.value = mapboxID;
}

12
friends/lib/friends/friend.ex
View File

@ -102,9 +102,9 @@ defmodule Friends.Friend do
def commit(changeset) do
changeset
|> generate_slug
|> @repo.insert!
|> @repo.commit!
|> load_preloads
|> assign_user!()
end
def generate_slug(%Ecto.Changeset{} = changeset) do
@ -125,9 +125,10 @@ defmodule Friends.Friend do
def create_or_update(params) do
case params.id do
:new ->
"new" ->
params
|> create()
|> generate_slug
|> commit()
_number ->
@ -169,6 +170,11 @@ defmodule Friends.Friend do
end
end
def assign_user!(%Friend{} = friend) do
%{friend: new_friend, user: _user} = assign_user(friend)
new_friend
end
def load_user(%Friends.Friend{user: %Ecto.Association.NotLoaded{}} = model) do
model
|> @repo.preload(:user)

22
friends/lib/friends/places/search.ex
View File

@ -1,5 +1,7 @@
defmodule Friends.Places.Search do
def api_key, do: "pk.7c4a6f4bf061fd4a9af9663132c58af3"
def api_key,
do:
"pk.eyJ1IjoicnlhbnBhbmR5YSIsImEiOiJja3psM2tlcDA1MXl1Mm9uZmo5bGxpNzdxIn0.TwBKpTTypcD5fWFc8XRyHg"
def viewbox(region) do
[lat_min, lat_max, lon_min, lon_max] = region |> Enum.map(&String.to_float/1)
@ -12,16 +14,26 @@ defmodule Friends.Places.Search do
]
end
def query(str, region \\ nil) do
def autocomplete(str, region \\ nil) do
viewbox =
if region do
viewbox(query(region))
viewbox(autocomplete(region))
end
url = "https://us1.locationiq.com/v1/search?key=#{api_key()}&q=#{str}&format=json#{viewbox}"
url =
"https://api.mapbox.com/geocoding/v5/mapbox.places/#{str}.json?proximity=ip&types=place%2Cpostcode%2Caddress&access_token=#{api_key}"
response = HTTPoison.get!(url)
results = Poison.decode!(response.body)
results
results |> Map.get("features")
end
def display_address(%{"place_name" => name, "id" => id} = result) do
%{
name: name,
mapbox_id: id,
id: id |> String.replace(~r/\./, "-")
}
end
end

9
friends/lib/friends/repo.ex
View File

@ -2,4 +2,13 @@ defmodule Friends.Repo do
use Ecto.Repo,
otp_app: :friends,
adapter: Ecto.Adapters.Postgres
def commit!(changeset) do
IO.inspect(changeset)
case changeset.action do
:update -> update!(changeset)
:insert -> insert!(changeset)
end
end
end

2
friends/lib/friends_web/controllers/user_auth.ex
View File

@ -159,7 +159,7 @@ defmodule FriendsWeb.UserAuth do
nil ->
conn
|> put_flash(:info, "You're logged in but we still need to make you a profile!")
|> redirect(to: Routes.friends_edit_path(conn, :overview, :new))
|> redirect(to: Routes.friends_edit_path(conn, :welcome))
|> halt()
# Or make a new one

79
friends/lib/friends_web/live/components/components.ex
View File

@ -25,17 +25,20 @@ defmodule FriendsWeb.FriendsLive.Components do
"""
end
@spec edit_menu(any) :: Phoenix.LiveView.Rendered.t()
def edit_menu(assigns) do
~H"""
<div class="hidden sm:tabs sm:mb-8">
<%= for page <- [:overview, :timeline, :relationships] do %>
<% is_active = if(page == @live_action) do "tab-active" end %>
<.link patch={Routes.friends_edit_path(FriendsWeb.Endpoint, page, @friend.slug)} class={"font-bold sm:tab-lg flex-grow no-underline tab tab-lifted #{is_active}"}>
<%= page |> to_string |> :string.titlecase() %>
</.link>
<% end %>
</div>
"""
if assigns.live_action == :welcome,
do: "",
else: ~H"""
<div class="hidden sm:tabs sm:mb-8">
<%= for page <- [:overview, :timeline, :relationships] do %>
<% is_active = if(page == @live_action) do "tab-active" end %>
<.link patch={Routes.friends_edit_path(FriendsWeb.Endpoint, page, @friend.slug)} class={"font-bold sm:tab-lg flex-grow no-underline tab tab-lifted #{is_active}"}>
<%= page |> to_string |> :string.titlecase() %>
</.link>
<% end %>
</div>
"""
end
def show_page(:main, assigns), do: show_page(:overview, %{assigns | live_action: :overview})
@ -119,11 +122,16 @@ defmodule FriendsWeb.FriendsLive.Components do
end
###
def edit_page(:welcome, assigns) do
top = ~H"""
<h1>Welcome!</h1>
<p>Before we get started, we just need some basic info about you:</p>
<%= edit_page(:overview, assigns) %>
"""
end
def edit_page(:overview, assigns) do
~H"""
<%= @peer_data.address |> Tuple.to_list |> Enum.join(".") %>
<.form
for={@changeset}
let={f}
@ -145,10 +153,19 @@ defmodule FriendsWeb.FriendsLive.Components do
<div class="min-w-fit flex place-items-center mx-4"><%= error_tag f, :name %></div>
</div>
<ul class="py-4 pl-0 h-1/2">
<li class="flex flex-row gap-x-6">
<strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Email:</strong>
<div class="flex flex-col h-16">
<%= text_input f, :email, class: "input input-primary input-sm md:input-md input-disabled", phx_debounce: "blur", value: @current_user.email %>
<div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :email %></div>
</div>
</li>
<%= if @live_action != :welcome do %>
<li class="flex flex-row gap-x-6 h-16">
<strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Nickname:</strong>
<div class=""><%= text_input f, :nickname, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.nickname %></div>
</li>
<% end %>
<li class="flex flex-row gap-x-6">
<strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Birthday:</strong>
<div class="flex flex-col h-16">
@ -156,13 +173,6 @@ defmodule FriendsWeb.FriendsLive.Components do
<div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :born %></div>
</div>
</li>
<li class="flex flex-row gap-x-6">
<strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Email:</strong>
<div class="flex flex-col h-16">
<%= text_input f, :email, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.email %>
<div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :email %></div>
</div>
</li>
<li class="flex flex-row gap-x-6">
<strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Phone:</strong>
<div class="flex flex-col h-16">
@ -170,19 +180,32 @@ defmodule FriendsWeb.FriendsLive.Components do
<div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :phone %></div>
</div>
</li>
<li class="flex flex-row gap-x-6">
<li class="flex flex-row gap-x-6 relative">
<strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Address:</strong>
<div class="flex flex-col h-16">
<%= text_input f, :address_query, class: "input input-primary input-sm md:input-md", phx_throttle: "500", value: @address_query %>
<%= hidden_input f, :address_id, value: 0 %>
<div class="flex flex-col h-16">
<%= text_input f, :address_query, class: "input input-primary input-sm md:input-md", phx_debounce: "500", value: @address_query,
phx_change: :address_search, onClick: "showResults();", onBlur: "hideResults();" %>
<%= hidden_input f, :address_id, value: 0, id: "addressID" %>
</div>
<div id="address-results" class="absolute w-full md:w-max bottom-16">
<%= if @address_results do %>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-2/3 overflow-auto">
<%= for r <- @address_results do %>
<li class="py-0 my-0"><.link id={r[:id]} mapbox_id={r[:mapbox_id]} class="address_result" onMouseDown={"selectAddressSearchResult('" <> r[:id] <> "');"}>
<%= r[:name] %></.link></li>
<% end %>
</ul>
<% end %>
</div>
</li>
</ul>
<div class="form-control flex flex-row gap-x-4 md:justify-end mb-4 md:w-1/2">
<div class="flex-1">
<.link patch={Routes.friends_show_path(FriendsWeb.Endpoint, :overview, @friend.slug)} class="btn btn-block btn-outline">back</.link>
</div>
<%= if @live_action != :welcome do %>
<div class="flex-1">
<.link patch={Routes.friends_show_path(FriendsWeb.Endpoint, :overview, @friend.slug)} class="btn btn-block btn-outline">back</.link>
</div>
<% end %>
<div class="flex-1">
<%= if @changeset.valid? do %>
<%= submit "Save", phx_disable_with: "Saving...", class: "btn btn-block" %>
@ -190,9 +213,9 @@ defmodule FriendsWeb.FriendsLive.Components do
<%= submit "Save", class: "btn btn-block btn-disabled" %>
<% end %>
</div>
<%= if @live_action != :new do %>
<%= if @current_user.profile.id == @friend.id do %>
<div class="flex-1">
<button phx-click="delete" phx-value-friend_id={@friend.id} class="btn btn-block btn-error">Delete</button>
<.link href={Routes.user_settings_path(FriendsWeb.Endpoint, :edit)} class="btn btn-block btn-error">Delete</.link>
</div>
<% end %>
</div>

68
friends/lib/friends_web/live/edit.ex
View File

@ -7,13 +7,22 @@ defmodule FriendsWeb.FriendsLive.Edit do
alias Friends.{Friend, Places}
def mount(%{}, token, socket) do
friend = Friend.new()
{:ok,
socket
|> assign(:live_action, socket.assigns.live_action)
|> assign_current_user(token |> Map.get("user_token"))
|> assign(:friend, friend)
|> title("Welcome")
|> assign(:changeset, %Friend{} |> Friend.changeset())}
end
def mount(%{"slug" => slug} = _attrs, token, socket) do
live_action = socket.assigns.live_action || false
friend = Friend.get_by_slug(slug)
editable = friend |> Friend.can_be_edited_by(socket.assigns[:current_user])
# address_viewbox = Places.Search.query()
if(live_action) do
{:ok,
@ -21,16 +30,17 @@ defmodule FriendsWeb.FriendsLive.Edit do
|> assign(:live_action, live_action)
|> assign_current_user(token |> Map.get("user_token"))
|> assign(:friend, friend)
|> assign(:action, Routes.friends_path(socket, :update))
|> title(friend.name <> " - " <> (live_action |> titlecase))
|> assign(:changeset, %Friend{} |> Friend.changeset())
|> assign(:action, editable)
|> assign(:address_query, nil)}
|> assign(:address_query, nil)
|> assign(:address_results, nil)}
else
{:ok, socket |> redirect(to: Routes.friends_show_path(socket, :overview, friend.slug))}
end
end
def handle_params(%{"slug" => slug} = attrs, _url, socket) do
def handle_params(%{"slug" => slug} = _attrs, _url, socket) do
live_action = socket.assigns.live_action || false
friend = Friend.get_by_slug(slug)
@ -39,11 +49,26 @@ defmodule FriendsWeb.FriendsLive.Edit do
{:noreply,
socket
|> assign_friend(friend)
|> assign(:action, Routes.friends_path(socket, :update))
|> assign(:live_action, live_action)
|> assign(:address_query, nil)
|> assign(:address_results, nil)
|> title(friend.name <> " - " <> (live_action |> titlecase))
|> assign(:editable, editable)}
end
def handle_params(_attrs, _token, socket) do
friend = Friend.new()
{:noreply,
socket
|> assign_friend(friend)
|> assign(:live_action, socket.assigns.live_action)
|> assign(:address_query, nil)
|> assign(:action, Routes.friends_path(socket, :update))
|> title("Welcome")}
end
def handle_event("validate", %{"friend" => form_params}, %{assigns: %{friend: friend}} = socket) do
id = form_params["id"]
name = form_params["name"]
@ -81,23 +106,26 @@ defmodule FriendsWeb.FriendsLive.Edit do
def handle_event(
"save",
%{"friend" => form_params},
%{assigns: %{changeset: changeset}} = socket
%{assigns: %{changeset: _changeset}} = socket
) do
name = form_params["name"]
nickname = form_params["nickname"]
born = form_params["born"]
email = form_params["email"]
phone = form_params["phone"] |> format_phone
id = form_params["id"]
slug = form_params["slug"] || name |> to_slug
id = form_params["id"] || :new
address_id = form_params["address_id"]
new_params = %{
id: id,
name: name,
nickname: nickname,
slug: name |> to_slug,
slug: slug,
born: born,
phone: phone,
email: email
email: email,
address_id: address_id
}
updated_friend = Friend.create_or_update(new_params)
@ -109,17 +137,21 @@ defmodule FriendsWeb.FriendsLive.Edit do
|> put_flash(:info, "Saved #{updated_friend |> first_name}!")
|> assign(:new_friend, new_changeset)
|> assign(:friend, updated_friend)
|> push_patch(to: "/friend/#{updated_friend.slug}")
|> push_navigate(to: "/friend/#{updated_friend.slug}")
}
end
# Handle deleting a friend
def handle_event("delete", %{"friend_id" => friend_id}, socket) do
friend = Friend.get_by_id(friend_id)
def handle_event("address_search", %{"friend" => %{"address_query" => query}}, socket) do
results = Places.Search.autocomplete(query) |> Enum.map(&Places.Search.display_address/1)
{:noreply,
socket
|> put_flash(:error, "Deleted '#{friend.name}'.")
|> push_navigate(to: "/")}
if query == "" do
{:noreply, socket |> assign(:address_results, nil)}
else
{:noreply, socket |> assign(:address_results, results)}
end
end
def handle_event(event, unsigned_params, socket) do
{:noreply, socket}
end
end

8
friends/lib/friends_web/router.ex
View File

@ -73,6 +73,8 @@ defmodule FriendsWeb.Router do
post "/confirm", UserConfirmationController, :create
get "/confirm/:token", UserConfirmationController, :edit
post "/confirm/:token", UserConfirmationController, :update
live "/welcome", FriendsLive.Edit, :welcome
end
# Routes that require the user be authenticated:
@ -104,13 +106,13 @@ defmodule FriendsWeb.Router do
end
# Edit modes (require being logged in and having a profile)
scope "/friend/update/", FriendsWeb do
scope "/edit/", FriendsWeb do
pipe_through [:browser, :require_authenticated_user, :capture_profile]
post "/", FriendsController, :update
live "/:slug/overview", FriendsLive.Edit, :overview
live "/:slug/timeline", FriendsLive.Edit, :timeline
live "/:slug/relationships", FriendsLive.Edit, :relationships
post "/:slug/update", FriendsController, :update
end
end

9
friends/test/friends_web/controllers/friends_live_test.exs
View File

@ -9,9 +9,14 @@ defmodule FriendsWeb.FriendsLiveTest do
} = friend_fixture(%{email: user_fixture().email}) |> Friends.Friend.assign_user()
end
describe "GET '/friends/:slug'" do
describe "GET '/friend/:slug'" do
test "redirects if live_action not specified", %{conn: conn, friend: friend} do
conn = conn |> get("/friend/#{friend.slug}/")
assert redirected_to(conn) == Routes.friends_show_path(conn, :overview, friend.slug)
end
test "shows the friend overview", %{conn: conn, friend: friend} do
conn = conn |> get("/friends/#{friend.slug}")
conn = conn |> get("/friend/#{friend.slug}/overview")
assert html_response(conn, 200) =~ friend.name
end
end