Files
music_library/lib/music_library_web/live/collection_live/index.html.heex
T
2025-05-12 17:13:04 +01:00

129 lines
3.4 KiB
Plaintext

<div>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<nav class="isolate inline-flex rounded-md shadow-xs">
<.button
class="rounded-l-md rounded-r-none"
variant="solid"
as="link"
size="sm"
patch={~p"/collection/import"}
>
<.icon name="hero-plus" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{gettext("Add")}
</.button>
<.button
class="-ml-px rounded-r-md rounded-l-none"
variant="solid"
as="link"
size="sm"
patch={~p"/collection/scan"}
>
<.barcode_icon class="mr-2 fill-current" />
{gettext("Scan")}
</.button>
</nav>
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-8">
<span class="isolate inline-flex rounded-md shadow-xs">
<.button
patch={order_path(@record_list_params, :purchase)}
as="link"
size="sm"
class={[
"rounded-l-md rounded-r-none",
@record_list_params.order == :purchase && "!bg-zinc-100 dark:!bg-zinc-700"
]}
>
<.icon
name="hero-banknotes-solid"
class="mr-1 h-4 w-4"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Purchase")}
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
as="link"
size="sm"
class={[
"-ml-px rounded-r-md rounded-l-none",
@record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
]}
>
<.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
{gettext("A->Z")}
</.button>
</span>
<p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400">
{gettext(
"Showing <b>%{visible}</b> of <b>%{total}</b> records",
%{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
)
|> raw()}
</p>
</div>
</div>
<.record_list
records={@streams.records}
record_show_path={fn record -> ~p"/collection/#{record}" end}
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
/>
<.modal
:if={@live_action == :edit}
id="record-modal"
show
on_cancel={JS.patch(back_path(@record_list_params))}
>
<.live_component
module={MusicLibraryWeb.FormComponent}
id={@record.id}
action={@live_action}
show_purchased_at={true}
record={@record}
patch={back_path(@record_list_params)}
/>
</.modal>
<.modal
:if={@live_action == :import}
id="record-modal"
show
on_cancel={JS.patch(back_path(@record_list_params))}
>
<.live_component
module={MusicLibraryWeb.AddRecordComponent}
id={:search}
title={@page_title}
action={@live_action}
record={@record}
patch={back_path(@record_list_params)}
initial_query=""
icon_name="hero-plus"
/>
</.modal>
<.modal
:if={@live_action == :barcode_scan}
id="barcode-scanner-modal"
show
on_cancel={JS.patch(back_path(@record_list_params))}
>
<.live_component
module={MusicLibraryWeb.BarcodeScannerComponent}
id={:barcode_scanner}
title={@page_title}
action={@live_action}
patch={back_path(@record_list_params)}
/>
</.modal>
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />