Packages
moon
2.72.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/examples/design/table_example/with_paging.ex
defmodule MoonWeb.Examples.Design.TableExample.WithPaging do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Table
alias Moon.Design.Table.Column
alias Moon.Design.Pagination
alias Moon.Components.Renderers.Datetime
alias Moon.Icons.ControlsChevronRight
alias Moon.Icons.ControlsChevronLeft
prop(current_page, :integer, default: 1)
prop(limit, :integer, default: 10)
def render(assigns) do
~F"""
<div class="w-full gap-4">
<Pagination
id="with_buttons"
total_pages={page_count(Enum.count(get_all_models()), @limit)}
value={@current_page}
on_change="handle_paging_click"
>
<Pagination.PrevButton class="border-none" testid="prev">
<ControlsChevronLeft class="text-moon-24 rtl:rotate-180" />
</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton class="border-none" testid="next">
<ControlsChevronRight class="text-moon-24 rtl:rotate-180" />
</Pagination.NextButton>
</Pagination>
<Table items={model <- get_models_10(assigns)}>
<Column name="id" label="ID">
{model.id}
</Column>
<Column name="name" label="Name">
{model.name}
</Column>
<Column name="created_at" label="Created at">
<Datetime value={model.created_at} />
</Column>
</Table>
</div>
"""
end
def get_all_models() do
Enum.map(1..102, fn x ->
%{id: x, name: "Name #{x}", created_at: DateTime.add(DateTime.utc_now(), -3600 + x)}
end)
end
defp page_count(total_count, limit) do
ceil(total_count / limit)
end
def get_models_10(assigns) do
all_models = get_all_models()
current_page = assigns.current_page
limit = assigns.limit
offset = (current_page - 1) * limit
all_models
|> Enum.slice(offset..(offset + limit - 1))
end
def handle_event("handle_paging_click", %{"value" => current_page}, socket) do
current_page = String.to_integer(current_page)
{:noreply,
socket
|> assign(current_page: current_page, models_10: get_models_10(socket.assigns))}
end
def code() do
"""
alias Moon.Design.Table
alias Moon.Design.Table.Column
alias Moon.Design.Pagination
alias Moon.Components.Renderers.Datetime
alias Moon.Icons.ControlsChevronRight
alias Moon.Icons.ControlsChevronLeft
prop(current_page, :integer, default: 1)
prop(limit, :integer, default: 10)
def render(assigns) do
~F\"""
<div class="w-full gap-4">
<Pagination
id="with_buttons"
total_pages={page_count(Enum.count(get_all_models()), @limit)}
value={@current_page}
on_change="handle_paging_click"
>
<Pagination.PrevButton class="border-none">
<ControlsChevronLeft class="text-moon-24 rtl:rotate-180" />
</Pagination.PrevButton>
<Pagination.Pages />
<Pagination.NextButton class="border-none">
<ControlsChevronRight class="text-moon-24 rtl:rotate-180" />
</Pagination.NextButton>
</Pagination>
<Table items={model <- get_models_10(assigns)}>
<Column name="id" label="ID">
{model.id}
</Column>
<Column name="name" label="Name">
{model.name}
</Column>
<Column name="created_at" label="Created at">
<Datetime value={model.created_at} />
</Column>
</Table>
</div>
\"""
end
def get_all_models() do
Enum.map(1..102, fn x ->
%{id: x, name: "Name #\{x}", created_at: DateTime.add(DateTime.utc_now(), -3600 + x)}
end)
end
defp page_count(total_count, limit) do
ceil(total_count / limit)
end
def get_models_10(assigns) do
all_models = get_all_models()
current_page = assigns.current_page
limit = assigns.limit
offset = (current_page - 1) * limit
all_models
|> Enum.slice(offset..(offset + limit - 1))
end
def handle_event("handle_paging_click", %{"value" => current_page}, socket) do
current_page = String.to_integer(current_page)
{:noreply,
socket
|> assign(current_page: current_page, models_10: get_models_10(socket.assigns))}
end
"""
end
end