eomsangdon
abd37e8979
로직을 열 때 /text 를 값 없이 한 번 불러 왼쪽 이름 식 칸만 미리 채움 오른쪽 값 식 칸은 [계산] 전까지 안내 글만 표시 · [계산] 뒤엔 지금과 같음 onText 콜백이 redraw 를 안 불러 화면에 안 닿던 것을 찾아 LogicLab.ts 한 줄도 같이 고침(onLines 와 같은 자리)
98 lines
4.1 KiB
TypeScript
98 lines
4.1 KiB
TypeScript
/* =============================================================================
|
|
* M01_MasterData_UI_LogicLab_Formula.ts
|
|
* 「텍스트 수식」 컨테이너 — 서버(`POST /text`)가 준 줄을 그대로 찍음(화면에서 다시 계산하지 않음)
|
|
* 두 칸 — 왼쪽 = 변수 이름 식(`이름글`) · 오른쪽 = 값이 들어간 식(`글`) · 줄은 `짝` 번호로 같은 높이
|
|
* 한쪽에 올리거나 누르면 같은 줄이 밝아짐 · 비목 제목 · 소계 · 끝수 한 마디 · 까닭 있는 줄은 옅게
|
|
* ========================================================================== */
|
|
|
|
import { el } from "@ui/ui_template_elements";
|
|
import type { TextAnswer } from "./M01_MasterData_UI_Logic_Api";
|
|
import { formatNumber } from "./M01_MasterData_UI_Logic_Edit";
|
|
import { tx } from "./M01_MasterData_UI_Logic_Text";
|
|
import { tl } from "./M01_MasterData_UI_LogicLab_Text";
|
|
import "./M01_MasterData_UI_LogicLab_Formula.css";
|
|
|
|
/** 로직 열자마자 값 없이 부른 미리보기 응답은 `계산됨` 을 false 로 표시 — [계산] 을 거친 응답은 안 붙어 true 취급 */
|
|
export type PreviewTextAnswer = TextAnswer & { 계산됨?: boolean };
|
|
|
|
export interface FormulaContext {
|
|
text: PreviewTextAnswer | null;
|
|
}
|
|
|
|
const muted = (text: string): HTMLElement => el("p", { className: "m01-logic__muted", text });
|
|
|
|
export function buildFormula(host: HTMLElement, ctx: FormulaContext): void {
|
|
const text = ctx.text;
|
|
if (!text) {
|
|
host.replaceChildren(muted(tl("Formula_Slot")));
|
|
return;
|
|
}
|
|
if (!text.ok) {
|
|
host.replaceChildren(
|
|
el("div", {
|
|
className: "m01-logic__reasons",
|
|
children: [el("strong", { text: tx("Calc_Stopped") }), el("div", { text: text.reason })],
|
|
}),
|
|
);
|
|
return;
|
|
}
|
|
const heads = el("div", {
|
|
className: "m01lab-fx__head",
|
|
children: [
|
|
el("strong", { text: tl("Formula_Left") }),
|
|
el("strong", { text: tl("Formula_Right") }),
|
|
],
|
|
});
|
|
const rows: HTMLElement[] = [];
|
|
const calculated = text.계산됨 !== false; // [계산] 뒤 응답은 표식이 안 붙음 — 미리보기만 false
|
|
const light = (pair: string, on: boolean): void =>
|
|
rows.forEach((r) => r.dataset.pair === pair && r.classList.toggle("is-on", on));
|
|
const blocks = text.groups.flatMap((g) => [
|
|
el("h4", { className: "m01lab__group m01lab-fx__wide", text: g.비목 }),
|
|
...g.줄.map((line, i) => {
|
|
const pair = String(line.짝 ?? `${g.비목}${i}`);
|
|
const row = el("div", {
|
|
className: `m01lab-fx__row m01lab__text${line.까닭 ? " m01lab__text--off" : ""}`,
|
|
attrs: { "data-text-line": line.이름, "data-pair": pair },
|
|
children: [
|
|
el("div", { className: "m01lab-fx__cell", text: line.이름글 ?? line.이름 }),
|
|
el("div", {
|
|
className: "m01lab-fx__cell",
|
|
children: calculated
|
|
? [
|
|
el("div", { text: `${line.이름} : ${line.글}` }),
|
|
...(line.까닭
|
|
? [el("div", { className: "m01-logic__muted", text: line.까닭 })]
|
|
: []),
|
|
]
|
|
: [el("div", { className: "m01-logic__muted", text: tl("Formula_Slot") })],
|
|
}),
|
|
],
|
|
});
|
|
row.addEventListener("mouseenter", () => light(pair, true));
|
|
row.addEventListener("mouseleave", () => light(pair, false));
|
|
row.addEventListener("click", () => {
|
|
const pinned = row.classList.toggle("is-pin");
|
|
rows.forEach((r) => r !== row && r.classList.remove("is-pin"));
|
|
if (!pinned) row.classList.remove("is-pin");
|
|
});
|
|
rows.push(row);
|
|
return row;
|
|
}),
|
|
el("p", {
|
|
className: "m01lab__subtotal-text m01lab-fx__wide",
|
|
attrs: { "data-text-sub": String(g.소계) },
|
|
text: `${g.비목} ${tl("Subtotal")} ${formatNumber(g.소계)}${g.끝수 ? ` (${g.끝수})` : ""}`,
|
|
}),
|
|
]);
|
|
blocks.unshift(heads);
|
|
blocks.push(
|
|
el("p", {
|
|
className: "m01lab__total m01lab-fx__wide",
|
|
attrs: { "data-text-sum": String(text.계) },
|
|
text: `${tl("Total")} ${formatNumber(text.계)}`,
|
|
}),
|
|
);
|
|
host.replaceChildren(el("div", { className: "m01lab-fx", children: blocks }));
|
|
}
|