Aislo/M01_MasterData/M01_MasterData_UI_Tables.ts

/* =============================================================================
 * M01_MasterData_UI_Tables.ts
 * 표형 파일(소요량·계수) — 표 목록 → 표 하나(조건 칸 + 값 칸의 긴 줄) · 눌러 고침(노랑) · 줄 더하기·지우기
 * ========================================================================== */

import { createButton, el, showToast } from "@ui/ui_template_elements";
import { t as L } from "@ui/ui_template_locale";
import { fetchTable, fetchTables, type Row, type TableHead } from "./M01_MasterData_Api_Fetch";
import {
  onDraftChange,
  peek,
  same,
  setTable,
  tableItems,
  type TableItem,
} from "./M01_MasterData_Draft";
import {
  buildCell,
  buildPager,
  coerce,
  show,
  toNumberish,
  toRange,
} from "./M01_MasterData_UI_Cells";

const LIST_SIZE = 30;

/** 돌려받은 함수 = 이 화면을 걷을 때 부를 해제. */
export function renderTables(host: HTMLElement, file: string, q: string): () => void {
  let stop = (): void => {};
  const list = (page = 1): void => {
    stop();
    stop = (): void => {};
    void showList(host, file, q, page, (key) => {
      stop = openTable(host, file, key, () => list(page));
    });
  };
  list();
  const off = onDraftChange(
    () => host.querySelector(".m01-master__tables") && markChanged(host, file),
  );
  return () => {
    stop();
    off();
  };
}

/** 목록 위 「고침」 표시만 다시 — 목록을 다시 받지 않음. */
function markChanged(host: HTMLElement, file: string): void {
  const changed = peek(file)?.tables ?? {};
  host.querySelectorAll<HTMLElement>(".m01-master__table-card").forEach((card) => {
    card.classList.toggle("is-changed", card.dataset.key! in changed);
  });
}

async function showList(
  host: HTMLElement,
  file: string,
  q: string,
  page: number,
  open: (key: string) => void,
): Promise<void> {
  let tables: TableHead[];
  try {
    tables = (await fetchTables(file, q)).tables;
  } catch (error) {
    showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error");
    return;
  }
  const cards = tables.slice((page - 1) * LIST_SIZE, page * LIST_SIZE).map((t) => {
    const card = el("button", {
      className: "m01-master__table-card",
      attrs: { type: "button", "data-key": t.열쇠 },
      children: [
        el("strong", { text: t.이름 || t.열쇠 }),
        el("span", { className: "m01-master__muted", text: `${t.열쇠} · ${t.기준 || "—"}` }),
        el("span", {
          className: "m01-master__muted",
          text: `${Object.keys(t.조건 ?? {}).join(" · ") || "—"} → ${Object.keys(t.값칸 ?? {}).join(" · ")} · ${t.count} ${L("M01_Rows")}`,
        }),
      ],
    });
    card.classList.toggle("is-changed", t.열쇠 in (peek(file)?.tables ?? {}));
    card.addEventListener("click", () => open(t.열쇠));
    return card;
  });
  host.replaceChildren(
    buildPager(tables.length, LIST_SIZE, page, (p) => void showList(host, file, q, p, open)),
    el("div", { className: "m01-master__tables", children: cards }),
  );
}

/** 표 하나. 돌려받은 함수 = 해제. */
function openTable(host: HTMLElement, file: string, key: string, back: () => void): () => void {
  let off = (): void => {};
  void (async () => {
    let version: string;
    let table: Row & { 줄: Row[] };
    try {
      ({ version, table } = await fetchTable(file, key));
    } catch (error) {
      showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error");
      return;
    }
    const { 줄: orig, ...base } = table;
    const conds = (table.조건 ?? {}) as Record<string, string>;
    const values = (table.값칸 ?? {}) as Record<string, string>;
    const cols = [...Object.keys(conds), ...Object.keys(values)];
    for (const row of orig) for (const k of Object.keys(row)) if (!cols.includes(k)) cols.push(k);
    const items = (): TableItem[] => tableItems(file, key) ?? orig.map((r, o) => ({ o, r }));
    const commit = (next: TableItem[]): void => setTable(file, version, key, base, next, orig);

    const parse = (col: string, text: string, prev: unknown): unknown => {
      if (conds[col] === "범위") return toRange(text);
      if (conds[col] === "고르기") return text;
      return col in values || conds[col] === "수" ? toNumberish(text) : coerce(text, prev);
    };
    const headText = (c: string): string =>
      c in conds ? `${c} (${conds[c]})` : c in values ? `${c} (${values[c]})` : c;

    const paint = (): void => {
      const now = items();
      const body = el("tbody");
      now.forEach((item, i) => {
        const tr = el("tr");
        tr.classList.toggle("is-new", item.o === null);
        const del = el("button", {
          className: "m01-master__row-btn",
          text: L("M01_RowRemove"),
          attrs: { type: "button" },
        });
        del.addEventListener("click", () => commit(now.filter((_, j) => j !== i)));
        tr.append(el("td", { children: [del] }));
        for (const c of cols) {
          const was = item.o === null ? undefined : orig[item.o][c];
          tr.append(
            buildCell(show(item.r[c]), {
              changed: item.o === null || !same(item.r[c], was),
              onEdit: (text) => {
                const value = parse(c, text, item.r[c]);
                const r = { ...item.r };
                if (value === null || value === "")
                  delete r[c]; // 원문 「-」 = 칸을 뺌
                else r[c] = value;
                commit(now.map((it, j) => (j === i ? { ...it, r } : it)));
              },
            }),
          );
        }
        body.append(tr);
      });
      const add = createButton({ label: L("M01_RowAdd"), variant: "ghost" });
      add.addEventListener("click", () => commit([...now, { o: null, r: {} }]));
      const backButton = createButton({ label: L("M01_BackToTables"), variant: "ghost" });
      backButton.addEventListener("click", () => {
        off();
        back();
      });
      const notes = ((table.주 ?? []) as string[]).map((n) =>
        el("p", { className: "m01-master__muted", text: n }),
      );
      host.replaceChildren(
        el("div", {
          className: "m01-master__bar",
          children: [
            backButton,
            el("strong", { text: String(table.이름 ?? key) }),
            el("span", {
              className: "m01-master__muted",
              text: `${key} · ${table.기준 || "—"} · ${table.출처 || ""}`,
            }),
            add,
          ],
        }),
        el("div", {
          className: "m01-master__grid-wrap",
          children: [
            el("table", {
              className: "m01-master__grid",
              children: [
                el("thead", {
                  children: [
                    el("tr", {
                      children: [el("th"), ...cols.map((c) => el("th", { text: headText(c) }))],
                    }),
                  ],
                }),
                body,
              ],
            }),
          ],
        }),
        ...notes,
      );
    };
    off = onDraftChange(paint);
    paint();
  })();
  return () => off();
}