feat(task-005): complete article intake dashboard detail flow
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
import type { ArticleSummary, TargetSiteConfig } from "@pipeline/shared";
|
||||
|
||||
export type DashboardRow = {
|
||||
id: string;
|
||||
targetSiteName: string;
|
||||
workingTitle: string | null;
|
||||
briefDescription: string;
|
||||
status: string;
|
||||
publishingStatus: string;
|
||||
assignedEditor: string;
|
||||
updatedAt: string;
|
||||
nextAction: string;
|
||||
};
|
||||
|
||||
const EMPTY_ASSIGNED_EDITOR_LABEL = "Unassigned";
|
||||
|
||||
export function getNextActionForStatus(status: string): string {
|
||||
if (status === "ARTICLE_BRIEF_CREATED") {
|
||||
return "Create plan";
|
||||
}
|
||||
if (status === "PLAN_DRAFTED") {
|
||||
return "Run boundary questions";
|
||||
}
|
||||
if (status === "PLAN_REVIEWED") {
|
||||
return "Gather evidence";
|
||||
}
|
||||
return "Continue workflow";
|
||||
}
|
||||
|
||||
function getAssignedEditorLabel(article: ArticleSummary): string {
|
||||
return article.assigned_editor_id ?? EMPTY_ASSIGNED_EDITOR_LABEL;
|
||||
}
|
||||
|
||||
function getTargetSiteName(
|
||||
article: ArticleSummary,
|
||||
siteById: Map<string, TargetSiteConfig>,
|
||||
): string {
|
||||
const site = siteById.get(article.target_site_id);
|
||||
return site?.name ?? "Unknown site";
|
||||
}
|
||||
|
||||
export function buildDashboardRows(
|
||||
articles: readonly ArticleSummary[],
|
||||
sites: readonly TargetSiteConfig[],
|
||||
): DashboardRow[] {
|
||||
const siteById = new Map(sites.map((site) => [site.id, site]));
|
||||
|
||||
return articles.map((article) => ({
|
||||
id: article.id,
|
||||
targetSiteName: getTargetSiteName(article, siteById),
|
||||
workingTitle: article.working_title ?? null,
|
||||
briefDescription: article.brief_description,
|
||||
status: article.status,
|
||||
publishingStatus: article.publishing_status,
|
||||
assignedEditor: getAssignedEditorLabel(article),
|
||||
updatedAt: article.updated_at,
|
||||
nextAction: getNextActionForStatus(article.status),
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import type { DashboardRow } from "./model";
|
||||
|
||||
type DashboardTableProps = {
|
||||
rows: readonly DashboardRow[];
|
||||
};
|
||||
|
||||
export function DashboardTable({ rows }: DashboardTableProps) {
|
||||
if (rows.length === 0) {
|
||||
return <p className="emptyState">No article workflows yet.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Article title</th>
|
||||
<th>Target website</th>
|
||||
<th>Status</th>
|
||||
<th>Assigned editor</th>
|
||||
<th>Last updated</th>
|
||||
<th>Next action</th>
|
||||
<th>Publishing status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td>
|
||||
<Link href={`/articles/${row.id}`}>{row.workingTitle || row.briefDescription}</Link>
|
||||
</td>
|
||||
<td>{row.targetSiteName}</td>
|
||||
<td>{row.status}</td>
|
||||
<td>{row.assignedEditor}</td>
|
||||
<td>{new Date(row.updatedAt).toLocaleString()}</td>
|
||||
<td>{row.nextAction}</td>
|
||||
<td>{row.publishingStatus}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { ArticleDetailResponse, WorkflowEventSummary } from "@pipeline/shared";
|
||||
|
||||
export type ArticleTimelineItem = Pick<
|
||||
WorkflowEventSummary,
|
||||
"id" | "event_type" | "to_status" | "from_status" | "actor_user_id" | "created_at"
|
||||
> & {
|
||||
articleId: string;
|
||||
};
|
||||
|
||||
export type DetailSummary = {
|
||||
articleId: string;
|
||||
status: string;
|
||||
publishingStatus: string;
|
||||
briefDescription: string;
|
||||
targetSite: string;
|
||||
updatedAt: string;
|
||||
timeline: ArticleTimelineItem[];
|
||||
};
|
||||
|
||||
export function buildArticleTimeline(detail: ArticleDetailResponse): ArticleTimelineItem[] {
|
||||
return (detail.workflow_events ?? []).map((event) => ({
|
||||
id: event.id,
|
||||
event_type: event.event_type,
|
||||
to_status: event.to_status,
|
||||
from_status: event.from_status,
|
||||
actor_user_id: event.actor_user_id,
|
||||
created_at: event.created_at,
|
||||
articleId: event.article_id,
|
||||
}));
|
||||
}
|
||||
|
||||
export function buildDetailSummary(detail: ArticleDetailResponse): DetailSummary {
|
||||
return {
|
||||
articleId: detail.article.id,
|
||||
status: detail.article.status,
|
||||
publishingStatus: detail.article.publishing_status,
|
||||
briefDescription: detail.article.brief_description,
|
||||
targetSite: detail.target_site?.name ?? "Unknown",
|
||||
updatedAt: detail.article.updated_at,
|
||||
timeline: buildArticleTimeline(detail),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { DetailSummary } from "./model";
|
||||
|
||||
type DetailShellProps = {
|
||||
summary: DetailSummary;
|
||||
};
|
||||
|
||||
export function ArticleDetailShell({ summary }: DetailShellProps) {
|
||||
const timeline = summary.timeline;
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2>Article detail</h2>
|
||||
<dl className="detailGrid">
|
||||
<div>
|
||||
<dt>Article ID</dt>
|
||||
<dd>{summary.articleId}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Status</dt>
|
||||
<dd>{summary.status}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Publishing status</dt>
|
||||
<dd>{summary.publishingStatus}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Target site</dt>
|
||||
<dd>{summary.targetSite}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Last updated</dt>
|
||||
<dd>{new Date(summary.updatedAt).toLocaleString()}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<h3>Brief</h3>
|
||||
<p>{summary.briefDescription}</p>
|
||||
|
||||
<h3>Workflow timeline</h3>
|
||||
<ul className="timeline">
|
||||
{timeline.map((event) => (
|
||||
<li key={event.id}>
|
||||
<strong>{event.event_type}</strong> from {event.from_status ?? "—"} to{" "}
|
||||
{event.to_status ?? "—"} at {new Date(event.created_at).toLocaleString()}
|
||||
{event.actor_user_id ? <span> • actor {event.actor_user_id}</span> : null}
|
||||
</li>
|
||||
))}
|
||||
{timeline.length === 0 ? <li>No workflow events yet.</li> : null}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { TargetSiteConfig } from "@pipeline/shared";
|
||||
|
||||
export type NewArticleDraft = {
|
||||
targetSiteId: string;
|
||||
briefDescription: string;
|
||||
workingTitle: string;
|
||||
contentType: string;
|
||||
primaryKeyword: string;
|
||||
};
|
||||
|
||||
export type FieldErrors = Record<string, string>;
|
||||
|
||||
export type NewArticleFormState = {
|
||||
values: NewArticleDraft;
|
||||
errors: FieldErrors;
|
||||
formError?: string;
|
||||
};
|
||||
|
||||
export function initialDraft(sites: readonly TargetSiteConfig[]): NewArticleDraft {
|
||||
return {
|
||||
targetSiteId: sites.length > 0 ? sites[0].id : "",
|
||||
briefDescription: "",
|
||||
workingTitle: "",
|
||||
contentType: "longform_guide",
|
||||
primaryKeyword: "",
|
||||
};
|
||||
}
|
||||
|
||||
export function validateArticleDraft(values: NewArticleDraft): FieldErrors {
|
||||
const errors: FieldErrors = {};
|
||||
|
||||
if (!values.targetSiteId) {
|
||||
errors.targetSiteId = "Select a target site";
|
||||
}
|
||||
if (!values.briefDescription.trim()) {
|
||||
errors.briefDescription = "Brief description is required";
|
||||
}
|
||||
if (!values.contentType.trim()) {
|
||||
errors.contentType = "Content type is required";
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState, type FormEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
import type { TargetSiteConfig } from "@pipeline/shared";
|
||||
|
||||
import { ApiError, createArticle } from "@/shared/pipeline-api";
|
||||
import {
|
||||
initialDraft,
|
||||
validateArticleDraft,
|
||||
type FieldErrors,
|
||||
type NewArticleDraft,
|
||||
} from "./model";
|
||||
|
||||
type NewArticleFormProps = {
|
||||
sites: readonly TargetSiteConfig[];
|
||||
};
|
||||
|
||||
export function NewArticleForm({ sites }: NewArticleFormProps) {
|
||||
const router = useRouter();
|
||||
const [values, setValues] = useState<NewArticleDraft>(() => initialDraft(sites));
|
||||
const [errors, setErrors] = useState<FieldErrors>({});
|
||||
const [formError, setFormError] = useState("");
|
||||
const [isSubmitting, setSubmitting] = useState(false);
|
||||
|
||||
const canSubmit = useMemo(
|
||||
() => !isSubmitting && sites.length > 0,
|
||||
[isSubmitting, sites.length],
|
||||
);
|
||||
|
||||
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const nextErrors = validateArticleDraft(values);
|
||||
if (Object.keys(nextErrors).length > 0) {
|
||||
setErrors(nextErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrors({});
|
||||
setFormError("");
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const response = await createArticle({
|
||||
target_site_id: values.targetSiteId,
|
||||
brief_description: values.briefDescription,
|
||||
working_title: values.workingTitle || null,
|
||||
language: "en",
|
||||
content_type: values.contentType,
|
||||
primary_keyword: values.primaryKeyword || null,
|
||||
});
|
||||
router.push(`/articles/${response.article.id}`);
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
setFormError(error.message || "Request failed");
|
||||
} else {
|
||||
setFormError("Unable to create article");
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function updateField<K extends keyof NewArticleDraft>(field: K, value: NewArticleDraft[K]) {
|
||||
setValues((current) => ({ ...current, [field]: value }));
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="articleForm" onSubmit={handleSubmit}>
|
||||
<h2>Create article brief</h2>
|
||||
{formError ? <p className="formError">Error: {formError}</p> : null}
|
||||
<label htmlFor="targetSiteId">Target site</label>
|
||||
<select
|
||||
id="targetSiteId"
|
||||
value={values.targetSiteId}
|
||||
onChange={(event) => updateField("targetSiteId", event.target.value)}
|
||||
>
|
||||
<option value="">Select a site</option>
|
||||
{sites.map((site) => (
|
||||
<option key={site.id} value={site.id}>
|
||||
{site.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.targetSiteId ? <p className="fieldError">{errors.targetSiteId}</p> : null}
|
||||
|
||||
<label htmlFor="briefDescription">Brief description</label>
|
||||
<textarea
|
||||
id="briefDescription"
|
||||
value={values.briefDescription}
|
||||
onChange={(event) => updateField("briefDescription", event.target.value)}
|
||||
placeholder="Paste editor brief..."
|
||||
/>
|
||||
{errors.briefDescription ? (
|
||||
<p className="fieldError">{errors.briefDescription}</p>
|
||||
) : null}
|
||||
|
||||
<label htmlFor="workingTitle">Working title (optional)</label>
|
||||
<input
|
||||
id="workingTitle"
|
||||
type="text"
|
||||
value={values.workingTitle}
|
||||
onChange={(event) => updateField("workingTitle", event.target.value)}
|
||||
placeholder="Optional working title"
|
||||
/>
|
||||
|
||||
<label htmlFor="contentType">Content type</label>
|
||||
<input
|
||||
id="contentType"
|
||||
type="text"
|
||||
value={values.contentType}
|
||||
onChange={(event) => updateField("contentType", event.target.value)}
|
||||
/>
|
||||
{errors.contentType ? <p className="fieldError">{errors.contentType}</p> : null}
|
||||
|
||||
<label htmlFor="primaryKeyword">Primary keyword (optional)</label>
|
||||
<input
|
||||
id="primaryKeyword"
|
||||
type="text"
|
||||
value={values.primaryKeyword}
|
||||
onChange={(event) => updateField("primaryKeyword", event.target.value)}
|
||||
/>
|
||||
|
||||
<div className="formActions">
|
||||
<button type="submit" disabled={!canSubmit}>
|
||||
{isSubmitting ? "Creating..." : "Create article"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user