feat(M02): 일위대가 라이브러리 화면 — 좌측 「일위대가 조합」 컨테이너 · 뿌리 셋 나무 · 조합 편집 · M01 컨테이너 뺌(PLAN 27-2b · 27-2c 화면)

- 좌측 「일위대가 조합」(구조물 조합 위) → 메인 칸 왼쪽 뿌리 셋 + 조합 나무(폴더 [구분, 상세구분] 깊이 2 · TreePanel 공용) · 오른쪽 목록 · 상세(옛 M01 조합 화면 옮김 · Labor_Edit) - 나무 오른쪽 클릭: 폴더 더하기(2 단까지) · 조합 더하기(그 폴더 채운 빈 조합) · 이름 · 옮기기 · 지우기 · 조합 이름 바꾸기 서버 길 더함 - 해시 open=일위대가 로 진입 · 다른 뿌리를 누르면 그 뿌리 일위대가로 - 읽기만 뿌리는 저장 · 지우기 · 로직 더하기 없음 - TreePanel 에 maxDepth · item(부르는 말 · 새 항목 화면) 선택지 더함(구조물 라이브러리는 그대로) - 조합 고르기(면적산출 옆 목록 · 일위대가 고르기)가 이 층이 쓸 수 있는 세 층 조합 · 알약은 /api/m02/combos/key/{키}/inputs - M01 좌측 · 페이지에서 일위대가 조합 컨테이너 뺌 - 시험 test_m02_labor_tree(새) · test_m02_combo_layers 더함 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BU9gbNE3aWFUvE61pS2WGt
2026-09-30 13:35:38 +09:00
parent ca946ebbf1
commit c8686ee3ad
17 changed files with 572 additions and 268 deletions
@@ -0,0 +1,391 @@
+/* =============================================================================
+ * M02_MasterTemplete_Labor_Edit.ts
+ * 일위대가 라이브러리 오른쪽 — 조합 목록(찾기) / 상세(이름 · 구분 · 상세구분 · 단위 · 비고 + 담은 로직 표
+ * (차례 · 키 · 이름 · 결과 단위 · 메모 · 순서) + 미리 보기). 옛 M01 조합 화면을 옮겨 씀(PLAN 27-2b).
+ * 저장 · 지우기 = 고른 층 조합 표(마스터 UA · 회사 UC · 개인 UP · `Labor_Api`) · 읽기만 층은 단추 없음.
+ * ========================================================================== */
+
+import {
+  createButton,
+  createInputField,
+  el,
+  showConfirmDialog,
+  showToast,
+} from "@ui/ui_template_elements";
+import { ApiError, type LogicSummary } from "../M01_MasterData/M01_MasterData_UI_Logic_Api";
+import {
+  deleteCombo,
+  editCombo,
+  fetchCombo,
+  fetchLibLogics,
+  newCombo,
+  type Combo,
+  type ComboSummary,
+  type LaborScope,
+} from "./M02_MasterTemplete_Labor_Api";
+import { openLogicPicker } from "./M02_MasterTemplete_Labor_Pick";
+import { buildPreview } from "./M02_MasterTemplete_Labor_Preview";
+import { tc } from "./M02_MasterTemplete_Labor_Text";
+import "../M01_MasterData/M01_MasterData_UI_Logic_Style.css";
+import "../M01_MasterData/M01_MasterData_UI_LogicLab_Style.css";
+import "./M02_MasterTemplete_Labor.css";
+
+const blankCombo = (path: string[] = []): Combo => ({
+  키: "",
+  이름: "",
+  구분: path[0] ?? null,
+  상세구분: path[1] ?? null,
+  단위: null,
+  담은로직: [],
+  출처: "자체",
+  소유: "현장",
+  본뜬키: null,
+  비고: null,
+});
+
+/** 서버가 준 까닭 — 422 는 검사 글 목록 · 409 는 낡은 판본 · 쓰는 곳 */
+export function reason(error: unknown): string {
+  if (error instanceof ApiError && typeof error.detail === "object" && error.detail) {
+    const d = error.detail as { errors?: string[]; stale?: string[] };
+    // 서버 검사 글 머리(「파일.json · 키 」)는 떼고 보임 — 새로 만들 때 키는 아직 없는 번호라 헷갈림
+    if (d.errors)
+      return d.errors
+        .map((x) => x.replace(/^\S+\.json · (U[AM]\d{6} |U[CP]\d+-\d{6} )?/, ""))
+        .join(" / ");
+    if (d.stale) return tc("Stale");
+  }
+  return error instanceof Error ? error.message : tc("Load_Failed");
+}
+
+export interface LaborEditOptions {
+  scope: LaborScope;
+  canEdit: boolean;
+  /** 저장 · 지움 뒤 — 나무 · 목록을 다시 받고 그 조합(`key`)을 고름 */
+  onSaved: (key: string | null) => Promise<void>;
+  /** 저장 안 한 고침이 있나 — 페이지가 떠날 때 물음 */
+  onDirty: (dirty: boolean) => void;
+}
+
+export interface LaborEditor {
+  root: HTMLElement;
+  /** 나무가 받은 목록 — 상세가 안 열려 있으면 목록을 다시 그림 */
+  setList: (items: ComboSummary[]) => void;
+  open: (key: string) => Promise<void>;
+  /** 나무 「조합 더하기」 — 그 폴더(구분 · 상세구분)를 채운 빈 조합 */
+  startNew: (path: string[]) => void;
+  showList: () => void;
+  isDirty: () => boolean;
+  /** 열린 조합 키 — 목록이면 null · 새 조합이면 빈 글 */
+  current: () => string | null;
+}
+
+export function createLaborEditor(opt: LaborEditOptions): LaborEditor {
+  const edit = opt.canEdit;
+  let items: ComboSummary[] = [];
+  let logics = new Map<string, LogicSummary>();
+  /** 화면을 바꾼 횟수 — 늦게 온 답은 이 값이 달라졌으면 버림 */
+  let nav = 0;
+  /** `saved` = 연 때의 모양 — 「저장 안 한 고침」 판정 */
+  let current: { combo: Combo; version: string; saved: string } | null = null;
+  let q = "";
+  const view = el("div", { className: "m01-logic__editor m01-combo m02-labor__edit" });
+  const find = createInputField({ type: "search", placeholder: tc("Search") });
+  find.input.addEventListener("input", () => {
+    q = find.input.value.trim().toLowerCase();
+    if (!current) drawList();
+  });
+
+  const logicsReady = fetchLibLogics()
+    .then((all) => {
+      logics = new Map(all.map((x) => [x.키, x]));
+    })
+    .catch((error) =>
+      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error"),
+    );
+
+  const dirty = (): boolean => !!current && JSON.stringify(current.combo) !== current.saved;
+  const markDirty = (): void => opt.onDirty(dirty());
+
+  /* --- 목록 --- */
+  const drawList = (): void => {
+    nav++;
+    current = null;
+    opt.onDirty(false);
+    const shown = items.filter((x) => !q || `${x.키} ${x.이름}`.toLowerCase().includes(q));
+    const heads = [
+      tc("Head_Key"),
+      tc("Head_Name"),
+      tc("Sub"),
+      tc("Detail"),
+      tc("Head_Unit"),
+      tc("Head_Count"),
+      tc("Head_Origin"),
+    ];
+    const rows = shown.map((x) => {
+      const tr = el("tr", {
+        className: "m01-master__table-row",
+        attrs: { "data-combo-key": x.키 },
+        children: [
+          x.키,
+          x.이름,
+          x.구분 ?? "",
+          x.상세구분 ?? "",
+          x.단위 ?? "",
+          String(x.count),
+          x.본뜬키 ?? tc("Origin_Self"),
+        ].map((v) => el("td", { text: v, attrs: { title: v } })),
+      });
+      tr.addEventListener("click", () => void open(x.키));
+      return tr;
+    });
+    view.replaceChildren(
+      el("div", {
+        className: "m01-logic__section-head",
+        children: [
+          find.root,
+          ...(edit
+            ? [createButton({ label: tc("New"), variant: "filled", onClick: () => startNew([]) })]
+            : [el("span", { className: "m01-logic__muted", text: tc("ReadOnly") })]),
+        ],
+      }),
+      shown.length
+        ? el("div", {
+            className: "m01-master__grid-wrap",
+            children: [
+              el("table", {
+                className: "m01-master__grid",
+                children: [
+                  el("thead", {
+                    children: [el("tr", { children: heads.map((t) => el("th", { text: t })) })],
+                  }),
+                  el("tbody", { children: rows }),
+                ],
+              }),
+            ],
+          })
+        : el("p", { className: "m01-logic__muted", text: tc(items.length ? "NoMatch" : "Empty") }),
+    );
+  };
+
+  const open = async (key: string): Promise<void> => {
+    try {
+      const my = ++nav;
+      const one = await fetchCombo(key);
+      await logicsReady;
+      if (my !== nav) return;
+      draw(one.combo, one.version);
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : tc("Load_Failed"), "error");
+    }
+  };
+
+  const startNew = (path: string[]): void => draw(blankCombo(path), "");
+
+  /* --- 상세 --- */
+  const draw = (combo: Combo, version: string, saved = JSON.stringify(combo)): void => {
+    nav++;
+    current = { combo, version, saved };
+    opt.onDirty(dirty());
+    const field = (label: string, name: "이름" | "구분" | "상세구분" | "단위" | "비고") => {
+      const f = createInputField({ type: "text", label });
+      f.input.value = combo[name] ?? "";
+      f.input.readOnly = !edit;
+      f.input.setAttribute("data-combo-field", name);
+      if (name === "이름") f.input.maxLength = 60; // 서버 한도(`MAX_이름`)와 같음
+      f.input.addEventListener("input", () => {
+        const v = f.input.value;
+        if (name === "이름") combo.이름 = v;
+        else combo[name] = v || null;
+        markDirty();
+      });
+      return f.root;
+    };
+    const preview = buildPreview(() => combo);
+    const table = el("div", { className: "m01-master__grid-wrap" });
+    const drawTable = (): void => {
+      const move = (i: number, d: number): void => {
+        const j = i + d;
+        if (j < 0 || j >= combo.담은로직.length) return;
+        [combo.담은로직[i], combo.담은로직[j]] = [combo.담은로직[j], combo.담은로직[i]];
+        drawTable();
+        markDirty();
+      };
+      const trs = combo.담은로직.map((row, i) => {
+        const info = logics.get(row.로직);
+        const memo = createInputField({ type: "text" });
+        memo.input.value = row.메모 ?? "";
+        memo.input.readOnly = !edit;
+        memo.input.addEventListener("input", () => {
+          row.메모 = memo.input.value || null;
+          markDirty();
+        });
+        const small = (label: string, run: () => void): HTMLElement =>
+          createButton({ label, variant: "ghost", size: "sm", onClick: run });
+        const btns = el("div", {
+          className: "m01-logic__chips",
+          children: edit
+            ? [
+                small(tc("Up"), () => move(i, -1)),
+                small(tc("Down"), () => move(i, 1)),
+                small(tc("Remove"), () => {
+                  combo.담은로직.splice(i, 1);
+                  drawTable();
+                  markDirty();
+                }),
+              ]
+            : [],
+        });
+        return el("tr", {
+          attrs: { "data-combo-logic": row.로직 },
+          children: [
+            el("td", { text: String(i + 1) }),
+            el("td", { text: row.로직 }),
+            el("td", { text: info?.이름 ?? row.로직 }),
+            el("td", { text: info?.결과단위 ?? "" }),
+            el("td", { children: [memo.root] }),
+            el("td", { children: [btns] }),
+          ],
+        });
+      });
+      const heads = [
+        tc("Col_Order"),
+        tc("Col_Key"),
+        tc("Col_Name"),
+        tc("Col_Unit"),
+        tc("Col_Memo"),
+        tc("Col_Move"),
+      ];
+      table.replaceChildren(
+        el("table", {
+          className: "m01-master__grid",
+          children: [
+            el("thead", {
+              children: [el("tr", { children: heads.map((t) => el("th", { text: t })) })],
+            }),
+            el("tbody", { children: trs }),
+          ],
+        }),
+        ...(trs.length ? [] : [el("p", { className: "m01-logic__muted", text: tc("NoLogic") })]),
+      );
+      void preview.redraw();
+    };
+
+    const add = createButton({
+      label: tc("AddLogic"),
+      variant: "filled",
+      onClick: () =>
+        openLogicPicker((x) => {
+          if (!logics.has(x.키)) logics.set(x.키, x);
+          combo.담은로직.push({ 로직: x.키, 메모: null });
+          drawTable();
+          markDirty();
+        }),
+    });
+    const save = createButton({
+      label: tc("Save"),
+      variant: "filled",
+      onClick: async () => {
+        if (!combo.이름.trim()) return showToast(tc("NeedName"), "error");
+        save.disabled = true; // 연달아 눌러도 한 번만
+        try {
+          let key = combo.키;
+          if (key) await editCombo(key, version, combo, opt.scope);
+          else key = (await newCombo(combo, opt.scope)).key;
+          showToast(tc("Saved"), "success");
+          current = null; // 저장함 — 다시 여는 동안 「고침 있음」 으로 안 물음
+          opt.onDirty(false);
+          await opt.onSaved(key);
+          await open(key);
+        } catch (error) {
+          showToast(reason(error), "error");
+        } finally {
+          save.disabled = false;
+        }
+      },
+    });
+    const remove = createButton({
+      label: tc("Delete"),
+      variant: "ghost",
+      onClick: async () => {
+        if (
+          !combo.키 ||
+          !(await showConfirmDialog(`${combo.키} ${combo.이름} — ${tc("DeleteAsk")}`))
+        )
+          return;
+        try {
+          await deleteCombo(combo.키, version, opt.scope);
+          showToast(tc("Deleted"), "success");
+          current = null;
+          await opt.onSaved(null);
+          drawList();
+        } catch (error) {
+          showToast(reason(error), "error");
+        }
+      },
+    });
+    const back = createButton({
+      label: "←",
+      variant: "ghost",
+      onClick: async () => {
+        if (dirty() && !(await showConfirmDialog(tc("BackAsk")))) return;
+        drawList();
+      },
+    });
+    const origin = createInputField({ type: "text", label: tc("Head_Origin") });
+    origin.input.value = combo.본뜬키 ?? tc("Origin_Self");
+    origin.input.readOnly = true;
+    origin.input.setAttribute("data-combo-origin", combo.본뜬키 ?? "");
+    view.replaceChildren(
+      el("div", {
+        className: "m01-logic__section-head",
+        children: [
+          back,
+          el("h3", { text: combo.키 || tc("New") }),
+          ...(edit ? [remove, save] : []),
+        ],
+      }),
+      el("section", {
+        className: "m01lab__box m01-logic__section",
+        children: [
+          el("div", {
+            className: "m01lab__info",
+            children: [
+              field(tc("Head_Name"), "이름"),
+              field(tc("Sub"), "구분"),
+              field(tc("Detail"), "상세구분"),
+              field(tc("Head_Unit"), "단위"),
+              field(tc("Head_Note"), "비고"),
+              origin.root,
+            ],
+          }),
+        ],
+      }),
+      el("section", {
+        className: "m01lab__box m01-logic__section",
+        children: [
+          el("div", {
+            className: "m01-logic__section-head",
+            children: [el("h3", { text: tc("Logics_Title") }), ...(edit ? [add] : [])],
+          }),
+          table,
+        ],
+      }),
+      preview.root,
+    );
+    drawTable();
+  };
+
+  view.replaceChildren(el("p", { className: "m01-logic__muted", text: tc("Loading") }));
+  return {
+    root: view,
+    setList: (next) => {
+      items = next;
+      if (!current) drawList();
+    },
+    open,
+    startNew,
+    showList: drawList,
+    isDirty: dirty,
+    current: () => current?.combo.키 ?? null,
+  };
+}