This commit is contained in:
Adam Rutkowski 2023-05-17 17:41:44 +02:00
parent d9b7e1ffd3
commit 9bbffd3b59
3 changed files with 43 additions and 11 deletions

View File

@ -28,11 +28,15 @@ window.addEventListener(`phx:update-value`, (e) => {
}) })
window.addEventListener(`phx:hide`, (e) => { window.addEventListener(`phx:hide`, (e) => {
console.info(e)
let el = document.getElementById(e.detail.id) let el = document.getElementById(e.detail.id)
el.style.display = 'none' el.style.display = 'none'
}) })
window.addEventListener(`phx:scroll-to`, (e) => {
let el = document.getElementById(e.detail.id)
el.scrollIntoView({ block: 'center' })
})
const triggers = document.querySelectorAll('[data-dropdown-trigger]') const triggers = document.querySelectorAll('[data-dropdown-trigger]')
for (const trigger of triggers) { for (const trigger of triggers) {

View File

@ -52,6 +52,7 @@ defmodule Plausible.Goals do
from g in Goal, from g in Goal,
inner_join: assoc(g, :site), inner_join: assoc(g, :site),
where: g.site_id == ^site.id, where: g.site_id == ^site.id,
order_by: [desc: g.id],
preload: [:site] preload: [:site]
query query

View File

@ -2,6 +2,8 @@ defmodule PlausibleWeb.Live.FunnelSettings.InputPicker do
use Phoenix.LiveComponent use Phoenix.LiveComponent
alias Phoenix.LiveView.JS alias Phoenix.LiveView.JS
@max_options_displayed 100
def update(assigns, socket) do def update(assigns, socket) do
socket = socket =
socket socket
@ -9,12 +11,14 @@ defmodule PlausibleWeb.Live.FunnelSettings.InputPicker do
|> assign(:candidate, 0) |> assign(:candidate, 0)
|> assign_new(:display_value, fn -> "" end) |> assign_new(:display_value, fn -> "" end)
|> assign_new(:submit_value, fn -> "" end) |> assign_new(:submit_value, fn -> "" end)
|> assign_new(:choices, fn -> assigns.options end) |> assign_new(:choices, fn ->
Enum.take(assigns.options, @max_options_displayed)
end)
{:ok, socket} {:ok, socket}
end end
attr :placeholder, :string, default: "Select option" attr :placeholder, :string, default: "Select option or search by typing"
attr :id, :any, default: nil attr :id, :any, default: nil
attr :options, :list, required: true attr :options, :list, required: true
@ -85,7 +89,14 @@ defmodule PlausibleWeb.Live.FunnelSettings.InputPicker do
id={"dropdown-#{@ref}"} id={"dropdown-#{@ref}"}
phx-target={@target} phx-target={@target}
class="dropdown hidden z-50 absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm dark:bg-gray-900"> class="dropdown hidden z-50 absolute mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm dark:bg-gray-900">
<.option :if={@choices != []} :for={{{submit_value, display_value}, idx} <- Enum.with_index(@choices)} idx={idx} submit_value={submit_value} display_value={display_value} target={@target} ref={@ref} candidate={@candidate} /> <.option :if={@choices != []} :for={{{submit_value, display_value}, idx} <- Enum.with_index(@choices)}
idx={idx}
submit_value={submit_value}
display_value={display_value}
target={@target}
ref={@ref}
candidate={@candidate} />
<div :if={@choices == []} class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-gray-300"> <div :if={@choices == []} class="relative cursor-default select-none py-2 px-4 text-gray-700 dark:text-gray-300">
No matches found. Try searching for something different. No matches found. Try searching for something different.
</div> </div>
@ -102,7 +113,9 @@ defmodule PlausibleWeb.Live.FunnelSettings.InputPicker do
def option(assigns) do def option(assigns) do
~H""" ~H"""
<li class={["relative select-none py-2 px-3 cursor-pointer dark:text-gray-300", @idx == @candidate && "text-white bg-indigo-500"]}> <li class={["relative select-none py-2 px-3 cursor-pointer dark:text-gray-300", @idx == @candidate && "text-white bg-indigo-500"]}
id={"dropdown-#{@ref}-option-#{@idx}"}>
<a phx-click={select_option(@ref, @submit_value, @display_value)} phx-value-display-value={@display_value} phx-target={@target}> <a phx-click={select_option(@ref, @submit_value, @display_value)} phx-value-display-value={@display_value} phx-target={@target}>
<span class="block truncate"> <span class="block truncate">
<%= @display_value %> <%= @display_value %>
@ -133,22 +146,32 @@ defmodule PlausibleWeb.Live.FunnelSettings.InputPicker do
"keypress", "keypress",
%{"key" => "ArrowDown"}, %{"key" => "ArrowDown"},
%{ %{
assigns: %{candidate: c, choices: choices} assigns: %{candidate: c, choices: choices, id: id}
} = socket } = socket
) )
when c < length(choices) - 1 do when c < length(choices) - 1 do
{:noreply, assign(socket, candidate: c + 1)} socket =
socket
|> push_event("scroll-to", %{id: "dropdown-#{id}-option-#{c}"})
|> assign(candidate: c + 1)
{:noreply, socket}
end end
def handle_event( def handle_event(
"keypress", "keypress",
%{"key" => "ArrowUp"}, %{"key" => "ArrowUp"},
%{ %{
assigns: %{candidate: c} assigns: %{candidate: c, id: id}
} = socket } = socket
) )
when c > 0 do when c > 0 do
{:noreply, assign(socket, candidate: c - 1)} socket =
socket
|> push_event("scroll-to", %{id: "dropdown-#{id}-option-#{c}"})
|> assign(candidate: c - 1)
{:noreply, socket}
end end
def handle_event( def handle_event(
@ -184,11 +207,15 @@ defmodule PlausibleWeb.Live.FunnelSettings.InputPicker do
fn {_, display_value} -> String.jaro_distance(display_value, typed) end, fn {_, display_value} -> String.jaro_distance(display_value, typed) end,
:desc :desc
) )
|> Enum.take(10) |> Enum.take(@max_options_displayed)
{:noreply, assign(socket, %{choices: choices, candidate: 0})} {:noreply, assign(socket, %{choices: choices, candidate: 0})}
else else
{:noreply, assign(socket, %{choices: Enum.take(socket.assigns.options, 10), candidate: 0})} {:noreply,
assign(socket, %{
choices: Enum.take(socket.assigns.options, @max_options_displayed),
candidate: 0
})}
end end
end end