@openrails/contentkit-ui 0.71.0 → 0.72.0

package/dist/components/admin/post-manager.js

@@ -0,0 +1,602 @@
+import { toContentKitError as e } from "../../client/errors.js";
+import { useMessages as t } from "../../i18n/context.js";
+import { useErrorReporter as n } from "../../react/context.js";
+import { Alert as r, AlertDescription as i } from "../../ui/alert.js";
+import { Button as a, buttonVariants as o } from "../../ui/button.js";
+import { keyOf as s, useContentScope as c, usePaged as l } from "../../react/use-resource.js";
+import { Badge as ee } from "../../ui/badge.js";
+import { Input as u } from "../../ui/input.js";
+import { Label as d } from "../../ui/label.js";
+import { Select as f, SelectContent as p, SelectItem as m, SelectTrigger as h, SelectValue as g } from "../../ui/select.js";
+import { Skeleton as _ } from "../../ui/skeleton.js";
+import { Textarea as v } from "../../ui/textarea.js";
+import { ErrorLine as y, RelativeTime as b, contentError as x, formatDate as te, useAction as ne } from "../social/parts.js";
+import { AdminRoot as S, LoadFailed as re, NoAccess as C, Pager as w, Rows as T, pageOf as E, useConfirm as ie } from "./shell.js";
+import { localInput as D } from "../social/bans.js";
+import { imageRefs as O } from "../../client/content/posts.js";
+import { useAdminLocation as k, useFlowClient as A, useStaffAccess as j } from "../../react/admin.js";
+import { usePost as M } from "../../react/posts.js";
+import { useEffect as N, useId as P, useMemo as F, useRef as I, useState as L } from "react";
+import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
+//#region src/components/admin/post-manager.tsx
+function V(e = {}) {
+	return j(["posts"], e);
+}
+function H(e, t = Date.now()) {
+	return e.moderation === "rejected" ? "rejected" : e.moderation === "held" ? "held" : e.is_draft ? "draft" : e.live_at && Date.parse(e.live_at) > t ? "scheduled" : "published";
+}
+var ae = (e) => (e ?? []).map((e) => typeof e == "string" ? {
+	value: e,
+	label: e
+} : e), oe = {
+	published: "default",
+	scheduled: "secondary",
+	draft: "outline",
+	held: "secondary",
+	rejected: "destructive"
+};
+function U({ client: e, baseUrl: t, auth: n, guard: r, appearance: i, className: a, language: o, messages: s, ...c }) {
+	let l = A({
+		client: e,
+		baseUrl: t,
+		auth: n
+	});
+	return /* @__PURE__ */ z(S, {
+		flow: "post-manager",
+		appearance: i,
+		className: a,
+		language: o,
+		messages: s,
+		guard: r,
+		children: /* @__PURE__ */ z(W, {
+			...c,
+			client: l
+		})
+	});
+}
+function W({ basePath: e, navigation: n, ...r }) {
+	let { t: i } = t(), o = k(e, n), s = V({ client: r.client });
+	return s.loading ? /* @__PURE__ */ z(T, {}) : s.allowed.posts ? o.view ? /* @__PURE__ */ B(R, { children: [/* @__PURE__ */ z(a, {
+		variant: "ghost",
+		size: "sm",
+		className: "justify-self-start",
+		onClick: () => o.go(""),
+		children: i("postManager.back")
+	}), /* @__PURE__ */ z(q, {
+		...r,
+		loc: o,
+		id: o.view === "new" ? null : o.view
+	}, o.view)] }) : /* @__PURE__ */ z(G, {
+		...r,
+		loc: o
+	}) : /* @__PURE__ */ z(C, { children: i("postManager.noAccess") });
+}
+function G({ loc: e, client: n, languages: r, postHref: i, pageSize: _ = 20, onError: v }) {
+	let x = t(), { t: S } = x, C = P(), D = ae(r), O = e.query.get("q") ?? "", k = e.query.get("language") ?? "", A = e.query.get("status") === "draft" ? "draft" : e.query.get("status") === "live" ? "live" : "", j = e.query.get("deleted") === "1", M = E(e.query), F = {
+		q: O,
+		language: k,
+		status: A,
+		deleted: j ? "1" : void 0
+	}, I = (t) => e.go("", {
+		...F,
+		...t
+	}), [V, U] = L(O);
+	N(() => U(O), [O]);
+	let { store: W, scope: G } = c(n), K = l(W, s("posts-page", G, O, k, A, j, _), {
+		type: "posts",
+		scope: j ? "deleted" : void 0
+	}, M, _, (e, t) => n.posts.adminList({
+		...e,
+		q: O || void 0,
+		language: k || void 0,
+		draft: j || !A ? void 0 : A === "draft",
+		deleted: j || void 0
+	}, t)), q = ne("post.save", v), { confirm: se, dialog: J } = ie(), Y = async (e) => {
+		await se({
+			title: S("postManager.deleteTitle", { title: e.title }),
+			description: S("postManager.deleteBody"),
+			confirm: S("postManager.delete")
+		}) && await q.run(() => n.posts.delete(e.id));
+	};
+	return /* @__PURE__ */ B("div", {
+		className: "grid gap-4",
+		children: [
+			/* @__PURE__ */ B("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ z("h2", {
+					className: "text-base font-semibold",
+					children: S("postManager.title")
+				}), /* @__PURE__ */ z(a, {
+					size: "sm",
+					onClick: () => e.go("new"),
+					children: S("postManager.new")
+				})]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "flex gap-2",
+				role: "group",
+				"aria-label": S("postManager.title"),
+				children: [/* @__PURE__ */ z(a, {
+					size: "sm",
+					variant: j ? "outline" : "default",
+					"aria-pressed": !j,
+					onClick: () => e.go("", {
+						q: O,
+						language: k
+					}),
+					children: S("postManager.posts")
+				}), /* @__PURE__ */ z(a, {
+					size: "sm",
+					variant: j ? "default" : "outline",
+					"aria-pressed": j,
+					onClick: () => e.go("", {
+						q: O,
+						language: k,
+						deleted: "1"
+					}),
+					children: S("postManager.deleted")
+				})]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]",
+				children: [/* @__PURE__ */ B("form", {
+					className: "flex gap-2",
+					role: "search",
+					onSubmit: (e) => {
+						e.preventDefault(), I({ q: V.trim() });
+					},
+					children: [
+						/* @__PURE__ */ z(d, {
+							htmlFor: `${C}-q`,
+							className: "sr-only",
+							children: S("postManager.search")
+						}),
+						/* @__PURE__ */ z(u, {
+							id: `${C}-q`,
+							className: "h-8",
+							type: "search",
+							value: V,
+							placeholder: S("postManager.search"),
+							onChange: (e) => U(e.target.value)
+						}),
+						/* @__PURE__ */ z(a, {
+							type: "submit",
+							size: "sm",
+							variant: "outline",
+							children: S("moderation.filter")
+						})
+					]
+				}), /* @__PURE__ */ B("div", {
+					className: "flex flex-wrap gap-2",
+					children: [D.length > 0 && /* @__PURE__ */ B(f, {
+						value: k,
+						onValueChange: (e) => I({ language: String(e ?? "") }),
+						children: [/* @__PURE__ */ z(h, {
+							size: "sm",
+							"aria-label": S("postManager.language"),
+							children: /* @__PURE__ */ z(g, { children: (e) => e ? D.find((t) => t.value === e)?.label ?? e : S("pollManager.allLanguages") })
+						}), /* @__PURE__ */ B(p, { children: [/* @__PURE__ */ z(m, {
+							value: "",
+							children: S("pollManager.allLanguages")
+						}), D.map((e) => /* @__PURE__ */ z(m, {
+							value: e.value,
+							children: e.label
+						}, e.value))] })]
+					}), !j && /* @__PURE__ */ B(f, {
+						value: A,
+						onValueChange: (e) => I({ status: String(e ?? "") }),
+						children: [/* @__PURE__ */ z(h, {
+							size: "sm",
+							"aria-label": S("postManager.status"),
+							children: /* @__PURE__ */ z(g, { children: (e) => S(e === "draft" ? "postManager.drafts" : e === "live" ? "postManager.notDrafts" : "postManager.allStatuses") })
+						}), /* @__PURE__ */ B(p, { children: [
+							/* @__PURE__ */ z(m, {
+								value: "",
+								children: S("postManager.allStatuses")
+							}),
+							/* @__PURE__ */ z(m, {
+								value: "draft",
+								children: S("postManager.drafts")
+							}),
+							/* @__PURE__ */ z(m, {
+								value: "live",
+								children: S("postManager.notDrafts")
+							})
+						] })]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ z(y, { error: q.error }),
+			K.loading && !K.items.length ? /* @__PURE__ */ z(T, {}) : K.error && !K.items.length ? /* @__PURE__ */ z(re, {
+				error: K.error,
+				message: S("postManager.loadFailed"),
+				retry: K.reload
+			}) : K.items.length ? /* @__PURE__ */ z("ul", {
+				className: "grid divide-y divide-border rounded-lg border border-border",
+				"aria-busy": K.loading,
+				children: K.items.map((t) => {
+					let r = H(t), s = r === "published" ? i?.(t) : void 0;
+					return /* @__PURE__ */ B("li", {
+						className: "flex flex-wrap items-start gap-3 p-3",
+						"data-ckui": "post-row",
+						"data-status": j ? "deleted" : r,
+						children: [/* @__PURE__ */ B("div", {
+							className: "grid min-w-0 flex-1 gap-1",
+							children: [j ? /* @__PURE__ */ z("span", {
+								className: "font-medium break-words",
+								children: t.title
+							}) : /* @__PURE__ */ z("button", {
+								type: "button",
+								className: "text-left font-medium break-words hover:underline",
+								onClick: () => e.go(t.id),
+								children: t.title
+							}), /* @__PURE__ */ B("div", {
+								className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground",
+								children: [
+									!j && /* @__PURE__ */ z(ee, {
+										variant: oe[r],
+										children: S(`postManager.${r}`)
+									}),
+									/* @__PURE__ */ z("span", { children: t.language }),
+									/* @__PURE__ */ z(b, { at: j && t.deleted_at ? t.deleted_at : t.updated_at }),
+									r === "scheduled" && t.live_at && /* @__PURE__ */ z("span", { children: S("pollManager.goesLive", { date: te(x, t.live_at) }) })
+								]
+							})]
+						}), /* @__PURE__ */ z("div", {
+							className: "flex flex-wrap gap-2",
+							children: j ? /* @__PURE__ */ z(a, {
+								size: "sm",
+								variant: "outline",
+								disabled: q.pending,
+								onClick: () => void q.run(() => n.posts.restore(t.id)),
+								children: S("moderation.restore")
+							}) : /* @__PURE__ */ B(R, { children: [
+								s && /* @__PURE__ */ z("a", {
+									className: o({
+										size: "sm",
+										variant: "ghost"
+									}),
+									href: s,
+									children: S("postManager.view")
+								}),
+								/* @__PURE__ */ z(a, {
+									size: "sm",
+									variant: "outline",
+									onClick: () => e.go(t.id),
+									children: S("comments.edit")
+								}),
+								/* @__PURE__ */ z(a, {
+									size: "sm",
+									variant: "destructive",
+									disabled: q.pending,
+									onClick: () => void Y(t),
+									children: S("comments.delete")
+								})
+							] })
+						})]
+					}, t.id);
+				})
+			}) : /* @__PURE__ */ z("p", {
+				className: "text-muted-foreground",
+				children: S(j ? "postManager.noDeleted" : "postManager.empty")
+			}),
+			/* @__PURE__ */ z(w, {
+				page: M,
+				hasNext: K.hasNext,
+				disabled: K.loading,
+				onPage: (t) => e.go("", {
+					...F,
+					page: t > 1 ? t : void 0
+				})
+			}),
+			J
+		]
+	});
+}
+var K = (e) => ({
+	title: e.title,
+	slug: e.slug ?? "",
+	language: e.language,
+	excerpt: e.excerpt ?? "",
+	liveAt: e.live_at ? D(new Date(e.live_at)) : "",
+	body: e.body
+});
+function q({ id: o, loc: s, client: c, languages: l, renderEditor: b, postHref: te, onError: ne }) {
+	let S = t(), { t: C } = S, w = P(), T = ae(l), E = M(o, { client: c }), D = n(ne), [k, A] = L(o ? null : {
+		title: "",
+		slug: "",
+		language: T[0]?.value ?? "en",
+		excerpt: "",
+		liveAt: "",
+		body: ""
+	}), [j, I] = L(null), [R, V] = L(null), { confirm: U, dialog: W } = ie();
+	N(() => {
+		E.post && A((e) => e ?? K(E.post));
+	}, [E.post]);
+	let { imageSrc: G } = E, q = F(() => (k?.body ?? "").replace(O(), (e, t) => {
+		let n = G(t);
+		return n && n !== t ? n.replaceAll("&", "&") : e;
+	}), [k?.body, G]);
+	if (o && !k) return E.error ? /* @__PURE__ */ z(re, {
+		error: E.error,
+		message: C("postManager.loadFailed"),
+		retry: () => s.go(o, void 0, { replace: !0 })
+	}) : /* @__PURE__ */ B("div", {
+		className: "grid gap-3",
+		"aria-busy": !0,
+		children: [/* @__PURE__ */ z(_, { className: "h-9 w-full" }), /* @__PURE__ */ z(_, { className: "h-48 w-full" })]
+	});
+	let J = k, Y = (e) => A((t) => ({
+		...t,
+		...e
+	})), X = (t) => {
+		let n = e(t);
+		I(n), D(n, "post.save");
+	}, ce = (e) => ({
+		title: J.title.trim(),
+		slug: J.slug.trim() || void 0,
+		language: J.language,
+		excerpt: J.excerpt.trim(),
+		body: J.body,
+		live_at: J.liveAt ? new Date(J.liveAt).toISOString() : void 0,
+		...e === void 0 ? {} : { is_draft: e }
+	}), le = async (e) => {
+		if (I(null), V(null), !J.title.trim()) return I(C("postManager.titleRequired"));
+		try {
+			if (!E.post) {
+				let e = await E.create({
+					...ce(),
+					is_draft: !0
+				});
+				s.go(e.id, void 0, { replace: !0 });
+				return;
+			}
+			let t = await E.update(ce(e));
+			V(C(e === !1 ? "postManager.publishedNotice" : e === !0 ? "postManager.unpublishedNotice" : "pollEditor.saved")), A((e) => ({
+				...e,
+				slug: t.slug ?? ""
+			}));
+		} catch (e) {
+			X(e);
+		}
+	}, ue = async () => {
+		if (E.post && await U({
+			title: C("postManager.deleteTitle", { title: E.post.title }),
+			description: C("postManager.deleteBody"),
+			confirm: C("postManager.delete")
+		})) try {
+			await E.remove(), s.go("", void 0, { replace: !0 });
+		} catch (e) {
+			X(e);
+		}
+	}, Z = E.post, Q = Z ? H(Z) : "draft", de = Z && Q === "published" ? te?.(Z) : void 0, $ = {
+		value: q,
+		onChange: (e) => Y({ body: E.storedBody(e) }),
+		uploadImage: Z ? (e) => E.uploadImage(e) : void 0,
+		disabled: E.saving,
+		placeholder: C("postManager.bodyPlaceholder"),
+		"aria-label": C("postManager.body")
+	};
+	return /* @__PURE__ */ B("form", {
+		className: "grid gap-4",
+		"data-ckui": "post-form",
+		onSubmit: (e) => {
+			e.preventDefault(), le();
+		},
+		children: [
+			/* @__PURE__ */ B("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ z("h2", {
+						className: "text-base font-semibold",
+						children: C(Z ? "postManager.editTitle" : "postManager.newTitle")
+					}),
+					Z && /* @__PURE__ */ z(ee, {
+						variant: oe[Q],
+						children: C(`postManager.${Q}`)
+					}),
+					de && /* @__PURE__ */ z("a", {
+						className: "text-xs text-muted-foreground hover:underline",
+						href: de,
+						children: C("postManager.view")
+					})
+				]
+			}),
+			Z?.moderation && /* @__PURE__ */ z(r, {
+				variant: Z.moderation === "rejected" ? "destructive" : "default",
+				children: /* @__PURE__ */ z(i, { children: Z.moderation_reason ? C(`postManager.${Z.moderation === "rejected" ? "rejectedBecause" : "heldBecause"}`, { reason: Z.moderation_reason }) : C(`postManager.${Z.moderation === "rejected" ? "rejectedNote" : "heldNote"}`) })
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ z(d, {
+					htmlFor: `${w}-title`,
+					children: C("postManager.postTitle")
+				}), /* @__PURE__ */ z(u, {
+					id: `${w}-title`,
+					value: J.title,
+					required: !0,
+					maxLength: 300,
+					onChange: (e) => Y({ title: e.target.value })
+				})]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "grid gap-4 sm:grid-cols-2",
+				children: [
+					/* @__PURE__ */ B("div", {
+						className: "grid gap-1.5",
+						children: [/* @__PURE__ */ z(d, {
+							htmlFor: `${w}-slug`,
+							children: C("postManager.slug")
+						}), /* @__PURE__ */ z(u, {
+							id: `${w}-slug`,
+							value: J.slug,
+							placeholder: C("postManager.slugAuto"),
+							onChange: (e) => Y({ slug: e.target.value })
+						})]
+					}),
+					/* @__PURE__ */ B("div", {
+						className: "grid gap-1.5",
+						children: [/* @__PURE__ */ z(d, {
+							htmlFor: `${w}-lang`,
+							children: C("postManager.language")
+						}), T.length ? /* @__PURE__ */ B(f, {
+							value: J.language,
+							onValueChange: (e) => Y({ language: String(e ?? "") }),
+							children: [/* @__PURE__ */ z(h, {
+								id: `${w}-lang`,
+								className: "w-full",
+								children: /* @__PURE__ */ z(g, { children: (e) => T.find((t) => t.value === e)?.label ?? e })
+							}), /* @__PURE__ */ z(p, { children: T.map((e) => /* @__PURE__ */ z(m, {
+								value: e.value,
+								children: e.label
+							}, e.value)) })]
+						}) : /* @__PURE__ */ z(u, {
+							id: `${w}-lang`,
+							value: J.language,
+							onChange: (e) => Y({ language: e.target.value })
+						})]
+					}),
+					/* @__PURE__ */ B("div", {
+						className: "grid gap-1.5",
+						children: [/* @__PURE__ */ z(d, {
+							htmlFor: `${w}-live`,
+							children: C("postManager.liveAt")
+						}), /* @__PURE__ */ z(u, {
+							id: `${w}-live`,
+							type: "datetime-local",
+							value: J.liveAt,
+							onChange: (e) => Y({ liveAt: e.target.value })
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ z(d, {
+					htmlFor: `${w}-excerpt`,
+					children: C("postManager.excerpt")
+				}), /* @__PURE__ */ z(v, {
+					id: `${w}-excerpt`,
+					rows: 2,
+					value: J.excerpt,
+					onChange: (e) => Y({ excerpt: e.target.value })
+				})]
+			}),
+			/* @__PURE__ */ z(se, {
+				post: Z,
+				src: E.coverSrc,
+				saving: E.saving,
+				onFile: (e) => void E.setCover(e).catch(X)
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "grid gap-1.5",
+				children: [
+					/* @__PURE__ */ z("span", {
+						className: "text-sm font-medium",
+						children: C("postManager.body")
+					}),
+					b ? b($) : /* @__PURE__ */ z(v, {
+						"aria-label": $["aria-label"],
+						rows: 12,
+						value: J.body,
+						placeholder: $.placeholder,
+						onChange: (e) => Y({ body: e.target.value })
+					}),
+					!Z && /* @__PURE__ */ z("p", {
+						className: "text-xs text-muted-foreground",
+						children: C("postManager.imagesAfterCreate")
+					})
+				]
+			}),
+			j && /* @__PURE__ */ z(y, { children: typeof j == "string" ? j : x(S, j) }),
+			R && !j && /* @__PURE__ */ z("p", {
+				role: "status",
+				className: "text-sm text-muted-foreground",
+				children: R
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "flex flex-wrap gap-2 border-t border-border pt-4",
+				children: [
+					/* @__PURE__ */ z(a, {
+						type: "submit",
+						disabled: E.saving,
+						children: E.saving ? C("common.saving") : C(Z ? "common.save" : "postManager.createDraft")
+					}),
+					Z && /* @__PURE__ */ z(a, {
+						type: "button",
+						variant: "outline",
+						disabled: E.saving,
+						onClick: () => void le(!Z.is_draft),
+						children: C(Z.is_draft ? "postManager.publish" : "postManager.unpublish")
+					}),
+					Z && /* @__PURE__ */ z(a, {
+						type: "button",
+						variant: "destructive",
+						className: "ms-auto",
+						disabled: E.saving,
+						onClick: () => void ue(),
+						children: C("postManager.delete")
+					})
+				]
+			}),
+			W
+		]
+	});
+}
+function se({ post: e, src: n, saving: r, onFile: i }) {
+	let { t: o } = t(), s = I(null);
+	return /* @__PURE__ */ B("div", {
+		className: "grid gap-1.5",
+		"data-ckui": "post-cover",
+		children: [/* @__PURE__ */ z("span", {
+			className: "text-sm font-medium",
+			children: o("postManager.cover")
+		}), e ? /* @__PURE__ */ B("div", {
+			className: "flex flex-wrap items-center gap-3",
+			children: [
+				n ? /* @__PURE__ */ z("img", {
+					src: n,
+					alt: "",
+					className: "h-20 w-36 rounded-md border border-border object-cover"
+				}) : /* @__PURE__ */ z("span", {
+					className: "text-muted-foreground",
+					children: o("postManager.noCover")
+				}),
+				/* @__PURE__ */ z(a, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					disabled: r,
+					onClick: () => s.current?.click(),
+					children: o(n ? "pollEditor.replaceImage" : "postManager.addCover")
+				}),
+				n && /* @__PURE__ */ z(a, {
+					type: "button",
+					size: "sm",
+					variant: "ghost",
+					disabled: r,
+					onClick: () => i(null),
+					children: o("pollEditor.removeImage")
+				}),
+				/* @__PURE__ */ z("input", {
+					ref: s,
+					type: "file",
+					accept: "image/*",
+					hidden: !0,
+					"aria-label": o("postManager.cover"),
+					onChange: (e) => {
+						let t = e.target.files?.[0];
+						e.target.value = "", t && i(t);
+					}
+				})
+			]
+		}) : /* @__PURE__ */ z("p", {
+			className: "text-xs text-muted-foreground",
+			children: o("postManager.imagesAfterCreate")
+		})]
+	});
+}
+//#endregion
+export { U as PostManager, H as postStatus, V as usePostManagerAccess };
+
+//# sourceMappingURL=post-manager.js.map