Aislo/M01_MasterData/M01_MasterData_UI_Side.ts

/* =============================================================================
 * M01_MasterData_UI_Side.ts
 * 왼쪽 패널 — 공용 접기 컨테이너(`ui-collapsible ui-sidebar-section`) 여덟 개
 * 인력 · 재료 · 기계 · 소요량 · 계수 · 환율 · 요율 · 일위대가 로직
 * 펼치면 하위 목록(거름 · 파일) · 환율/요율은 누르면 바로 표 · 로직은 안에 로직 목록
 * ========================================================================== */

import { el, showToast } from "@ui/ui_template_elements";
import { attachCollapsible } from "@ui/ui_template_collapsible";
import { t as L } from "@ui/ui_template_locale";
import { fetchFiles, type FileInfo } from "./M01_MasterData_Api_Fetch";

/** 요소 화면에서 열 것 — 파일 · 하위 거름(조사·세부분류) · 제목 */
export interface Pick {
  group: string;
  file: FileInfo;
  sub: string;
  label: string;
}

export interface SideHandle {
  root: HTMLElement;
  /** 일위대가 로직 컨테이너 안(로직 목록이 들어갈 자리) */
  logicHost: HTMLElement;
  /** 그룹의 파일 판본을 다시 받음(저장 뒤) — 돌려받는 것 = 새 목록 */
  refresh: (group: string) => Promise<FileInfo[]>;
  setActive: (id: string | null) => void;
}

const LABOR_SURVEYS = [
  "건설업",
  "제조업",
  "엔지니어링",
  "측량",
  "건설사업관리",
  "SW",
  "산림",
  "준용대상",
];
const MACHINE_KINDS = ["건설품셈", "산림품셈"];
const MATERIAL_NAMES: Record<string, string> = { 나라장터자재: "나라장터", 오피넷유가: "유가" };

/** 파일 이름 → 목록 글자 — 「소요량_건설품셈_10장_창호…」 → 「건설품셈_10장_창호…」 */
export const fileLabel = (file: string): string =>
  file.replace(/^[^_]+_/, "").replace(/\.json$/, "");

const GROUP_TITLE = {
  인력: "M01_GroupLabor",
  재료: "M01_GroupMaterial",
  기계: "M01_GroupMachine",
  소요량: "M01_GroupQuantity",
  계수: "M01_GroupFactor",
  환율: "M01_GroupExchange",
  요율: "M01_GroupRate",
} as const;

type Group = keyof typeof GROUP_TITLE;
const GROUPS = Object.keys(GROUP_TITLE) as Group[];
const LEAF: Group[] = ["환율", "요율"];

export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): SideHandle {
  const lists = new Map<Group, FileInfo[]>();
  const bodies = new Map<Group, HTMLElement>();
  const buttons = new Map<string, HTMLElement>();

  const setActive = (id: string | null): void => {
    for (const [key, button] of buttons) button.classList.toggle("is-active", key === id);
  };

  const item = (id: string, text: string, count: number | null, run: () => void): HTMLElement => {
    const button = el("button", {
      className: "m01-side__item",
      attrs: { type: "button" },
      children: [
        el("span", { text }),
        ...(count === null
          ? []
          : [el("span", { className: "m01-side__muted", text: count.toLocaleString("ko-KR") })]),
      ],
    });
    buttons.set(id, button);
    button.addEventListener("click", () => {
      setActive(id);
      run();
    });
    return button;
  };

  const drawGroup = (group: Group): void => {
    const files = lists.get(group) ?? [];
    const body = bodies.get(group);
    if (!body) return;
    const open = (file: FileInfo, sub: string, label: string): void =>
      onOpen({ group, file, sub, label });
    const one = files[0];
    if (group === "인력" || group === "기계") {
      const kinds = group === "인력" ? LABOR_SURVEYS : MACHINE_KINDS;
      body.replaceChildren(
        ...(one
          ? [
              item(`${group}\n`, L("M01_All"), one.rows, () => open(one, "", L("M01_All"))),
              ...kinds.map((k) => item(`${group}\n${k}`, k, null, () => open(one, k, k))),
            ]
          : []),
      );
      return;
    }
    body.replaceChildren(
      ...files.map((f) => {
        const name = fileLabel(f.file);
        const label = group === "재료" ? (MATERIAL_NAMES[name] ?? name) : name;
        return item(`${group}\n${f.file}`, label, f.rows, () => open(f, "", label));
      }),
    );
  };

  const refresh = async (group: string): Promise<FileInfo[]> => {
    const list = await fetchFiles(group);
    lists.set(group as Group, list);
    drawGroup(group as Group);
    return list;
  };

  const section = (title: string, body: HTMLElement | null): HTMLElement =>
    el("section", {
      className: "m01-side__group ui-collapsible ui-sidebar-section is-collapsed",
      children: [
        el("h3", { className: "ui-collapsible__title", text: title }),
        ...(body ? [body] : []),
      ],
    });

  const groups = GROUPS.map((group) => {
    const body = LEAF.includes(group) ? null : el("div", { className: "m01-side__items" });
    if (body) bodies.set(group, body);
    const root = section(L(GROUP_TITLE[group]), body);
    if (!body) {
      root.classList.add("m01-side__leaf");
      buttons.set(`${group}\n`, root);
      root.querySelector(".ui-collapsible__title")?.addEventListener("click", () => {
        const one = lists.get(group)?.[0];
        if (!one) return;
        setActive(`${group}\n`);
        onOpen({ group, file: one, sub: "", label: L(GROUP_TITLE[group]) });
      });
    }
    return root;
  });

  const logicHost = el("div", { className: "m01-side__items" });
  const logic = section(L("M01_GroupLogic"), logicHost);
  logic.querySelector(".ui-collapsible__title")?.addEventListener("click", () => {
    setActive(null);
    onLogic();
  });

  const root = el("div", { className: "m01-side", children: [...groups, logic] });
  attachCollapsible(root);
  void Promise.all(GROUPS.map(refresh)).catch((error) =>
    showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error"),
  );
  return { root, logicHost, refresh, setActive };
}