Files
Aislo/B05_Profile/B05_Profile_UI_Structures_Summary_Row.ts
T
eomsangdonandClaude Sonnet 5.5 71fac35dab feat(B05·B06): 구조물 좌측 패널 「집계 항목」 줄 · 옵션 보이기 · [수정] 옵션 보존 · 목록 지정 색(21-4)
- 폼 옵션 아래 「집계 항목」 줄(이름 · 미지정 · [고르기] · [해제]) — 구조물 · 관 계열 하위 폼 · B05 · B06 한 코드
- 옵션 `visible:false` 는 폼에서 숨김(정의 · 옛 값 그대로) · [수정]은 폼이 그린 칸만 갈아 끼우고 안 그린 칸(상세 · 숨긴 칸) 보존 — 옵션 덮어쓰기 흠 고침
- 목록 줄 `.is-assigned` 색 · 툴팁 항목 이름 · 캐시는 지금 초안 기록 칸(structures · pipes) 안 summary_item
- 미지정이면 칸을 안 실음 · 관은 서버 응답에 칸이 없으면 같은 측점에서 화면이 이어받음
- 항목 고르기 모달은 21-5 가 오기 전까지 같은 이름의 임시 함수 · Structures_Panel 700줄 넘어 옵션 그리기를 Panel_Options 로 나눔

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TULoa94ZFL26KU6ZqVpjkF
2026-09-29 12:19:31 +09:00

66 lines
2.5 KiB
TypeScript

/* =============================================================================
* B05_Profile_UI_Structures_Summary_Row.ts
* 구조물 폼의 「집계 항목」 줄 — 이름(없으면 「미지정」) · [고르기] · [해제] (PLAN 21-4).
*
* B05 · B06 · 관 계열 하위 폼이 같은 줄을 쓴다(옵션 · 서브폼 아래 한 줄). 줄은 값만 들고 있고
* 저장은 패널이 한다 — [고르기]가 모달(21-5 `openItemPicker`)을 부르고 돌려받은 참조를 `set` 한다.
* 키(SS…)는 앞에 내세우지 않고 툴팁에만 둔다(PLAN 21-0).
* ========================================================================== */
import {
summaryLabel,
summaryTooltip,
type SummaryItem,
} from "../common_util/common_util_summary_item";
export interface SummaryRow {
root: HTMLElement;
get: () => SummaryItem | null;
/** 값만 바꿔 그림 — 저장 · 알림은 안 함(폼 불러오기 · 모달 결과가 씀). */
set: (item: SummaryItem | null) => void;
/** [고르기] · [해제] 배선 — 패널이 한 번 부른다. */
bind: (handlers: { pick: () => void; clear: () => void }) => void;
}
export function buildSummaryRow(): SummaryRow {
const root = document.createElement("div");
root.className = "b05-structure__summary";
root.dataset.b05Summary = "row";
const label = document.createElement("span");
label.className = "b05-structure__summary-label";
label.textContent = "집계 항목";
const name = document.createElement("span");
name.className = "b05-structure__summary-name";
const pick = document.createElement("button");
pick.type = "button";
pick.className = "b05-route__irregular-btn";
pick.textContent = "고르기";
pick.dataset.b05Summary = "pick";
const clear = document.createElement("button");
clear.type = "button";
clear.className = "b05-route__irregular-btn";
clear.textContent = "해제";
clear.dataset.b05Summary = "clear";
root.append(label, name, pick, clear);
let current: SummaryItem | null = null;
const set = (item: SummaryItem | null): void => {
current = item;
name.textContent = summaryLabel(item);
name.title = summaryTooltip(item);
name.classList.toggle("is-assigned", item !== null);
clear.disabled = item === null;
};
set(null);
return {
root,
get: () => current,
set,
bind(handlers) {
pick.addEventListener("click", () => handlers.pick());
clear.addEventListener("click", () => handlers.clear());
},
};
}