simple-module-pagebuilder 0.0.4__tar.gz → 0.0.6__tar.gz

{simple_module_pagebuilder-0.0.4 → simple_module_pagebuilder-0.0.6}/PKG-INFO

@@ -1,6 +1,6 @@
-Metadata-Version: 2.4
+Metadata-Version: 2.5
 Name: simple_module_pagebuilder
-Version: 0.0.4
+Version: 0.0.6
 Summary: Drag-and-drop visual page builder for simple_module apps
 Project-URL: Repository, https://github.com/antosubash/simple_module_python_modules
 Author-email: Anto Subash <antosubash@live.com>

{simple_module_pagebuilder-0.0.4 → simple_module_pagebuilder-0.0.6}/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-module-py/pagebuilder",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "private": true,
   "description": "Frontend assets for the PageBuilder module",
   "peerDependencies": {

simple_module_pagebuilder-0.0.6/pagebuilder/board.py

@@ -0,0 +1,137 @@
+"""Stage-grouped view of the page list — the board behind ``?view=board``.
+
+The pipeline is two-state: a page is a draft or it is published. "Scheduled" is
+not a third state, it is a draft carrying a future ``publish_at`` that will flip
+itself; splitting it into its own column is a *display* decision, made here
+rather than in the model precisely so nothing downstream has to learn a status
+that does not exist.
+
+Each column is capped and reports its own total, so a site with 400 published
+pages renders three short columns and says how much it is not showing, instead
+of paginating a board — which nobody can read anyway.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+from datetime import UTC, datetime
+
+from sqlalchemy import func, select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from pagebuilder.models import NOT_TRASHED, Page, PageStatus
+
+DRAFT = "draft"
+SCHEDULED = "scheduled"
+IN_REVIEW = "in_review"
+PUBLISHED = "published"
+
+#: Rows shown per column before the "N more" line takes over.
+PER_STAGE = 8
+
+
+@dataclass(frozen=True)
+class Stage:
+    key: str
+    label: str
+    items: list[Page]
+    total: int
+
+
+def _search_filter(search: str | None):
+    """Reuses the escaping rule from ``list_pages`` — a title containing ``%``
+    is searched for literally rather than matching everything."""
+    if not search or not search.strip():
+        return None
+    term = search.strip().translate(str.maketrans({"%": r"\%", "_": r"\_", "\\": "\\\\"}))
+    pattern = f"%{term}%"
+    return Page.title.ilike(pattern, escape="\\") | Page.slug.ilike(pattern, escape="\\")
+
+
+def _conditions(stage: str, now: datetime) -> list:
+    """What puts a page in this column.
+
+    Templates are excluded from every column. They are ordinary pages, but they
+    are not *in* the pipeline — nobody publishes a template — so listing them
+    under Draft would put permanent residents in a column that is meant to read
+    as a queue. They stay reachable in the list view, and in the New page
+    dialog, which is where they are actually used.
+
+    Draft and scheduled are deliberately complementary halves of
+    ``status == DRAFT``: a page with no ``publish_at``, or one whose date has
+    already passed, is simply a draft. Without the second half a scheduled page
+    whose moment arrived but whose job has not yet run would vanish from the
+    board entirely.
+    """
+    not_template = Page.is_template.is_(False)
+    if stage == DRAFT:
+        return [
+            NOT_TRASHED,
+            not_template,
+            Page.status == PageStatus.DRAFT,
+            (Page.publish_at.is_(None)) | (Page.publish_at <= now),
+        ]
+    if stage == SCHEDULED:
+        return [NOT_TRASHED, not_template, Page.status == PageStatus.DRAFT, Page.publish_at > now]
+    if stage == IN_REVIEW:
+        return [NOT_TRASHED, not_template, Page.status == PageStatus.SUBMITTED_FOR_REVIEW]
+    return [NOT_TRASHED, not_template, Page.status == PageStatus.PUBLISHED]
+
+
+_ORDER = [
+    (DRAFT, "Draft"),
+    (SCHEDULED, "Scheduled"),
+    (IN_REVIEW, "In review"),
+    (PUBLISHED, "Published"),
+]
+
+
+async def load(
+    db: AsyncSession, *, search: str | None = None, per_stage: int = PER_STAGE
+) -> list[Stage]:
+    """Every column, in pipeline order.
+
+    ``In review`` is returned even when empty; the caller drops it, because
+    whether the approval workflow is in use is a question about the site rather
+    than about this query.
+    """
+    now = datetime.now(UTC)
+    search_clause = _search_filter(search)
+
+    stages: list[Stage] = []
+    for key, label in _ORDER:
+        clauses = _conditions(key, now)
+        if search_clause is not None:
+            clauses = [*clauses, search_clause]
+
+        total = await db.scalar(select(func.count()).select_from(Page).where(*clauses))
+        # Scheduled sorts by when it fires — the next one to go live is the one
+        # worth seeing first. Every other column is newest-touched first.
+        order = Page.publish_at.asc() if key == SCHEDULED else Page.id.desc()
+        rows = await db.execute(select(Page).where(*clauses).order_by(order).limit(per_stage))
+        stages.append(
+            Stage(key=key, label=label, items=list(rows.scalars().all()), total=int(total or 0))
+        )
+    return stages
+
+
+def to_payload(stages: list[Stage], serialize) -> list[dict]:
+    """Stages as JSON for the Inertia page.
+
+    ``serialize`` turns one ``Page`` into a dict — passed in rather than
+    imported so this module keeps knowing nothing about the schemas.
+
+    ``In review`` is dropped when empty: an empty column would advertise an
+    approval workflow the site may not use, while a non-empty one must never be
+    hidden or its pages are stranded with no route to them.
+    """
+    return [
+        {
+            "key": stage.key,
+            "label": stage.label,
+            "total": stage.total,
+            "items": [serialize(item) for item in stage.items],
+        }
+        for stage in stages
+        if stage.key != IN_REVIEW or stage.total
+    ]

simple_module_pagebuilder-0.0.6/pagebuilder/components/ConfirmDialog.tsx

@@ -0,0 +1,138 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@simple-module-py/ui/components/ui/alert-dialog';
+import { Input } from '@simple-module-py/ui/components/ui/input';
+import { Label } from '@simple-module-py/ui/components/ui/label';
+import { type ReactNode, useState } from 'react';
+
+import { usePendingDialog } from '../hooks/usePendingDialog';
+
+/** How much a confirmation is allowed to cost the person clicking it.
+ *
+ * A deliberate scale rather than a style choice: friction has to track blast
+ * radius, or people learn to click through the cheap confirmations and then
+ * click through the expensive one exactly the same way.
+ *
+ * - `low` — reversible; nothing is public. A plain button.
+ * - `medium` — this screen cannot undo it, but nothing live is lost: either it
+ *   changes the public site while the content survives (unpublish), or it
+ *   removes something for good that nothing references (an unused asset).
+ * - `high` — irreversible past the retention window. Requires typing a phrase.
+ *
+ * The axis is how hard the result is to walk back, not whether the public site
+ * changes. An irreversible delete does not get `low` because it happens to be
+ * invisible from outside.
+ */
+export type ConfirmLevel = 'low' | 'medium' | 'high';
+
+const CONFIRM_PHRASE_INPUT = 'confirm-dialog-phrase';
+
+/**
+ * Confirm a consequential action without handing the page to the browser.
+ *
+ * `confirm()` blocks the event loop, cannot say which row it is asking about
+ * beyond a bare sentence, is unstyleable, and — the reason it matters here —
+ * gives the failure nowhere to go: the call site learns the user said yes and
+ * then swallows whatever the request answered. This keeps the dialog open
+ * while the work runs and shows the error inside it, so a delete that comes
+ * back 403 is visible instead of looking like it worked.
+ */
+export function ConfirmDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  destructive = false,
+  level,
+  confirmPhrase,
+  children,
+  onConfirm,
+}: {
+  trigger: ReactNode;
+  title: string;
+  description: ReactNode;
+  confirmLabel?: string;
+  destructive?: boolean;
+  /** Blast radius. Defaults from `destructive` so existing call sites keep
+   *  the behaviour they had before the scale existed. */
+  level?: ConfirmLevel;
+  /** At `high`, the phrase that must be typed before the action unlocks.
+   *  Ignored at the other levels. */
+  confirmPhrase?: string;
+  /** Extra controls — a reassignment target, a checkbox — above the buttons. */
+  children?: ReactNode;
+  /** Rejecting keeps the dialog open and surfaces the message. */
+  onConfirm: () => Promise<unknown>;
+}) {
+  const [typed, setTyped] = useState('');
+
+  const resolvedLevel: ConfirmLevel = level ?? (destructive ? 'medium' : 'low');
+  // Compared exactly, case included. A forgiving match would defeat the point:
+  // the delay is the safeguard, and it only works while the phrase is actually
+  // being read off the screen.
+  const needsPhrase = resolvedLevel === 'high' && !!confirmPhrase;
+  const unlocked = !needsPhrase || typed === confirmPhrase;
+
+  // The open/pending/error lifecycle is shared with NoteDialog — see the hook
+  // for the invariants (in-flight request owns the dialog, failure keeps it
+  // open, closing clears the error). The `onClose` callback clears the typed
+  // phrase, because reopening must not inherit the one typed last time: that
+  // would put a second delete one click from confirmed, which is the exact
+  // property this level exists to remove.
+  const { open, pending, error, change, run } = usePendingDialog(`${confirmLabel} failed`, () =>
+    setTyped(''),
+  );
+
+  return (
+    <AlertDialog open={open} onOpenChange={change}>
+      <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        {children && <div className="grid gap-2 py-2">{children}</div>}
+        {needsPhrase && (
+          <div className="grid gap-2 py-2">
+            <Label htmlFor={CONFIRM_PHRASE_INPUT}>
+              Type <code className="font-mono font-semibold">{confirmPhrase}</code> to confirm
+            </Label>
+            <Input
+              id={CONFIRM_PHRASE_INPUT}
+              value={typed}
+              autoComplete="off"
+              disabled={pending}
+              onChange={(e) => setTyped(e.target.value)}
+            />
+          </div>
+        )}
+        {error && <p className="text-sm text-destructive">{error}</p>}
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={pending || !unlocked}
+            className={
+              resolvedLevel === 'low' ? '' : 'bg-destructive text-white hover:bg-destructive/90'
+            }
+            // Radix closes on click; the close has to wait for the request so
+            // a failure stays on screen.
+            onClick={(e) => {
+              e.preventDefault();
+              void run(onConfirm);
+            }}
+          >
+            {pending ? 'Working…' : confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

{simple_module_pagebuilder-0.0.4 → simple_module_pagebuilder-0.0.6}/pagebuilder/components/DiffSummary.tsx

@@ -15,6 +15,12 @@ function renderValue(value: unknown): string {
  * Compact, scannable diff: metadata table (only changed fields) plus
  * three lists of blocks (added / removed / changed). Designed to fit
  * inside the editor's history panel without a separate page.
+ *
+ * The added/removed greens and reds below are deliberately literal rather than
+ * theme tokens. They are a matched pair carrying meaning, and the token set has
+ * `--destructive` but no success counterpart — converting only the red half
+ * would leave the pair mismatched. Give the design system a success token and
+ * both sides can move together.
  */
 export function DiffSummary({ diff }: Props): React.JSX.Element {
   const { metadata, blocks } = diff;
@@ -25,7 +31,7 @@ export function DiffSummary({ diff }: Props): React.JSX.Element {
   if (totalChanges === 0) {
     return (
       <div
-        className="mt-3 rounded border border-gray-200 bg-white p-3 text-xs text-gray-500"
+        className="mt-3 rounded border bg-card p-3 text-xs text-muted-foreground"
         data-testid="diff-summary"
       >
         No changes between these revisions.
@@ -34,13 +40,10 @@ export function DiffSummary({ diff }: Props): React.JSX.Element {
   }
 
   return (
-    <div
-      className="mt-3 rounded border border-gray-200 bg-white p-3 text-xs space-y-2"
-      data-testid="diff-summary"
-    >
+    <div className="mt-3 space-y-2 rounded border bg-card p-3 text-xs" data-testid="diff-summary">
       {metaKeys.length > 0 && (
         <div>
-          <div className="font-semibold text-gray-700">Metadata</div>
+          <div className="font-semibold">Metadata</div>
           <ul className="ml-3 list-disc">
             {metaKeys.map((key) => (
               <li key={key}>
@@ -61,7 +64,7 @@ export function DiffSummary({ diff }: Props): React.JSX.Element {
             {blocks.added.map((b) => (
               <li key={b.id}>
                 <span className="font-mono">{b.type ?? '?'}</span>{' '}
-                <span className="text-gray-500">({b.id})</span>
+                <span className="text-muted-foreground">({b.id})</span>
               </li>
             ))}
           </ul>
@@ -74,7 +77,7 @@ export function DiffSummary({ diff }: Props): React.JSX.Element {
             {blocks.removed.map((b) => (
               <li key={b.id}>
                 <span className="font-mono">{b.type ?? '?'}</span>{' '}
-                <span className="text-gray-500">({b.id})</span>
+                <span className="text-muted-foreground">({b.id})</span>
               </li>
             ))}
           </ul>
@@ -87,16 +90,14 @@ export function DiffSummary({ diff }: Props): React.JSX.Element {
             {blocks.changed.map((b) => (
               <li key={b.id}>
                 <span className="font-mono">{b.type ?? '?'}</span>{' '}
-                <span className="text-gray-500">({b.id})</span>
+                <span className="text-muted-foreground">({b.id})</span>
                 {b.type_before && (
-                  <span className="text-gray-500">
+                  <span className="text-muted-foreground">
                     {' '}
                     — was <span className="font-mono">{b.type_before}</span>
                   </span>
                 )}
-                {b.fields.length > 0 && (
-                  <span className="text-gray-700">: {b.fields.join(', ')}</span>
-                )}
+                {b.fields.length > 0 && <span>: {b.fields.join(', ')}</span>}
               </li>
             ))}
           </ul>

simple_module_pagebuilder-0.0.6/pagebuilder/components/NewPageDialog.tsx

@@ -0,0 +1,218 @@
+import { router } from '@inertiajs/react';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@simple-module-py/ui/components/ui/dialog';
+import { Input } from '@simple-module-py/ui/components/ui/input';
+import { Label } from '@simple-module-py/ui/components/ui/label';
+import {
+  NativeSelect,
+  NativeSelectOptGroup,
+} from '@simple-module-py/ui/components/ui/native-select';
+import { useEffect, useState } from 'react';
+
+import type { PageRead } from '../utils/api';
+import { createPage, listPages, listTemplates } from '../utils/pagesApi';
+import { slugify } from '../utils/slugify';
+
+const TITLE_ID = 'new-page-title';
+const SLUG_ID = 'new-page-slug';
+const START_ID = 'new-page-start';
+const PARENT_ID = 'new-page-parent';
+
+const BLANK = '';
+
+/** An empty Puck document — what "Blank" starts from. */
+const EMPTY_DRAFT = { root: { props: { title: '', width: 'full' } }, content: [], zones: {} };
+
+/** "New page" — title, URL, a starting point, and an optional breadcrumb parent.
+ *
+ * Four fields, all changeable later. The dialog exists because two of them are
+ * awkward to change *after* the fact: the URL leaves a stale link behind, and
+ * the starting point cannot be applied to a page that already has content.
+ */
+export function NewPageDialog({ publicPrefix = '/p' }: { publicPrefix?: string }) {
+  const [open, setOpen] = useState(false);
+  const [title, setTitle] = useState('');
+  // Null until the author edits it: while it is null the slug tracks the title,
+  // and the moment they type their own it stops being overwritten.
+  const [slugOverride, setSlugOverride] = useState<string | null>(null);
+  const [startFrom, setStartFrom] = useState(BLANK);
+  const [parentId, setParentId] = useState('');
+  const [templates, setTemplates] = useState<PageRead[]>([]);
+  const [pages, setPages] = useState<PageRead[]>([]);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const slug = slugOverride ?? slugify(title);
+
+  useEffect(() => {
+    if (!open) return;
+    const controller = new AbortController();
+    // The signal is threaded into the requests, not just checked afterwards:
+    // without it, closing the dialog left both fetches running to completion.
+    void Promise.all([listTemplates(controller.signal), listPages(controller.signal)])
+      .then(([t, p]) => {
+        if (controller.signal.aborted) return;
+        setTemplates(t.items);
+        setPages(p.items);
+      })
+      // Not worth a banner: without these the dialog still creates a blank
+      // page, which is the common case anyway.
+      .catch(() => {});
+    return () => controller.abort();
+  }, [open]);
+
+  const reset = (next: boolean) => {
+    if (pending) return;
+    setOpen(next);
+    if (!next) {
+      setTitle('');
+      setSlugOverride(null);
+      setStartFrom(BLANK);
+      setParentId('');
+      setError(null);
+    }
+  };
+
+  const create = async () => {
+    setPending(true);
+    setError(null);
+    try {
+      const page = await createPage({
+        title: title.trim(),
+        slug,
+        draft_data: EMPTY_DRAFT,
+        ...(startFrom ? { copy_from_page_id: Number(startFrom) } : {}),
+        ...(parentId ? { parent_id: Number(parentId) } : {}),
+      });
+      router.visit(`/pagebuilder/${page.id}/edit`);
+    } catch (e) {
+      setError((e as Error).message);
+      setPending(false);
+    }
+  };
+
+  const copyable = pages.filter((p) => !p.is_template);
+
+  return (
+    <Dialog open={open} onOpenChange={reset}>
+      <DialogTrigger asChild>
+        <Button type="button">New page</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (title.trim() && slug && !pending) void create();
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>New page</DialogTitle>
+            <DialogDescription>
+              Four fields, all changeable later. Creating opens the editor.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor={TITLE_ID}>Title</Label>
+              <Input
+                id={TITLE_ID}
+                value={title}
+                autoFocus
+                disabled={pending}
+                placeholder="Field methods"
+                onChange={(e) => setTitle(e.target.value)}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor={SLUG_ID}>URL</Label>
+              <div className="flex items-center gap-1">
+                <span className="text-sm text-muted-foreground">{publicPrefix}/</span>
+                <Input
+                  id={SLUG_ID}
+                  value={slug}
+                  disabled={pending}
+                  onChange={(e) => setSlugOverride(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor={START_ID}>Start from</Label>
+              <NativeSelect
+                id={START_ID}
+                value={startFrom}
+                disabled={pending}
+                onChange={(e) => setStartFrom(e.target.value)}
+              >
+                <option value={BLANK}>Blank</option>
+                {templates.length > 0 && (
+                  <NativeSelectOptGroup label="Templates">
+                    {templates.map((t) => (
+                      <option key={t.id} value={String(t.id)}>
+                        {t.title}
+                      </option>
+                    ))}
+                  </NativeSelectOptGroup>
+                )}
+                {copyable.length > 0 && (
+                  <NativeSelectOptGroup label="Copy a page">
+                    {copyable.map((p) => (
+                      <option key={p.id} value={String(p.id)}>
+                        {p.title}
+                      </option>
+                    ))}
+                  </NativeSelectOptGroup>
+                )}
+              </NativeSelect>
+              <p className="text-xs text-muted-foreground">
+                Templates are ordinary pages flagged as templates, so the set grows without a
+                developer.
+              </p>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor={PARENT_ID}>Parent</Label>
+              <NativeSelect
+                id={PARENT_ID}
+                value={parentId}
+                disabled={pending}
+                onChange={(e) => setParentId(e.target.value)}
+              >
+                <option value="">None</option>
+                {pages.map((p) => (
+                  <option key={p.id} value={String(p.id)}>
+                    {p.title}
+                  </option>
+                ))}
+              </NativeSelect>
+              <p className="text-xs text-muted-foreground">
+                Optional. Affects the breadcrumb, not the URL.
+              </p>
+            </div>
+
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="outline" disabled={pending} onClick={() => reset(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={pending || !title.trim() || !slug}>
+              {pending ? 'Creating…' : 'Create and open editor'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}