660fda928f
Stage 6 of the page builder: admin UI at /admin/pages for managing page layouts. Page list shows all 14 pages grouped by category. Editor supports reorder (up/down), add, remove, duplicate, save, and reset to defaults. DirtyGuard JS hook warns on unsaved changes. ARIA live regions announce block operations for screen readers. Also: regenerate admin icons (81 rules via mix task with @layer wrapping), add gen_smtp dep for SMTP email adapter, add :key to page renderer block loop for correct LiveView diffing. 1309 tests, 0 failures. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
76 lines
2.4 KiB
Elixir
76 lines
2.4 KiB
Elixir
defmodule BerrypodWeb.Admin.Pages.Index do
|
|
use BerrypodWeb, :live_view
|
|
|
|
alias Berrypod.Pages
|
|
|
|
@page_groups [
|
|
{"Marketing", ~w(home about contact)},
|
|
{"Legal", ~w(delivery privacy terms)},
|
|
{"Shop", ~w(collection pdp cart search)},
|
|
{"Orders", ~w(checkout_success orders order_detail)},
|
|
{"System", ~w(error)}
|
|
]
|
|
|
|
@impl true
|
|
def mount(_params, _session, socket) do
|
|
pages = Pages.list_pages() |> Map.new(&{&1.slug, &1})
|
|
|
|
{:ok,
|
|
socket
|
|
|> assign(:page_title, "Pages")
|
|
|> assign(:pages, pages)
|
|
|> assign(:page_groups, @page_groups)}
|
|
end
|
|
|
|
@impl true
|
|
def render(assigns) do
|
|
~H"""
|
|
<.header>
|
|
Pages
|
|
<:subtitle>Customise the layout and content of every page on your shop.</:subtitle>
|
|
</.header>
|
|
|
|
<div class="page-list">
|
|
<div :for={{group_name, slugs} <- @page_groups} class="page-group">
|
|
<h3 class="page-group-title">{group_name}</h3>
|
|
<div class="page-group-cards">
|
|
<.link
|
|
:for={slug <- slugs}
|
|
navigate={~p"/admin/pages/#{slug}"}
|
|
class="page-card"
|
|
>
|
|
<span class="page-card-icon">
|
|
<.icon name={page_icon(slug)} class="size-5" />
|
|
</span>
|
|
<span class="page-card-info">
|
|
<span class="page-card-title">{@pages[slug].title}</span>
|
|
<span class="page-card-meta">
|
|
{length(@pages[slug].blocks)} {if length(@pages[slug].blocks) == 1,
|
|
do: "block",
|
|
else: "blocks"}
|
|
</span>
|
|
</span>
|
|
<.icon name="hero-chevron-right-mini" class="size-4 page-card-arrow" />
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
defp page_icon("home"), do: "hero-home"
|
|
defp page_icon("about"), do: "hero-user"
|
|
defp page_icon("contact"), do: "hero-envelope"
|
|
defp page_icon("delivery"), do: "hero-truck"
|
|
defp page_icon("privacy"), do: "hero-shield-check"
|
|
defp page_icon("terms"), do: "hero-document-text"
|
|
defp page_icon("collection"), do: "hero-tag"
|
|
defp page_icon("pdp"), do: "hero-cube"
|
|
defp page_icon("cart"), do: "hero-shopping-cart"
|
|
defp page_icon("search"), do: "hero-magnifying-glass"
|
|
defp page_icon("checkout_success"), do: "hero-check-circle"
|
|
defp page_icon("orders"), do: "hero-clipboard-document-list"
|
|
defp page_icon("order_detail"), do: "hero-clipboard-document"
|
|
defp page_icon("error"), do: "hero-exclamation-triangle"
|
|
end
|