eomsangdonandClaude Opus 5.5
66cb7afbab
- 공용 오른쪽 접는 패널(ui_template_side_panels · 47-3 부품) · 취향 키 m02-labor-side · 카드 갈래엔 없음 - 고른 줄 없음 = 안내 한 줄 · 고르면 그 로직 출처 원문(GET /m01/logic/source) - 원문 보기를 M01_MasterData_UI_LogicLab_Source 로 떼어 M01 로직 상세와 한 벌로 씀(M01 동작 그대로) - 입력 목록 길(GET /m02/logic-lib/inputs)에 로직 출처 칸 추가 - 시험: test_m02_labor_values 출처 확인 · 화면 시나리오 ui_checks/47-4_일위대가_원문패널.js Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
/* =============================================================================
|
|
* M01_MasterData_UI_LogicLab_Side.ts
|
|
* 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘 「흐름도」(M02_DF_Panel) · 「원문」(품셈 본문 절)
|
|
* 공용 오른쪽 접는 패널(ui_template_side_panels) — 하나만 열림 · 모두 접힘 됨 · 폭 공유 · 접힌 패널 = 세로 글 띠
|
|
* 열린 패널 · 폭은 취향 키(`m01-logic-side`) · 원문 = 공용 원문 보기(`LogicLab_Source`)
|
|
* ========================================================================== */
|
|
|
|
import { currentLanguageIndex } from "@ui/ui_template_locale";
|
|
import { createSidePanels } from "@ui/ui_template_side_panels";
|
|
import { el } from "@ui/ui_template_elements";
|
|
import type { SplitHandle } from "./M01_MasterData_UI_LogicLab_Flow";
|
|
import { createSourceView } from "./M01_MasterData_UI_LogicLab_Source";
|
|
import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
|
|
import "./M01_MasterData_UI_LogicLab_Side.css";
|
|
|
|
const TEXT = {
|
|
Flow: ["흐름도", "Flow"],
|
|
Source: ["원문", "Source"],
|
|
} as const;
|
|
|
|
const ts = (key: keyof typeof TEXT): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];
|
|
|
|
export type PanelPick = "flow" | "source" | "none";
|
|
|
|
export interface LogicSide {
|
|
/** [왼쪽 지금 내용, 오른쪽 패널] 칸 */
|
|
root: HTMLElement;
|
|
/** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · 폭은 오른쪽 패널 몫(setRight 안 씀) */
|
|
flowSplit: SplitHandle;
|
|
flowFolded(): boolean;
|
|
pick(next: PanelPick): void;
|
|
/** 흐름도 패널이 뜨면 접기 함수 · 내리면 null */
|
|
bindFlow(fold: ((on: boolean) => void) | null): void;
|
|
/** 연 로직의 출처 글 — 원문 패널이 열려 있으면 찾음 */
|
|
showSource(src: string): void;
|
|
}
|
|
|
|
export function buildLogicSide(left: HTMLElement): LogicSide {
|
|
const flowSlot = el("div", { className: "m01lab-side__slot" });
|
|
const source = createSourceView();
|
|
const sp = createSidePanels({
|
|
prefKey: "m01-logic-side",
|
|
defaultWidth: 520,
|
|
minWidth: 320,
|
|
panels: [
|
|
{ id: "flow", title: ts("Flow"), body: flowSlot },
|
|
{ id: "source", title: ts("Source"), body: source.root },
|
|
],
|
|
onChange: () => {
|
|
flowFold?.(sp.current() !== "flow"); // 다시 펴면 흐름도 판을 폭에 맞춤
|
|
load();
|
|
},
|
|
});
|
|
const root = el("div", {
|
|
className: "m01lab-side ui-side-panels-row",
|
|
children: [left, sp.root],
|
|
});
|
|
|
|
let flowFold: ((on: boolean) => void) | null = null;
|
|
let want = "";
|
|
|
|
/** 원문 패널이 열려 있을 때만 찾음 */
|
|
const load = (): void => {
|
|
if (sp.current() === "source") source.show(want);
|
|
};
|
|
|
|
return {
|
|
root,
|
|
flowSplit: { right: flowSlot, setRight: () => undefined },
|
|
flowFolded: () => sp.current() !== "flow",
|
|
pick: (next) => sp.open(next === "none" ? null : next),
|
|
bindFlow: (f) => {
|
|
flowFold = f;
|
|
},
|
|
showSource: (src) => {
|
|
want = src;
|
|
load();
|
|
},
|
|
};
|
|
}
|