Mirrors/Claper
1
0
Fork 0
mirror of https://github.com/ClaperCo/Claper.git synced 2026-08-29 10:09:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjust interaction list paging on resize

Browse Source
This commit is contained in:
Alex Lion
2026-08-20 19:04:58 +07:00
parent 36a89c53dc
commit cef515c527
5 changed files with 125 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lib/claper_web/live/event_live/manage.html.heex
View File

@@ -540,7 +540,10 @@
<!-- Bottom Section - Interactions & Options -->
<div class="flex-1 flex flex-col lg:flex-row overflow-y-auto lg:overflow-hidden">
<!-- Interactions Panel -->
<div class="lg:w-1/3 flex-shrink-0 p-4">
<div
id="interactions-pane"
class="lg:w-1/3 flex-shrink-0 p-4 lg:min-h-0 lg:flex lg:flex-col lg:overflow-hidden"
>
<.live_component
id="interaction-list"
module={ClaperWeb.EventLive.ManageInteractionListComponent}

35
lib/claper_web/live/event_live/manage_interaction_list_component.ex
View File

@@ -2,17 +2,21 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
use ClaperWeb, :live_component
@per_page 6
@max_per_page 20
@fixed_content_height 200
@interaction_row_height 64
def update(assigns, socket) do
page = Map.get(socket.assigns, :page, 0)
per_page = Map.get(socket.assigns, :per_page, @per_page)
total = length(assigns.interactions)
max_page = max(0, ceil(total / @per_page) - 1)
max_page = max_page(total, per_page)
page = min(page, max_page)
{:ok,
socket
|> assign(assigns)
|> assign(page: page, per_page: @per_page)}
|> assign(page: page, per_page: per_page)}
end
def handle_event("prev-page", _, socket) do
@@ -20,16 +24,38 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
end
def handle_event("next-page", _, socket) do
max_page = max(0, ceil(length(socket.assigns.interactions) / @per_page) - 1)
max_page = max_page(length(socket.assigns.interactions), socket.assigns.per_page)
{:noreply, assign(socket, page: min(max_page, socket.assigns.page + 1))}
end
def handle_event("interaction-list-resized", %{"height" => height}, socket)
when is_integer(height) do
per_page =
height
|> Kernel.-(@fixed_content_height)
|> div(@interaction_row_height)
|> max(@per_page)
|> min(@max_per_page)
first_interaction = socket.assigns.page * socket.assigns.per_page
page =
min(
div(first_interaction, per_page),
max_page(length(socket.assigns.interactions), per_page)
)
{:noreply, assign(socket, page: page, per_page: per_page)}
end
defp paginated_interactions(interactions, page, per_page) do
interactions
|> Enum.drop(page * per_page)
|> Enum.take(per_page)
end
defp max_page(total, per_page), do: max(0, ceil(total / per_page) - 1)
def render(assigns) do
assigns =
assign(assigns,
@@ -41,7 +67,8 @@ defmodule ClaperWeb.EventLive.ManageInteractionListComponent do
<div
id="interaction-drag-list"
phx-hook="InteractionDrag"
class="relative flex flex-col gap-2 border border-gray-200 rounded-2xl p-2"
phx-target={@myself}
class="relative flex flex-col gap-2 border border-gray-200 rounded-2xl p-2 lg:flex-1 lg:min-h-0 lg:overflow-y-auto"
>
<div class="flex items-center gap-2">
<svg