Aislo/M01_MasterData/M01_MasterData_UI_LogicLab_Source.ts

/* =============================================================================
 * M01_MasterData_UI_LogicLab_Source.ts
 * 원문 보기(품셈 본문 절) — 출처 글로 서버가 찾음(`GET /m01/logic/source`) · 늦게 온 답은 버림
 * M01 로직 상세 「원문」 패널 · M02 일위대가 상세 「원문」 패널(47-4)이 같이 씀 ·
 * 길은 부르는 쪽이 줌(85-4 · M02 = `/m02/logic-lib/source` + 제목 행 [원문 다운로드] pdf 통째)
 * ========================================================================== */

import { currentLanguageIndex } from "@ui/ui_template_locale";
import { el } from "@ui/ui_template_elements";
import { API_BASE_URL } from "@config/config_frontend";
import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
import "./M01_MasterData_UI_LogicLab_Side.css";

const TEXT = {
  Loading: ["원문 찾는 중", "Looking up the source"],
  None: ["원문 연결 없음", "No linked source"],
  From: ["출처", "Source"],
  NoSource: ["출처 없음", "No source"],
  Near: ["{v} 절이 없어 위 절", "No {v} section — showing the parent"],
  Download: ["원문 다운로드", "Download source"],
} as const;

const ts = (key: keyof typeof TEXT, v = ""): string =>
  TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);

interface Block {
  h?: number;
  text?: string;
  p?: string;
  table?: string[][];
  /** 출처가 가리킨 항 · 주 — 강조 */
  hit?: boolean;
}
interface Found {
  number: string;
  matched: string;
  file: string;
  blocks: Block[];
  item?: string;
}

function blockNode(b: Block): HTMLElement {
  const node = rawNode(b);
  if (b.hit) node.classList.add("m01lab-src__hit");
  return node;
}

function rawNode(b: Block): HTMLElement {
  if (b.table)
    return el("div", {
      className: "m01-logic__scroll",
      children: [
        el("table", {
          className: "m01-logic__grid m01lab-src__table",
          children: [
            el("tbody", {
              children: b.table.map((r) =>
                el("tr", { children: r.map((c) => el("td", { text: c })) }),
              ),
            }),
          ],
        }),
      ],
    });
  if (b.h) return el("h4", { className: "m01lab-src__head", text: b.text ?? "" });
  return el("p", { className: "m01lab-src__p", text: b.p ?? "" });
}

export interface SourceView {
  root: HTMLElement;
  /** 그 출처 글의 원문을 그림 — 지금 보이는 것과 같으면 안 부름 */
  show(src: string): void;
}

/** 출처 글 → 원문 pdf 책(85-4) — 모르면 null */
const bookOf = (src: string): string | null =>
  src.startsWith("건설품셈") ? "건설" : src.startsWith("산림품셈") ? "산림" : null;

export interface SourceViewOptions {
  /** 원문 절 길(기본 M01 `/m01/logic/source` — 시스템 관리자) */
  path?: string;
  /** 원문 pdf 길(`?book=`) — 주면 제목 행 오른쪽 [원문 다운로드] */
  pdf?: string;
}

export function createSourceView(opts: SourceViewOptions = {}): SourceView {
  const body = el("div", { className: "m01lab-src__body" });
  const title = el("strong", { className: "m02-dfp__title" });
  const download = opts.pdf
    ? (el("a", {
        className: "ui-btn ui-btn--ghost ui-btn--sm",
        text: ts("Download"),
        attrs: { download: "", "data-source-pdf": "" },
      }) as HTMLAnchorElement)
    : null;
  let shown: string | null = null;

  const show = (src: string): void => {
    if (shown === src) return;
    shown = src;
    title.textContent = src || ts("NoSource");
    if (download) {
      const book = bookOf(src);
      download.hidden = !book;
      download.href = book ? `${API_BASE_URL}${opts.pdf}?${new URLSearchParams({ book })}` : "";
    }
    body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") }));
    const none = (): void =>
      body.replaceChildren(
        el("p", { className: "m01lab-src__none", text: ts("None") }),
        el("p", { className: "m01-logic__muted", text: `${ts("From")} · ${src || "—"}` }),
      );
    if (!src.trim()) return none();
    void fetch(
      `${API_BASE_URL}${opts.path ?? "/m01/logic/source"}?${new URLSearchParams({ src })}`,
      {
        credentials: "include",
      },
    )
      .then((r) => (r.ok ? (r.json() as Promise<{ found: Found[] }>) : { found: [] }))
      .catch(() => ({ found: [] as Found[] }))
      .then(({ found }) => {
        if (shown !== src) return;
        if (!found.length) return none();
        body.replaceChildren(
          ...found.flatMap((f) => [
            el("p", {
              className: "m01-logic__muted m01lab-src__file",
              text: [
                f.file,
                f.matched === f.number ? "" : ts("Near", f.number),
                f.item ? (/^\d+$/.test(f.item) ? `${f.item}항` : f.item) : "",
              ]
                .filter(Boolean)
                .join(" · "),
            }),
            ...f.blocks.map(blockNode),
          ]),
        );
        // 강조 항을 패널 몸 가운데로 — 몸만 굴림(85-5 · scrollIntoView 는 메인 창까지 굴림)
        requestAnimationFrame(() => {
          const hit = body.querySelector<HTMLElement>(".m01lab-src__hit");
          const box = hit?.closest<HTMLElement>(".ui-side-panels__body");
          if (!hit || !box) return hit?.scrollIntoView({ block: "nearest" });
          const off = hit.getBoundingClientRect().top - box.getBoundingClientRect().top;
          box.scrollTop += off - (box.clientHeight - hit.offsetHeight) / 2;
        });
      });
  };

  const head = download
    ? el("div", { className: "m02-dfp__head", children: [title, download] })
    : title;
  return { root: el("div", { className: "m01lab-src", children: [head, body] }), show };
}