a38ffbc55b
* Added ability to specify overwrite behaviour when downloading media * Added helper for redownloading media items * renamed media redownload worker to disambiguate it from similarly named methods * Added new redownload option to source actions dropdown * Refactored MediaQuery to use a __using__ macro * docs
102 lines
2.8 KiB
Elixir
102 lines
2.8 KiB
Elixir
defmodule PinchflatWeb.CustomComponents.TableComponents do
|
|
@moduledoc false
|
|
use Phoenix.Component
|
|
|
|
alias PinchflatWeb.CoreComponents
|
|
|
|
@doc """
|
|
Renders a table component with the given rows and columns.
|
|
|
|
## Examples
|
|
|
|
<.table rows={@users}>
|
|
<:col :let={user} label="Name"><%= user.name %></:col>
|
|
</.table>
|
|
"""
|
|
attr :rows, :list, required: true
|
|
attr :table_class, :string, default: ""
|
|
|
|
attr :row_item, :any,
|
|
default: &Function.identity/1,
|
|
doc: "the function for mapping each row before calling the :col and :action slots"
|
|
|
|
slot :col, required: true do
|
|
attr :label, :string
|
|
attr :class, :string
|
|
end
|
|
|
|
def table(assigns) do
|
|
~H"""
|
|
<table class={["w-full table-auto bg-boxdark", @table_class]}>
|
|
<thead>
|
|
<tr class="text-left bg-meta-4">
|
|
<th :for={col <- @col} class="px-4 py-4 font-medium text-white xl:pl-11">
|
|
<%= col[:label] %>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr :for={row <- @rows} class="border-b border-boxdark hover:border-strokedark">
|
|
<td
|
|
:for={col <- @col}
|
|
class={[
|
|
"px-4 py-5 pl-9 xl:pl-11",
|
|
col[:class]
|
|
]}
|
|
>
|
|
<%= render_slot(col, @row_item.(row)) %>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
"""
|
|
end
|
|
|
|
@doc """
|
|
Renders simple pagination controls for a table in a liveview.
|
|
|
|
## Examples
|
|
|
|
<.live_pagination_controls page_number={@page} total_pages={@total_pages} />
|
|
"""
|
|
attr :page_number, :integer, default: 1
|
|
attr :total_pages, :integer, default: 1
|
|
|
|
def live_pagination_controls(assigns) do
|
|
~H"""
|
|
<nav>
|
|
<ul class="flex flex-wrap items-center">
|
|
<li>
|
|
<span
|
|
class={[
|
|
"flex h-8 w-8 items-center justify-center rounded",
|
|
@page_number != 1 && "cursor-pointer hover:bg-primary hover:text-white",
|
|
@page_number == 1 && "cursor-not-allowed"
|
|
]}
|
|
phx-click={@page_number != 1 && "page_change"}
|
|
phx-value-direction="dec"
|
|
>
|
|
<CoreComponents.icon name="hero-chevron-left" />
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<span class="mx-2">Page <%= @page_number %> of <%= @total_pages %></span>
|
|
</li>
|
|
<li>
|
|
<span
|
|
class={[
|
|
"flex h-8 w-8 items-center justify-center rounded",
|
|
@page_number != @total_pages && "cursor-pointer hover:bg-primary hover:text-white",
|
|
@page_number == @total_pages && "cursor-not-allowed"
|
|
]}
|
|
phx-click={@page_number != @total_pages && "page_change"}
|
|
phx-value-direction="inc"
|
|
>
|
|
<CoreComponents.icon name="hero-chevron-right" />
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
"""
|
|
end
|
|
end
|