Remove not working keyboard navigation
This commit is contained in:
@@ -14,10 +14,9 @@ defmodule MusicLibraryWeb.SearchComponents do
|
|||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
<.search_result_record record={record} selected={false} />
|
<.search_result_record record={record} />
|
||||||
"""
|
"""
|
||||||
attr :record, :map, required: true
|
attr :record, :map, required: true
|
||||||
attr :selected, :boolean, default: false
|
|
||||||
attr :type, :atom, required: true, values: [:collection, :wishlist]
|
attr :type, :atom, required: true, values: [:collection, :wishlist]
|
||||||
attr :rest, :global, include: ~w(phx-click phx-value-id)
|
attr :rest, :global, include: ~w(phx-click phx-value-id)
|
||||||
|
|
||||||
@@ -26,8 +25,7 @@ defmodule MusicLibraryWeb.SearchComponents do
|
|||||||
<div
|
<div
|
||||||
class={[
|
class={[
|
||||||
"p-3 rounded-lg cursor-pointer transition-colors",
|
"p-3 rounded-lg cursor-pointer transition-colors",
|
||||||
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
|
"hover:bg-zinc-50 dark:hover:bg-zinc-700"
|
||||||
if(@selected, do: "bg-blue-50 dark:bg-blue-900", else: "")
|
|
||||||
]}
|
]}
|
||||||
{@rest}
|
{@rest}
|
||||||
>
|
>
|
||||||
@@ -62,10 +60,9 @@ defmodule MusicLibraryWeb.SearchComponents do
|
|||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
<.search_result_artist artist={artist} selected={false} />
|
<.search_result_artist artist={artist} />
|
||||||
"""
|
"""
|
||||||
attr :artist, :map, required: true
|
attr :artist, :map, required: true
|
||||||
attr :selected, :boolean, default: false
|
|
||||||
attr :rest, :global, include: ~w(phx-click phx-value-id)
|
attr :rest, :global, include: ~w(phx-click phx-value-id)
|
||||||
|
|
||||||
def search_result_artist(assigns) do
|
def search_result_artist(assigns) do
|
||||||
@@ -73,8 +70,7 @@ defmodule MusicLibraryWeb.SearchComponents do
|
|||||||
<div
|
<div
|
||||||
class={[
|
class={[
|
||||||
"p-3 rounded-lg cursor-pointer transition-colors",
|
"p-3 rounded-lg cursor-pointer transition-colors",
|
||||||
"hover:bg-zinc-50 dark:hover:bg-zinc-700",
|
"hover:bg-zinc-50 dark:hover:bg-zinc-700"
|
||||||
if(@selected, do: "bg-blue-50 dark:bg-blue-900", else: "")
|
|
||||||
]}
|
]}
|
||||||
{@rest}
|
{@rest}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -14,7 +14,6 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
|
|||||||
|> assign(:search_counts, %{collection_count: 0, wishlist_count: 0, artists_count: 0})
|
|> assign(:search_counts, %{collection_count: 0, wishlist_count: 0, artists_count: 0})
|
||||||
|> assign(:show_modal, false)
|
|> assign(:show_modal, false)
|
||||||
|> assign(:loading, false)
|
|> assign(:loading, false)
|
||||||
|> assign(:selected_index, -1)
|
|
||||||
|> assign(:total_results, 0)}
|
|> assign(:total_results, 0)}
|
||||||
end
|
end
|
||||||
|
|
||||||
@@ -31,7 +30,6 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
|
|||||||
|> assign(:search_query, "")
|
|> assign(:search_query, "")
|
||||||
|> assign(:search_results, %{collection: [], wishlist: [], artists: []})
|
|> assign(:search_results, %{collection: [], wishlist: [], artists: []})
|
||||||
|> assign(:search_counts, %{collection_count: 0, wishlist_count: 0, artists_count: 0})
|
|> assign(:search_counts, %{collection_count: 0, wishlist_count: 0, artists_count: 0})
|
||||||
|> assign(:selected_index, -1)
|
|
||||||
|> assign(:total_results, 0)}
|
|> assign(:total_results, 0)}
|
||||||
end
|
end
|
||||||
|
|
||||||
@@ -46,7 +44,6 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
|
|||||||
|> assign(:search_results, %{collection: [], wishlist: [], artists: []})
|
|> assign(:search_results, %{collection: [], wishlist: [], artists: []})
|
||||||
|> assign(:search_counts, %{collection_count: 0, wishlist_count: 0, artists_count: 0})
|
|> assign(:search_counts, %{collection_count: 0, wishlist_count: 0, artists_count: 0})
|
||||||
|> assign(:loading, false)
|
|> assign(:loading, false)
|
||||||
|> assign(:selected_index, -1)
|
|
||||||
|> assign(:total_results, 0)}
|
|> assign(:total_results, 0)}
|
||||||
|
|
||||||
_query ->
|
_query ->
|
||||||
@@ -110,28 +107,6 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
|
|||||||
|> push_navigate(to: ~p"/wishlist?query=#{query}")}
|
|> push_navigate(to: ~p"/wishlist?query=#{query}")}
|
||||||
end
|
end
|
||||||
|
|
||||||
@impl true
|
|
||||||
def handle_event("key_navigation", %{"key" => key}, socket) do
|
|
||||||
case key do
|
|
||||||
"Escape" ->
|
|
||||||
{:noreply, assign(socket, :show_modal, false)}
|
|
||||||
|
|
||||||
"ArrowDown" ->
|
|
||||||
new_index = min(socket.assigns.selected_index + 1, socket.assigns.total_results - 1)
|
|
||||||
{:noreply, assign(socket, :selected_index, new_index)}
|
|
||||||
|
|
||||||
"ArrowUp" ->
|
|
||||||
new_index = max(socket.assigns.selected_index - 1, -1)
|
|
||||||
{:noreply, assign(socket, :selected_index, new_index)}
|
|
||||||
|
|
||||||
"Enter" ->
|
|
||||||
handle_enter_key(socket)
|
|
||||||
|
|
||||||
_ ->
|
|
||||||
{:noreply, socket}
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def handle_info({:perform_search, query}, socket) do
|
def handle_info({:perform_search, query}, socket) do
|
||||||
# Only search if the query hasn't changed (debouncing)
|
# Only search if the query hasn't changed (debouncing)
|
||||||
@@ -149,57 +124,9 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
|
|||||||
|> assign(:search_results, search_results)
|
|> assign(:search_results, search_results)
|
||||||
|> assign(:search_counts, search_counts)
|
|> assign(:search_counts, search_counts)
|
||||||
|> assign(:loading, false)
|
|> assign(:loading, false)
|
||||||
|> assign(:selected_index, -1)
|
|
||||||
|> assign(:total_results, total_results)}
|
|> assign(:total_results, total_results)}
|
||||||
else
|
else
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
defp handle_enter_key(socket) do
|
|
||||||
selected_index = socket.assigns.selected_index
|
|
||||||
|
|
||||||
if selected_index >= 0 do
|
|
||||||
results = socket.assigns.search_results
|
|
||||||
|
|
||||||
# Calculate which section and item the selected index corresponds to
|
|
||||||
collection_count = length(results.collection)
|
|
||||||
wishlist_count = length(results.wishlist)
|
|
||||||
artists_count = length(results.artists)
|
|
||||||
|
|
||||||
cond do
|
|
||||||
selected_index < collection_count ->
|
|
||||||
# Selected item is in collection
|
|
||||||
record = Enum.at(results.collection, selected_index)
|
|
||||||
|
|
||||||
{:noreply,
|
|
||||||
socket
|
|
||||||
|> assign(:show_modal, false)
|
|
||||||
|> push_navigate(to: ~p"/collection/#{record.id}")}
|
|
||||||
|
|
||||||
selected_index < collection_count + wishlist_count ->
|
|
||||||
# Selected item is in wishlist
|
|
||||||
record = Enum.at(results.wishlist, selected_index - collection_count)
|
|
||||||
|
|
||||||
{:noreply,
|
|
||||||
socket
|
|
||||||
|> assign(:show_modal, false)
|
|
||||||
|> push_navigate(to: ~p"/wishlist/#{record.id}")}
|
|
||||||
|
|
||||||
selected_index < collection_count + wishlist_count + artists_count ->
|
|
||||||
# Selected item is in artists
|
|
||||||
artist = Enum.at(results.artists, selected_index - collection_count - wishlist_count)
|
|
||||||
|
|
||||||
{:noreply,
|
|
||||||
socket
|
|
||||||
|> assign(:show_modal, false)
|
|
||||||
|> push_navigate(to: ~p"/artists/#{artist.musicbrainz_id}")}
|
|
||||||
|
|
||||||
true ->
|
|
||||||
{:noreply, socket}
|
|
||||||
end
|
|
||||||
else
|
|
||||||
{:noreply, socket}
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -44,10 +44,9 @@
|
|||||||
total_count={@search_counts.collection_count}
|
total_count={@search_counts.collection_count}
|
||||||
>
|
>
|
||||||
<.search_result_record
|
<.search_result_record
|
||||||
:for={{record, index} <- Enum.with_index(@search_results.collection)}
|
:for={record <- @search_results.collection}
|
||||||
record={record}
|
record={record}
|
||||||
type={:collection}
|
type={:collection}
|
||||||
selected={@selected_index == index}
|
|
||||||
phx-click="navigate_to_record"
|
phx-click="navigate_to_record"
|
||||||
phx-value-id={record.id}
|
phx-value-id={record.id}
|
||||||
phx-value-type="collection"
|
phx-value-type="collection"
|
||||||
@@ -72,10 +71,9 @@
|
|||||||
class="border-t border-zinc-200 dark:border-zinc-700"
|
class="border-t border-zinc-200 dark:border-zinc-700"
|
||||||
>
|
>
|
||||||
<.search_result_record
|
<.search_result_record
|
||||||
:for={{record, index} <- Enum.with_index(@search_results.wishlist)}
|
:for={record <- @search_results.wishlist}
|
||||||
record={record}
|
record={record}
|
||||||
type={:wishlist}
|
type={:wishlist}
|
||||||
selected={@selected_index == length(@search_results.collection) + index}
|
|
||||||
phx-click="navigate_to_record"
|
phx-click="navigate_to_record"
|
||||||
phx-value-id={record.id}
|
phx-value-id={record.id}
|
||||||
phx-value-type="wishlist"
|
phx-value-type="wishlist"
|
||||||
@@ -100,12 +98,8 @@
|
|||||||
class="border-t border-zinc-200 dark:border-zinc-700"
|
class="border-t border-zinc-200 dark:border-zinc-700"
|
||||||
>
|
>
|
||||||
<.search_result_artist
|
<.search_result_artist
|
||||||
:for={{artist, index} <- Enum.with_index(@search_results.artists)}
|
:for={artist <- @search_results.artists}
|
||||||
artist={artist}
|
artist={artist}
|
||||||
selected={
|
|
||||||
@selected_index ==
|
|
||||||
length(@search_results.collection) + length(@search_results.wishlist) + index
|
|
||||||
}
|
|
||||||
phx-click="navigate_to_artist"
|
phx-click="navigate_to_artist"
|
||||||
phx-value-id={artist.musicbrainz_id}
|
phx-value-id={artist.musicbrainz_id}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user