Extract shared cart sidebar component
This commit is contained in:
Claudio Ortolina
@@ -297,6 +297,7 @@ All authenticated routes live inside a single `live_session` with three `on_moun
|
|||||||
| `StatsComponents` | Stats dashboard widgets (`section/1` layout, counters, album preview, records on this day) |
|
| `StatsComponents` | Stats dashboard widgets (`section/1` layout, counters, album preview, records on this day) |
|
||||||
| `ScrobbleComponents` | Scrobble activity displays: status badges, import dropdowns, metadata tooltips, and record-matching UI |
|
| `ScrobbleComponents` | Scrobble activity displays: status badges, import dropdowns, metadata tooltips, and record-matching UI |
|
||||||
| `SearchComponents` | Search result rendering |
|
| `SearchComponents` | Search result rendering |
|
||||||
|
| `CartComponents` | `cart_sidebar/1` — shared cart aside used by `AddRecord` and `BarcodeScanner` |
|
||||||
| `Pagination` | Pagination UI and logic |
|
| `Pagination` | Pagination UI and logic |
|
||||||
|
|
||||||
### Web Utility Modules (lib/music_library_web/)
|
### Web Utility Modules (lib/music_library_web/)
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
|||||||
|
|
||||||
use MusicLibraryWeb, :live_component
|
use MusicLibraryWeb, :live_component
|
||||||
|
|
||||||
|
import MusicLibraryWeb.CartComponents, only: [cart_sidebar: 1]
|
||||||
import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
|
import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
|
||||||
|
|
||||||
alias MusicBrainz.ReleaseGroupSearchResult
|
alias MusicBrainz.ReleaseGroupSearchResult
|
||||||
@@ -81,156 +82,101 @@ defmodule MusicLibraryWeb.Components.AddRecord do
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class={[
|
<.cart_sidebar
|
||||||
"md:col-span-2",
|
count={length(@cart)}
|
||||||
"border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
|
expanded?={@cart_expanded?}
|
||||||
"flex flex-col"
|
on_clear="clear_cart"
|
||||||
]}>
|
on_toggle="toggle_cart"
|
||||||
<div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
|
target={@myself}
|
||||||
<div class="flex items-center gap-2">
|
empty_heading={gettext("Your cart is empty")}
|
||||||
<p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
|
empty_subtext={gettext("Add records from the search results to get started.")}
|
||||||
{gettext("Cart")}
|
>
|
||||||
</p>
|
<:empty_icon>
|
||||||
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
<.icon
|
||||||
{ngettext("%{count} record", "%{count} records", length(@cart), count: length(@cart))}
|
name="hero-shopping-bag"
|
||||||
</span>
|
class="size-8 text-zinc-400"
|
||||||
</div>
|
aria-hidden="true"
|
||||||
<div class="flex items-center gap-3">
|
data-slot="icon"
|
||||||
<button
|
/>
|
||||||
:if={@cart != []}
|
</:empty_icon>
|
||||||
type="button"
|
<:action>
|
||||||
phx-click="clear_cart"
|
<.button
|
||||||
phx-target={@myself}
|
variant="solid"
|
||||||
class="text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
|
phx-click="import_cart"
|
||||||
>
|
phx-target={@myself}
|
||||||
{gettext("Clear all")}
|
disabled={@importing?}
|
||||||
</button>
|
class="w-full"
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
phx-click="toggle_cart"
|
|
||||||
phx-target={@myself}
|
|
||||||
class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
|
|
||||||
aria-label={gettext("Toggle cart")}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name={if @cart_expanded?, do: "hero-chevron-down", else: "hero-chevron-up"}
|
|
||||||
class="size-4"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={["md:!block", not @cart_expanded? && "hidden"]}>
|
|
||||||
<div
|
|
||||||
:if={@cart == []}
|
|
||||||
id="cart-empty"
|
|
||||||
class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
|
|
||||||
>
|
>
|
||||||
<.icon
|
<.icon
|
||||||
name="hero-shopping-bag"
|
:if={@importing?}
|
||||||
class="size-8 text-zinc-400"
|
name="hero-arrow-path"
|
||||||
|
class="icon animate-spin"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
data-slot="icon"
|
data-slot="icon"
|
||||||
/>
|
/>
|
||||||
<p class="text-sm text-zinc-500 dark:text-zinc-400">
|
<.icon
|
||||||
{gettext("Your cart is empty")}
|
:if={not @importing?}
|
||||||
|
name="hero-plus"
|
||||||
|
class="icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{ngettext(
|
||||||
|
"Import %{count} record",
|
||||||
|
"Import %{count} records",
|
||||||
|
length(@cart),
|
||||||
|
count: length(@cart)
|
||||||
|
)}
|
||||||
|
</.button>
|
||||||
|
</:action>
|
||||||
|
<li
|
||||||
|
:for={item <- @cart}
|
||||||
|
id={"cart-item-#{item.cart_item_id}"}
|
||||||
|
class="flex gap-3 px-4 py-3"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-12 h-12 rounded-md object-cover"
|
||||||
|
alt={item.title}
|
||||||
|
src={item.thumb_url}
|
||||||
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
|
/>
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{item.artists}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-xs text-zinc-500 dark:text-zinc-400">
|
<p class="truncate text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
||||||
{gettext("Add records from the search results to get started.")}
|
{item.title}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
<div class="mt-1 flex items-center gap-2">
|
||||||
|
<form phx-change="change_format" phx-target={@myself}>
|
||||||
<ul
|
<input type="hidden" name="cart_item_id" value={item.cart_item_id} />
|
||||||
:if={@cart != []}
|
<select
|
||||||
id="cart-items"
|
name="format"
|
||||||
class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
|
aria-label={gettext("Format")}
|
||||||
>
|
class="rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-xs px-1.5 py-0.5"
|
||||||
<li
|
>
|
||||||
:for={item <- @cart}
|
<option
|
||||||
id={"cart-item-#{item.cart_item_id}"}
|
:for={format <- Records.Record.formats()}
|
||||||
class="flex gap-3 px-4 py-3"
|
value={format}
|
||||||
>
|
selected={format == item.format}
|
||||||
<img
|
|
||||||
class="w-12 h-12 rounded-md object-cover"
|
|
||||||
alt={item.title}
|
|
||||||
src={item.thumb_url}
|
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
|
||||||
/>
|
|
||||||
<div class="min-w-0 flex-1">
|
|
||||||
<p class="truncate text-xs text-zinc-500 dark:text-zinc-400">
|
|
||||||
{item.artists}
|
|
||||||
</p>
|
|
||||||
<p class="truncate text-sm font-medium text-zinc-700 dark:text-zinc-300">
|
|
||||||
{item.title}
|
|
||||||
</p>
|
|
||||||
<div class="mt-1 flex items-center gap-2">
|
|
||||||
<form phx-change="change_format" phx-target={@myself}>
|
|
||||||
<input type="hidden" name="cart_item_id" value={item.cart_item_id} />
|
|
||||||
<select
|
|
||||||
name="format"
|
|
||||||
aria-label={gettext("Format")}
|
|
||||||
class="rounded-md border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 text-xs px-1.5 py-0.5"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
:for={format <- Records.Record.formats()}
|
|
||||||
value={format}
|
|
||||||
selected={format == item.format}
|
|
||||||
>
|
|
||||||
{format_label(format)}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</form>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
phx-click="remove_from_cart"
|
|
||||||
phx-value-cart_item_id={item.cart_item_id}
|
|
||||||
phx-target={@myself}
|
|
||||||
class="text-xs text-zinc-500 hover:text-red-600 dark:hover:text-red-400"
|
|
||||||
>
|
>
|
||||||
{gettext("Remove")}
|
{format_label(format)}
|
||||||
</button>
|
</option>
|
||||||
</div>
|
</select>
|
||||||
</div>
|
</form>
|
||||||
</li>
|
<button
|
||||||
</ul>
|
type="button"
|
||||||
|
phx-click="remove_from_cart"
|
||||||
<div
|
phx-value-cart_item_id={item.cart_item_id}
|
||||||
:if={@cart != []}
|
phx-target={@myself}
|
||||||
class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
|
class="text-xs text-zinc-500 hover:text-red-600 dark:hover:text-red-400"
|
||||||
>
|
>
|
||||||
<.button
|
{gettext("Remove")}
|
||||||
variant="solid"
|
</button>
|
||||||
phx-click="import_cart"
|
</div>
|
||||||
phx-target={@myself}
|
|
||||||
disabled={@importing?}
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
:if={@importing?}
|
|
||||||
name="hero-arrow-path"
|
|
||||||
class="icon animate-spin"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
<.icon
|
|
||||||
:if={not @importing?}
|
|
||||||
name="hero-plus"
|
|
||||||
class="icon"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{ngettext(
|
|
||||||
"Import %{count} record",
|
|
||||||
"Import %{count} records",
|
|
||||||
length(@cart),
|
|
||||||
count: length(@cart)
|
|
||||||
)}
|
|
||||||
</.button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</aside>
|
</.cart_sidebar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
"""
|
"""
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
defmodule MusicLibraryWeb.Components.BarcodeScanner do
|
defmodule MusicLibraryWeb.Components.BarcodeScanner do
|
||||||
use MusicLibraryWeb, :live_component
|
use MusicLibraryWeb, :live_component
|
||||||
|
|
||||||
|
import MusicLibraryWeb.CartComponents, only: [cart_sidebar: 1]
|
||||||
|
|
||||||
alias MusicBrainz.ReleaseGroupSearchResult
|
alias MusicBrainz.ReleaseGroupSearchResult
|
||||||
alias MusicLibrary.BarcodeScan
|
alias MusicLibrary.BarcodeScan
|
||||||
alias MusicLibrary.Records
|
alias MusicLibrary.Records
|
||||||
@@ -40,108 +42,48 @@ defmodule MusicLibraryWeb.Components.BarcodeScanner do
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class={[
|
<.cart_sidebar
|
||||||
"md:col-span-2",
|
count={length(@scan_results)}
|
||||||
"border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
|
expanded?={@cart_expanded?}
|
||||||
"flex flex-col"
|
on_clear="clear_results"
|
||||||
]}>
|
on_toggle="toggle_cart"
|
||||||
<div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
|
target={@myself}
|
||||||
<div class="flex items-center gap-2">
|
empty_heading={gettext("Your cart is empty")}
|
||||||
<p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
|
empty_subtext={gettext("Scan barcodes to add records.")}
|
||||||
{gettext("Cart")}
|
>
|
||||||
</p>
|
<:empty_icon>
|
||||||
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
<.barcode_icon class="size-8 text-zinc-400" />
|
||||||
{ngettext(
|
</:empty_icon>
|
||||||
"%{count} record",
|
<:action>
|
||||||
"%{count} records",
|
<.button
|
||||||
length(@scan_results),
|
variant="solid"
|
||||||
count: length(@scan_results)
|
phx-disable-with={gettext("Adding...")}
|
||||||
)}
|
phx-click={JS.push("import_releases", target: "#barcode-scanner")}
|
||||||
</span>
|
class="w-full"
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<button
|
|
||||||
:if={@scan_results != []}
|
|
||||||
type="button"
|
|
||||||
phx-click="clear_results"
|
|
||||||
phx-target={@myself}
|
|
||||||
class="text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
|
|
||||||
>
|
|
||||||
{gettext("Clear all")}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
phx-click="toggle_cart"
|
|
||||||
phx-target={@myself}
|
|
||||||
class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
|
|
||||||
aria-label={gettext("Toggle cart")}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name={if @cart_expanded?, do: "hero-chevron-down", else: "hero-chevron-up"}
|
|
||||||
class="size-4"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={["md:!block", not @cart_expanded? && "hidden"]}>
|
|
||||||
<div
|
|
||||||
:if={@scan_results == []}
|
|
||||||
id="cart-empty"
|
|
||||||
class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
|
|
||||||
>
|
>
|
||||||
<.barcode_icon class="size-8 text-zinc-400" />
|
{ngettext(
|
||||||
<p class="text-sm text-zinc-500 dark:text-zinc-400">
|
"Add %{count} release",
|
||||||
{gettext("Your cart is empty")}
|
"Add %{count} releases",
|
||||||
</p>
|
length(@scan_results),
|
||||||
<p class="text-xs text-zinc-500 dark:text-zinc-400">
|
count: length(@scan_results)
|
||||||
{gettext("Scan barcodes to add records.")}
|
)}
|
||||||
</p>
|
</.button>
|
||||||
</div>
|
</:action>
|
||||||
|
<li
|
||||||
<ul
|
:for={result <- @scan_results}
|
||||||
:if={@scan_results != []}
|
id={"cart-item-#{result.number}"}
|
||||||
id="cart-items"
|
class="flex gap-3 px-4 py-3"
|
||||||
class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
|
phx-mounted={
|
||||||
>
|
JS.transition(
|
||||||
<li
|
{"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0",
|
||||||
:for={result <- @scan_results}
|
"first:opacity-100"},
|
||||||
id={"cart-item-#{result.number}"}
|
time: 300
|
||||||
class="flex gap-3 px-4 py-3"
|
)
|
||||||
phx-mounted={
|
}
|
||||||
JS.transition(
|
>
|
||||||
{"first:ease-in duration-300", "first:opacity-0 first:p-0 first:h-0",
|
<.cart_item result={result} myself={@myself} />
|
||||||
"first:opacity-100"},
|
</li>
|
||||||
time: 300
|
</.cart_sidebar>
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.cart_item result={result} myself={@myself} />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div
|
|
||||||
:if={@scan_results != []}
|
|
||||||
class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
|
|
||||||
>
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
phx-disable-with={gettext("Adding...")}
|
|
||||||
phx-click={JS.push("import_releases", target: "#barcode-scanner")}
|
|
||||||
class="w-full"
|
|
||||||
>
|
|
||||||
{ngettext(
|
|
||||||
"Add %{count} release",
|
|
||||||
"Add %{count} releases",
|
|
||||||
length(@scan_results),
|
|
||||||
count: length(@scan_results)
|
|
||||||
)}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script :type={Phoenix.LiveView.ColocatedHook} name=".BarcodeScanner">
|
<script :type={Phoenix.LiveView.ColocatedHook} name=".BarcodeScanner">
|
||||||
|
|||||||
@@ -0,0 +1,127 @@
|
|||||||
|
defmodule MusicLibraryWeb.CartComponents do
|
||||||
|
@moduledoc """
|
||||||
|
Shared cart sidebar used by the record import and barcode scanner flows.
|
||||||
|
|
||||||
|
Renders the right-hand `<aside>` shell: header (title, count, Clear all,
|
||||||
|
mobile toggle), collapsible body, empty state, items list, and action row.
|
||||||
|
Callers provide the per-item markup and action button via slots; cart state
|
||||||
|
(`:cart_expanded?`, item collection) and event handlers stay in the host
|
||||||
|
LiveComponent.
|
||||||
|
"""
|
||||||
|
|
||||||
|
use MusicLibraryWeb, :html
|
||||||
|
|
||||||
|
@doc """
|
||||||
|
Renders the cart sidebar.
|
||||||
|
|
||||||
|
The default slot is rendered inside a `<ul>` as `<li>` items when `@count > 0`.
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
<.cart_sidebar
|
||||||
|
count={length(@cart)}
|
||||||
|
expanded?={@cart_expanded?}
|
||||||
|
on_clear="clear_cart"
|
||||||
|
on_toggle="toggle_cart"
|
||||||
|
target={@myself}
|
||||||
|
empty_heading={gettext("Your cart is empty")}
|
||||||
|
empty_subtext={gettext("Add records from the search results to get started.")}
|
||||||
|
>
|
||||||
|
<:empty_icon>
|
||||||
|
<.icon name="hero-shopping-bag" class="size-8 text-zinc-400" aria-hidden="true" />
|
||||||
|
</:empty_icon>
|
||||||
|
<:action>
|
||||||
|
<.button phx-click="import_cart" phx-target={@myself}>Import</.button>
|
||||||
|
</:action>
|
||||||
|
<li :for={item <- @cart} id={"cart-item-" <> item.id}>...</li>
|
||||||
|
</.cart_sidebar>
|
||||||
|
"""
|
||||||
|
attr :count, :integer, required: true
|
||||||
|
attr :expanded?, :boolean, required: true
|
||||||
|
attr :on_clear, :string, required: true
|
||||||
|
attr :on_toggle, :string, required: true
|
||||||
|
attr :target, :any, required: true
|
||||||
|
attr :empty_heading, :string, required: true
|
||||||
|
attr :empty_subtext, :string, required: true
|
||||||
|
|
||||||
|
slot :empty_icon, required: true
|
||||||
|
slot :action
|
||||||
|
slot :inner_block
|
||||||
|
|
||||||
|
def cart_sidebar(assigns) do
|
||||||
|
~H"""
|
||||||
|
<aside class={[
|
||||||
|
"md:col-span-2",
|
||||||
|
"border-t md:border-t-0 md:border-l md:border-zinc-200 md:dark:border-zinc-800",
|
||||||
|
"flex flex-col"
|
||||||
|
]}>
|
||||||
|
<div class="px-4 py-3 flex items-center justify-between border-b border-zinc-200 dark:border-zinc-800">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<p class="text-sm font-semibold text-zinc-700 dark:text-zinc-300">
|
||||||
|
{gettext("Cart")}
|
||||||
|
</p>
|
||||||
|
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{ngettext("%{count} record", "%{count} records", @count, count: @count)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
:if={@count > 0}
|
||||||
|
type="button"
|
||||||
|
phx-click={@on_clear}
|
||||||
|
phx-target={@target}
|
||||||
|
class="text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
|
||||||
|
>
|
||||||
|
{gettext("Clear all")}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
phx-click={@on_toggle}
|
||||||
|
phx-target={@target}
|
||||||
|
class="rounded-md p-1 text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-800 md:hidden"
|
||||||
|
aria-label={gettext("Toggle cart")}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name={if @expanded?, do: "hero-chevron-down", else: "hero-chevron-up"}
|
||||||
|
class="size-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class={["md:!block", not @expanded? && "hidden"]}>
|
||||||
|
<div
|
||||||
|
:if={@count == 0}
|
||||||
|
id="cart-empty"
|
||||||
|
class="flex flex-col items-center justify-center gap-2 px-6 py-10 text-center"
|
||||||
|
>
|
||||||
|
{render_slot(@empty_icon)}
|
||||||
|
<p class="text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
{@empty_heading}
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{@empty_subtext}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
:if={@count > 0}
|
||||||
|
id="cart-items"
|
||||||
|
class="divide-y divide-zinc-200 dark:divide-zinc-800 md:max-h-[calc(100vh-20rem)] overflow-y-auto"
|
||||||
|
>
|
||||||
|
{render_slot(@inner_block)}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div
|
||||||
|
:if={@count > 0 and @action != []}
|
||||||
|
class="border-t border-zinc-200 dark:border-zinc-800 px-4 py-3"
|
||||||
|
>
|
||||||
|
{render_slot(@action)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
end
|
||||||
@@ -2459,8 +2459,7 @@ msgstr ""
|
|||||||
msgid "A rule for this album already exists"
|
msgid "A rule for this album already exists"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "%{count} record"
|
msgid "%{count} record"
|
||||||
msgid_plural "%{count} records"
|
msgid_plural "%{count} records"
|
||||||
@@ -2472,8 +2471,7 @@ msgstr[1] ""
|
|||||||
msgid "Add records from the search results to get started."
|
msgid "Add records from the search results to get started."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Cart"
|
msgid "Cart"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
@@ -2483,8 +2481,7 @@ msgstr ""
|
|||||||
msgid "Choose which format to add"
|
msgid "Choose which format to add"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Clear all"
|
msgid "Clear all"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
@@ -2496,8 +2493,7 @@ msgid_plural "Import %{count} records"
|
|||||||
msgstr[0] ""
|
msgstr[0] ""
|
||||||
msgstr[1] ""
|
msgstr[1] ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Toggle cart"
|
msgid "Toggle cart"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|||||||
@@ -2459,8 +2459,7 @@ msgstr ""
|
|||||||
msgid "A rule for this album already exists"
|
msgid "A rule for this album already exists"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "%{count} record"
|
msgid "%{count} record"
|
||||||
msgid_plural "%{count} records"
|
msgid_plural "%{count} records"
|
||||||
@@ -2472,8 +2471,7 @@ msgstr[1] ""
|
|||||||
msgid "Add records from the search results to get started."
|
msgid "Add records from the search results to get started."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format, fuzzy
|
#, elixir-autogen, elixir-format, fuzzy
|
||||||
msgid "Cart"
|
msgid "Cart"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
@@ -2483,8 +2481,7 @@ msgstr ""
|
|||||||
msgid "Choose which format to add"
|
msgid "Choose which format to add"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Clear all"
|
msgid "Clear all"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
@@ -2496,8 +2493,7 @@ msgid_plural "Import %{count} records"
|
|||||||
msgstr[0] ""
|
msgstr[0] ""
|
||||||
msgstr[1] ""
|
msgstr[1] ""
|
||||||
|
|
||||||
#: lib/music_library_web/components/add_record.ex
|
#: lib/music_library_web/components/cart_components.ex
|
||||||
#: lib/music_library_web/components/barcode_scanner.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Toggle cart"
|
msgid "Toggle cart"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|||||||
Reference in New Issue
Block a user