PhoenixKitCatalogue.
Copy Markdown
View Source
A read-only product card for a catalogue %Item{}, opened from the
ItemPicker thumbnail (the {:item_picker_photo_click, …} hook).
It is a pure function component — product_card/1 renders a
<.modal> containing a "one expanded" image gallery (the main image
large, a thumbnail strip of the item's other images below it,
switching on click) plus the item's filled scalar fields (SKU, price,
unit, description, metadata); empty fields are omitted.
Image resolution and field extraction (the DB-backed work) live in the
public helpers resolve_images/1, resolve_name/2, and build_fields/2
so the component itself stays render-only and testable without a
database. The owning ItemPicker calls the helpers when the thumbnail
is clicked, stashes the results, and renders the component; all of the
card's events (card_select_image, close) target the picker via
@target, so the whole card lives inside the picker with no host
wiring.
Usage (from a LiveComponent that owns the state)
<ProductCard.product_card
id={@id}
show={@card_open}
item_name={@card_name}
images={@card_images}
current_image={@card_current}
fields={@card_fields}
target={@myself}
on_close="card_close"
/>Summary
Functions
Builds the ordered {label, value} list of the item's filled,
user-facing scalar fields — SKU, price, unit, description, then
metadata. Empty values are dropped, so the card only shows what is set.
Renders the product card modal. Pure: every DB-backed value
(images, fields, item_name) is resolved by the caller and passed
in.
Resolves the ordered gallery images for an item: the main
(featured_image_uuid) first, then the remaining image files in the
item's files_folder_uuid, de-duplicated. Returns %{uuid, name}
maps. Nil/blank-safe and rescued — a missing folder or a Storage
hiccup degrades to just the main image (or [] if there is none).
Resolves the item's display name for the given locale (translation, then bare name).
Functions
@spec build_fields(PhoenixKitCatalogue.Schemas.Item.t() | term(), String.t()) :: [ {String.t(), String.t()} ]
Builds the ordered {label, value} list of the item's filled,
user-facing scalar fields — SKU, price, unit, description, then
metadata. Empty values are dropped, so the card only shows what is set.
Renders the product card modal. Pure: every DB-backed value
(images, fields, item_name) is resolved by the caller and passed
in.
Attrs:
:id(required) — used to derive the modal's DOM id.:show(required) — whether the modal is open.:target(required) — the@myselfof the LiveComponent that handlescard_select_image/ the close event (theItemPicker).:item_name— card title.:images— ordered list of%{uuid, name}(main image first).:current_image— UUID of the image shown large.:fields— list of{label, value}for the already-filtered, non-empty fields.:on_close— event pushed to@targeton close (default"card_close").
Attributes
id(:string) (required)show(:boolean) (required)target(:any) (required)item_name(:string) - Defaults tonil.images(:list) - Defaults to[].current_image(:string) - Defaults tonil.fields(:list) - Defaults to[].on_close(:string) - Defaults to"card_close".
@spec resolve_images(PhoenixKitCatalogue.Schemas.Item.t() | term()) :: [ %{uuid: String.t(), name: String.t() | nil} ]
Resolves the ordered gallery images for an item: the main
(featured_image_uuid) first, then the remaining image files in the
item's files_folder_uuid, de-duplicated. Returns %{uuid, name}
maps. Nil/blank-safe and rescued — a missing folder or a Storage
hiccup degrades to just the main image (or [] if there is none).
@spec resolve_name(PhoenixKitCatalogue.Schemas.Item.t() | term(), String.t()) :: String.t() | nil
Resolves the item's display name for the given locale (translation, then bare name).