287 lines
9.2 KiB
TypeScript
287 lines
9.2 KiB
TypeScript
/* =============================================================================
|
|
* 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<string, string[]> = {
|
|
[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<void> => {
|
|
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;
|
|
}
|