Merge remote-tracking branches 'origin/sub_desktop_1', 'origin/sub_laptop_1' and 'origin/sub_laptop_3' into sub_laptop_4

M01_MasterData/M01_MasterData_UI_Side.ts

@@ -5,7 +5,7 @@
  * 펼치면 하위 목록(거름 · 파일) · 환율/요율은 누르면 바로 표 · 로직은 안에 로직 목록
  * ========================================================================== */
 
-import { el, showToast } from "@ui/ui_template_elements";
+import { createSelectField, el, showToast } from "@ui/ui_template_elements";
 import { attachCollapsible } from "@ui/ui_template_collapsible";
 import { t as L } from "@ui/ui_template_locale";
 import {
@@ -15,7 +15,7 @@ import {
   type FileInfo,
   type SubInfo,
 } from "./M01_MasterData_Api_Fetch";
-import { bookTree, renderTree, type MakeRow, type TreeNode } from "./M01_MasterData_UI_Tree";
+import { renderTree, type MakeRow, type TreeNode } from "./M01_MasterData_UI_Tree";
 
 /** 요소 화면에서 열 것 — 파일 · 하위 거름(구분·세부분류) · 상세구분 · 제목 */
 export interface Pick {
@@ -38,6 +38,8 @@ export interface SideHandle {
 const LABOR_FILTER = "m01.laborFilter";
 const LABOR_ID = "인력|";
 const MATERIAL_NAMES: Record<string, string> = { 나라장터자재: "나라장터", 오피넷유가: "유가" };
+/** 재료 컨테이너 차례 — 여기 없는 파일은 뒤에 */
+const MATERIAL_ORDER = ["자재품목", "오피넷유가", "품셈재료"];
 
 /** 파일 이름 → 목록 글자 — 「소요량_건설품셈_10장_창호…」 → 「건설품셈_10장_창호…」 */
 export const fileLabel = (file: string): string =>
@@ -114,64 +116,59 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
       }
     })();
     const pickSub = list.find((k) => k.name === saved[0]);
-    const choose = (name: string, values: string[], value: string): HTMLSelectElement => {
-      const select = el("select", {
-        className: "m01-side__select",
-        attrs: { "aria-label": name },
-        children: [L("M01_All"), ...values].map((v, i) =>
-          el("option", { text: v, attrs: { value: i ? v : "" } }),
-        ),
-      });
-      select.value = value;
-      return select;
-    };
-    const sub = choose(
-      L("M01_LaborSub"),
-      list.map((k) => k.name),
-      pickSub?.name ?? "",
-    );
-    const detail = choose(L("M01_LaborDetail"), pickSub?.details ?? [], saved[1] ?? "");
-    detail.disabled = !pickSub?.details.length;
+    const opts = (values: string[]): { value: string; text: string }[] =>
+      [L("M01_All"), ...values].map((v, i) => ({ value: i ? v : "", text: v }));
+    const sub = createSelectField({
+      options: opts(list.map((k) => k.name)),
+      value: pickSub?.name ?? "",
+      compact: true,
+      label: L("M01_LaborSub"),
+    });
+    const detail = createSelectField({
+      options: opts(pickSub?.details ?? []),
+      value: saved[1] ?? "",
+      compact: true,
+      label: L("M01_LaborDetail"),
+      disabled: !pickSub?.details.length,
+    });
     const run = (): void => {
       try {
-        sessionStorage.setItem(LABOR_FILTER, JSON.stringify([sub.value, detail.value]));
+        sessionStorage.setItem(
+          LABOR_FILTER,
+          JSON.stringify([sub.select.value, detail.select.value]),
+        );
       } catch {
         /* 기억 못 해도 거름은 됨 */
       }
-      const label = [sub.value, detail.value].filter(Boolean).join(" · ") || L("M01_All");
+      const label =
+        [sub.select.value, detail.select.value].filter(Boolean).join(" · ") || L("M01_All");
       setActive(LABOR_ID);
-      open(file, sub.value, label, detail.value);
+      open(file, sub.select.value, label, detail.select.value);
     };
-    sub.addEventListener("change", () => {
-      const details = list.find((k) => k.name === sub.value)?.details ?? [];
-      detail.replaceChildren(
-        ...[L("M01_All"), ...details].map((v, i) =>
-          el("option", { text: v, attrs: { value: i ? v : "" } }),
-        ),
-      );
-      detail.disabled = details.length === 0;
+    sub.select.addEventListener("change", () => {
+      const details = list.find((k) => k.name === sub.select.value)?.details ?? [];
+      detail.setOptions(opts(details), "");
+      detail.select.disabled = details.length === 0;
       run();
     });
-    detail.addEventListener("change", run);
+    detail.select.addEventListener("change", run);
     const all = make({ id: LABOR_ID, label: L("M01_All"), count: file.rows, run }, "", 0, () => {
-      sub.value = detail.value = "";
-      sub.dispatchEvent(new Event("change"));
+      sub.select.value = "";
+      sub.select.dispatchEvent(new Event("change"));
     });
     return el("div", {
       children: [
         all,
-        el("label", {
-          className: "m01-side__filter",
-          children: [el("span", { text: L("M01_LaborSub") }), sub],
-        }),
-        el("label", {
-          className: "m01-side__filter",
-          children: [el("span", { text: L("M01_LaborDetail") }), detail],
-        }),
+        el("div", { className: "m01-side__filter", children: [sub.root, detail.root] }),
       ],
     });
   };
 
+  const order = (file: string): number => {
+    const i = MATERIAL_ORDER.indexOf(fileLabel(file));
+    return i < 0 ? MATERIAL_ORDER.length : i;
+  };
+
   const drawGroup = (group: Group): void => {
     const files = lists.get(group) ?? [];
     const body = bodies.get(group);
@@ -212,30 +209,52 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
       return;
     }
     if (group === "소요량" || group === "계수") {
-      const tree = bookTree(
-        files,
-        (f, division): TreeNode => {
-          const label = fileLabel(f.file);
-          return {
-            id: `${group}\n${f.file}`,
-            label: division ? f.chapter.slice(division.length + 1) : f.chapter,
-            count: f.rows,
-            run: () => open(f, "", label),
-          };
-        },
-        (parts) => `${group}\n#${parts.join("\n")}`,
-        (list) => list.reduce((n, f) => n + f.rows, 0),
-      );
-      body.replaceChildren(...renderTree(tree, make));
+      // 전체 → 구분(원문+부문) → 상세구분(장) — 목록은 서버가 준 것 · 장 차례대로
+      const list = kinds.get(group) ?? [];
+      const chapter = (k: SubInfo, detail: string): FileInfo | undefined =>
+        files.find((f) => f.file === `${group}_${k.book}_${detail.replaceAll(" ", "_")}.json`);
+      const rows = (k: SubInfo): number =>
+        k.details.reduce((n, d) => n + (chapter(k, d)?.rows ?? 0), 0);
+      const all: TreeNode[] = one
+        ? [
+            {
+              id: `${group}\n`,
+              label: L("M01_All"),
+              count: files.reduce((n, f) => n + f.rows, 0),
+              open: true,
+              run: () => open(one, "", L("M01_All")),
+              children: list.map((k) => ({
+                id: `${group}\n${k.name}`,
+                label: k.name,
+                count: rows(k),
+                run: () => open(chapter(k, k.details[0] ?? "") ?? one, k.name, k.name),
+                children: k.details.map((d) => ({
+                  id: `${group}\n${k.name}\n${d}`,
+                  label: d,
+                  count: chapter(k, d)?.rows ?? null,
+                  run: () => open(chapter(k, d) ?? one, k.name, `${k.name} · ${d}`, d),
+                })),
+              })),
+            },
+          ]
+        : [];
+      body.replaceChildren(...renderTree(all, make));
       return;
     }
     body.replaceChildren(
       ...renderTree(
-        files.map((f) => {
-          const name = fileLabel(f.file);
-          const label = group === "재료" ? (MATERIAL_NAMES[name] ?? name) : name;
-          return { id: `${group}\n${f.file}`, label, count: f.rows, run: () => open(f, "", label) };
-        }),
+        [...files]
+          .sort((a, b) => order(a.file) - order(b.file))
+          .map((f) => {
+            const name = fileLabel(f.file);
+            const label = group === "재료" ? (MATERIAL_NAMES[name] ?? name) : name;
+            return {
+              id: `${group}\n${f.file}`,
+              label,
+              count: f.rows,
+              run: () => open(f, "", label),
+            };
+          }),
         make,
       ),
     );
@@ -245,13 +264,15 @@ export function buildSide(onOpen: (pick: Pick) => void, onLogic: () => void): Si
     const list = await fetchFiles(group);
     if (list[0] && (group === "인력" || group === "기계")) {
       const file = list[0].file;
-      const subs = await fetchSubs(file);
+      const subs = await fetchSubs({ file });
       kinds.set(group, subs);
       await Promise.all(
         (group === "기계" ? subs : []).map(async (k) =>
           counts.set(`${group}\n${k.name}`, (await fetchRows(file, 1, 1, "", false, k.name)).total),
         ),
       );
+    } else if (group === "소요량" || group === "계수") {
+      kinds.set(group, await fetchSubs({ group }));
     }
     lists.set(group as Group, list);
     drawGroup(group as Group);