Add the search and pagination for Server Index LiveView.

dev
KKlochko 2 months ago
parent 97633869df
commit 403d037b55

@ -1,45 +1,73 @@
defmodule DecentralisedBookIndexWeb.DbiServerLive.Index do defmodule DecentralisedBookIndexWeb.DbiServerLive.Index do
use DecentralisedBookIndexWeb, :live_view use DecentralisedBookIndexWeb, :live_view
alias DecentralisedBookIndex.Metadata
@impl true @impl true
def render(assigns) do def render(assigns) do
~H""" ~H"""
<.header> <.header>
Listing servers Listing servers
<:actions>
<.link patch={~p"/servers/new"}>
<.button>New server</.button>
</.link>
</:actions>
</.header> </.header>
<div class="pt-2"> <div class="pt-2">
<.table <.search_resources
id="dbi_servers" search_query={@search_query}
rows={@streams.dbi_servers} select_options={@select_options}
row_click={fn {_id, dbi_server} -> JS.navigate(~p"/servers/#{dbi_server}") end} selected_option={@sort_by}
> current_user={@current_user}
<:col :let={{_id, dbi_server}} label="Name">{dbi_server.name}</:col> resource_type="server"
resource_new_url={~p"/servers/new"}
<:col :let={{_id, dbi_server}} label="Url">{dbi_server.url}</:col> />
</div>
<:action :let={{_id, dbi_server}}>
<div class="sr-only"> <%= if Enum.empty?(@page.results) do %>
<.link navigate={~p"/servers/#{dbi_server}"}>Show</.link> <div class="flex justify-center ">
</div> <div>
<p class="text-xl font-semibold py-5 dark:text-white">
<.link patch={~p"/servers/#{dbi_server}/edit"}>Edit</.link> No Servers
</:action> </p>
</div>
<:action :let={{id, dbi_server}}> </div>
<.link <% else %>
phx-click={JS.push("delete", value: %{id: dbi_server.id}) |> hide("##{id}")} <div class="pt-2 flex flex-col gap-2">
data-confirm="Are you sure?" <.table
> id="dbi_servers"
Delete rows={@page.results}
</.link> row_click={fn dbi_server -> JS.navigate(~p"/servers/#{dbi_server}") end}
</:action> >
</.table> <:col :let={dbi_server} label="Name">{dbi_server.name}</:col>
<:col :let={dbi_server} label="Url">{dbi_server.url}</:col>
<:action :let={dbi_server}>
<div class="sr-only">
<.link navigate={~p"/servers/#{dbi_server}"}>Show</.link>
</div>
<.link patch={~p"/servers/#{dbi_server}/edit"}>Edit</.link>
</:action>
<:action :let={dbi_server}>
<.link
phx-click={JS.push("delete", value: %{id: dbi_server.id}) |> hide("##{dbi_server.id}")}
data-confirm="Are you sure?"
>
Delete
</.link>
</:action>
</.table>
<.pagination
endpoint={~p"/servers"}
page={@page}
page_params={@page_params}
params={@params}
/>
</div>
<% end %>
<div class="pt-2">
</div> </div>
<.modal <.modal
@ -74,7 +102,29 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Index do
@impl true @impl true
def handle_params(params, _url, socket) do def handle_params(params, _url, socket) do
{:noreply, apply_action(socket, socket.assigns.live_action, params)} search_query = Map.get(params, "query", "")
sort_by = Map.get(params, "sort_by", "name") |> validate_sort_by()
page_params = AshPhoenix.LiveView.page_from_params(params, 10)
page = Metadata.search_dbi_server!(
search_query,
query: [sort_input: sort_by],
page: page_params ++ [count: true],
actor: socket.assigns.current_user
)
socket =
socket
|> assign(:sort_by, sort_by)
|> assign(:search_query, search_query)
|> assign(:select_options, sort_options())
|> assign(:page_params, page_params)
|> assign(:page, page)
|> assign(:params, params)
|> apply_action(socket.assigns.live_action, params)
{:noreply, socket}
# {:noreply, apply_action(socket, socket.assigns.live_action, params)}
end end
defp apply_action(socket, :edit, %{"id" => id}) do defp apply_action(socket, :edit, %{"id" => id}) do
@ -115,4 +165,40 @@ defmodule DecentralisedBookIndexWeb.DbiServerLive.Index do
{:noreply, stream_delete(socket, :dbi_servers, dbi_server)} {:noreply, stream_delete(socket, :dbi_servers, dbi_server)}
end end
defp sort_options do
[
{"Sort by name", "name"},
{"Sort by recently updated", "-updated_at"},
{"Sort by recently added", "-inserted_at"},
]
end
def validate_sort_by(key) do
valid_keys = Enum.map(sort_options(), &elem(&1, 1))
if key in valid_keys do
key
else
List.first(valid_keys)
end
end
@impl true
def handle_event("change-sort", %{"sort_by" => sort_by}, socket) do
params =
socket.assigns.params
|> Map.put("sort_by", sort_by)
{:noreply, push_patch(socket, to: ~p"/servers?#{params}")}
end
@impl true
def handle_event("search", %{"query" => query}, socket) do
params =
socket.assigns.params
|> Map.put("query", query)
{:noreply, push_patch(socket, to: ~p"/servers?#{params}")}
end
end end

Loading…
Cancel
Save