2022-03-26 10:17:01 +13:00
|
|
|
defmodule AshHqWeb.Components.Search do
|
|
|
|
use Surface.LiveComponent
|
|
|
|
|
|
|
|
require Ash.Query
|
|
|
|
|
2022-03-28 10:26:35 +13:00
|
|
|
alias AshHqWeb.Routes
|
|
|
|
alias Surface.Components.{Form, LiveRedirect}
|
2022-03-30 17:40:17 +13:00
|
|
|
alias Surface.Components.Form.{Checkbox, Label, Select}
|
2022-03-26 10:17:01 +13:00
|
|
|
|
|
|
|
prop open, :boolean, default: false
|
|
|
|
prop close, :event, required: true
|
2022-03-28 10:26:35 +13:00
|
|
|
prop libraries, :list, required: true
|
|
|
|
prop selected_versions, :map, required: true
|
|
|
|
prop change_versions, :event, required: true
|
2022-03-30 17:40:17 +13:00
|
|
|
prop selected_types, :list, required: true
|
|
|
|
prop change_types, :event, required: true
|
|
|
|
prop uri, :string, required: true
|
2022-03-26 10:17:01 +13:00
|
|
|
|
|
|
|
data versions, :map, default: %{}
|
|
|
|
data search, :string, default: ""
|
|
|
|
data results, :map, default: %{}
|
2022-03-26 16:16:20 +13:00
|
|
|
data selected_item, :string
|
2022-03-26 10:17:01 +13:00
|
|
|
|
|
|
|
def render(assigns) do
|
|
|
|
~F"""
|
2022-03-26 16:16:20 +13:00
|
|
|
<div
|
|
|
|
id={@id}
|
2022-03-28 10:26:35 +13:00
|
|
|
style="display: none;"
|
2022-03-30 05:12:28 +13:00
|
|
|
class="absolute flex justify-center align-middle w-screen h-full backdrop-blur-sm pb-8 bg-white bg-opacity-10"
|
2022-03-26 16:16:20 +13:00
|
|
|
>
|
2022-03-26 10:17:01 +13:00
|
|
|
<div
|
|
|
|
:on-click-away={AshHqWeb.AppViewLive.toggle_search()}
|
2022-03-26 16:16:20 +13:00
|
|
|
class="dark:text-white absolute rounded-xl left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 bg-white dark:bg-primary-black border-2 dark:border-gray-900"
|
|
|
|
:on-window-keydown="select-previous"
|
|
|
|
phx-key="ArrowUp"
|
|
|
|
>
|
|
|
|
<div class="h-full px-6 my-6" :on-window-keydown="select-next" phx-key="ArrowDown">
|
2022-03-30 17:40:17 +13:00
|
|
|
<div class="w-full flex flex-row justify-start sticky top-0 pb-3 border-b border-gray-600">
|
2022-03-26 10:17:01 +13:00
|
|
|
<Heroicons.Outline.SearchIcon class="h-6 w-6 mr-4 ml-4" />
|
|
|
|
<div class="flex flex-row justify-between w-full">
|
2022-03-30 17:40:17 +13:00
|
|
|
<Form for={:search} change="search" submit="go-to-doc" class="w-full">
|
2022-03-26 16:16:20 +13:00
|
|
|
<input
|
|
|
|
id="search-input"
|
2022-06-06 06:03:45 +12:00
|
|
|
phx-debounce="150"
|
2022-03-26 16:16:20 +13:00
|
|
|
name="search"
|
2022-04-02 11:49:26 +13:00
|
|
|
class="text-lg dark:bg-primary-black grow ring-0 outline-none w-full"
|
2022-03-26 16:16:20 +13:00
|
|
|
/>
|
2022-03-26 10:17:01 +13:00
|
|
|
</Form>
|
|
|
|
<button id="close-search" class="mr-4 ml-4 h-6 w-6 hover:text-gray-400" :on-click={@close}>
|
|
|
|
<Heroicons.Outline.XIcon class="h-6 w-6" />
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-03-26 16:16:20 +13:00
|
|
|
<div class="grid grid-cols-9 h-[85%] mt-3">
|
2022-03-28 10:26:35 +13:00
|
|
|
<div class="col-span-3 md:col-span-2 xl:col-span-1 border-r border-gray-600">
|
2022-03-30 17:40:17 +13:00
|
|
|
<Form for={:types} change={@change_types}>
|
2022-04-02 11:49:26 +13:00
|
|
|
<div class="flex flex-col border-b">
|
|
|
|
<div>Search for:</div>
|
|
|
|
{#for type <- AshHq.Docs.Extensions.Search.Types.types()}
|
|
|
|
<div class="flex flex-row items-center">
|
|
|
|
<Checkbox class="mr-4" id={"#{type}-selected"} value={type in @selected_types} name={"types[#{type}]"} />
|
|
|
|
<Label field={type}>
|
|
|
|
{type}
|
|
|
|
</Label>
|
|
|
|
</div>
|
|
|
|
{/for}
|
|
|
|
</div>
|
2022-03-30 17:40:17 +13:00
|
|
|
</Form>
|
2022-03-28 10:26:35 +13:00
|
|
|
<Form for={:versions} change={@change_versions}>
|
2022-04-02 11:49:26 +13:00
|
|
|
<div class="flex flex-col space-y-2">
|
|
|
|
Project versions:
|
2022-03-26 10:17:01 +13:00
|
|
|
{#for library <- @libraries}
|
2022-04-02 11:49:26 +13:00
|
|
|
<div class="flex flex-col">
|
|
|
|
<Label field={library.id}>
|
|
|
|
{library.display_name}
|
|
|
|
</Label>
|
|
|
|
<div class="pb-2">
|
|
|
|
<Select
|
|
|
|
id={"versions-select-#{library.id}"}
|
|
|
|
class="text-black form-select rounded-md pt-1 py-2 w-3/4 border dark:border-0 bg-gray-100 dark:bg-white"
|
|
|
|
name={"versions[#{library.id}]"}
|
|
|
|
selected={Map.get(@selected_versions, library.id)}
|
2022-04-08 18:59:39 +12:00
|
|
|
options={[{"latest", "latest"}] ++ Enum.map(library.versions, &{&1.version, &1.id})}
|
2022-04-02 11:49:26 +13:00
|
|
|
/>
|
|
|
|
</div>
|
2022-03-26 10:17:01 +13:00
|
|
|
</div>
|
|
|
|
{/for}
|
2022-04-02 11:49:26 +13:00
|
|
|
</div>
|
2022-03-26 10:17:01 +13:00
|
|
|
</Form>
|
|
|
|
</div>
|
2022-03-28 10:26:35 +13:00
|
|
|
<div class="pl-4 overflow-y-auto col-span-6 md:col-span-7 xl:col-span-8">
|
2022-03-26 16:16:20 +13:00
|
|
|
{render_groups(assigns, @results)}
|
2022-03-26 10:17:01 +13:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2022-03-26 16:16:20 +13:00
|
|
|
defp render_groups(assigns, results, first? \\ true) do
|
2022-03-26 10:17:01 +13:00
|
|
|
~F"""
|
2022-03-26 16:16:20 +13:00
|
|
|
{#for {group, results} <- results}
|
|
|
|
<div class={"ml-4": !first?}>
|
|
|
|
{#if first?}
|
|
|
|
<div class="font-medium text-lg">
|
|
|
|
{group}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2022-03-29 08:47:43 +13:00
|
|
|
{#if Enum.empty?(results.items)}
|
2022-03-26 16:16:20 +13:00
|
|
|
{render_results(assigns, results)}
|
2022-03-29 08:47:43 +13:00
|
|
|
{#else}
|
|
|
|
<div class={"mt-4", "border-l border-gray-700 pl-2": !first?}>
|
|
|
|
{render_results(assigns, results)}
|
|
|
|
</div>
|
|
|
|
{/if}
|
2022-03-26 10:17:01 +13:00
|
|
|
</div>
|
|
|
|
{/for}
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2022-03-26 16:16:20 +13:00
|
|
|
defp render_results(assigns, results) do
|
|
|
|
~F"""
|
|
|
|
<div>
|
|
|
|
<div class="font-medium mb-1">
|
2022-03-28 10:26:35 +13:00
|
|
|
{#if Map.get(results, :path, []) != []}
|
2022-03-26 16:16:20 +13:00
|
|
|
<div class="flex flex-row justify-start align-middle items-center text-center">
|
2022-03-28 10:26:35 +13:00
|
|
|
{#for path_item <- Map.get(results, :path, [])}
|
2022-03-26 16:16:20 +13:00
|
|
|
<Heroicons.Solid.ChevronRightIcon class="h-6 w-6" />
|
|
|
|
<div>
|
|
|
|
{path_item}
|
|
|
|
</div>
|
|
|
|
{/for}
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{#for item <- results.items}
|
2022-04-08 18:59:39 +12:00
|
|
|
<LiveRedirect to={Routes.doc_link(item, @selected_versions)} opts={id: item.id}>
|
2022-04-02 08:11:17 +13:00
|
|
|
<div class={
|
2022-04-02 11:49:26 +13:00
|
|
|
"rounded-lg mb-4 py-4 px-2 hover:bg-gray-400 dark:hover:bg-gray-600",
|
|
|
|
"bg-gray-400 dark:bg-gray-600": @selected_item.id == item.id,
|
|
|
|
"bg-gray-200 dark:bg-gray-800": @selected_item.id != item.id
|
2022-04-02 08:11:17 +13:00
|
|
|
}>
|
2022-03-29 11:05:19 +13:00
|
|
|
{#if item.__struct__ != AshHq.Docs.LibraryVersion &&
|
|
|
|
item.name != List.last(Map.get(results, :path, []))}
|
2022-03-28 10:26:35 +13:00
|
|
|
{item.name}
|
|
|
|
{/if}
|
|
|
|
{#if item.__struct__ == AshHq.Docs.LibraryVersion}
|
|
|
|
{item.version}
|
|
|
|
{/if}
|
2022-04-02 11:49:26 +13:00
|
|
|
<div class="text-gray-700 dark:text-gray-400">
|
2022-03-28 10:26:35 +13:00
|
|
|
{raw(item.search_headline)}
|
|
|
|
</div>
|
2022-03-26 16:16:20 +13:00
|
|
|
</div>
|
2022-03-28 10:26:35 +13:00
|
|
|
</LiveRedirect>
|
2022-03-26 16:16:20 +13:00
|
|
|
{/for}
|
|
|
|
{render_groups(assigns, results.further, false)}
|
|
|
|
</div>
|
|
|
|
"""
|
|
|
|
end
|
|
|
|
|
2022-03-26 10:17:01 +13:00
|
|
|
def mount(socket) do
|
|
|
|
{:ok, socket}
|
|
|
|
end
|
|
|
|
|
2022-03-30 17:40:17 +13:00
|
|
|
def update(assigns, socket) do
|
|
|
|
{:ok, socket |> assign(assigns) |> search()}
|
|
|
|
end
|
|
|
|
|
2022-03-26 10:17:01 +13:00
|
|
|
def handle_event("search", %{"search" => search}, socket) do
|
|
|
|
{:noreply, socket |> assign(:search, search) |> search()}
|
|
|
|
end
|
|
|
|
|
2022-03-26 16:16:20 +13:00
|
|
|
def handle_event("select-next", _, socket) do
|
2022-03-28 10:26:35 +13:00
|
|
|
if socket.assigns[:selected_item] && socket.assigns[:item_list] do
|
2022-03-26 16:16:20 +13:00
|
|
|
next =
|
2022-03-28 10:26:35 +13:00
|
|
|
socket.assigns.item_list
|
|
|
|
|> Enum.drop_while(&(&1.id != socket.assigns.selected_item.id))
|
2022-03-26 16:16:20 +13:00
|
|
|
|> Enum.at(1)
|
|
|
|
|
|
|
|
{:noreply, set_selected_item(socket, next)}
|
|
|
|
else
|
|
|
|
{:noreply, socket}
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
|
|
|
def handle_event("select-previous", _, socket) do
|
2022-03-28 10:26:35 +13:00
|
|
|
if socket.assigns[:selected_item] && socket.assigns[:item_list] do
|
2022-03-26 16:16:20 +13:00
|
|
|
next =
|
2022-03-28 10:26:35 +13:00
|
|
|
socket.assigns.item_list
|
2022-03-26 16:16:20 +13:00
|
|
|
|> Enum.reverse()
|
2022-03-28 10:26:35 +13:00
|
|
|
|> Enum.drop_while(&(&1.id != socket.assigns.selected_item.id))
|
2022-03-26 16:16:20 +13:00
|
|
|
|> Enum.at(1)
|
|
|
|
|
|
|
|
{:noreply, set_selected_item(socket, next)}
|
|
|
|
else
|
|
|
|
{:noreply, socket}
|
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2022-03-28 10:26:35 +13:00
|
|
|
def handle_event("go-to-doc", _, socket) do
|
|
|
|
case Enum.find(socket.assigns.item_list, fn item ->
|
|
|
|
item.id == socket.assigns.selected_item.id
|
|
|
|
end) do
|
|
|
|
nil ->
|
|
|
|
{:noreply, socket}
|
|
|
|
|
|
|
|
item ->
|
2022-03-30 17:40:17 +13:00
|
|
|
{:noreply, push_redirect(socket, to: Routes.doc_link(item))}
|
2022-03-28 10:26:35 +13:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2022-03-26 10:17:01 +13:00
|
|
|
defp search(socket) do
|
|
|
|
if socket.assigns[:search] in [nil, ""] || socket.assigns[:selected_versions] in [nil, %{}] do
|
2022-06-05 08:58:50 +12:00
|
|
|
assign(socket, results: %{}, item_list: [])
|
2022-03-26 10:17:01 +13:00
|
|
|
else
|
2022-04-08 18:59:39 +12:00
|
|
|
versions =
|
|
|
|
Enum.map(socket.assigns.selected_versions, fn
|
|
|
|
{library_id, "latest"} ->
|
|
|
|
Enum.find_value(socket.assigns.libraries, fn library ->
|
|
|
|
if library.id == library_id do
|
|
|
|
case Enum.find(library.versions, &String.contains?(&1.version, ".")) ||
|
|
|
|
Enum.at(library.versions, 0) do
|
|
|
|
nil ->
|
|
|
|
nil
|
|
|
|
|
|
|
|
version ->
|
|
|
|
version.id
|
|
|
|
end
|
|
|
|
end
|
|
|
|
end)
|
|
|
|
|
|
|
|
{_, version_id} ->
|
|
|
|
version_id
|
|
|
|
end)
|
|
|
|
|> Enum.reject(&is_nil/1)
|
|
|
|
|
2022-04-05 18:20:36 +12:00
|
|
|
%{results: results, item_list: item_list} =
|
|
|
|
AshHq.Docs.Search.run!(
|
|
|
|
socket.assigns.search,
|
2022-04-08 18:59:39 +12:00
|
|
|
versions
|
2022-03-29 08:47:43 +13:00
|
|
|
)
|
|
|
|
|
2022-03-28 10:26:35 +13:00
|
|
|
selected_item = Enum.at(item_list, 0)
|
2022-03-26 16:16:20 +13:00
|
|
|
|
|
|
|
socket
|
|
|
|
|> assign(:results, results)
|
2022-03-28 10:26:35 +13:00
|
|
|
|> assign(:item_list, item_list)
|
2022-03-26 16:16:20 +13:00
|
|
|
|> set_selected_item(selected_item)
|
2022-03-26 10:17:01 +13:00
|
|
|
end
|
|
|
|
end
|
|
|
|
|
2022-03-26 16:16:20 +13:00
|
|
|
defp set_selected_item(socket, nil), do: socket
|
|
|
|
|
|
|
|
defp set_selected_item(socket, selected_item) do
|
|
|
|
socket
|
|
|
|
|> assign(:selected_item, selected_item)
|
2022-03-28 10:26:35 +13:00
|
|
|
|> push_event("js:scroll-to", %{id: selected_item.id, boundary_id: socket.assigns[:id]})
|
2022-03-26 16:16:20 +13:00
|
|
|
end
|
2022-03-26 10:17:01 +13:00
|
|
|
end
|