diff --git a/lib/app_web/live/app_live.ex b/lib/app_web/live/app_live.ex index 1909bd6f..d233b324 100644 --- a/lib/app_web/live/app_live.ex +++ b/lib/app_web/live/app_live.ex @@ -98,13 +98,7 @@ defmodule AppWeb.AppLive do tag = Tag.get_tag!(value["tag_id"]) tags = Tag.list_person_tags(person_id) - selected_tags = - if Enum.member?(selected_tags, tag) do - List.delete(selected_tags, tag) - else - [tag | selected_tags] - end - |> Enum.sort_by(& &1.text) + selected_tags = toggle_tag(selected_tags, tag) {:noreply, assign(socket, tags: tags, selected_tags: selected_tags)} end @@ -122,6 +116,34 @@ defmodule AppWeb.AppLive do {:noreply, assign(socket, tags: tags)} end + @impl true + def handle_event( + "add-first-tag", + %{"key" => "Enter"}, + socket + ) do + case socket.assigns.tags do + [] -> + {:noreply, socket} + + _ -> + selected_tag = + socket.assigns.tags + |> List.first() + |> Map.get(:id) + |> Tag.get_tag!() + + {:noreply, + assign(socket, + selected_tags: toggle_tag(socket.assigns.selected_tags, selected_tag) + )} + end + end + + @impl true + def handle_event("add-first-tag", _params, socket), + do: {:noreply, socket} + @impl true def handle_event("delete", %{"id" => item_id}, socket) do Item.delete_item(item_id) @@ -384,6 +406,15 @@ defmodule AppWeb.AppLive do end end + defp toggle_tag(selected_tags, tag) do + if Enum.member?(selected_tags, tag) do + List.delete(selected_tags, tag) + else + [tag | selected_tags] + end + |> Enum.sort_by(& &1.text) + end + def class_footer_link(filter_name, filter_selected) do if filter_name == filter_selected do "px-2 py-2 h-9 mr-1 bg-teal-700 text-white rounded-md" diff --git a/lib/app_web/live/app_live.html.heex b/lib/app_web/live/app_live.html.heex index d0baf668..ec9690fd 100644 --- a/lib/app_web/live/app_live.html.heex +++ b/lib/app_web/live/app_live.html.heex @@ -56,8 +56,14 @@ name="tag" class="w-full my-2" x-on:focus="open = true" + x-on:keydown.enter.prevent=" + if (event.key === 'Enter') { + event.target.value = ''; + } + " phx-keyup="filter-tags" - phx-debounce="250" + phx-keyup-debounce="250" + phx-keydown="add-first-tag" autocomplete="off" placeholder="tags" /> diff --git a/test/app_web/live/app_live_test.exs b/test/app_web/live/app_live_test.exs index e77fd408..1235814d 100644 --- a/test/app_web/live/app_live_test.exs +++ b/test/app_web/live/app_live_test.exs @@ -806,4 +806,59 @@ defmodule AppWeb.AppLiveTest do {:ok, view, _html} = live(conn, "/") assert render_hook(view, "filter-tags", %{"key" => "t", "value" => "t"}) end + + test "select tag when enter pressed", %{conn: conn} do + {:ok, _tag1} = + Tag.create_tag(%{person_id: 0, text: "tag1", color: "#FCA5A5"}) + + used_tag = %{ + person_id: 0, + text: "enter_tag_selected", + color: "#FCA5A5" + } + + {:ok, _tag2} = Tag.create_tag(used_tag) + + {:ok, view, _html} = live(conn, "/") + + assert render_keydown(view, "add-first-tag", %{"key" => "Enter"}) =~ + "enter_tag_selected" + + assert render_submit(view, :create, %{text: "tag enter pressed"}) + + assert render(view) =~ "tag enter pressed" + assert render(view) =~ "enter_tag_selected" + + last_item_inserted = Item.list_person_items(0) |> List.last() + + [tag | _] = last_item_inserted.tags + + assert tag.person_id == used_tag.person_id + assert tag.text == used_tag.text + assert tag.color == used_tag.color + end + + test "dont select tag if there arent tags created", %{conn: conn} do + {:ok, view, _html} = live(conn, "/") + + assert render_keydown(view, "add-first-tag", %{"key" => "Enter"}) + + assert render_submit(view, :create, %{text: "tag enter pressed"}) + + last_item_inserted = Item.list_person_items(0) |> List.last() + + assert last_item_inserted.tags == [] + end + + test "dont select tag if other keydown is pressed", %{conn: conn} do + {:ok, view, _html} = live(conn, "/") + + assert render_keydown(view, "add-first-tag", %{"key" => "Esc"}) + + assert render_submit(view, :create, %{text: "tag enter pressed"}) + + last_item_inserted = Item.list_person_items(0) |> List.last() + + assert last_item_inserted.tags == [] + end end