eomsangdonandClaude Sonnet 5
02b9c8be92
- 인력 열 순서 = 키 … 옛이름 · 비고 · 준용 · 상태 읽기 전용 - 구분·상세구분 목록은 서버 /subs · 고른 거름은 sessionStorage 기억 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016WRFJmmhPi4exAzHgPZHMT
301 lines
10 KiB
TypeScript
301 lines
10 KiB
TypeScript
/* =============================================================================
|
|
* 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,
|
|
fetchRows,
|
|
fetchSubs,
|
|
type FileInfo,
|
|
type SubInfo,
|
|
} from "./M01_MasterData_Api_Fetch";
|
|
import { bookTree, renderTree, type MakeRow, type TreeNode } from "./M01_MasterData_UI_Tree";
|
|
|
|
/** 요소 화면에서 열 것 — 파일 · 하위 거름(구분·세부분류) · 상세구분 · 제목 */
|
|
export interface Pick {
|
|
group: string;
|
|
file: FileInfo;
|
|
sub: string;
|
|
detail: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface SideHandle {
|
|
root: HTMLElement;
|
|
/** 일위대가 로직 컨테이너 안(로직 목록이 들어갈 자리) */
|
|
logicHost: HTMLElement;
|
|
/** 그룹의 파일 판본을 다시 받음(저장 뒤) — 돌려받는 것 = 새 목록 */
|
|
refresh: (group: string) => Promise<FileInfo[]>;
|
|
setActive: (id: string | null) => void;
|
|
}
|
|
|
|
const LABOR_FILTER = "m01.laborFilter";
|
|
const LABOR_ID = "인력|";
|
|
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 counts = new Map<string, number>();
|
|
// 하위 거름은 서버가 준 목록(파일 머리에 등록된 구분·세부분류) — 새 조사가 늘어도 화면은 그대로
|
|
const kinds = new Map<Group, SubInfo[]>();
|
|
|
|
const setActive = (id: string | null): void => {
|
|
for (const [key, button] of buttons) button.classList.toggle("is-active", key === id);
|
|
};
|
|
|
|
/** 트리 줄 — 부모는 접기/펴기 · 누를 일이 있는 줄만 밝게 */
|
|
const make: MakeRow = (node, caret, depth, onClick) => {
|
|
const button = el("button", {
|
|
className: "m01-side__item",
|
|
attrs: { type: "button" },
|
|
children: [
|
|
el("span", {
|
|
children: [
|
|
el("span", { className: "m01-tree__caret", text: caret }),
|
|
el("span", { text: node.label }),
|
|
],
|
|
}),
|
|
...(node.count === null
|
|
? []
|
|
: [
|
|
el("span", {
|
|
className: "m01-side__muted",
|
|
text: node.count.toLocaleString("ko-KR"),
|
|
}),
|
|
]),
|
|
],
|
|
});
|
|
button.style.paddingLeft = `calc(var(--spacing-8) + ${depth} * var(--spacing-16))`;
|
|
if (node.run) buttons.set(node.id, button);
|
|
button.addEventListener("click", () => {
|
|
if (node.run) setActive(node.id);
|
|
onClick();
|
|
});
|
|
return button;
|
|
};
|
|
|
|
/** 인력 — 「전체」 한 줄 + 구분 → 상세구분 두 단 거름(서버가 준 목록 · 고른 것은 기억) */
|
|
const laborFilter = (
|
|
file: FileInfo,
|
|
open: (file: FileInfo, sub: string, label: string, detail?: string) => void,
|
|
): HTMLElement => {
|
|
const list = kinds.get("인력") ?? [];
|
|
const saved = (() => {
|
|
try {
|
|
return JSON.parse(sessionStorage.getItem(LABOR_FILTER) ?? "[]") as string[];
|
|
} catch {
|
|
return [];
|
|
}
|
|
})();
|
|
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 run = (): void => {
|
|
try {
|
|
sessionStorage.setItem(LABOR_FILTER, JSON.stringify([sub.value, detail.value]));
|
|
} catch {
|
|
/* 기억 못 해도 거름은 됨 */
|
|
}
|
|
const label = [sub.value, detail.value].filter(Boolean).join(" · ") || L("M01_All");
|
|
setActive(LABOR_ID);
|
|
open(file, sub.value, label, detail.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;
|
|
run();
|
|
});
|
|
detail.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"));
|
|
});
|
|
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],
|
|
}),
|
|
],
|
|
});
|
|
};
|
|
|
|
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, detail = ""): void =>
|
|
onOpen({ group, file, sub, detail, label });
|
|
const one = files[0];
|
|
if (group === "인력" && one) {
|
|
body.replaceChildren(laborFilter(one, open));
|
|
return;
|
|
}
|
|
if (group === "기계") {
|
|
const list = kinds.get(group) ?? [];
|
|
const all: TreeNode[] = one
|
|
? [
|
|
{
|
|
id: `${group}\n`,
|
|
label: L("M01_All"),
|
|
count: one.rows,
|
|
open: true,
|
|
run: () => open(one, "", L("M01_All")),
|
|
children: list.map((k) => ({
|
|
id: `${group}\n${k.name}`,
|
|
label: k.name,
|
|
count: counts.get(`${group}\n${k.name}`) ?? null,
|
|
run: () => open(one, k.name, k.name),
|
|
children: k.details.map((d) => ({
|
|
id: `${group}\n${k.name}\n${d}`,
|
|
label: d,
|
|
count: null,
|
|
run: () => open(one, k.name, `${k.name} · ${d}`, d),
|
|
})),
|
|
})),
|
|
},
|
|
]
|
|
: [];
|
|
body.replaceChildren(...renderTree(all, make));
|
|
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));
|
|
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) };
|
|
}),
|
|
make,
|
|
),
|
|
);
|
|
};
|
|
|
|
const refresh = async (group: string): Promise<FileInfo[]> => {
|
|
const list = await fetchFiles(group);
|
|
if (list[0] && (group === "인력" || group === "기계")) {
|
|
const file = list[0].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),
|
|
),
|
|
);
|
|
}
|
|
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: "", detail: "", 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 };
|
|
}
|