eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/sub_laptop_2' into main_laptop_1

Browse Source
This commit is contained in:
eomsangdon
2026-11-01 15:33:58 +09:00
parent 28704549d4 0c956a6c61
commit bebd0af063
10 changed files with 452 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
M01_MasterData/M01_MasterData_UI_LogicLab.ts
+4 -1
View File
@@ -52,6 +52,7 @@ import {
} from "./M01_MasterData_UI_LogicLab_Flow";
import { askBasicInfo } from "./M01_MasterData_UI_LogicLab_Basic";
import { buildLogicSide } from "./M01_MasterData_UI_LogicLab_Side";
import { createViewPicker } from "./M01_MasterData_UI_LogicLab_View";
import { buildHeadBar } from "./M01_MasterData_UI_Head";
import { fetchSessionUser } from "../A06_Login/A06_Login_Api_Fetch";
import type { CfLogic } from "../M02_MasterTemplete/DataFlow/M02_DF_Model";
@@ -130,6 +131,7 @@ export async function mountM01LogicLab(
const editor = el("div", { className: "m01-logic__editor" });
// 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘(흐름도 · 원문 · 하나만 열림 · 폭 공유)
const panes = buildLogicSide(editor);
const views = createViewPicker(editor); // 보기 고르기 — 머리줄 [신규 로직] 왼쪽
const errors = el("div", {
className: "ui-banner ui-banner--danger m01-logic__reasons",
attrs: { hidden: "" },
@@ -236,7 +238,7 @@ export async function mountM01LogicLab(
list.root.hidden = !listing || !loaded;
waiting.hidden = loaded;
panes.root.hidden = !opened;
back.hidden = listing;
back.hidden = views.root.hidden = listing;
if (!opened) return;
if (!opened.row) {
editor.replaceChildren(createEmpty({ text: `● ${tx("List_Deleted")}`, small: true }));
@@ -582,6 +584,7 @@ export async function mountM01LogicLab(
title: tx("Title"),
status: [pending],
buttons: [
views.root,
createButton({ label: tf("New"), variant: "filled", onClick: () => void onNew() }),
copyButton,
createButton({ label: tx("Bar_Delete"), variant: "danger", onClick: () => void onDelete() }),
M01_MasterData/M01_MasterData_UI_LogicLab_Detail.ts
+66 -36
View File
@@ -22,6 +22,7 @@ import { buildEditor, formatNumber, qtyKind } from "./M01_MasterData_UI_Logic_Ed
import { formatMoney, formatPrice } from "./M01_MasterData_UI_Logic_Money";
import { openPicker } from "./M01_MasterData_UI_Logic_Pick";
import { safeReason, tx } from "./M01_MasterData_UI_Logic_Text";
import { pickMaterial } from "./M01_MasterData_UI_Logic_CalcPick";
import { buildFormula } from "./M01_MasterData_UI_LogicLab_Formula";
import {
condText,
@@ -37,6 +38,8 @@ import { tl, type LabTextKey } from "./M01_MasterData_UI_LogicLab_Text";
import "./M01_MasterData_UI_LogicLab_Style.css";
import "./M01_MasterData_UI_LogicLab_Pill.css";
import { createBadge } from "@ui/ui_template_badge";
import { createEmpty } from "@ui/ui_template_empty";
import { block, nowInputs } from "./M01_MasterData_UI_LogicLab_View";
/** 서버 조각(`/text` 줄의 `조각`) → 수량 칸 조각 — 요소·표·로직은 알약(글 = 조각 글) · 나머지는 글자 */
function toFragments(pieces: TextPiece[], ctx: DetailContext): Fragment[] {
@@ -142,7 +145,7 @@ const section = (title: string, body: HTMLElement[], hint = ""): HTMLElement =>
],
});
function infoBox(ctx: DetailContext): HTMLElement {
function infoBox(ctx: DetailContext): HTMLElement[] {
const row = ctx.row;
const own = isOwnLogic(row);
const field = (label: string, key: "이름" | "원문번호" | "결과단위" | "출처"): HTMLElement => {
@@ -189,32 +192,46 @@ function infoBox(ctx: DetailContext): HTMLElement {
}),
]
: [];
return section(tl("Info_Title"), [
el("p", {
className: "ui-text ui-text--muted",
text: tl(own ? "Info_Own" : ctx.admin ? "Info_Base" : "Info_ReadOnly"),
}),
...reasons,
el("div", {
className: "m01lab__info",
children: [
cell(tx("Head_File"), ctx.file),
cell(tx("Head_Key"), row.키),
field(tx("Head_Number"), "원문번호"),
field(tx("Head_Name"), "이름"),
field(tx("Head_Unit"), "결과단위"),
field(tx("Head_Source"), "출처"),
cell(tx("Head_Owner"), row.소유 ?? ""),
el("label", {
className: "m01lab__cell m01lab__cell--wide",
children: [
el("span", { className: "ui-text ui-text--muted", text: tx("Head_Note") }),
note,
],
}),
],
}),
]);
const grid = el("div", {
className: "m01lab__info",
children: [
cell(tx("Head_File"), ctx.file),
cell(tx("Head_Key"), row.키),
field(tx("Head_Number"), "원문번호"),
field(tx("Head_Name"), "이름"),
field(tx("Head_Unit"), "결과단위"),
field(tx("Head_Source"), "출처"),
cell(tx("Head_Owner"), row.소유 ?? ""),
el("label", {
className: "m01lab__cell m01lab__cell--wide",
children: [
el("span", { className: "ui-text ui-text--muted", text: tx("Head_Note") }),
note,
],
}),
],
});
// 늘 맨 위 접힌 한 줄 — 펼침은 이 로직 안에서 기억(다시 그려도) · 막힘 까닭은 접어도 보임
const head = [row.키, row.원문번호, row.이름, row.결과단위].filter(Boolean).join(" · ");
const fold = el("details", {
className: "m01lab__box m01lab__infofold",
attrs: ctx.ownHost.dataset.info ? { open: "" } : {},
children: [
el("summary", {
children: [
el("strong", { text: tl("Info_Title") }),
el("span", { className: "ui-text ui-text--muted", text: head }),
],
}),
el("p", {
className: "ui-text ui-text--muted",
text: tl(own ? "Info_Own" : ctx.admin ? "Info_Base" : "Info_ReadOnly"),
}),
grid,
],
});
fold.addEventListener("toggle", () => (ctx.ownHost.dataset.info = fold.open ? "1" : ""));
return [fold, ...reasons];
}
/** 수량 칸 = 계산 답의 고른 수량(% 덧줄은 율) · 계산 전 「—」 */
@@ -265,7 +282,7 @@ function entries(ctx: DetailContext): Entry[] {
open: (self) =>
openMaterialModal({
unitFrag: self.unitFrag,
unitRef: self.unitRef,
unitRef: line?.품목?.키 ?? self.unitRef,
unitText: self.unitText,
qtyFrag: self.piecesFrag,
title: item.이름 ?? (cond ? condLabel(cond) : item.요소),
@@ -274,6 +291,12 @@ function entries(ctx: DetailContext): Entry[] {
prices: ctx.prices,
middles,
values: ctx.values,
// 재료 줄 = 시험 계산 자재 칸과 같은 모달 — 고르면 시험 입력으로 다시 셈(정본 안 바뀜)
kind: item.종류,
usedSlot: line?.품목?.값칸,
...(item.종류 === "재료"
? { onPick: (it) => pickMaterial(ctx.calcHost, ctx.values, i, it) }
: {}),
}),
};
return spread(entry, line);
@@ -453,10 +476,13 @@ function ownEditor(ctx: DetailContext): HTMLElement {
function hoBox(ctx: DetailContext): HTMLElement {
const money = !("결과" in ctx.row) && (ctx.row.결과단위 ?? "").startsWith("원");
if (!money) {
return section(tl("Ho_Title"), [
el("p", { className: "ui-text ui-text--muted", text: tl("Not_Money") }),
el("pre", { className: "m01lab__expr", text: ctx.row.결과?.식 ?? "" }),
]);
return block(
section(tl("Ho_Title"), [
el("p", { className: "ui-text ui-text--muted", text: tl("Not_Money") }),
el("pre", { className: "m01lab__expr", text: ctx.row.결과?.식 ?? "" }),
]),
"ho",
);
}
const all = entries(ctx);
const calculated = ctx.lines !== null;
@@ -479,7 +505,7 @@ function hoBox(ctx: DetailContext): HTMLElement {
fold.addEventListener("toggle", () => (ctx.ownHost.dataset.fold = fold.open ? "1" : ""));
const blocks = isOwnLogic(ctx.row) ? [ownEditor(ctx), fold, totalLine] : [...tables, totalLine];
const hint = calculated ? tl("Click_Hint") : `${tl("Click_Hint")} · ${tl("Calc_First")}`;
return section(tl("Ho_Title"), blocks, hint);
return block(section(tl("Ho_Title"), [nowInputs(ctx.values), ...blocks], hint), "ho");
}
/** 상세 화면 넷을 `host` 에 쌓음 */
@@ -492,10 +518,14 @@ export function buildLabDetail(host: HTMLElement, ctx: DetailContext): void {
active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement
? { node: active, from: active.selectionStart, to: active.selectionEnd }
: null;
// 보기 고르기(`_View.ts`) — 덩이마다 이름표 · 고른 덩이만 보임 · 시험 계산은 숨어도 그려 둠
host.replaceChildren(
infoBox(ctx),
section(tl("Calc_Title"), [ctx.calcHost]),
...(ctx.flowHost ? [ctx.flowHost] : [hoBox(ctx), section(tl("Formula_Title"), [formula])]),
...infoBox(ctx),
block(section(tl("Calc_Title"), [ctx.calcHost]), "calc"),
block(section(tl("View_Est"), [createEmpty({ text: tl("View_Soon"), small: true })]), "est"),
...(ctx.flowHost
? [block(nowInputs(ctx.values), "ho"), ctx.flowHost]
: [hoBox(ctx), block(section(tl("Formula_Title"), [formula]), "formula")]),
);
const own = kept?.node.dataset.own; // 기본정보 칸은 새로 만들어지므로 이름표로 다시 찾음
const back = own ? host.querySelector<HTMLInputElement>(`[data-own="${own}"]`) : kept?.node;
M01_MasterData/M01_MasterData_UI_LogicLab_FlowView.ts
+8 -3
View File
@@ -159,9 +159,11 @@ export function buildFlowView(
try {
ev = opts.result ?? evalLogic(lg, values, { logics: opts.logics });
} catch (e) {
host.replaceChildren(
section(tf("Detail"), [el("p", { className: "ui-text ui-text--muted", text: String(e) })]),
);
const failed = section(tf("Detail"), [
el("p", { className: "ui-text ui-text--muted", text: String(e) }),
]);
failed.dataset.block = "ho";
host.replaceChildren(failed);
return;
}
const totalRound = totalRoundOf(lg, totalRoundNow());
@@ -196,5 +198,8 @@ export function buildFlowView(
tf("Formula"),
bodies.length ? bodies : [el("p", { className: "ui-text ui-text--muted", text: tf("NoFunc") })],
);
// 보기 고르기 이름표(`LogicLab_View.ts`) — 고른 덩이만 보임
detail.dataset.block = "ho";
text.dataset.block = "formula";
host.replaceChildren(detail, text);
}
M01_MasterData/M01_MasterData_UI_LogicLab_Modal.ts
+202 -74
View File
@@ -3,18 +3,23 @@
* 자료 모달 둘 —
* ① 줄 모달(`openMaterialModal`) — 줄을 누르면 그 줄의 단가(재료·인력·기계 또는 다른 로직)를
* 바로 보임(알약 목록 없이) · 그 아래 한 줄 풀이 + 원문 수량 식
* 재료 줄 = 위 물가 넷 가로(빈 칸 「-」 · 시험 계산이 쓴 값 굵게) + 후보 목록(찾기 · `onPick` 이면 누르면 고름)
* — 상세 표 줄 · 시험 계산 자재 칸이 같은 모달(711-2) · 기계 고르기는 `Logic_PickTable` 그대로
* ② 표 모달(`openTableModal`) — 수량 칸 안 알약(찾기(...) 표 참조)을 누르면 그 표만 보임
* 표는 표 그대로 + 지금 넣은 값으로 걸린 줄 강조 · 단일 값(단가)은 값과 출처
* 표 읽기 = `/elements` → `/table`(`Logic_Note.loadTable`) · 단가 = 로직 화면이 이미 받은 `prices`
* ========================================================================== */
import { createButton, el } from "@ui/ui_template_elements";
import { createButton, createInputField, el } from "@ui/ui_template_elements";
import { openModal } from "@ui/ui_template_modal";
import {
fetchMaterials,
searchElements,
type ElementBrief,
type NamedFormula,
} from "./M01_MasterData_UI_Logic_Api";
import { fetchRows, type Row } from "./M01_MasterData_Api_Fetch";
import { createStat, statGrid } from "@ui/ui_template_stat";
import { formatNumber } from "./M01_MasterData_UI_Logic_Edit";
import { formatMoney, formatPrice } from "./M01_MasterData_UI_Logic_Money";
import { explain, loadTable, type TableRow } from "./M01_MasterData_UI_Logic_Note";
@@ -81,6 +86,12 @@ export interface ModalTarget {
unitText?: string;
/** 서버 수량 조각 — 한 줄 풀이를 조각으로(알약 포함) · 없으면 식 풀이 글 */
qtyFrag?: Fragment[];
/** 호표 줄 종류 — 「재료」면 후보 목록(고르기 조건 줄이 아니어도) */
kind?: string;
/** 시험 계산이 쓴 값 칸(계산 답 `품목.값칸`) — 위 물가 넷 가운데 굵게 */
usedSlot?: string;
/** 있으면 후보 줄을 눌러 고름(시험 입력 · 저장 안 함) — 고르면 모달 닫힘 */
onPick?: (item: { ref: string; label: string }) => void;
}
/** 수량 칸 표 알약 하나가 여는 자료 — 서버 조각 `참조`(키 · 행 · 열)가 곧 찾은 자리 */
@@ -176,7 +187,71 @@ function goButton(target: MasterJump): HTMLElement {
});
}
function priceView(ref: string, brief: ElementBrief): HTMLElement {
/** 자재품목 값 칸 넷 — 위 가로 줄(관급은 뺌) */
const SLOTS = ["물가자료", "유통물가", "물가정보", "거래가격"];
const MARKET_FILE = "재료_자재품목.json";
const marketRows = new Map<string, Promise<Row | null>>();
/** 자재품목 줄 하나(값 칸 넷) — 키로 찾음 · 한 번만 물음 */
const marketRow = (ref: string): Promise<Row | null> => {
if (!marketRows.has(ref))
marketRows.set(
ref,
fetchRows(MARKET_FILE, 1, 5, ref)
.then((got) => got.rows.find((r) => r["키"] === ref) ?? null)
.catch(() => null),
);
return marketRows.get(ref)!;
};
/** 자재품목 줄 단가 — 이름 · 키 · 규격 + 물가 넷 가로(빈 칸 「-」 · 시험 계산이 쓴 값 굵게 · 모르면 낮은 값) */
function marketView(
ref: string,
brief: ElementBrief | null,
usedSlot?: string,
onValue?: (value: unknown) => void,
): HTMLElement {
const head = el("strong");
const spec = el("p", { className: "ui-text ui-text--muted" });
const slots = el("div");
const paint = (name: unknown, size: unknown, values: Record<string, unknown>): void => {
head.textContent = `${String(name ?? ref)} · ${ref}`;
spec.textContent = size ? `${tl("Modal_Spec")} ${String(size)}` : "";
spec.hidden = !size;
const nums = SLOTS.map((s) => values[s]).filter((v): v is number => typeof v === "number");
const used = SLOTS.includes(usedSlot ?? "")
? usedSlot
: SLOTS.find((s) => nums.length && values[s] === Math.min(...nums));
slots.replaceChildren(
statGrid(
SLOTS.map((s) => {
const card = createStat({
label: s,
value: values[s] === null || values[s] === undefined ? "-" : formatPrice(values[s]),
compact: true,
});
card.classList.toggle("is-used", s === used);
return card;
}),
),
);
if (used) onValue?.(values[used]);
};
paint(brief?.이름, brief?.규격, brief?.값들 ?? {});
if (!brief?.값들) void marketRow(ref).then((row) => row && paint(row["이름"], row["규격"], row));
return el("div", {
className: "m01lab__data m01lab__slots",
attrs: { "data-price": ref },
children: [
head,
spec,
slots,
goButton({ kind: "element", group: "재료", ref, file: brief?.file ?? MARKET_FILE }),
],
});
}
function priceView(ref: string, brief: ElementBrief, usedSlot?: string): HTMLElement {
if (ref.startsWith("MT")) return marketView(ref, brief, usedSlot);
const cols = Object.entries(brief.값칸 ?? {});
const slots = Object.entries(brief.값들 ?? {}).filter(([, v]) => v !== null && v !== undefined);
return el("div", {
@@ -207,8 +282,8 @@ function priceView(ref: string, brief: ElementBrief): HTMLElement {
});
}
/** 모달 겉틀(배경·닫기·포커스) — 몸은 `mount` 이 채움 */
function openDialog(title: string, mount: (body: HTMLElement) => void): void {
/** 모달 겉틀(배경·닫기·포커스) — 몸은 `mount` 이 채움(닫기 함수도 받음) */
function openDialog(title: string, mount: (body: HTMLElement, close: () => void) => void): void {
openModal({
title,
closeLabel: tl("Modal_Close"),
@@ -220,58 +295,122 @@ function openDialog(title: string, mount: (body: HTMLElement) => void): void {
const muted = (text: string): HTMLElement => el("p", { className: "ui-text ui-text--muted", text });
/** 재료 고르기 줄 후보 목록 — 잡힌 품목(`pickedRef`)을 노란 줄로 · 후보가 100건을 넘으면 앞 100건만 옴 */
function candidateView(
cond: PickCond,
pickedRef: string,
onPicked: (item: ElementBrief | null) => void,
): HTMLElement {
const box = el("div", { className: "m01lab__data", attrs: { "data-candidates": "1" } });
box.append(muted("…"));
void searchElements("재료", seedOf(cond))
const free = (v: unknown): string => {
const text = String(v ?? "");
return text.includes("{") ? "" : text; // `{입력}` 자리는 계산 때 정해짐 — 거름에 안 씀
};
const squash = (v: unknown): string =>
String(v ?? "")
.replace(/\s+/g, "")
.toLowerCase();
/** 재료 줄 후보 목록 — 고르기 조건 안 후보(`/materials` · 단위 거름) · 조건이 없으면 이름 찾기 ·
* 찾기 칸 = 받은 후보 안에서 거름(없으면 재료 전체 이름 찾기) · 잡힌 품목(`pickedRef`) 노란 줄 맨 위 ·
* `onPick` 이면 줄을 누르면 고름 · 값은 위 가로 칸이 보여 목록엔 값 열 없음 */
function candidateView(target: ModalTarget, pickedRef: string, close: () => void): HTMLElement {
const cond = target.cond;
const sub = free(cond?.구분);
const list = el("div");
const count = el("strong");
const field = createInputField({ type: "search", placeholder: tl("Modal_Find") });
const box = el("div", {
className: "m01lab__data",
attrs: { "data-candidates": "1" },
children: [count, field.root, list],
});
list.append(muted("…"));
let base: ElementBrief[] = [];
const draw = (items: ElementBrief[], total: number): void => {
const sorted = [
...items.filter((it) => it.ref === pickedRef),
...items.filter((it) => it.ref !== pickedRef),
];
const more = total > items.length ? ` (${items.length})` : "";
count.textContent = `${tl(target.onPick ? "Modal_PickList" : "Modal_Candidates")} ${total}${more}`;
const rows = sorted.map((it) => {
const hit = it.ref === pickedRef;
const tr = el("tr", {
className: `${hit ? "m01lab__hit" : ""}${target.onPick ? " m01lab__pickrow" : ""}`,
attrs: { ...(hit ? { "data-hit": "1" } : {}), "data-ref": it.ref },
children: [
el("td", { text: it.이름 ?? it.ref }),
el("td", { text: it.규격 ?? "" }),
el("td", { text: String(it.단위 ?? "") }),
],
});
const onPick = target.onPick;
if (onPick)
tr.addEventListener("click", () => {
close();
onPick({ ref: it.ref, label: `${it.이름 ?? ""} ${it.규격 ?? ""}`.trim() || it.ref });
});
return tr;
});
list.replaceChildren(
rows.length
? el("div", {
className: "m01-logic__scroll m01lab__cands",
children: [
el("table", {
className: "ui-table ui-table--data m01-logic__grid m01lab__table",
children: [
el("thead", {
children: [
el("tr", {
children: [tl("Col_Name"), tl("Modal_Spec"), tl("Col_Unit")].map((h) =>
el("th", { text: h }),
),
}),
],
}),
el("tbody", { children: rows }),
],
}),
],
})
: muted(tl("Pill_NoPick")),
);
};
// 조건 없는 재료 줄 = 그 요소 이름 첫 낱말로 찾음(「모르타르, 서울 1:1」 → 「모르타르」)
const known = target.element ? target.prices[target.element] : null;
const seed = cond ? seedOf(cond) : headWord(known?.이름 ?? target.title).replace(/[,，].*$/, "");
const first = sub
? fetchMaterials({
sub,
detail: free(cond?.상세구분),
spec: free(cond?.규격),
unit: target.unit ?? "",
})
: searchElements("재료", seed);
let total = 0;
let timer = 0;
let seq = 0;
/** 찾기 칸 글로 거름 — 받은 후보 안에서 · 하나도 없으면 재료 전체 이름 찾기 */
const apply = (): void => {
const mine = ++seq;
const q = field.input.value.trim();
const words = q.split(/\s+/).map(squash).filter(Boolean);
if (!words.length) return draw(base, total);
const hits = base.filter((it) =>
words.every((w) => squash(`${it.이름 ?? ""} ${it.규격 ?? ""} ${it.ref}`).includes(w)),
);
if (hits.length) return draw(hits, hits.length);
void searchElements("재료", q)
.then((got) => mine === seq && draw(got.items, got.total))
.catch(() => undefined);
};
void first
.then((got) => {
onPicked(got.items.find((it) => it.ref === pickedRef) ?? null);
const rows = got.items.map((it) =>
el("tr", {
className: it.ref === pickedRef ? "m01lab__hit" : "",
attrs: it.ref === pickedRef ? { "data-hit": "1" } : {},
children: [
el("td", { text: it.이름 ?? it.ref }),
el("td", { text: it.규격 ?? "" }),
el("td", { text: String(it.단위 ?? "") }),
el("td", { className: "m01-logic__money", text: formatPrice(it.값) }),
],
}),
);
const more = got.total > got.items.length ? ` (${got.items.length})` : "";
box.replaceChildren(
el("strong", { text: `${tl("Modal_Candidates")} ${got.total}${more}` }),
el("div", {
className: "m01-logic__scroll",
children: [
el("table", {
className: "ui-table ui-table--data m01-logic__grid m01lab__table",
children: [
el("thead", {
children: [
el("tr", {
children: [
tl("Col_Name"),
tl("Modal_Spec"),
tl("Col_Unit"),
tl("Modal_Value"),
].map((h) => el("th", { text: h })),
}),
],
}),
el("tbody", { children: rows }),
],
}),
],
}),
);
base = got.items;
total = got.total;
field.input.value = sub ? free(cond?.["검색어"]) : ""; // 엔진이 고르는 검색어로 먼저 거름 · 지우면 조건 안 전부
apply();
})
.catch(() => box.replaceChildren(muted(tl("Pill_NoPick"))));
.catch(() => list.replaceChildren(muted(tl("Pill_NoPick"))));
field.input.addEventListener("input", () => {
window.clearTimeout(timer);
timer = window.setTimeout(apply, 300);
});
return box;
}
@@ -285,7 +424,7 @@ function pickedOf(cond: PickCond, values: Record<string, string>, fallback: stri
/** 줄을 눌렀을 때 — 그 줄의 단가(재료·인력·기계 또는 다른 로직)를 바로 보임(알약 없이) ·
* 재료 고르기 줄(`cond`)은 잡힌 품목 단가 + 후보 목록 */
export function openMaterialModal(target: ModalTarget): void {
openDialog(target.title, (body) => {
openDialog(target.title, (body, close) => {
const cond = target.cond;
const element = target.element ?? "";
const base = element.split(".")[0];
@@ -312,7 +451,7 @@ export function openMaterialModal(target: ModalTarget): void {
setSum(known);
const rate = el("div", { className: "m01lab__modal-body" });
if (known && priceRef) {
rate.append(priceView(priceRef, known));
rate.append(priceView(priceRef, known, target.usedSlot));
} else if (logicKey) {
rate.append(
el("p", {
@@ -327,7 +466,12 @@ export function openMaterialModal(target: ModalTarget): void {
}),
);
} else if (cond && priceRef) {
rate.append(muted("…")); // 후보 목록이 오면 그 줄로 채움 — 100건 밖이면 키로 따로 찾아 옴
// 서버가 잡은 품목 · 고른 품목 — 자재품목 줄을 키로 읽어 물가 넷
rate.append(
marketView(priceRef, null, target.usedSlot, (value) =>
setSum({ ref: priceRef, 값: value } as ElementBrief),
),
);
} else if (cond) {
rate.append(muted(tl("Pill_NoPick")));
} else if (element.includes("{")) {
@@ -358,23 +502,7 @@ export function openMaterialModal(target: ModalTarget): void {
}
body.replaceChildren(
rate,
...(cond
? [
candidateView(cond, priceRef, (item) => {
if (known || !priceRef) return;
const show = (brief: ElementBrief | null): void => {
rate.replaceChildren(
brief ? priceView(priceRef, brief) : muted(`${priceRef} — ${tl("Pill_NoValue")}`),
);
setSum(brief);
};
if (item) return show(item);
void searchElements("재료", priceRef)
.then((got) => show(got.items.find((it) => it.ref === priceRef) ?? null))
.catch(() => show(null));
}),
]
: []),
...(cond || target.kind === "재료" ? [candidateView(target, priceRef, close)] : []),
muted(tl("Modal_Sum")),
sum,
el("details", {
M01_MasterData/M01_MasterData_UI_LogicLab_Style.css
+35
View File
@@ -190,3 +190,38 @@
.m01lab__pickrow.is-picked {
font-weight: 600;
}
/* 보기 고르기(710-2 · `_View.ts`) — 그릇 data-view 와 다른 이름표 덩이는 숨김(시험 계산은 숨어도 돎) */
.m01-logic__editor[data-view="ho"] [data-block]:not([data-block="ho"]),
.m01-logic__editor[data-view="est"] [data-block]:not([data-block="est"]),
.m01-logic__editor[data-view="calc"] [data-block]:not([data-block="calc"]),
.m01-logic__editor[data-view="formula"] [data-block]:not([data-block="formula"]) {
display: none;
}
/* 기본정보 — 늘 맨 위 접힌 한 줄 */
.m01lab__infofold > summary {
display: flex;
align-items: baseline;
gap: var(--spacing-8);
cursor: pointer;
}
.m01lab__infofold[open] > summary {
margin-bottom: var(--spacing-8);
}
/* 상세 머리 「지금 입력」 한 줄 */
.m01lab__now {
margin: 0;
}
/* 재료 모달(711-2) — 위 물가 넷 가로 · 시험 계산이 쓴 값만 굵게 · 후보 목록은 모달 안 스크롤 */
.m01lab__slots .ui-stat:not(.is-used) .ui-stat__value {
font-weight: 400;
}
.m01lab__cands {
max-height: 40vh;
overflow: auto;
}
M01_MasterData/M01_MasterData_UI_LogicLab_Text.ts
+13
View File
@@ -28,6 +28,14 @@ const TEXT = {
Formula_Title: ["텍스트 수식", "Text formula"],
Formula_Slot: ["시험 계산을 누르면 식이 글로 나옴", "Run the trial calc to see the formula"],
Calc_Title: ["시험 계산", "Trial calculation"],
View_Est: ["인력·재료·경비", "Labor·material·expense"],
View_Label: ["보기", "View"],
View_Soon: [
"준비 중 — 인력 · 재료 · 경비 묶음 보기",
"Coming soon — labor · material · expense view",
],
Now_Inputs: ["지금 입력", "Current inputs"],
Now_None: ["없음", "none"],
G_labor: ["인력", "Labor"],
G_material: ["재료", "Material"],
G_cost: ["경비", "Expense"],
@@ -75,6 +83,11 @@ const TEXT = {
"후보 목록 (노란 줄 = 시험 계산이 쓰는 품목)",
"Candidates (yellow = used in the trial)",
],
Modal_PickList: [
"후보 목록 — 줄을 누르면 그 품목으로 시험 계산 (노란 줄 = 지금 쓰는 품목)",
"Candidates — click a row to use it in the trial (yellow = in use)",
],
Modal_Find: ["이름 · 규격으로 찾기", "Search by name or spec"],
Modal_Logic: ["다른 로직을 부름", "Calls another logic"],
Modal_NoData: ["표나 단가 자료가 없는 줄 — 수량 식만 있음", "No table or price data"],
Modal_Hit: ["노란 줄 = 지금 넣은 값으로 걸린 줄", "Highlighted row matches the trial values"],
M01_MasterData/M01_MasterData_UI_LogicLab_View.ts
+50
View File
@@ -0,0 +1,50 @@
/* =============================================================================
* M01_MasterData_UI_LogicLab_View.ts
* 「단가산출 로직」 상세 보기 고르기 — 머리줄 [신규 로직] 왼쪽 「분할 고르기 | 세로 나눔선」
* 보기 넷 = 단가산출 상세(기본) · 인력·재료·경비 · 시험 계산 · 텍스트 수식 — 고른 덩이만 보임
* 덩이 = `data-block` 이름표 · 숨김 = 그릇 `data-view` + CSS(`LogicLab_Style.css`) — 다시 그려도 고름 유지
* 시험 계산은 숨겨도 그려 둠(자동 계산이 숨은 칸에서도 돎) · 기본정보는 이름표 없음(늘 맨 위)
* 기억 = 이 화면 안에서만(로직을 바꿔도 유지 · 새로 들어오면 단가산출 상세)
* ========================================================================== */
import { el } from "@ui/ui_template_elements";
import { createSegment } from "@ui/ui_template_segment";
import { createToolbar } from "@ui/ui_template_toolbar";
import { tl } from "./M01_MasterData_UI_LogicLab_Text";
export type LabView = "ho" | "est" | "calc" | "formula";
/** 덩이에 보기 이름표를 붙여 돌려줌 */
export const block = <T extends HTMLElement>(node: T, view: LabView): T => {
node.dataset.block = view;
return node;
};
/** 보기 고르기 — `host`(상세 그릇)에 `data-view` 를 둠 · `root` 는 머리줄에 놓음 */
export function createViewPicker(host: HTMLElement): { root: HTMLElement } {
host.dataset.view = "ho";
const segment = createSegment({
options: [
{ value: "ho", label: tl("Ho_Title") },
{ value: "est", label: tl("View_Est") },
{ value: "calc", label: tl("Calc_Title") },
{ value: "formula", label: tl("Formula_Title") },
],
value: "ho",
size: 32,
ariaLabel: tl("View_Label"),
onChange: (v) => (host.dataset.view = v),
});
return { root: createToolbar({ items: [segment.root, "divider"], label: tl("View_Label") }) };
}
/** 상세 머리 「지금 입력」 한 줄(읽기만) — 숨은 시험 계산 칸에 든 값 */
export function nowInputs(values: Record<string, string>): HTMLElement {
const filled = Object.entries(values).filter(([, v]) => String(v ?? "").trim() !== "");
const text = filled.length ? filled.map(([k, v]) => `${k} ${v}`).join(" · ") : tl("Now_None");
return el("p", {
className: "ui-text ui-text--muted m01lab__now",
attrs: { "data-now": "" },
text: `${tl("Now_Inputs")} · ${text}`,
});
}
M01_MasterData/M01_MasterData_UI_Logic_Calc.ts
+11 -2
View File
@@ -28,6 +28,7 @@ import { formatNumber } from "./M01_MasterData_UI_Logic_Edit";
import { formatMoney } from "./M01_MasterData_UI_Logic_Money";
import { safeReason, tx } from "./M01_MasterData_UI_Logic_Text";
import { createBadge } from "@ui/ui_template_badge";
import { createDivider } from "@ui/ui_template_divider";
/** 고르기 값이 마스터 키(자재·기계·직종)면 이름으로 바꿔 보임 — 값 칸은 키 그대로 보냄 */
const KEY_RE = /^[A-Z]{2}\d{6}$/;
@@ -67,6 +68,9 @@ export interface CalcContext {
onText?: (answer: TextAnswer) => void;
}
const grid = (children: HTMLElement[]): HTMLElement =>
el("div", { className: "m01-logic__head", children });
const SUMS = ["노무비", "재료비", "경비", "계"];
/** 로직마다 자동값을 한 번만 받음(다시 그려도 안 부름) */
@@ -122,7 +126,7 @@ export function buildCalc(host: HTMLElement, ctx: CalcContext): void {
control = box;
}
const label = spec.단위 ? `${name} (${spec.단위})` : name;
// 긴 이름 줄만 한 칸 다 씀 — 고르기 줄은 짧으면 그대로 2열에 맞춰 나란히
// 긴 이름 줄만 두 칸 차지 — 짧으면 4 열에 맞춰 나란히
const wide = label.length > 10;
return el("label", {
className: `m01-logic__field${wide ? " m01-logic__field--wide" : ""}`,
@@ -196,8 +200,13 @@ export function buildCalc(host: HTMLElement, ctx: CalcContext): void {
runButton.setAttribute("data-calc-run", "");
host.replaceChildren(
el("h3", { text: tx("Calc_Title") }),
// 옵션 고르기 · 자재 고르기 두 격자(기본 4 열) — 사이 수평 구분선(709-1 부품)
...(fields.length || materials.length
? [el("div", { className: "m01-logic__head", children: [...fields, ...materials] })] // 요소 표가 쓰는 auto-fill 그리드 재사용 — 2열
? [
...(fields.length ? [grid(fields)] : []),
...(fields.length && materials.length ? [createDivider()] : []),
...(materials.length ? [grid(materials)] : []),
]
: [el("p", { className: "ui-text ui-text--muted", text: tx("Calc_NoInputs") })]),
runButton,
out,
M01_MasterData/M01_MasterData_UI_Logic_CalcPick.ts
+48 -26
View File
@@ -1,7 +1,8 @@
/* =============================================================================
* M01_MasterData_UI_Logic_CalcPick.ts
* 시험 계산의 재료 · 기계 고르기 — 재료 줄마다 「잡힌 품목 + 품목 고르기」 · 기계 입력은 단추 하나
* 누르면 마스터 표 모달(`PickTable`) · 고른 재료는 `고름`(호표 줄 차례 → 키)에 실어 다시 계산 · 저장 안 함
* 시험 계산의 재료 · 기계 고르기 — 재료 칸마다 잡힌 품목 이름(누르면 고르기) · 기계 입력은 단추 하나
* 재료 = 상세 표 줄과 같은 재료 모달(`openMaterialModal` · 711-2) · 기계 = 마스터 표 모달(`PickTable`)
* 고른 재료는 `고름`(호표 줄 차례 → 키)에 실어 다시 계산 · 저장 안 함
* ========================================================================== */
import { createButton, el } from "@ui/ui_template_elements";
@@ -9,7 +10,7 @@ import { fetchRows, type Row } from "./M01_MasterData_Api_Fetch";
import type { CalcLine, ElementBrief, LogicInput, LogicRow } from "./M01_MasterData_UI_Logic_Api";
import { openPickTable } from "./M01_MasterData_UI_Logic_PickTable";
import { tx } from "./M01_MasterData_UI_Logic_Text";
import { condText, headWord, type PickCond } from "./M01_MasterData_UI_LogicLab_Modal";
import { condText, openMaterialModal, type PickCond } from "./M01_MasterData_UI_LogicLab_Modal";
interface Chosen {
ref: string;
@@ -24,6 +25,19 @@ const picksOf = (values: Record<string, string>): Map<number, Chosen> => {
return mine;
};
/** 재료 고름(시험 입력 · 저장 안 함) — 시험 계산 칸(`host`)의 자재 글을 바꾸고 다시 셈 · 상세 표 줄 모달이 씀 */
export function pickMaterial(
host: HTMLElement,
values: Record<string, string>,
i: number,
it: Chosen,
): void {
picksOf(values).set(i, it);
const link = host.querySelector<HTMLElement>(`[data-mat-idx="${i}"]`);
if (link) link.textContent = it.label;
host.querySelector<HTMLButtonElement>("[data-calc-run]")?.click();
}
/** 계산 요청 몸의 `고름` — 고른 것이 없으면 안 실음 */
export function pickBody(values: Record<string, string>): { 고름?: Record<string, string> } {
const mine = picksOf(values);
@@ -49,10 +63,11 @@ const isMachineInput = (spec: LogicInput): boolean =>
const pickButton = (label: string, onClick: () => void): HTMLButtonElement =>
createButton({ label, variant: "ghost", onClick });
const line = (label: string, current: HTMLElement, button: HTMLElement): HTMLElement =>
/** 자재 칸 — 이름 + 잡힌 품목(누르면 고르기 모달) · 긴 이름은 두 칸 */
const line = (label: string, current: HTMLElement): HTMLElement =>
el("div", {
className: "m01-logic__field m01-logic__field--wide",
children: [el("span", { text: label }), el("div", { children: [current, button] })],
className: `m01-logic__field${label.length > 10 ? " m01-logic__field--wide" : ""}`,
children: [el("span", { text: label }), current],
});
/** 재료 줄마다 한 칸 — 지금 잡힌 품목 + 품목 고르기 */
@@ -77,29 +92,35 @@ export function materialRows(
const held = mine.get(i);
const nowName =
held?.label ?? (brief ? `${brief.이름 ?? ""} ${brief.규격 ?? ""}`.trim() : "") ?? "";
const seeds = [cond?.["검색어"], cond?.이름, cond?.상세구분, cond?.구분, label]
.map(headWord)
.filter((w, k, all) => w && all.indexOf(w) === k);
const current = el("span", {
className: "ui-text ui-text--muted",
text: `${nowName || tx("Mat_NoPrice")} `,
attrs: { "data-mat-idx": String(i), "data-ref": brief?.ref ?? "" },
// 잡힌 품목 이름 = 링크 단추 — 누르면 고르기 모달([품목 고르기] 단추 걷음)
const current = createButton({
label: nowName || tx("Mat_NoPrice"),
variant: "link",
onClick: () => pick(),
});
const button = pickButton(tx("Pick_Item"), () =>
openPickTable({
current.dataset.matIdx = String(i);
current.dataset.ref = brief?.ref ?? "";
current.title = tx("Pick_Item");
const title = `${label}${item.규격 ? ` ${item.규격}` : ""}`;
const pick = (): void =>
openMaterialModal({
title,
expr: item.수량,
...(cond ? { cond } : { element: item.요소 }),
unit: item.단위,
kind: "재료",
title: `${tx("Pick_MatTitle")} · ${label}`,
seed: seeds[0] ?? "",
alt: seeds.slice(1),
isCurrent: (r) => String(r["키"]) === (mine.get(i)?.ref ?? current.dataset.ref),
onPick: (r) => {
mine.set(i, { ref: String(r["키"]), label: nameOf(r) });
current.textContent = `${nameOf(r)} `;
prices,
middles: row.중간 ?? [],
values,
unitRef: mine.get(i)?.ref || current.dataset.ref || undefined,
usedSlot: current.dataset.slot || undefined,
onPick: (it) => {
mine.set(i, it);
current.textContent = it.label;
again();
},
}),
);
return line(`${label}${item.규격 ? ` ${item.규격}` : ""}`, current, button);
});
return line(title, current);
});
}
@@ -113,9 +134,10 @@ export function showItems(
host.querySelectorAll<HTMLElement>("[data-mat-idx]").forEach((span) => {
const i = Number(span.dataset.matIdx);
const item = lines[i]?.품목;
span.dataset.slot = item?.값칸 ?? ""; // 시험 계산이 쓴 값 칸 — 모달 위 가로 칸 굵게
if (!item || mine.has(i)) return;
span.dataset.ref = item.키;
span.textContent = `${`${item.이름 ?? ""} ${item.규격 ?? ""}`.trim() || item.키} `;
span.textContent = `${item.이름 ?? ""} ${item.규격 ?? ""}`.trim() || item.키;
});
}
M01_MasterData/M01_MasterData_UI_Logic_Style.css
+15 -2
View File
@@ -73,11 +73,24 @@
gap: var(--spacing-8);
}
/* 시험 계산 입력만 2열 고정 — 요소 표 쪽(auto-fill)은 그대로 둠
/* 시험 계산 입력만 4열 고정(옵션 · 자재 격자 둘) — 요소 표 쪽(auto-fill)은 그대로 둠 · 긴 이름 칸은 두 칸
실제 그릇은 LogicLab 이 씌우는 `.m01lab__calc`(`.m01-logic__calc` 는 옛 테스트 컨테이너 몫이라 안 걸림) */
.m01lab__calc .m01-logic__head,
.m01-logic__calc .m01-logic__head {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.m01lab__calc .m01-logic__field--wide {
grid-column: span 2;
}
/* 자재 칸 잡힌 품목 링크 — 칸 폭 안에서 왼쪽 맞춤 · 넘치면 말줄임 */
.m01lab__calc .m01-logic__field > .ui-btn--link {
justify-content: flex-start;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.m01-logic__field {