Aislo/M01_MasterData/M01_MasterData_UI_Logic_List.ts

/* =============================================================================
 * M01_MasterData_UI_Logic_List.ts
 * 로직 목록 — 가운데 표 · 왼쪽 「전체」 + 구분 → 상세구분 거름이 고른 범위 + 이름 찾기 + 막힘만
 * 파일을 가로질러 한 목록 · 쪽 나눔 · 막힘(⛔)·고침(●) 표시 · 거르기는 화면에서(목록은 한 번 받음)
 * ========================================================================== */

import { createInputField, el } from "@ui/ui_template_elements";
import { buildPager } from "./M01_MasterData_UI_Cells";
import type { LogicSummary } from "./M01_MasterData_UI_Logic_Api";
import { tx } from "./M01_MasterData_UI_Logic_Text";

export type ListMark = "edited" | "new" | "deleted";

export interface ListItem {
  id: string;
  sub: string;
  detail: string;
  key: string;
  number: string;
  name: string;
  unit: string;
  source: string;
  blocked: boolean;
  reasons: string[];
}

export interface ListHandle {
  root: HTMLElement;
  setItems: (items: LogicSummary[]) => void;
  /** 저장 안 한 새 로직도 목록 맨 위에 */
  setMarks: (marks: Map<string, ListMark>, extra: ListItem[]) => void;
  /** 왼쪽 거름이 고른 범위 — 비면 전체 */
  setPick: (sub: string, detail: string) => void;
  total: () => number;
}

export const logicId = (sub: string, key: string): string => `${sub}\n${key}`;

const SIZE = 30;
const COLS = ["키", "원문번호", "구분", "상세구분", "이름", "결과단위", "출처", ""] as const;

export function buildList(onOpen: (item: ListItem) => void): ListHandle {
  let items: ListItem[] = [];
  let extra: ListItem[] = [];
  let marks = new Map<string, ListMark>();
  let page = 1;
  const pick = { sub: "", detail: "" };
  const searchField = createInputField({ type: "search", placeholder: tx("List_Search") });
  const search = searchField.input;
  const blockedOnly = el("input", { attrs: { type: "checkbox" } });
  const grid = el("div", { className: "m01-master__grid-wrap" });

  const draw = (): void => {
    const q = search.value.trim().toLowerCase();
    const shown = [...extra, ...items].filter(
      (x) =>
        (!pick.sub || x.sub === pick.sub) &&
        (!pick.detail || x.detail === pick.detail) &&
        (!blockedOnly.checked || x.blocked) &&
        (!q || [x.key, x.number, x.name].some((v) => v.toLowerCase().includes(q))),
    );
    page = Math.min(page, Math.max(1, Math.ceil(shown.length / SIZE)));
    const rows = shown.slice((page - 1) * SIZE, page * SIZE).map(line);
    pager.replaceWith((pager = buildPager(shown.length, SIZE, page, go)));
    grid.replaceChildren(
      el("table", {
        className: "m01-master__grid",
        children: [
          el("thead", {
            children: [el("tr", { children: COLS.map((c) => el("th", { text: c })) })],
          }),
          el("tbody", { children: rows }),
        ],
      }),
    );
  };
  const go = (p: number): void => {
    page = p;
    draw();
  };
  const line = (item: ListItem): HTMLElement => {
    const mark = marks.get(item.id);
    const state = [
      item.blocked ? `⛔ ${tx("List_Blocked")}` : "",
      mark
        ? `● ${tx(({ edited: "List_Edited", new: "List_New", deleted: "List_Deleted" } as const)[mark])}`
        : "",
    ]
      .filter(Boolean)
      .join(" ");
    const tr = el("tr", {
      className: `m01-master__table-row${mark ? " is-changed" : ""}`,
      children: [
        item.key,
        item.number,
        item.sub,
        item.detail,
        item.name,
        item.unit,
        item.source,
        state,
      ].map((v) => el("td", { text: v, attrs: { title: v } })),
    });
    if (item.blocked) tr.title = item.reasons.join("\n");
    tr.addEventListener("click", () => onOpen(item));
    return tr;
  };

  search.addEventListener("input", () => go(1));
  blockedOnly.addEventListener("change", () => go(1));
  let pager = buildPager(0, SIZE, 1, go);

  const root = el("div", {
    className: "m01-logic__listview",
    children: [
      el("div", {
        className: "m01-logic__filters",
        children: [
          searchField.root,
          el("label", {
            className: "m01-logic__check",
            children: [blockedOnly, el("span", { text: tx("List_BlockedOnly") })],
          }),
          pager,
        ],
      }),
      grid,
    ],
  });
  return {
    root,
    setItems: (logics) => {
      items = logics.map((x) => ({
        id: logicId(x.구분, x.키),
        sub: x.구분,
        detail: x.상세구분,
        key: x.키,
        number: x.원문번호,
        name: x.이름,
        unit: x.결과단위,
        source: x.출처,
        blocked: x.blocked,
        reasons: x.reasons,
      }));
      draw();
    },
    setMarks: (next, more) => {
      marks = next;
      extra = more;
      draw();
    },
    setPick: (sub, detail) => {
      Object.assign(pick, { sub, detail });
      go(1);
    },
    total: () => items.length,
  };
}