rename project from SimpleshopTheme to Berrypod
All modules, configs, paths, and references updated. 836 tests pass, zero warnings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
345
lib/berrypod_web/live/admin/product_show.ex
Normal file
345
lib/berrypod_web/live/admin/product_show.ex
Normal file
@@ -0,0 +1,345 @@
|
||||
defmodule BerrypodWeb.Admin.ProductShow do
|
||||
use BerrypodWeb, :live_view
|
||||
|
||||
alias Berrypod.Products
|
||||
alias Berrypod.Products.{Product, ProductImage, ProductVariant}
|
||||
alias Berrypod.Cart
|
||||
|
||||
@impl true
|
||||
def mount(%{"id" => id}, _session, socket) do
|
||||
case Products.get_product(id, preload: [:provider_connection, images: :image, variants: []]) do
|
||||
nil ->
|
||||
socket =
|
||||
socket
|
||||
|> put_flash(:error, "Product not found")
|
||||
|> push_navigate(to: ~p"/admin/products")
|
||||
|
||||
{:ok, socket}
|
||||
|
||||
product ->
|
||||
form =
|
||||
product
|
||||
|> Product.storefront_changeset(%{})
|
||||
|> to_form(as: "product")
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:page_title, product.title)
|
||||
|> assign(:product, product)
|
||||
|> assign(:form, form)
|
||||
|
||||
{:ok, socket}
|
||||
end
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("validate_storefront", %{"product" => params}, socket) do
|
||||
form =
|
||||
socket.assigns.product
|
||||
|> Product.storefront_changeset(params)
|
||||
|> Map.put(:action, :validate)
|
||||
|> to_form(as: "product")
|
||||
|
||||
{:noreply, assign(socket, :form, form)}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("save_storefront", %{"product" => params}, socket) do
|
||||
case Products.update_storefront(socket.assigns.product, params) do
|
||||
{:ok, updated} ->
|
||||
product = %{
|
||||
updated
|
||||
| provider_connection: socket.assigns.product.provider_connection,
|
||||
images: socket.assigns.product.images,
|
||||
variants: socket.assigns.product.variants
|
||||
}
|
||||
|
||||
form =
|
||||
product
|
||||
|> Product.storefront_changeset(%{})
|
||||
|> to_form(as: "product")
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:product, product)
|
||||
|> assign(:form, form)
|
||||
|> put_flash(:info, "Product updated")
|
||||
|
||||
{:noreply, socket}
|
||||
|
||||
{:error, changeset} ->
|
||||
{:noreply, assign(socket, :form, to_form(changeset, as: "product"))}
|
||||
end
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_event("resync", _params, socket) do
|
||||
product = socket.assigns.product
|
||||
|
||||
if product.provider_connection do
|
||||
Products.enqueue_sync(product.provider_connection)
|
||||
|
||||
{:noreply, put_flash(socket, :info, "Sync queued for #{product.provider_connection.name}")}
|
||||
else
|
||||
{:noreply, put_flash(socket, :error, "No provider connection")}
|
||||
end
|
||||
end
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<.header>
|
||||
<.link
|
||||
navigate={~p"/admin/products"}
|
||||
class="text-sm font-normal text-base-content/60 hover:underline"
|
||||
>
|
||||
← Products
|
||||
</.link>
|
||||
<div class="flex items-center gap-3 mt-1">
|
||||
<span class="text-2xl font-bold">{@product.title}</span>
|
||||
<.visibility_badge visible={@product.visible} />
|
||||
<.status_badge status={@product.status} />
|
||||
</div>
|
||||
<:actions>
|
||||
<.link
|
||||
:if={provider_edit_url(@product)}
|
||||
href={provider_edit_url(@product)}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="admin-btn admin-btn-ghost admin-btn-sm"
|
||||
>
|
||||
Edit on {provider_label(@product)}
|
||||
<.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
|
||||
</.link>
|
||||
<.link
|
||||
navigate={~p"/products/#{@product.slug}"}
|
||||
class="admin-btn admin-btn-ghost admin-btn-sm"
|
||||
>
|
||||
View on shop <.icon name="hero-arrow-top-right-on-square-mini" class="size-4" />
|
||||
</.link>
|
||||
</:actions>
|
||||
</.header>
|
||||
|
||||
<%!-- images + details --%>
|
||||
<div class="grid gap-6 mt-6 lg:grid-cols-3">
|
||||
<div class="lg:col-span-2">
|
||||
<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
|
||||
<div
|
||||
:for={image <- sorted_images(@product)}
|
||||
class="aspect-square rounded bg-base-200 overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={ProductImage.url(image, 400)}
|
||||
alt={image.alt || @product.title}
|
||||
class="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p :if={@product.images == []} class="text-base-content/40 text-sm">No images</p>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<div class="admin-card-body">
|
||||
<h3 class="admin-card-title">Details</h3>
|
||||
<.list>
|
||||
<:item :if={@product.provider_connection} title="Provider">
|
||||
{provider_label(@product)} via {@product.provider_connection.name}
|
||||
</:item>
|
||||
<:item title="Category">{@product.category || "—"}</:item>
|
||||
<:item title="Price">{Cart.format_price(@product.cheapest_price)}</:item>
|
||||
<:item title="Variants">{length(@product.variants)}</:item>
|
||||
<:item title="Images">{length(@product.images)}</:item>
|
||||
<:item title="Created">{format_date(@product.inserted_at)}</:item>
|
||||
<:item
|
||||
:if={@product.provider_connection && @product.provider_connection.last_synced_at}
|
||||
title="Last synced"
|
||||
>
|
||||
{format_date(@product.provider_connection.last_synced_at)}
|
||||
</:item>
|
||||
</.list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%!-- storefront controls --%>
|
||||
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
|
||||
<div class="admin-card-body">
|
||||
<h3 class="admin-card-title">Storefront controls</h3>
|
||||
<.form
|
||||
for={@form}
|
||||
phx-submit="save_storefront"
|
||||
phx-change="validate_storefront"
|
||||
class="flex flex-wrap gap-4 items-end"
|
||||
>
|
||||
<label class="w-auto">
|
||||
<span class="text-xs mb-0.5">Visibility</span>
|
||||
<select
|
||||
name="product[visible]"
|
||||
class="admin-select admin-select-sm"
|
||||
aria-label="Visibility"
|
||||
>
|
||||
<option
|
||||
value="true"
|
||||
selected={@form[:visible].value == true || @form[:visible].value == "true"}
|
||||
>
|
||||
Visible
|
||||
</option>
|
||||
<option
|
||||
value="false"
|
||||
selected={@form[:visible].value == false || @form[:visible].value == "false"}
|
||||
>
|
||||
Hidden
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-auto flex-1 min-w-48">
|
||||
<span class="text-xs mb-0.5">Category</span>
|
||||
<input
|
||||
type="text"
|
||||
name="product[category]"
|
||||
value={@form[:category].value}
|
||||
class="admin-input admin-input-sm"
|
||||
placeholder="e.g. Apparel"
|
||||
/>
|
||||
</label>
|
||||
<.button type="submit" class="admin-btn-sm admin-btn-primary">Save</.button>
|
||||
</.form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%!-- variants --%>
|
||||
<div class="card bg-base-100 shadow-sm border border-base-200 mt-6">
|
||||
<div class="admin-card-body">
|
||||
<h3 class="admin-card-title">Variants ({length(@product.variants)})</h3>
|
||||
<.table id="variants" rows={@product.variants}>
|
||||
<:col :let={variant} label="Options">{ProductVariant.options_title(variant)}</:col>
|
||||
<:col :let={variant} label="SKU">{variant.sku || "—"}</:col>
|
||||
<:col :let={variant} label="Price">{Cart.format_price(variant.price)}</:col>
|
||||
<:col :let={variant} label="Cost">
|
||||
{if variant.cost, do: Cart.format_price(variant.cost), else: "—"}
|
||||
</:col>
|
||||
<:col :let={variant} label="Profit">
|
||||
{if ProductVariant.profit(variant),
|
||||
do: Cart.format_price(ProductVariant.profit(variant)),
|
||||
else: "—"}
|
||||
</:col>
|
||||
<:col :let={variant} label="Available">
|
||||
<.icon
|
||||
:if={variant.is_enabled && variant.is_available}
|
||||
name="hero-check-circle-mini"
|
||||
class="size-5 text-green-600"
|
||||
/>
|
||||
<.icon
|
||||
:if={!variant.is_enabled || !variant.is_available}
|
||||
name="hero-x-circle-mini"
|
||||
class="size-5 text-base-content/30"
|
||||
/>
|
||||
</:col>
|
||||
</.table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%!-- provider data --%>
|
||||
<div
|
||||
:if={@product.provider_connection}
|
||||
class="card bg-base-100 shadow-sm border border-base-200 mt-6"
|
||||
>
|
||||
<div class="admin-card-body">
|
||||
<h3 class="admin-card-title">Provider data</h3>
|
||||
<.list>
|
||||
<:item title="Provider">
|
||||
{provider_label(@product)} via {@product.provider_connection.name}
|
||||
</:item>
|
||||
<:item title="Provider product ID">{@product.provider_product_id}</:item>
|
||||
<:item title="Status">{@product.status}</:item>
|
||||
<:item title="Sync status">{@product.provider_connection.sync_status}</:item>
|
||||
</.list>
|
||||
<div class="mt-4">
|
||||
<button phx-click="resync" class="admin-btn admin-btn-outline admin-btn-sm">
|
||||
<.icon name="hero-arrow-path" class="size-4" /> Re-sync
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Helpers
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
defp sorted_images(product) do
|
||||
(product.images || []) |> Enum.sort_by(& &1.position)
|
||||
end
|
||||
|
||||
defp visibility_badge(assigns) do
|
||||
{bg, text, ring, label} =
|
||||
if assigns.visible do
|
||||
{"bg-green-50", "text-green-700", "ring-green-600/20", "visible"}
|
||||
else
|
||||
{"bg-base-200/50", "text-base-content/60", "ring-base-content/10", "hidden"}
|
||||
end
|
||||
|
||||
assigns = assign(assigns, bg: bg, text: text, ring: ring, label: label)
|
||||
|
||||
~H"""
|
||||
<span class={[
|
||||
"inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset",
|
||||
@bg,
|
||||
@text,
|
||||
@ring
|
||||
]}>
|
||||
{@label}
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp status_badge(assigns) do
|
||||
{bg, text, ring} =
|
||||
case assigns.status do
|
||||
"active" -> {"bg-green-50", "text-green-700", "ring-green-600/20"}
|
||||
"draft" -> {"bg-amber-50", "text-amber-700", "ring-amber-600/20"}
|
||||
"archived" -> {"bg-base-200/50", "text-base-content/60", "ring-base-content/10"}
|
||||
_ -> {"bg-base-200/50", "text-base-content/60", "ring-base-content/10"}
|
||||
end
|
||||
|
||||
assigns = assign(assigns, bg: bg, text: text, ring: ring)
|
||||
|
||||
~H"""
|
||||
<span class={[
|
||||
"inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset",
|
||||
@bg,
|
||||
@text,
|
||||
@ring
|
||||
]}>
|
||||
{@status}
|
||||
</span>
|
||||
"""
|
||||
end
|
||||
|
||||
defp provider_label(%{provider_connection: %{provider_type: "printify"}}), do: "Printify"
|
||||
defp provider_label(%{provider_connection: %{provider_type: "printful"}}), do: "Printful"
|
||||
defp provider_label(%{provider_connection: %{provider_type: type}}), do: String.capitalize(type)
|
||||
defp provider_label(_), do: nil
|
||||
|
||||
defp provider_edit_url(%{
|
||||
provider_connection: %{provider_type: "printify", config: config},
|
||||
provider_product_id: pid
|
||||
}) do
|
||||
shop_id = config["shop_id"]
|
||||
if shop_id && pid, do: "https://printify.com/app/editor/#{shop_id}/#{pid}"
|
||||
end
|
||||
|
||||
defp provider_edit_url(%{
|
||||
provider_connection: %{provider_type: "printful"},
|
||||
provider_product_id: pid
|
||||
}) do
|
||||
if pid, do: "https://www.printful.com/dashboard/sync/update?id=#{pid}"
|
||||
end
|
||||
|
||||
defp provider_edit_url(_), do: nil
|
||||
|
||||
defp format_date(nil), do: "—"
|
||||
defp format_date(datetime), do: Calendar.strftime(datetime, "%d %b %Y %H:%M")
|
||||
end
|
||||
Reference in New Issue
Block a user