feat(M02): 집계표 카드 = 도면 정보 · 면적산출 · 재료산출 · 편집 화면 알약 막대

- 집계표 아래 카드 셋(보기 + [수정] → 전체 편집) · 번호 = 도번 · 면적번 · 재료번
- 면적산출 · 재료산출 줄 조회 후 선택 = 다른 열 것 복사해 가져오기(copyArea · copyMaterial · 덮어쓰기 확인)
- 면적산출 · 재료산출은 표(스프레드시트) 편집 화면으로 엶(좌측 줄 · 카드 [수정] 둘 다 · 옛 CAD 로 뜨던 것 고침)
- 알약 막대 — 면적 = 그 열 일위대가 입력값(fetchComboInputs · 없으면 안내 글) · 재료 = 자재DB 찾기(searchMaterials)
- 옛 산출근거 이름(표번 · copyBasis) 안 씀

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019Kyw9qnkJ94pC1A4PfpDtA
This commit is contained in:
2026-09-28 12:16:25 +09:00
co-authored by Claude Opus 5.5
parent 9ae91ea5da
commit b60c10e73e
4 changed files with 194 additions and 115 deletions
@@ -1,4 +1,4 @@
/* M02 구조물집계표 아래 설계 컨테이너 — 카드 둘(도면 정보 · 상세 산출근거) · /* M02 구조물집계표 아래 설계 컨테이너 — 카드 셋(도면 정보 · 면적산출 · 재료산출) ·
카드 모양은 좌측 패널과 같은 공용 ui-sidebar-*(ui_template_overlay.css). */ 카드 모양은 좌측 패널과 같은 공용 ui-sidebar-*(ui_template_overlay.css). */
/* 표 밖 형제 자리 — 비어 있을 때 메인 간격이 벌어지지 않게 칸을 지움. */ /* 표 밖 형제 자리 — 비어 있을 때 메인 간격이 벌어지지 않게 칸을 지움. */
@@ -64,7 +64,7 @@
min-height: 0; min-height: 0;
} }
/* 상세 산출근거 — `.ss` 는 height:100% 로 부모 높이를 그대로 받는데 부모(이 칸)에 높이가 /* 면적산출 · 재료산출 미리보기 — `.ss` 는 height:100% 로 부모 높이를 그대로 받는데 부모(이 칸)에 높이가
없으면 0 이 되어 칸이 안 보였음(진짜 원인). 약 30행이 늘 보이게 높이를 정하고 없으면 0 이 되어 칸이 안 보였음(진짜 원인). 약 30행이 늘 보이게 높이를 정하고
넘치면 격자 안쪽(.ss-grid-host)이 스스로 스크롤(spreadsheet_grid.css). */ 넘치면 격자 안쪽(.ss-grid-host)이 스스로 스크롤(spreadsheet_grid.css). */
.m02-struct__sheet { .m02-struct__sheet {
@@ -1,16 +1,16 @@
/* ============================================================================= /* =============================================================================
* M02_MasterTemplete_Structure.ts * M02_MasterTemplete_Structure.ts
* 구조물집계표 아래 설계 컨테이너 — 고른 열의 구조물 도면 미리보기 · [도면 수정] · 상세 산출근거 미리보기 · [산출근거 수정]. * 구조물집계표 아래 설계 컨테이너 — 고른 열의 도면 정보 · 면적산출 · 재료산출 카드(보기만 + [수정]).
* 카드 둘(도면 정보 · 상세 산출근거)은 좌측 패널과 같은 공용 ui-sidebar 틀 — 둘 다 보기만(고침은 전체 화면 편집). * 카드 셋은 좌측 패널과 같은 공용 ui-sidebar 틀 — 고침은 [수정] 이 여는 M02 메인 칸 전체 편집 화면
* 상세 산출근거 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`basis/<열 id>.json`) · * (`M02_MasterTemplete_UI_Main.ts`)이 맡음.
* 부품은 이 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임) · 고침·저장은 [산출근거 수정] 이 * 면적산출 · 재료산출 = 스프레드시트(`A00_Common/spreadsheet/`) · 열마다 따로 파일(`area|material/<열 id>.json`) ·
* 여는 M02 메인 칸 전체 편집 화면(`M02_MasterTemplete_UI_Main.ts`)이 맡음. * 부품은 카드를 열 때만 `import()` 로 받음(다른 페이지 번들에 안 섞임).
* *
* 구조물 도면은 집계표 열마다 하나(`resources/master_template/structure/<열 id>.json`) · * 구조물 도면은 집계표 열마다 하나(`resources/master_template/structure/<열 id>.json`) ·
* 서버가 열마다 미리 만들어 둠(도번 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`). * 서버가 열마다 미리 만들어 둠(번호 자동 · 새 열도 집계표 저장 때 서버가 같이 만듦 — `M02_MasterTemplete_Store.py`).
* 이 칸은 표 부품 host 밖 형제 자리에 붙음 — 집계표는 그대로 두고 여기만 열마다 다시 그림. * 이 칸은 표 부품 host 밖 형제 자리에 붙음 — 집계표는 그대로 두고 여기만 열마다 다시 그림.
* 집계표 일위대가 · 도면 · 산출근거 줄의 조회 후 선택(`pick`)도 여기 — 일위대가 = M01 일위대가 목록에서 고름 · * 집계표 일위대가 · 도면 · 면적산출 · 재료산출 줄의 조회 후 선택(`pick`)도 여기 — 일위대가 = M01 일위대가
* 도면 · 산출근거 = 다른 열 것을 골라 내용만 복사해 가져옴(번호 · 열은 그대로 · 서버가 복사). * 목록에서 고름 · 나머지 = 다른 열 것을 골라 내용만 복사해 가져옴(번호 · 열은 그대로 · 서버가 복사).
* 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식). * 글자는 이 파일에 둠(도면 부품 `M02_MasterTemplete_Drawing.ts` 와 같은 방식).
* ========================================================================== */ * ========================================================================== */
@@ -24,9 +24,12 @@ import {
import { attachCollapsible } from "@ui/ui_template_collapsible"; import { attachCollapsible } from "@ui/ui_template_collapsible";
import { openModal } from "@ui/ui_template_modal"; import { openModal } from "@ui/ui_template_modal";
import type { SpreadsheetHandle, Workbook } from "../A00_Common/spreadsheet/spreadsheet"; import type { SpreadsheetHandle, Workbook } from "../A00_Common/spreadsheet/spreadsheet";
import type { LinkOptions } from "../A00_Common/spreadsheet/spreadsheet_links";
import { fetchComboInputs, searchMaterials } from "../M01_MasterData/M01_MasterData_Api_Fetch";
import { type ComboSummary, fetchCombos } from "../M01_MasterData/M01_MasterData_UI_Combo_Api"; import { type ComboSummary, fetchCombos } from "../M01_MasterData/M01_MasterData_UI_Combo_Api";
import { import {
copyBasis, copyArea,
copyMaterial,
copyStructure, copyStructure,
fetchStructureNumbers, fetchStructureNumbers,
readTemplate, readTemplate,
@@ -46,12 +49,11 @@ export const STRUCTURE_TABLE = "구조물집계표";
const TEXT = { const TEXT = {
drawingInfo: "도면 정보", drawingInfo: "도면 정보",
edit: "도면 수정", edit: "도면 수정",
editBasis: "산출근거 수정",
basis: "상세 산출근거",
noNumber: "도번 없음", noNumber: "도번 없음",
noTableNumber: "표번 없음",
noDrawing: "도면 없음", noDrawing: "도면 없음",
noBasis: "산출근거 없음", editSheet: "{value} 수정",
noSheetDoc: "{value} 없음",
noFieldNumber: "{value} 없음",
noSheet: "스프레드시트를 못 띄움 — {value}", noSheet: "스프레드시트를 못 띄움 — {value}",
readFailed: "구조물 도면을 못 읽음 — {value}", readFailed: "구조물 도면을 못 읽음 — {value}",
close: "닫기", close: "닫기",
@@ -59,23 +61,41 @@ const TEXT = {
clear: "비움", clear: "비움",
none: "고를 것이 없음", none: "고를 것이 없음",
pickPrice: "일위대가 고르기", pickPrice: "일위대가 고르기",
pickDrawing: "도면 복사해 가져오기",
pickBasis: "산출근거 복사해 가져오기",
combosFailed: "일위대가 목록을 못 받음 — {value}", combosFailed: "일위대가 목록을 못 받음 — {value}",
saveFirst: "새 열은 집계표를 먼저 저장해야 번호가 생김", saveFirst: "새 열은 집계표를 먼저 저장해야 번호가 생김",
overwrite: "{from} 의 {what} 내용을 {to} 에 덮어씀 — 번호 · 열은 그대로", overwrite: "{from} 의 {what} 내용을 {to} 에 덮어씀 — 번호 · 열은 그대로",
drawing: "도면", pickCopy: "{value} 복사해 가져오기",
basisWord: "산출근거",
copied: "복사해 가져옴", copied: "복사해 가져옴",
copyFailed: "복사 실패 — {value}", copyFailed: "복사 실패 — {value}",
noPrice: "이 열에 일위대가가 없어 알약 없음 — 구조물집계표 일위대가 줄에서 고름",
noInputs: "일위대가 {value} 에 입력값이 없어 알약 없음",
inputsFailed: "일위대가 입력값을 못 받음 — {value}",
};
/** 집계표 열 하나에 딸린 문서 셋 — 번호 칸 · 이름 · 복사 */
export type EditKind = "structure" | "area" | "material";
export type SheetKind = Exclude<EditKind, "structure">;
const PARTS: Record<
EditKind,
{ field: keyof StructureNumbers; word: string; copy: (to: string, from: string) => Promise<void> }
> = {
structure: { field: "도번", word: "도면", copy: copyStructure },
area: { field: "면적번", word: "면적산출", copy: copyArea },
material: { field: "재료번", word: "재료산출", copy: copyMaterial },
};
/** 집계표 줄 열쇠 → 문서 */
const ROW_KIND: Record<string, EditKind> = {
"s:drawing": "structure",
"s:area": "area",
"s:material": "material",
}; };
const why = (error: unknown): string => (error instanceof Error ? error.message : ""); const why = (error: unknown): string => (error instanceof Error ? error.message : "");
const fill = (text: string, value: string): string => text.replace("{value}", value); const fill = (text: string, value: string): string => text.replace("{value}", value);
/** 스프레드시트는 산출근거 카드를 열 때만 받음 */ /** 스프레드시트는 면적산출 · 재료산출 카드를 열 때만 받음 */
const loadSpreadsheet = () => import("../A00_Common/spreadsheet/spreadsheet"); const loadSpreadsheet = () => import("../A00_Common/spreadsheet/spreadsheet");
/** `{열 id: {도번, 표번}}` — 집계표 도면 · 산출근거 줄(없는 열은 키 없음 = 「없음」) */ /** `{열 id: {도번, 면적번, 재료번}}` — 집계표 번호 줄(없는 열은 키 없음 = 「없음」) */
export type ColumnNumbers = Record<string, StructureNumbers>; export type ColumnNumbers = Record<string, StructureNumbers>;
/** 일위대가 목록 — 처음 한 번만 받음(못 받으면 다음에 다시) */ /** 일위대가 목록 — 처음 한 번만 받음(못 받으면 다음에 다시) */
@@ -162,14 +182,14 @@ function choose(title: string, items: Choice[], clearable: boolean): Promise<str
}); });
} }
/** 집계표 열 — 머리 글(제목행 종류 · 분류1 · 분류2) · 꼴만 씀 */ /** 집계표 열 — 머리 글(제목행 종류 · 분류1 · 분류2 · 분류3) · 꼴만 씀 */
export interface StructureColumn { export interface StructureColumn {
id: string; id: string;
머리: (string | null)[]; 머리: (string | null)[];
꼴?: string | null; 꼴?: string | null;
} }
/** 구조물 열 = 꼴=수 — NO · 측점 · 비고 같은 글 열은 도면 · 산출근거 · 번호가 없음(서버와 같은 규칙) */ /** 구조물 열 = 꼴=수 — NO · 측점 · 비고 같은 글 열은 도면 · 면적산출 · 재료산출 · 번호가 없음(서버와 같은 규칙) */
export const isStructureColumn = (col: StructureColumn): boolean => col.꼴 === "수"; export const isStructureColumn = (col: StructureColumn): boolean => col.꼴 === "수";
/** 구조물 이름 + 변수값 — 제목행 층을 빈칸으로 이음(빈 층은 건너뜀 · 다 비면 열 id) */ /** 구조물 이름 + 변수값 — 제목행 층을 빈칸으로 이음(빈 층은 건너뜀 · 다 비면 열 id) */
@@ -180,26 +200,47 @@ export const columnHead = (col: StructureColumn): string =>
export const structureLabel = (number: string, col: StructureColumn): string => export const structureLabel = (number: string, col: StructureColumn): string =>
[number, columnHead(col)].filter(Boolean).join(" "); [number, columnHead(col)].filter(Boolean).join(" ");
/** 면적산출 · 재료산출 편집 화면 위 알약 막대 — 면적 = 그 열 일위대가 입력값(물량) · 재료 = 자재DB 찾기.
* 알약이 없으면 까닭 글(`notice`)을 같이 돌려줌 */
export async function pillsFor(
kind: SheetKind,
column: string,
): Promise<{ links: LinkOptions; notice?: string }> {
if (kind === "material") return { links: { 항목: [], 모드: "자재", 자재찾기: searchMaterials } };
const none = (notice: string) => ({ links: { 항목: [], 모드: "입력" as const }, notice });
const table = await readTemplate("system", "table", STRUCTURE_TABLE, null).catch(() => null);
const cols = (table?.문서 as { 열?: { id: string; 일위대가?: string | null }[] } | null)?.열;
const combo = cols?.find((c) => c.id === column)?.일위대가;
if (!combo) return none(TEXT.noPrice);
try {
const got = await fetchComboInputs(combo);
const 항목 = got.물량.map((q) => ({ 키: q.키, 이름: q.이름, 단위: q.단위 }));
return 항목.length ? { links: { 항목, 모드: "입력" } } : none(fill(TEXT.noInputs, combo));
} catch (error) {
return none(fill(TEXT.inputsFailed, why(error)));
}
}
export interface StructurePanelOptions { export interface StructurePanelOptions {
/** 시스템 관리자만 저장함(구조물 도면은 서버가 미리 만들어 둠) */ /** 시스템 관리자만 저장함(구조물 도면은 서버가 미리 만들어 둠) */
isAdmin: boolean; isAdmin: boolean;
/** [도면 수정]·[산출근거 수정] — 그 열을 CAD·스프레드시트 전체 편집으로 엶(페이지의 `open`) · /** [도면 수정] · [면적산출 수정] · [재료산출 수정] — 그 열을 CAD · 스프레드시트 전체 편집으로 엶
* label 은 화면 제목에 씀 */ * (페이지의 `open`) · label 은 화면 제목에 씀 */
onEdit: (column: string, label: string, kind: "structure" | "basis") => void; onEdit: (column: string, label: string, kind: EditKind) => void;
/** 집계표에 저장 안 한 고침이 있으면 버릴지 물음 — 취소면 false */ /** 집계표에 저장 안 한 고침이 있으면 버릴지 물음 — 취소면 false */
confirmLeave: () => Promise<boolean>; confirmLeave: () => Promise<boolean>;
} }
export interface StructurePanelHandle { export interface StructurePanelHandle {
root: HTMLElement; root: HTMLElement;
/** `{열 id: {도번, 표번}}` — 집계표 `drawingLabel` · `basisLabel` 이 씀 */ /** `{열 id: {도번, 면적번, 재료번}}` — 집계표 `drawingLabel` · `areaLabel` · `materialLabel` 이 씀 */
numbers: () => ColumnNumbers; numbers: () => ColumnNumbers;
/** 도번 · 표번 목록 다시 받기 */ /** 번호 목록 다시 받기 */
reload: () => Promise<void>; reload: () => Promise<void>;
/** 고른 열이 바뀜 — 같은 열이면 아무것도 안 함(CAD 를 다시 안 띄움) */ /** 고른 열이 바뀜 — 같은 열이면 아무것도 안 함(CAD 를 다시 안 띄움) */
show: (colId: string | null, columns: StructureColumn[]) => void; show: (colId: string | null, columns: StructureColumn[]) => void;
/** 집계표 조회 후 선택(`onPick`) — 일위대가 = 고른 키(「비움」 = 빈 글 · 닫으면 null) · /** 집계표 조회 후 선택(`onPick`) — 일위대가 = 고른 키(「비움」 = 빈 글 · 닫으면 null) ·
* 도면 · 산출근거 = 다른 열 것을 복사해 가져옴(돌려주는 글 없음) */ * 도면 · 면적산출 · 재료산출 = 다른 열 것을 복사해 가져옴(돌려주는 글 없음) */
pick: (row: string, colId: string | null, columns: StructureColumn[]) => Promise<string | null>; pick: (row: string, colId: string | null, columns: StructureColumn[]) => Promise<string | null>;
destroy: () => void; destroy: () => void;
} }
@@ -210,49 +251,75 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
let column: string | null = null; let column: string | null = null;
let columnLabel = ""; let columnLabel = "";
let doc: StructureDoc | null = null; let doc: StructureDoc | null = null;
let basisDoc: Workbook | null = null;
let basisNumber = "";
let preview: DrawingTemplateHandle | null = null; let preview: DrawingTemplateHandle | null = null;
let basis: SpreadsheetHandle | null = null;
let seq = 0; let seq = 0;
const card = (title: string, head: HTMLElement, body: HTMLElement): HTMLElement =>
el("section", {
className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
children: [el("h3", { className: "ui-collapsible__title", text: title }), head, body],
});
const columnName = el("span", { className: "m02-struct__title" }); const columnName = el("span", { className: "m02-struct__title" });
const number = el("span", { className: "m02-struct__no" }); const number = el("span", { className: "m02-struct__no" });
const edit = createButton({ label: TEXT.edit, variant: "filled" }); const edit = createButton({ label: TEXT.edit, variant: "filled" });
const previewHost = el("div", { className: "m02-struct__preview" }); const previewHost = el("div", { className: "m02-struct__preview" });
const infoCard = el("section", { const infoCard = card(
className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card", TEXT.drawingInfo,
children: [ el("div", { className: "m02-struct__head", children: [number, columnName, edit] }),
el("h3", { className: "ui-collapsible__title", text: TEXT.drawingInfo }), previewHost,
el("div", { className: "m02-struct__head", children: [number, columnName, edit] }), );
previewHost,
],
});
const basisNo = el("span", { className: "m02-struct__no" }); /** 면적산출 · 재료산출 카드 — 번호 · [수정] · 스프레드시트 미리보기 */
const editBasis = createButton({ label: TEXT.editBasis, variant: "ghost" }); interface SheetCard {
const basisHost = el("div", { className: "m02-struct__sheet" }); kind: SheetKind;
const basisCard = el("section", { root: HTMLElement;
className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card", no: HTMLElement;
children: [ edit: HTMLButtonElement;
el("h3", { className: "ui-collapsible__title", text: TEXT.basis }), host: HTMLElement;
el("div", { className: "m02-struct__subhead", children: [basisNo, editBasis] }), doc: Workbook | null;
basisHost, number: string;
], handle: SpreadsheetHandle | null;
}); }
const sheetCard = (kind: SheetKind): SheetCard => {
const no = el("span", { className: "m02-struct__no" });
const editButton = createButton({
label: fill(TEXT.editSheet, PARTS[kind].word),
variant: "ghost",
});
const host = el("div", { className: "m02-struct__sheet" });
editButton.addEventListener("click", () => void openEdit(kind));
return {
kind,
root: card(
PARTS[kind].word,
el("div", { className: "m02-struct__subhead", children: [no, editButton] }),
host,
),
no,
edit: editButton,
host,
doc: null,
number: "",
handle: null,
};
};
const sheets = [sheetCard("area"), sheetCard("material")];
const root = el("div", { const root = el("div", {
className: "m02-struct ui-sidebar-panel", className: "m02-struct ui-sidebar-panel",
attrs: { hidden: "" }, attrs: { hidden: "" },
children: [infoCard, basisCard], children: [infoCard, ...sheets.map((c) => c.root)],
}); });
attachCollapsible(root); attachCollapsible(root);
const drop = (): void => { const drop = (): void => {
preview?.destroy(); preview?.destroy();
preview = null; preview = null;
basis?.destroy(); for (const c of sheets) {
basis = null; c.handle?.destroy();
c.handle = null;
}
}; };
const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text }); const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text });
@@ -272,28 +339,32 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
apply(); apply();
}; };
/** 산출근거 스프레드시트 미리보기 — 보기만(고침은 [산출근거 수정] 이 여는 전체 화면) · /** 스프레드시트 미리보기 — 보기만(고침은 [수정] 이 여는 전체 화면) · 부품을 늦게 받음 ·
* 부품을 늦게 받음 · 그 사이 열이 바뀌면 버림 */ * 그 사이 열이 바뀌면 버림 */
const paintBasis = async (mine: number): Promise<void> => { const paintSheet = async (c: SheetCard, mine: number): Promise<void> => {
if (!basisDoc) return void basisHost.replaceChildren(note(TEXT.noBasis)); if (!c.doc) return void c.host.replaceChildren(note(fill(TEXT.noSheetDoc, PARTS[c.kind].word)));
try { try {
const { createSpreadsheet } = await loadSpreadsheet(); const { createSpreadsheet } = await loadSpreadsheet();
if (mine !== seq || !basisDoc) return; if (mine !== seq || !c.doc) return;
basis = createSpreadsheet(basisHost, basisDoc, { readOnly: true, tabs: false }); c.handle = createSpreadsheet(c.host, c.doc, { readOnly: true, tabs: false });
} catch (error) { } catch (error) {
if (mine === seq) basisHost.replaceChildren(note(fill(TEXT.noSheet, why(error)))); if (mine === seq) c.host.replaceChildren(note(fill(TEXT.noSheet, why(error))));
} }
}; };
/** 미리보기 · 산출근거 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */ /** 미리보기 · 스프레드시트 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */
const paintBody = (mine: number): void => { const paintBody = (mine: number): void => {
drop(); drop();
number.textContent = doc?.도번 || numbers[column ?? ""]?.도번 || TEXT.noNumber; number.textContent = doc?.도번 || numbers[column ?? ""]?.도번 || TEXT.noNumber;
edit.hidden = !opts.isAdmin; edit.hidden = !opts.isAdmin;
basisNo.textContent = basisNumber || numbers[column ?? ""]?.표번 || TEXT.noTableNumber; for (const c of sheets) {
editBasis.hidden = !opts.isAdmin; const field = PARTS[c.kind].field;
basisHost.replaceChildren(); c.no.textContent =
void paintBasis(mine); c.number || numbers[column ?? ""]?.[field] || fill(TEXT.noFieldNumber, field);
c.edit.hidden = !opts.isAdmin;
c.host.replaceChildren();
void paintSheet(c, mine);
}
if (!doc) { if (!doc) {
previewHost.replaceChildren(note(TEXT.noDrawing)); previewHost.replaceChildren(note(TEXT.noDrawing));
return; return;
@@ -325,22 +396,27 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
columnName.textContent = columnLabel; columnName.textContent = columnLabel;
number.textContent = numbers[col.id]?.도번 || TEXT.noNumber; number.textContent = numbers[col.id]?.도번 || TEXT.noNumber;
doc = null; doc = null;
basisDoc = null;
basisNumber = "";
previewHost.replaceChildren(); previewHost.replaceChildren();
basisHost.replaceChildren(); for (const c of sheets) {
const [drawing, sheet] = await Promise.allSettled([ c.doc = null;
c.number = "";
c.host.replaceChildren();
}
const [drawing, ...books] = await Promise.allSettled([
readTemplate("system", "structure", col.id, null), readTemplate("system", "structure", col.id, null),
readTemplate("system", "basis", col.id, null), ...sheets.map((c) => readTemplate("system", c.kind, col.id, null)),
]); ]);
if (mine !== seq) return; if (mine !== seq) return;
if (drawing.status === "fulfilled") doc = drawing.value.문서 as StructureDoc; if (drawing.status === "fulfilled") doc = drawing.value.문서 as StructureDoc;
// 도번 목록에 있는 열인데 못 읽으면 알림 — 없는 열은 그냥 「도면 없음」 // 도번 목록에 있는 열인데 못 읽으면 알림 — 없는 열은 그냥 「도면 없음」
else if (numbers[col.id]) showToast(fill(TEXT.readFailed, why(drawing.reason)), "error"); else if (numbers[col.id]) showToast(fill(TEXT.readFailed, why(drawing.reason)), "error");
if (sheet.status === "fulfilled") { books.forEach((got, i) => {
basisDoc = sheet.value.문서 as Workbook; if (got.status !== "fulfilled") return;
basisNumber = (sheet.value.문서 as { 표번?: string })?.표번 ?? ""; const c = sheets[i];
} const book = got.value.문서 as Workbook & Record<string, unknown>;
c.doc = book;
c.number = String(book?.[PARTS[c.kind].field] ?? "");
});
paintBody(mine); paintBody(mine);
} }
@@ -371,13 +447,13 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
return choose(col ? `${TEXT.pickPrice} — ${columnHead(col)}` : TEXT.pickPrice, items, true); return choose(col ? `${TEXT.pickPrice} — ${columnHead(col)}` : TEXT.pickPrice, items, true);
}; };
/** 다른 열의 도면 · 산출근거를 골라 내용만 복사 — 덮어쓰기 확인 · 보고 있던 열이면 다시 읽음 */ /** 다른 열의 도면 · 면적산출 · 재료산출을 골라 내용만 복사 — 덮어쓰기 확인 · 보고 있던 열이면 다시 읽음 */
const pickCopy = async ( const pickCopy = async (
kind: "structure" | "basis", kind: EditKind,
colId: string, colId: string,
columns: StructureColumn[], columns: StructureColumn[],
): Promise<void> => { ): Promise<void> => {
const field = kind === "structure" ? "도번" : "표번"; const { field, word, copy } = PARTS[kind];
const to = columns.find((c) => c.id === colId); const to = columns.find((c) => c.id === colId);
const toNo = numbers[colId]?.[field]; const toNo = numbers[colId]?.[field];
if (!to || !toNo) return void showToast(TEXT.saveFirst, "error"); if (!to || !toNo) return void showToast(TEXT.saveFirst, "error");
@@ -385,7 +461,7 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
.filter((c) => c.id !== colId && numbers[c.id]?.[field]) .filter((c) => c.id !== colId && numbers[c.id]?.[field])
.map((c) => ({ value: c.id, key: numbers[c.id][field]!, label: columnHead(c) })); .map((c) => ({ value: c.id, key: numbers[c.id][field]!, label: columnHead(c) }));
const from = await choose( const from = await choose(
`${kind === "structure" ? TEXT.pickDrawing : TEXT.pickBasis} — ${toNo} ${columnHead(to)}`, `${fill(TEXT.pickCopy, word)} — ${toNo} ${columnHead(to)}`,
items, items,
false, false,
); );
@@ -393,11 +469,11 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
if (!from || !src) return; if (!from || !src) return;
const ask = TEXT.overwrite const ask = TEXT.overwrite
.replace("{from}", `${numbers[from][field]} ${columnHead(src)}`) .replace("{from}", `${numbers[from][field]} ${columnHead(src)}`)
.replace("{what}", kind === "structure" ? TEXT.drawing : TEXT.basisWord) .replace("{what}", word)
.replace("{to}", `${toNo} ${columnHead(to)}`); .replace("{to}", `${toNo} ${columnHead(to)}`);
if (!(await showConfirmDialog(ask))) return; if (!(await showConfirmDialog(ask))) return;
try { try {
await (kind === "structure" ? copyStructure : copyBasis)(colId, from); await copy(colId, from);
showToast(TEXT.copied, "success"); showToast(TEXT.copied, "success");
if (column === colId) void load(shown); if (column === colId) void load(shown);
} catch (error) { } catch (error) {
@@ -412,24 +488,17 @@ export function createStructurePanel(opts: StructurePanelOptions): StructurePane
): Promise<string | null> => { ): Promise<string | null> => {
if (!opts.isAdmin || !colId) return null; if (!opts.isAdmin || !colId) return null;
if (row === "s:price") return pickPrice(colId, columns); if (row === "s:price") return pickPrice(colId, columns);
if (row === "s:drawing" || row === "s:basis") if (ROW_KIND[row]) await pickCopy(ROW_KIND[row], colId, columns);
await pickCopy(row === "s:drawing" ? "structure" : "basis", colId, columns);
return null; return null;
}; };
edit.addEventListener("click", async () => { async function openEdit(kind: EditKind): Promise<void> {
const at = column; const at = column;
if (!at) return; if (!at) return;
if (!(await opts.confirmLeave())) return; if (!(await opts.confirmLeave())) return;
opts.onEdit(at, columnLabel, "structure"); opts.onEdit(at, columnLabel, kind);
}); }
edit.addEventListener("click", () => void openEdit("structure"));
editBasis.addEventListener("click", async () => {
const at = column;
if (!at) return;
if (!(await opts.confirmLeave())) return;
opts.onEdit(at, columnLabel, "basis");
});
return { return {
root, root,
@@ -18,6 +18,7 @@ import {
} from "./M02_MasterTemplete_Api_Fetch"; } from "./M02_MasterTemplete_Api_Fetch";
import { import {
createStructurePanel, createStructurePanel,
pillsFor,
STRUCTURE_TABLE, STRUCTURE_TABLE,
type StructureColumn, type StructureColumn,
type StructurePanelHandle, type StructurePanelHandle,
@@ -43,6 +44,12 @@ interface SheetEditorHandle extends EditorHandle {
} }
type Mods = Record<string, () => Promise<unknown>>; type Mods = Record<string, () => Promise<unknown>>;
/** 열 id 로 여는 문서의 번호 칸 */
const NUMBER_FIELD: Partial<Record<Kind, string>> = {
structure: "도번",
area: "면적번",
material: "재료번",
};
// 표 부품(sub3) · 도면 부품(sub2) — 내보낸 이름으로 찾음 // 표 부품(sub3) · 도면 부품(sub2) — 내보낸 이름으로 찾음
// 표는 진입 파일만 — 폴더 통째(`*.ts`)면 분수 모듈이 따로 늦게 받는 입구가 되어 번들러 도우미를 // 표는 진입 파일만 — 폴더 통째(`*.ts`)면 분수 모듈이 따로 늦게 받는 입구가 되어 번들러 도우미를
// 달고, 그 도우미가 든 큰 조각(compass)까지 스프레드시트가 끌어옴 // 달고, 그 도우미가 든 큰 조각(compass)까지 스프레드시트가 끌어옴
@@ -138,7 +145,7 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
slot.replaceChildren(); slot.replaceChildren();
}; };
/** 구조물집계표 아래 설계 컨테이너 — 고른 열의 도면 미리보기 · [도면 수정] · 상세 산출근거 */ /** 구조물집계표 아래 설계 컨테이너 — 고른 열의 도면 정보 · 면적산출 · 재료산출 카드 */
function buildPanel(): StructurePanelHandle { function buildPanel(): StructurePanelHandle {
const made = createStructurePanel({ const made = createStructurePanel({
isAdmin, isAdmin,
@@ -161,8 +168,8 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
"createSheet", "createSheet",
); );
if (!create) return empty(L("M02_NoSheet")); if (!create) return empty(L("M02_NoSheet"));
// 구조물집계표(시스템 층)만 — 도면 · 산출근거 줄에 도번 · 표번 · 칸을 고르면 아래 컨테이너 · // 구조물집계표(시스템 층)만 — 도면 · 면적산출 · 재료산출 줄에 번호 · 칸을 고르면 아래 컨테이너 ·
// 고칠 수 있으면 일위대가 · 도면 · 산출근거 칸은 조회 후 선택 // 고칠 수 있으면 일위대가 · 도면 · 면적산출 · 재료산출 칸은 조회 후 선택
const struct = at.layer === "system" && at.name === STRUCTURE_TABLE ? buildPanel() : null; const struct = at.layer === "system" && at.name === STRUCTURE_TABLE ? buildPanel() : null;
if (struct) await struct.reload(); if (struct) await struct.reload();
panel = struct; panel = struct;
@@ -177,7 +184,8 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
...(struct ...(struct
? { ? {
drawingLabel: (colId: string) => struct.numbers()[colId]?.도번 ?? "", drawingLabel: (colId: string) => struct.numbers()[colId]?.도번 ?? "",
basisLabel: (colId: string) => struct.numbers()[colId]?.표번 ?? "", areaLabel: (colId: string) => struct.numbers()[colId]?.면적번 ?? "",
materialLabel: (colId: string) => struct.numbers()[colId]?.재료번 ?? "",
onSelect: (s: { colId: string | null }) => struct.show(s.colId, columns()), onSelect: (s: { colId: string | null }) => struct.show(s.colId, columns()),
...(readOnly ...(readOnly
? {} ? {}
@@ -191,15 +199,21 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
if (struct) sheet = editor as SheetEditorHandle; if (struct) sheet = editor as SheetEditorHandle;
return; return;
} }
if (at.kind === "basis") { if (at.kind === "area" || at.kind === "material") {
// 산출근거 = 구조물집계표 열마다 한 스프레드시트 — 페이지 번들에 안 섞이게 이 화면을 열 때만 // 면적산출 · 재료산출 = 구조물집계표 열마다 한 스프레드시트 — 페이지 번들에 안 섞이게 이 화면을
// `import()` 로 받음(계약 `spreadsheet_types.ts` 머리) // 열 때만 `import()` 로 받음(계약 `spreadsheet_types.ts` 머리)
// 위 알약 막대(sub7 `links`) — 면적 = 그 열 일위대가 입력값 · 재료 = 자재DB 찾기(`pillsFor`)
try { try {
const { createSpreadsheet } = await import("../A00_Common/spreadsheet/spreadsheet"); const [{ createSpreadsheet }, pills] = await Promise.all([
import("../A00_Common/spreadsheet/spreadsheet"),
pillsFor(at.kind, at.name),
]);
if (pills.notice) showNotice([pills.notice]);
editor = createSpreadsheet(host, doc as Parameters<typeof createSpreadsheet>[1], { editor = createSpreadsheet(host, doc as Parameters<typeof createSpreadsheet>[1], {
readOnly, readOnly,
tabs: false, // 산출근거 = 시트 하나 · 탭 줄 없음 tabs: false, // 시트 하나 · 탭 줄 없음
onChange: () => (dirty = !readOnly), onChange: () => (dirty = !readOnly),
links: pills.links,
}); });
} catch { } catch {
empty(L("M02_NoSpreadsheet")); empty(L("M02_NoSpreadsheet"));
@@ -211,7 +225,7 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
"mountDrawingTemplate", "mountDrawingTemplate",
); );
if (mountDrawing) { if (mountDrawing) {
// 구조물 도면은 CAD 문서가 `도면` 칸에 들어 있음 — 도번 · 산출근거는 안 건드림 // 구조물 도면은 CAD 문서가 `도면` 칸에 들어 있음 — 도번은 안 건드림
const cad = at.kind === "structure" ? (doc as StructureDoc).도면 : doc; const cad = at.kind === "structure" ? (doc as StructureDoc).도면 : doc;
editor = mountDrawing(host, cad, { editor = mountDrawing(host, cad, {
onSave: () => void doSave(), onSave: () => void doSave(),
@@ -253,14 +267,10 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
) )
: got.문서; : got.문서;
if (mine !== seq) return; if (mine !== seq) return;
// 구조물 도면 · 산출근거는 열 id 로 열리니 머리 맨 앞에 도번 · 표번(「SD010101 돌기슭막이 …」) // 구조물 도면 · 면적산출 · 재료산출은 열 id 로 열리니 머리 맨 앞에 번호(「SD01010100 돌기슭막이 …」)
if (next.kind === "structure") { const field = NUMBER_FIELD[next.kind];
const number = (got.문서 as StructureDoc)?.도번; const number = field && (got.문서 as Record<string, unknown> | null)?.[field];
if (number) title.textContent = `${number} ${next.label ?? next.name}`; if (number) title.textContent = `${String(number)} ${next.label ?? next.name}`;
} else if (next.kind === "basis") {
const number = (got.문서 as { 표번?: string })?.표번;
if (number) title.textContent = `${number} ${next.label ?? next.name}`;
}
await mount(shown, next); await mount(shown, next);
} catch (error) { } catch (error) {
if (mine !== seq) return; if (mine !== seq) return;
@@ -275,12 +285,12 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
const at = sel; const at = sel;
try { try {
const edited = editor ? await editor.getDoc() : loaded; const edited = editor ? await editor.getDoc() : loaded;
// 구조물 도면 저장은 `도면` 칸만 갈아 끼움 — 도번 · 산출근거는 읽은 그대로. // 구조물 도면 저장은 `도면` 칸만 갈아 끼움 — 도번은 읽은 그대로.
// 산출근거는 스프레드시트 문서로 통째 갈아 끼우되 표번은 계약 밖(엔진이 모름)이라 옮겨 붙임. // 면적산출 · 재료산출은 스프레드시트 문서로 통째 갈아 끼우되 번호는 계약 밖(엔진이 모름)이라 옮겨 붙임.
const doc = const doc =
at.kind === "structure" && loaded at.kind === "structure" && loaded
? { ...(loaded as StructureDoc), 도면: edited as StructureDoc["도면"] } ? { ...(loaded as StructureDoc), 도면: edited as StructureDoc["도면"] }
: at.kind === "basis" && loaded : (at.kind === "area" || at.kind === "material") && loaded
? { ...(loaded as Record<string, unknown>), ...(edited as Record<string, unknown>) } ? { ...(loaded as Record<string, unknown>), ...(edited as Record<string, unknown>) }
: edited; : edited;
const info = await saveTemplate(at.layer, at.kind, at.name, at.projectId, version, doc); const info = await saveTemplate(at.layer, at.kind, at.name, at.projectId, version, doc);
@@ -69,7 +69,7 @@
min-height: 240px; min-height: 240px;
} }
/* 산출근거 전체 편집 — `.ss` 는 height:100% 로 부모 높이를 받음 · 도면 편집과 같이 메인 칸을 화면 높이로 채움 */ /* 면적산출 · 재료산출 전체 편집 — `.ss` 는 height:100% 로 부모 높이를 받음 · 도면 편집과 같이 메인 칸을 화면 높이로 채움 */
.m02-main:has(> .m02-main__host > .ss) { .m02-main:has(> .m02-main__host > .ss) {
box-sizing: border-box; box-sizing: border-box;
height: calc(100vh - var(--spacing-64)); height: calc(100vh - var(--spacing-64));