/* ============================================================================= * M01_MasterData_UI_Rows.ts * 요소 파일(인력·재료·기계·환율·요율) 표 — 한 줄 = 요소 · 이름 찾기 · 쪽 나눔 · 눌러 고침(노랑) * ========================================================================== */ import { createButton, el, showToast } from "@ui/ui_template_elements"; import { t as L } from "@ui/ui_template_locale"; import { openPickModal } from "./M01_MasterData_UI_Pick"; import { fetchRows, type Row, type RowsPage } from "./M01_MasterData_Api_Fetch"; import { addRow, editRow, onDraftChange, peek, removeAdd, same, setAdd, toggleDelete, } from "./M01_MasterData_Draft"; import { buildCell, buildPager, coerce, deep, flatten, isScalar, SEP, show, withCell, withDeep, } from "./M01_MasterData_UI_Cells"; const SIZE = 50; const MARKET = "재료_시중물가.json"; const LINKED = "재료_품셈재료.json"; const WAGE = "인력_건설노임.json"; const SUPPLY = ["값", "조달"]; const SOURCE = [...SUPPLY, "출처"]; const NARA = "나라장터:"; const FALLBACK: Row = { 열쇠: "", 이름: "", 규격: "", 단위: "", 값: null, 출처: "" }; /** 새 줄 바탕 — 본 줄과 같은 칸 · 글 칸은 "" · 수·값 칸은 null. */ function blank(sample: Row): Row { const out: Row = {}; for (const [k, v] of Object.entries(sample)) { if (v && typeof v === "object" && !Array.isArray(v)) out[k] = blank(v as Row); else out[k] = typeof v === "string" && k !== "값" ? "" : null; } return out; } /** 요소별 전용 칸으로 그리는 칸 — 일반 칸에서 뺌. */ function hidden(file: string, col: string): boolean { if (file === MARKET) return col === `값${SEP}조달`; if (file === LINKED) return col.startsWith("연결"); return file === WAGE && col === "준용"; } const HEADS: Record = { [MARKET]: ["조달 값", "조달 기준", "M01_ProcureCol"], [LINKED]: ["M01_PriceCol"], [WAGE]: ["M01_JobCol"], }; const linkText = (link: unknown): string => link && typeof link === "object" ? `${L("M01_PriceCondUsed")}: ${(link as Row)["이름"]} ${(link as Row)["규격"] ?? ""}`.trim() : String(link ?? ""); /** 돌려받은 함수 = 이 화면을 걷을 때 부를 해제. */ export function renderRows(host: HTMLElement, file: string, q: string): () => void { let page = 1; let data: RowsPage | null = null; let unlinked = false; const paint = (): void => { if (!data) return; const d = data; const draft = peek(file); const adds = draft?.adds ?? []; const cols: string[] = []; for (const row of [...adds, ...d.rows]) { for (const k of Object.keys(flatten(row))) if (!hidden(file, k) && !cols.includes(k)) cols.push(k); } const head = el("tr", { children: [ el("th"), ...cols.map((c) => el("th", { text: c })), ...(HEADS[file] ?? []).map((h) => el("th", { text: h.startsWith("M01_") ? L(h as "M01_PriceCol") : h }), ), ], }); const body = el("tbody"); adds.forEach((row, i) => { const flat = flatten(row); const tr = el("tr", { className: "is-new" }); tr.append(actionCell(L("M01_RowRemove"), () => removeAdd(file, i))); for (const c of cols) { tr.append( buildCell(show(flat[c]), { changed: true, onEdit: (text) => setAdd(file, i, withCell(row, c, coerce(text, flat[c]))), }), ); } body.append(tr); }); for (const row of d.rows) { const key = String(row["열쇠"]); const cur = draft?.edits[key] ?? row; const deleted = draft?.deletes.includes(key) ?? false; const orig = flatten(row); const now = flatten(cur); const tr = el("tr"); tr.classList.toggle("is-deleted", deleted); tr.append( actionCell(deleted ? L("M01_RowRestore") : L("M01_RowDelete"), () => toggleDelete(file, d.version, key), ), ); for (const c of cols) { const editable = !deleted && isScalar(orig[c]); tr.append( buildCell(show(now[c]), { changed: !same(now[c], orig[c]), onEdit: editable ? (text) => editRow(file, d.version, key, row, withCell(cur, c, coerce(text, orig[c]))) : undefined, }), ); } const put = deleted ? undefined : (next: Row): void => editRow(file, d.version, key, row, next); if (file === MARKET) tr.append(...marketCells(row, cur, put)); if (file === LINKED) tr.append(linkedCell(row, cur, put)); if (file === WAGE) tr.append(wageCell(row, cur, put)); body.append(tr); } const only = file === LINKED ? [ createButton({ label: L("M01_OnlyUnlinked"), variant: unlinked ? "filled" : "ghost", onClick: () => { unlinked = !unlinked; page = 1; void load(); }, }), ] : []; const add = createButton({ label: L("M01_RowAdd"), variant: "ghost" }); add.addEventListener("click", () => addRow(file, d.version, blank(d.rows[0] ?? FALLBACK))); const empty = d.rows.length || adds.length ? [] : [el("p", { className: "m01-master__empty", text: L("M01_NoRows") })]; host.replaceChildren( el("div", { className: "m01-master__bar", children: [add, ...only, buildPager(d.total, SIZE, d.page, go)], }), el("div", { className: "m01-master__grid-wrap", children: [ el("table", { className: "m01-master__grid", children: [el("thead", { children: [head] }), body], }), ], }), ...empty, ); }; const go = (next: number): void => { page = next; void load(); }; const load = async (): Promise => { try { data = await fetchRows(file, page, SIZE, q, unlinked); paint(); } catch (error) { showToast(error instanceof Error ? error.message : L("M01_LoadFailed"), "error"); } }; const off = onDraftChange(paint); void load(); return off; } function actionCell(label: string, onClick: () => void): HTMLTableCellElement { const button = el("button", { className: "m01-master__row-btn", text: label, attrs: { type: "button" }, }); button.addEventListener("click", onClick); return el("td", { children: [button] }); } type Put = (row: Row) => void; const rowBtn = (text: string): HTMLButtonElement => el("button", { className: "m01-master__row-btn", text, attrs: { type: "button" } }); /** 시중물가 — 조달 값 · 기준 · 조달 연결(「나라장터:<열쇠>」 · 「가격정보」 줄은 원천이라 그대로). */ function marketCells(row: Row, cur: Row, put?: Put): HTMLTableCellElement[] { const link = show(deep(cur, SOURCE)); const td = buildCell(link, { changed: link !== show(deep(row, SOURCE)) }); if (put && (!link || link.startsWith(NARA))) { const btn = rowBtn(L("M01_ProcureFind")); btn.addEventListener("click", () => openPickModal({ kind: "procure", title: L("M01_ProcureTitle"), current: link, seed: `${cur["이름"] ?? ""} ${cur["규격"] ?? ""}`.trim(), onPick: (ref) => put(withDeep(cur, SOURCE, ref)), }), ); td.append(btn); } return [ buildCell(show(deep(cur, [...SUPPLY, "값"])), { changed: false }), buildCell(show(deep(cur, [...SUPPLY, "기준"])), { changed: false }), td, ]; } /** 품셈재료 — 가격 연결(시중물가 열쇠 · 후보 조건 · 없음) · 고르기 모달. */ function linkedCell(row: Row, cur: Row, put?: Put): HTMLTableCellElement { const link = cur["연결"]; const td = buildCell(linkText(link), { changed: JSON.stringify(link ?? null) !== JSON.stringify(row["연결"] ?? null), }); if (put) { const cond = link && typeof link === "object" ? (link as Row) : null; const name = String(cond?.["이름"] ?? cur["이름"] ?? ""); const spec = String(cond?.["규격"] ?? cur["규격"] ?? ""); const btn = rowBtn(L("M01_PriceFind")); btn.addEventListener("click", () => openPickModal({ kind: "price", title: `${L("M01_PriceTitle")} · ${cur["이름"] ?? ""}`, current: linkText(link), seed: `${name} ${spec}`.trim(), onPick: (ref) => put(withCell(cur, "연결", ref)), cond: { 이름: name, 규격: spec, onCond: (c) => put(withCell(cur, "연결", c)) }, }), ); td.append(btn); } return td; } /** 건설노임 — 미공표(값 없음) 줄의 준용 = 공표 직종 고르기. */ function wageCell(row: Row, cur: Row, put?: Put): HTMLTableCellElement { const text = show(cur["준용"]); const td = buildCell(text, { changed: text !== show(row["준용"]) }); if (put && row["값"] === null) { const btn = rowBtn(L("M01_JobFind")); btn.addEventListener("click", () => openPickModal({ kind: "job", title: `${L("M01_JobTitle")} · ${cur["이름"] ?? ""}`, current: text, seed: "", onPick: (ref) => put(withCell(cur, "준용", ref)), }), ); td.append(btn); } return td; }