@johnnyboy11234/esg-idea-contest 0.3.1 → 0.3.2

package/frontend/src/features/idea/CreateIdeaForm.tsx

@@ -0,0 +1,279 @@
+import { useRef, useState, type FormEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/shared/ui/button";
+import { CopyButton } from "@/shared/ui/copy-button";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/shared/ui/field";
+import { Input } from "@/shared/ui/input";
+import { NativeSelect } from "@/shared/ui/native-select";
+import { Textarea } from "@/shared/ui/textarea";
+import { SLIDE_EXTS } from "@/shared/slides";
+import { cleanName, cleanSummary, countCodePoints } from "@/shared/text";
+import {
+  CATEGORIES,
+  createIdea,
+  DIRECTIONS,
+  expectedBaseFor,
+  IDEA_FIELDS,
+  mapServerError,
+  NAME_MAX,
+  ORGS,
+  precheck,
+  SUMMARY_MAX,
+  type FieldProblems,
+  type IdeaDetail,
+  type IdeaField,
+  type IdeaText,
+  type Leader,
+} from "./create";
+
+const EMPTY: IdeaText = { category: "", org: "", direction: "", name: "", summary: "" };
+
+const OPTIONS = {
+  category: { list: CATEGORIES, key: "enums.category" },
+  org: { list: ORGS, key: "enums.org" },
+  direction: { list: DIRECTIONS, key: "enums.direction" },
+} as const;
+
+/**
+ * The create form (Frontend.md §5.5, §5.6, §8): code-point counters, the expected
+ * filename with copy buttons, a pre-check in the server's order, an error summary
+ * that takes focus, and server errors mapped to fields. The file is never renamed
+ * (OI-21): the user names it.
+ */
+export function CreateIdeaForm({
+  leader,
+  canSubmit,
+  onCreated,
+  onSubmissionRejected,
+}: {
+  leader: Leader;
+  /** False outside the submission window; the server still decides (Frontend.md §6.3 rule 6). */
+  canSubmit: boolean;
+  onCreated: (idea: IdeaDetail) => void;
+  /** A 403 SUBMISSION_* answer: the caller refetches the deadline (Frontend.md §5.3). */
+  onSubmissionRejected?: () => void;
+}) {
+  const { t, i18n } = useTranslation();
+  const [values, setValues] = useState<IdeaText>(EMPTY);
+  const [files, setFiles] = useState<File[]>([]);
+  const [problems, setProblems] = useState<FieldProblems>({});
+  const [serverExpected, setServerExpected] = useState<string | undefined>();
+  const [formError, setFormError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const [summaryKey, setSummaryKey] = useState(0);
+  const summary = useRef<HTMLDivElement>(null);
+  const form = useRef<HTMLFormElement>(null);
+
+  const expectedBase = expectedBaseFor(values, leader);
+  const fileExt = files[0]?.name.split(".").pop()?.toLowerCase();
+
+  const message = (f: IdeaField, code: string): string => {
+    const text = i18n.exists(`errors.${code}`) ? t(`errors.${code}`) : t("errors.VALIDATION_FAILED");
+    if (f !== "slides" || code !== "FILENAME_MISMATCH") return text;
+    const expected =
+      serverExpected ??
+      (expectedBase && `${expectedBase}.${fileExt === "pptx" ? "pptx" : "pdf"}`);
+    return expected ? `${text} ${t("pages.ideaForm.expectedIs", { name: expected })}` : text;
+  };
+
+  const fail = (p: FieldProblems, rest: string | null) => {
+    setProblems(p);
+    setFormError(rest);
+    setSummaryKey((k) => k + 1);
+    queueMicrotask(() => summary.current?.focus()); // WCAG 3.3.1
+  };
+
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (pending || !canSubmit) return;
+    setServerExpected(undefined);
+    const { values: body, problems: local } = await precheck(values, files, leader);
+    if (Object.keys(local).length > 0) {
+      fail(local, null);
+      return;
+    }
+    setPending(true);
+    setProblems({});
+    setFormError(null);
+    try {
+      onCreated(await createIdea(body, files[0]!));
+    } catch (err) {
+      const { problems: p, rest, expected } = mapServerError(err);
+      setServerExpected(expected);
+      if (rest?.code === "SUBMISSION_CLOSED" || rest?.code === "SUBMISSION_NOT_OPEN") onSubmissionRejected?.();
+      fail(
+        p,
+        rest
+          ? t(`errors.${rest.code}`) + (rest.requestId ? ` ${t("common.requestId", { id: rest.requestId })}` : "")
+          : null,
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const focusField = (f: IdeaField) => (e: { preventDefault: () => void }) => {
+    e.preventDefault();
+    form.current?.querySelector<HTMLElement>(`#${f}`)?.focus();
+  };
+
+  const set = (f: keyof IdeaText) => (e: { target: { value: string } }) =>
+    setValues((v) => ({ ...v, [f]: e.target.value }));
+
+  /** Common ARIA wiring of a control; `extra` ids (hint, counter) come first. */
+  const aria = (f: IdeaField, ...extra: string[]) => {
+    const problem = problems[f];
+    return {
+      id: f,
+      name: f,
+      required: true,
+      "aria-required": true as const,
+      "aria-invalid": problem ? true : undefined,
+      "aria-describedby": [...extra, problem && `${f}-error`].filter(Boolean).join(" ") || undefined,
+    };
+  };
+
+  const wrap = (f: IdeaField, control: ReactNode, below?: ReactNode) => (
+    <Field key={f} data-invalid={problems[f] ? true : undefined}>
+      <FieldLabel htmlFor={f}>{t(`fields.${f === "name" ? "ideaName" : f}`)}</FieldLabel>
+      {control}
+      {below}
+      {problems[f] && (
+        <FieldError id={`${f}-error`} role={undefined}>
+          {message(f, problems[f])}
+        </FieldError>
+      )}
+    </Field>
+  );
+
+  const counter = (f: "name" | "summary", n: number, max: number) => (
+    <FieldDescription id={`${f}-count`} className={n > max ? "text-destructive" : undefined}>
+      {t("pages.ideaForm.count", { n, max })}
+    </FieldDescription>
+  );
+
+  const listed = IDEA_FIELDS.filter((f) => problems[f] !== undefined);
+  const hasSummary = listed.length > 0 || formError !== null;
+  const nameCount = countCodePoints(cleanName(values.name));
+  const summaryCount = countCodePoints(cleanSummary(values.summary));
+
+  return (
+    <form ref={form} onSubmit={(e) => void onSubmit(e)} noValidate>
+      <FieldGroup>
+        {hasSummary && (
+          <div
+            key={summaryKey}
+            ref={summary}
+            role="alert"
+            tabIndex={-1}
+            className="rounded-md border border-destructive p-3 text-sm outline-none focus-visible:ring-[3px] focus-visible:ring-destructive/40"
+          >
+            <p className="font-medium text-destructive">{t("pages.register.summaryTitle")}</p>
+            {formError !== null && <p>{formError}</p>}
+            {listed.length > 0 && (
+              <ul className="mt-1 list-disc pl-5">
+                {listed.map((f) => (
+                  <li key={f}>
+                    <a href={`#${f}`} onClick={focusField(f)} className="underline underline-offset-4">
+                      {t(`fields.${f === "name" ? "ideaName" : f}`)}: {message(f, problems[f]!)}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+
+        <div className="flex flex-col gap-1 text-sm">
+          <p className="font-medium">{t("fields.leader")}</p>
+          <p>
+            {leader.name} ({leader.empNo})
+          </p>
+          <p className="text-muted-foreground">{t("pages.ideaForm.leaderHint")}</p>
+        </div>
+
+        {(["category", "org", "direction"] as const).map((f) =>
+          wrap(
+            f,
+            <NativeSelect {...aria(f)} value={values[f]} onChange={set(f)}>
+              <option value="">{t("pages.ideaForm.choose")}</option>
+              {OPTIONS[f].list.map((code) => (
+                <option key={code} value={code}>
+                  {t(`${OPTIONS[f].key}.${code}`)}
+                </option>
+              ))}
+            </NativeSelect>,
+          ),
+        )}
+
+        {wrap(
+          "name",
+          <Input {...aria("name", "name-count", "name-hint")} autoComplete="off" value={values.name} onChange={set("name")} />,
+          <>
+            {counter("name", nameCount, NAME_MAX)}
+            <FieldDescription id="name-hint">{t("pages.ideaForm.nameHint")}</FieldDescription>
+          </>,
+        )}
+
+        {wrap(
+          "summary",
+          <Textarea {...aria("summary", "summary-count")} rows={6} value={values.summary} onChange={set("summary")} />,
+          counter("summary", summaryCount, SUMMARY_MAX),
+        )}
+
+        <section aria-labelledby="expected-title" className="rounded-md border bg-muted/40 p-3 text-sm">
+          <h2 id="expected-title" className="font-medium">
+            {t("pages.ideaForm.expectedTitle")}
+          </h2>
+          {expectedBase === null ? (
+            <p className="mt-1 text-muted-foreground">{t("pages.ideaForm.expectedPending")}</p>
+          ) : (
+            <>
+              <p className="mt-1 text-muted-foreground">{t("pages.ideaForm.expectedHint")}</p>
+              <ul className="mt-2 flex flex-col gap-2">
+                {SLIDE_EXTS.map((ext) => {
+                  const name = `${expectedBase}.${ext}`;
+                  return (
+                    <li key={ext} className="flex items-center gap-2">
+                      <code className="min-w-0 flex-1 break-all rounded bg-background px-2 py-1">{name}</code>
+                      <CopyButton
+                        value={name}
+                        label={t("pages.ideaForm.copy", { ext: ext.toUpperCase() })}
+                        copiedText={t("pages.ideaForm.copied")}
+                        failedText={t("pages.ideaForm.copyFailed")}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+            </>
+          )}
+        </section>
+
+        {wrap(
+          "slides",
+          <Input
+            {...aria("slides", "slides-hint")}
+            type="file"
+            accept=".pdf,.pptx,application/pdf,application/vnd.openxmlformats-officedocument.presentationml.presentation"
+            onChange={(e) => setFiles(Array.from(e.target.files ?? []))}
+          />,
+          <FieldDescription id="slides-hint">{t("pages.ideaForm.slidesHint")}</FieldDescription>,
+        )}
+
+        <Field>
+          {!canSubmit && <FieldDescription>{t("pages.ideaCreate.closedHint")}</FieldDescription>}
+          <Button type="submit" disabled={pending || !canSubmit} aria-busy={pending || undefined}>
+            {pending ? t("pages.ideaCreate.submitting") : t("pages.ideaCreate.submit")}
+          </Button>
+        </Field>
+      </FieldGroup>
+    </form>
+  );
+}

package/frontend/src/features/idea/create.ts

@@ -0,0 +1,123 @@
+import { ApiError, apiFetch, type components } from '@/shared/api';
+import { CATEGORIES, expectedFilenameBase, filenameTooLong, precheckSlides, type Category } from '@/shared/slides';
+import { checkName, checkSummary } from '@/shared/text';
+
+export type IdeaDetail = components['schemas']['IdeaDetail'];
+
+/** Form-field order; also the order of the error summary (error-codes.md §2). */
+export const IDEA_FIELDS = ['category', 'org', 'direction', 'name', 'summary', 'slides'] as const;
+export type IdeaField = (typeof IDEA_FIELDS)[number];
+export type TextField = Exclude<IdeaField, 'slides'>;
+
+export const ORGS = ['AAID', 'BSID', 'ICSD', 'TSID', 'PLED', 'DEID'] as const;
+export const DIRECTIONS = [
+  'GREEN_MANUFACTURING',
+  'RESPONSIBLE_SUPPLY_CHAIN',
+  'INCLUSIVE_WORKPLACE',
+  'TALENT_DEVELOPMENT',
+  'CARING_FOR_DISADVANTAGED',
+] as const;
+export { CATEGORIES };
+
+export const NAME_MAX = 75;
+export const SUMMARY_MAX = 300;
+
+export type IdeaText = Record<TextField, string>;
+/** A field problem is an `errors.<code>` key. */
+export type FieldProblems = Partial<Record<IdeaField, string>>;
+
+export interface Leader {
+  name: string;
+  empNo: string;
+}
+
+const isCategory = (v: string): v is Category => (CATEGORIES as readonly string[]).includes(v);
+const isOneOf = (list: readonly string[], v: string) => list.includes(v);
+
+/**
+ * The expected filename base for the current input, or null while category, org or
+ * name cannot produce one. Built from the cleaned name, as the server does.
+ */
+export function expectedBaseFor(v: Pick<IdeaText, 'category' | 'org' | 'name'>, leader: Leader): string | null {
+  const name = checkName(v.name, NAME_MAX);
+  if (!isCategory(v.category) || !isOneOf(ORGS, v.org) || name.problem !== '') return null;
+  return expectedFilenameBase(v.category, v.org, leader.name, leader.empNo, name.cleaned);
+}
+
+/**
+ * Text checks in the server's order (PRD §6.2, §6.6), one problem per field;
+ * `FILENAME_TOO_LONG` is reported on `name` like the server does. Returns the
+ * cleaned values that are sent, and the expected base when the text is valid.
+ */
+export function precheckText(v: IdeaText, leader: Leader): { values: IdeaText; problems: FieldProblems; expectedBase: string | null } {
+  const problems: FieldProblems = {};
+  const pick = (f: 'category' | 'org' | 'direction', list: readonly string[]) => {
+    if (v[f] === '') problems[f] = 'REQUIRED';
+    else if (!isOneOf(list, v[f])) problems[f] = 'INVALID_ENUM';
+  };
+  pick('category', CATEGORIES);
+  pick('org', ORGS);
+  pick('direction', DIRECTIONS);
+
+  const name = checkName(v.name, NAME_MAX);
+  let expectedBase: string | null = null;
+  if (name.problem) problems.name = name.problem;
+  else {
+    expectedBase = expectedBaseFor(v, leader);
+    if (expectedBase !== null && filenameTooLong(expectedBase)) {
+      problems.name = 'FILENAME_TOO_LONG';
+      expectedBase = null;
+    }
+  }
+
+  const summary = checkSummary(v.summary, SUMMARY_MAX);
+  if (summary.problem) problems.summary = summary.problem;
+
+  return { values: { ...v, name: name.cleaned, summary: summary.cleaned }, problems, expectedBase };
+}
+
+/**
+ * Whole-form pre-check. A missing file is always reported; the other file steps
+ * run only when the text is valid, because the server does not validate the file
+ * otherwise (PRD §6.8) and the filename depends on the text.
+ */
+export async function precheck(v: IdeaText, files: readonly File[], leader: Leader): Promise<{ values: IdeaText; problems: FieldProblems }> {
+  const { values, problems, expectedBase } = precheckText(v, leader);
+  const textOk = Object.keys(problems).length === 0;
+  const slides = files.length === 0 ? 'REQUIRED' : textOk ? await precheckSlides(files, expectedBase) : '';
+  if (slides) problems.slides = slides;
+  return { values, problems };
+}
+
+/** POST /ideas: one multipart request with every field and the slides (PRD §6.6). */
+export async function createIdea(values: IdeaText, file: File): Promise<IdeaDetail> {
+  const body = new FormData();
+  for (const f of ['category', 'org', 'direction', 'name', 'summary'] as const) body.append(f, values[f]);
+  body.append('slides', file, file.name);
+  const res = await apiFetch('/ideas', { method: 'POST', body });
+  return (await res.json()) as IdeaDetail;
+}
+
+/** File errors that carry no `errors[]` entry; they belong to the slides field. */
+const SLIDES_CODES = new Set(['FILE_TOO_LARGE', 'EMPTY_FILE', 'UNSUPPORTED_FILE_TYPE', 'FILENAME_MISMATCH']);
+
+const isField = (f: string): f is IdeaField => (IDEA_FIELDS as readonly string[]).includes(f);
+
+/**
+ * Maps a failed create to field problems; `rest` has no field (403 state, 503, …)
+ * and is shown as a form-level message. `expected` is the server's expected
+ * filename from a `FILENAME_MISMATCH`.
+ */
+export function mapServerError(e: unknown): { problems: FieldProblems; rest: ApiError | null; expected?: string } {
+  if (!(e instanceof ApiError)) return { problems: {}, rest: new ApiError({ status: 0, code: 'UNKNOWN' }) };
+  if (e.code === 'IDEA_DUPLICATE') return { problems: { name: 'IDEA_DUPLICATE' }, rest: null };
+  const problems: FieldProblems = {};
+  let expected: string | undefined;
+  for (const fe of e.errors) {
+    if (!isField(fe.field) || problems[fe.field] !== undefined) continue;
+    problems[fe.field] = fe.code;
+    if (fe.field === 'slides' && typeof fe.expected === 'string') expected = fe.expected;
+  }
+  if (Object.keys(problems).length === 0 && SLIDES_CODES.has(e.code)) problems.slides = e.code;
+  return { problems, rest: Object.keys(problems).length > 0 ? null : e, expected };
+}