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

refactor(M02): 항목 카드 넷 공용 틀 CardShell (PLAN 31-7)

Browse Source 
- 공용 틀 — 제목 줄(제목 · 저장 안 한 점 ● · 오른쪽 단추 자리) + 한 줄 부제(번호 · 이름 · 말줄임) · 상태(불러오는 중 · 실패 + 다시 불러오기 · 비었음) · [저장](늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 알림 글 한 벌) · ?(단축키 상자)
- 도면 정보 · 면적산출 · 재료산출(ItemCards) · 선택 입력(관리 화면 · 고르기 모달 값 카드)이 틀에 내용만 넣음
- 「〇〇 수정」 빈 단추 한 모양 · 엑셀 카드에도 ? · 불러오는 중 네 카드 · 실패는 카드 안 글(토스트 안 씀) · 물음 한 번(어느 카드든)
- 저장 길(saveTemplate · 도면 write · sheetEdit.save · 위 [저장] saveInputs) · 단축키는 그대로 · 고르기 모달은 보기만
- 시험 test_m02_card_shell 새로 · 옛 모양 시험 맞춤

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
eomsangdon
2026-09-30 21:24:49 +09:00
co-authored by Claude Opus 5.5
parent 2f7acff79f
commit bcb1c725c4
10 changed files with 500 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
M02_MasterTemplete/M02_MasterTemplete_CardShell.ts
+160
View File
@@ -0,0 +1,160 @@
/* =============================================================================
* M02_MasterTemplete_CardShell.ts
* 항목 카드 공용 틀(PLAN 31-7) — 도면 정보 · 면적산출 · 재료산출 · 선택 입력(관리 화면 · 고르기 모달)이
* 내용만 넣음. 모양 · 높이 · 스크롤은 `M02_MasterTemplete_Structure.css`.
* 머리 = 제목 줄(h3 · 제목 · 저장 안 한 점 ● · 오른쪽 단추 자리) + 한 줄 부제(번호 · 이름 · 넘치면 말줄임)
* 본문 = 카드 높이를 채움 · 넘치면 카드 안 스크롤 · 상태 = 불러오는 중 · 실패 + [다시 불러오기] · 비었음
* [저장](`saveControl`) = 늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 알림 글 한 벌 · ?(`helpButton`) = 단축키 상자
* 접기는 부모의 attachCollapsible(제목 줄 클릭) — 오른쪽 단추를 눌러도 접히지 않음.
* ========================================================================== */
import { createButton, el, showToast } from "@ui/ui_template_elements";
import { loadingError, showLoading } from "@ui/ui_template_loading";
import { StaleError } from "./M02_MasterTemplete_Api_Fetch";
export const CARD_TEXT = {
save: "저장",
saved: "저장했음",
failed: "저장 못 함 — {value}",
stale: "그 사이 바뀜 — 다시 읽음",
help: "?",
};
export interface CardShell {
root: HTMLElement;
body: HTMLElement;
/** 제목 줄 오른쪽 단추 자리 */
tools: HTMLElement;
/** 저장 안 한 고침 — 제목 옆 점(●) */
setDirty: (dirty: boolean) => void;
/** 0.3초 넘으면 본문에 「불러오는 중」 — 돌려받은 함수 = 끝 */
loading: () => () => void;
/** 실패 — 본문에 까닭 + [다시 불러오기](토스트 안 씀) */
fail: (reason: string, retry: () => void) => void;
/** 비었음 · 안내 글 한 모양 */
note: (text: string) => void;
/** 카드 안에 초점이 있을 때 Ctrl+S */
onSave: (run: () => void) => void;
}
export interface CardShellOptions {
title: string;
body: HTMLElement;
/** 부제 한 줄에 놓을 것(번호 · 이름 · 요약) */
sub?: HTMLElement[];
className?: string;
/** 상태 글을 그릴 칸 — 없으면 본문 */
stateHost?: HTMLElement;
}
export const cardNote = (text: string): HTMLElement =>
el("p", { className: "m02-struct__empty", text });
export function cardShell(opt: CardShellOptions): CardShell {
const dot = el("span", { className: "m02-struct__dot", text: "●", attrs: { hidden: "" } });
const tools = el("span", { className: "m02-struct__card-tools" });
tools.addEventListener("click", (event) => event.stopPropagation()); // 단추 누름 ≠ 접기
const root = el("section", {
className: `m02-struct__card ${opt.className ?? ""} ui-collapsible ui-sidebar-section ui-sidebar-card`,
children: [
el("h3", {
className: "ui-collapsible__title",
children: [el("span", { text: opt.title }), dot, tools],
}),
...(opt.sub ? [el("div", { className: "m02-struct__sub", children: opt.sub })] : []),
opt.body,
],
});
const host = opt.stateHost ?? opt.body;
let save: (() => void) | null = null;
root.addEventListener("keydown", (event) => {
if (!save || !(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "s") return;
event.preventDefault();
save();
});
return {
root,
body: opt.body,
tools,
setDirty: (dirty) => (dot.hidden = !dirty),
loading: () => showLoading(host),
fail: (reason, retry) => host.replaceChildren(loadingError(reason, retry)),
note: (text) => host.replaceChildren(cardNote(text)),
onSave: (run) => (save = run),
};
}
export interface SaveControl {
button: HTMLButtonElement;
dirty: () => boolean;
mark: (dirty: boolean) => void;
/** 저장 한 번(`run` 없으면 틀의 저장) — 알림 글은 여기서 한 벌 · 성공이면 true */
run: (save?: () => Promise<void>) => Promise<boolean>;
}
/** 카드 [저장] — 늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 저장 뒤 점 지움 · `onDirty` = 페이지에 알림 */
export function saveControl(
shell: CardShell,
save: () => Promise<void>,
onDirty?: (dirty: boolean) => void,
): SaveControl {
const button = createButton({ label: CARD_TEXT.save, variant: "filled", size: "sm" });
let dirty = false;
let saving = false;
const paint = (): void => {
button.disabled = !dirty || saving;
shell.setDirty(dirty);
};
const mark = (next: boolean): void => {
dirty = next;
paint();
onDirty?.(next);
};
const run = async (fn: () => Promise<void> = save): Promise<boolean> => {
if (saving) return false;
saving = true;
paint();
try {
await fn();
mark(false);
showToast(CARD_TEXT.saved, "success");
return true;
} catch (error) {
const why = error instanceof Error ? error.message : "";
showToast(
error instanceof StaleError ? CARD_TEXT.stale : CARD_TEXT.failed.replace("{value}", why),
"error",
);
return false;
} finally {
saving = false;
paint();
}
};
button.addEventListener("click", () => void run());
shell.onSave(() => void (dirty && run()));
paint();
return { button, dirty: () => dirty, mark, run };
}
/** ? — 단축키 상자(카드 오른쪽 위 · 누르면 보이고 숨김) · 상자는 본문 앞에 끼움(본문 채움 규칙 그대로) */
export function helpButton(shell: CardShell, title: string, keys: [string, string][]): HTMLElement {
const help = createButton({ label: CARD_TEXT.help, variant: "ghost", size: "sm" });
help.title = help.ariaLabel = title;
const box = el("div", {
className: "m02-struct__keys",
attrs: { hidden: "" },
children: [
el("strong", { text: title }),
el("dl", {
children: keys.flatMap(([key, what]) => [
el("dt", { text: key }),
el("dd", { text: what }),
]),
}),
],
});
help.addEventListener("click", () => (box.hidden = !box.hidden));
shell.root.insertBefore(box, shell.body);
return help;
}
M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts
+29 -86
View File
@@ -1,28 +1,22 @@
/* =============================================================================
* M02_MasterTemplete_DrawingCard.ts
* 항목 카드 「도면 정보」 미리보기 — 고칠 수 있으면 메뉴(제목줄 · 리본 · 패널 · 상태줄) 없이
* **단축키로 그리기 · 고치기**(전체 편집기 [도면 수정]과 같은 웹캐드 · 같은 단축키) · 카드 안 [저장]
* (전체 편집기와 같은 저장 길 = 그 항목 구조물 도면 파일 `도면` 칸만 갈아 끼움) · ? = 단축키 도움말
* (PLAN 31-4). 고칠 수 없으면(읽기 층 · 저장 길 없는 자료 자리) 예전처럼 보기만.
* **단축키로 그리기 · 고치기**(전체 편집기 [도면 수정]과 같은 웹캐드 · 같은 단축키) · 카드 [저장]
* (전체 편집기와 같은 저장 길 = 그 항목 구조물 도면 파일 `도면` 칸만 갈아 끼움 · PLAN 31-4).
* [저장] · ? · 점(●) · 알림 글은 공용 카드 틀(`M02_MasterTemplete_CardShell` · 31-7) — 여기는 CAD 와 저장 길만.
* 고칠 수 없으면(읽기 층 · 저장 길 없는 자료 자리) 예전처럼 보기만.
* CAD 앱은 안 고침 — 메뉴는 같은 출처 iframe 에 스타일을 얹어 숨김.
* ========================================================================== */
import { createButton, el, showToast } from "@ui/ui_template_elements";
import { StaleError, type StructureDoc } from "./M02_MasterTemplete_Api_Fetch";
import type { StructureDoc } from "./M02_MasterTemplete_Api_Fetch";
import type { SaveControl } from "./M02_MasterTemplete_CardShell";
import { mountDrawingTemplate, type DrawingTemplateDoc } from "./M02_MasterTemplete_Drawing";
import type { ItemSource } from "./M02_MasterTemplete_ItemSource";
const TEXT = {
save: "저장",
help: "?",
helpTitle: "단축키 — 글자를 치고 Enter",
saved: "도면을 저장함",
stale: "그 사이 도면이 바뀜 — 항목을 다시 골라 새로 읽음",
failed: "도면을 저장 못 함 — {value}",
};
export const DRAWING_HELP = "단축키 — 글자를 치고 Enter";
/** 단축키 도움말 — 전체 편집기 명령 별칭(openwebcad `commands.*.ts`)과 같은 것만 */
const KEYS: [string, string][] = [
export const DRAWING_KEYS: [string, string][] = [
["L · PL", "선 · 폴리선"],
["C · A · REC", "원 · 호 · 사각형"],
["T · DT", "글(여러 줄 · 한 줄)"],
@@ -58,6 +52,10 @@ function hideChrome(frame: HTMLIFrameElement, css: string): void {
apply();
}
/** 고칠 수 있나 — 층 권한 + 자료 자리에 저장 길(`write`) */
export const drawingEditable = (editable: boolean, source: ItemSource): boolean =>
editable && !!source.write;
export interface DrawingCardOptions {
/** 구조물 도면 문서 통째(`도번` · `도면` …) — 저장은 `도면` 칸만 갈아 끼움 */
doc: StructureDoc;
@@ -67,75 +65,29 @@ export interface DrawingCardOptions {
column: string;
/** 고칠 권한(층) — 자료 자리에 저장 길(`write`)도 있어야 고치기 */
editable: boolean;
/** 저장 안 한 고침이 생김 · 없어짐 */
onDirty?: (dirty: boolean) => void;
/** 카드 [저장] · 점(●) — 공용 틀(31-7) */
saver: SaveControl;
}
export interface DrawingCardHandle {
/** 카드 머리에 붙일 [저장] · ? (보기만이면 빈 칸) */
tools: HTMLElement;
dirty: () => boolean;
/** 고친 것이 있으면 카드 [저장]과 같이 저장 — 못 하면 던짐(위 [저장]이 먼저 부름) */
save: () => Promise<void>;
/** 저장 길 한 번(카드 [저장] · 위 [저장]이 틀의 `run` 으로 부름) — 못 하면 던짐 */
write: () => Promise<void>;
destroy: () => void;
}
export function mountDrawingCard(host: HTMLElement, opt: DrawingCardOptions): DrawingCardHandle {
const write = opt.source.write;
const edit = opt.editable && !!write;
const edit = drawingEditable(opt.editable, opt.source);
let doc = opt.doc;
let version = opt.version ?? "";
let dirty = false;
let saving = false;
const save = createButton({ label: TEXT.save, variant: "filled", size: "sm" });
const help = createButton({ label: TEXT.help, variant: "ghost", size: "sm" });
help.title = help.ariaLabel = TEXT.helpTitle;
const helpBox = el("div", {
className: "m02-struct__keys",
attrs: { hidden: "" },
children: [
el("strong", { text: TEXT.helpTitle }),
el("dl", {
children: KEYS.flatMap(([key, what]) => [
el("dt", { text: key }),
el("dd", { text: what }),
]),
}),
],
});
help.addEventListener("click", () => (helpBox.hidden = !helpBox.hidden));
const setDirty = (next: boolean): void => {
dirty = next;
save.disabled = !next || saving;
opt.onDirty?.(next);
};
/** 전체 편집기 [저장]과 같은 길 — 읽은 문서에 `도면` 만 갈아 끼워 그 항목 파일에 */
/** 전체 편집기 [저장]과 같은 길 — 읽은 문서에 `도면` 만 갈아 끼워 그 항목 파일에(실패는 던짐) */
async function doSave(drawing?: DrawingTemplateDoc): Promise<void> {
if (!write || saving) return;
saving = true;
save.disabled = true;
try {
const next = { ...doc, 도면: (drawing ?? (await handle.getDoc())) as StructureDoc["도면"] };
version = (await write("structure", opt.column, version, next)).판;
doc = next;
setDirty(false);
showToast(TEXT.saved, "success");
} catch (error) {
const why = error instanceof Error ? error.message : "";
showToast(
error instanceof StaleError ? TEXT.stale : TEXT.failed.replace("{value}", why),
"error",
);
} finally {
saving = false;
save.disabled = !dirty;
}
if (!write) return;
const next = { ...doc, 도면: (drawing ?? (await handle.getDoc())) as StructureDoc["도면"] };
version = (await write("structure", opt.column, version, next)).판;
doc = next;
}
save.addEventListener("click", () => void doSave());
save.disabled = true;
const handle = mountDrawingTemplate(host, doc.도면 as unknown as DrawingTemplateDoc, {
readOnly: !edit,
@@ -146,23 +98,14 @@ export function mountDrawingCard(host: HTMLElement, opt: DrawingCardOptions): Dr
preview: !edit, // 보기만 = 왼쪽 끌기 화면 옮기기 · 고치기 = 누름 고르기 · 단축키
originMarker: true, // 좌표 0,0 기준점 십자
noArea: true, // 구조물도는 도각이 없음
...(edit ? { onChanged: setDirty, onSave: (drawing) => doSave(drawing) } : {}),
...(edit
? {
onChanged: (dirty: boolean) => opt.saver.mark(dirty),
onSave: (drawing: DrawingTemplateDoc) => void opt.saver.run(() => doSave(drawing)),
}
: {}),
});
const frame = host.querySelector("iframe");
if (frame) hideChrome(frame, edit ? HIDE_EDIT : HIDE_VIEW);
if (edit) host.append(helpBox);
return {
tools: el("span", { className: "m02-struct__tools", children: edit ? [help, save] : [] }),
dirty: () => dirty,
save: async () => {
if (!dirty) return;
await doSave();
if (dirty) throw new Error(TEXT.failed.replace("{value}", ""));
},
destroy: () => {
handle.destroy();
helpBox.remove();
},
};
return { write: () => doSave(), destroy: () => handle.destroy() };
}
M02_MasterTemplete/M02_MasterTemplete_Inputs.ts
+37 -37
View File
@@ -41,6 +41,7 @@ import {
type SeatMap,
type ValueDoc,
} from "./M02_MasterTemplete_Inputs_Model";
import { cardNote, cardShell } from "./M02_MasterTemplete_CardShell";
import "./M02_MasterTemplete_Inputs.css";
const TEXT = {
@@ -54,7 +55,6 @@ const TEXT = {
noLogic: "이 일위대가에 담긴 로직이 없음",
missing: "빠진 로직 {value}",
failed: "입력 목록을 못 받음 — {value}",
loading: "입력 목록을 받는 중…",
seat: "자리",
};
@@ -98,12 +98,9 @@ export function createInputsCard(opts: InputsCardOptions): InputsCardHandle {
const summary = el("div", { className: "m02-inputs__summary" });
const body = el("div", { className: "m02-inputs__body" });
const root = el("section", {
className: "m02-struct__card m02-inputs ui-collapsible ui-sidebar-section ui-sidebar-card",
children: [el("h3", { className: "ui-collapsible__title", text: TEXT.title }), summary, body],
});
const note = (text: string): HTMLElement => el("p", { className: "m02-struct__empty", text });
// 공용 카드 틀(31-7) — 부제 = 요약 · [저장]은 없음(집계표 [저장]과 함께) · 점(●) = 고른 것 저장 전
const shell = cardShell({ title: TEXT.title, className: "m02-inputs", sub: [summary], body });
const root = shell.root;
const clear = (): void => {
summary.replaceChildren();
body.replaceChildren();
@@ -163,6 +160,7 @@ export function createInputsCard(opts: InputsCardOptions): InputsCardHandle {
else draft.seats.delete(key);
draft.dirty = true;
paintSummary(draft);
shell.setDirty(true);
opts.onDirty();
});
const hint = valueHint(input);
@@ -199,31 +197,32 @@ export function createInputsCard(opts: InputsCardOptions): InputsCardHandle {
);
const missing = draft.list.빠진로직;
body.replaceChildren(
...(groups.length ? groups : [note(TEXT.noLogic)]),
...(missing.length ? [note(fill(TEXT.missing, { value: missing.join(", ") }))] : []),
...(groups.length ? groups : [cardNote(TEXT.noLogic)]),
...(missing.length ? [cardNote(fill(TEXT.missing, { value: missing.join(", ") }))] : []),
);
}
async function show(colId: string | null, combo: string | null): Promise<void> {
const mine = ++seq;
clear();
shell.setDirty(!!colId && !!drafts.get(colId)?.dirty);
if (!colId) return;
const kept = drafts.get(colId);
if (kept) return paint(kept);
body.replaceChildren(note(TEXT.loading));
const stop = shell.loading(); // 0.3초 넘으면 「불러오는 중」(31-7 · 네 카드 같게)
try {
const layer: Layer = getActiveLayer();
const row = (await itemRows()).find((r) => r.열 === colId);
if (mine !== seq) return;
if (!row) return void body.replaceChildren(note(combo ? TEXT.unsavedCombo : TEXT.noItem));
if (!row.일위대가)
return void body.replaceChildren(note(combo ? TEXT.unsavedCombo : TEXT.noCombo));
stop();
if (!row) return shell.note(combo ? TEXT.unsavedCombo : TEXT.noItem);
if (!row.일위대가) return shell.note(combo ? TEXT.unsavedCombo : TEXT.noCombo);
const [list, links] = await Promise.all([
fetchItemInputs(layer, row.key),
readInputLinks(layer, row.key),
]);
if (mine !== seq) return;
if (!list.일위대가) return void body.replaceChildren(note(TEXT.noCombo));
if (!list.일위대가) return shell.note(TEXT.noCombo);
const draft: Draft = {
key: row.key,
판: links.판,
@@ -234,7 +233,11 @@ export function createInputsCard(opts: InputsCardOptions): InputsCardHandle {
drafts.set(colId, draft);
paint(draft);
} catch (error) {
if (mine === seq) body.replaceChildren(note(fill(TEXT.failed, { value: why(error) })));
// 실패 = 카드 안 까닭 + [다시 불러오기](31-7)
if (mine === seq)
shell.fail(fill(TEXT.failed, { value: why(error) }), () => void show(colId, combo));
} finally {
stop();
}
}
@@ -255,6 +258,7 @@ export function createInputsCard(opts: InputsCardOptions): InputsCardHandle {
draft.판 = got.판;
draft.dirty = false;
}
shell.setDirty(false);
},
invalidate: () => {
rows = null;
@@ -307,7 +311,9 @@ export interface InputsValueOptions {
export interface InputsValueHandle {
root: HTMLElement;
/** 자료를 바꿔 끼움 — `null` 은 못 읽은 경우(까닭 글 `note`) */
set: (data: InputsValueData | null, note?: string) => void;
set: (data: InputsValueData | null, note?: string, retry?: () => void) => void;
/** 목록을 받는 동안 0.3초 넘으면 「불러오는 중」(31-7) — 돌려받은 함수 = 끝 */
loading: () => () => void;
/** 지금 값(확인한 것 · 값이 든 것만) */
getValues: () => ValueDoc;
/** 범위 밖 값이 없나 */
@@ -342,14 +348,15 @@ export function createInputsValueCard(opts: InputsValueOptions): InputsValueHand
if (opts.onEdit) edit.addEventListener("click", opts.onEdit);
const places = el("p", { className: "m02-inputval__places" });
const body = el("div", { className: "m02-struct__sheet m02-inputval" });
const root = el("section", {
className: "m02-struct__card ui-collapsible ui-sidebar-section ui-sidebar-card",
children: [
el("h3", { className: "ui-collapsible__title", text: TEXT.title }),
el("div", { className: "m02-struct__subhead", children: [summary, edit] }),
el("div", { className: "m02-inputval__wrap", children: [places, body] }),
],
// 공용 카드 틀(31-7) — 부제 = 확인 n/m · 제목 줄 오른쪽 = [선택 입력 수정] · 상태 글은 목록 칸에
const shell = cardShell({
title: TEXT.title,
sub: [summary],
body: el("div", { className: "m02-inputval__wrap", children: [places, body] }),
stateHost: body,
});
shell.tools.append(edit);
const root = shell.root;
const groups = (): ReturnType<typeof pickedGroups> =>
data ? pickedGroups(data.list, data.link) : [];
@@ -485,18 +492,13 @@ export function createInputsValueCard(opts: InputsValueOptions): InputsValueHand
return el("div", { className: "m02-inputval__cell", children: [control, box, state, error] });
};
const paint = (note?: string): void => {
const paint = (note?: string, retry?: () => void): void => {
invalid = 0;
paintSummary();
if (!data) {
places.textContent = "";
body.replaceChildren(
el("p", {
className: "m02-struct__empty",
text: note ? fill(VALUE_TEXT.noList, { value: note }) : VALUE_TEXT.none,
}),
);
return;
if (note && retry) return shell.fail(fill(VALUE_TEXT.noList, { value: note }), retry);
return shell.note(note ? fill(VALUE_TEXT.noList, { value: note }) : VALUE_TEXT.none);
}
const seats = [...seatsOf(data.link).values()];
const area = seats.filter((seat) => seat === "면적").length;
@@ -512,10 +514,7 @@ export function createInputsValueCard(opts: InputsValueOptions): InputsValueHand
]
: [];
if (!shown.length) {
body.replaceChildren(
el("p", { className: "m02-struct__empty", text: VALUE_TEXT.none }),
...missing,
);
body.replaceChildren(cardNote(VALUE_TEXT.none), ...missing);
return;
}
body.replaceChildren(
@@ -552,11 +551,12 @@ export function createInputsValueCard(opts: InputsValueOptions): InputsValueHand
return {
root,
set: (next, note) => {
set: (next, note, retry) => {
data = next;
values = next ? structuredClone(next.values) : {};
paint(note);
paint(note, retry);
},
loading: () => shell.loading(),
getValues: () => {
// 확인한 것 · 값이 든 것만 — 입력 목록에서 없어진 입력은 그대로 둠(다음 가져오기가 정함)
const out: ValueDoc = {};
M02_MasterTemplete/M02_MasterTemplete_ItemCards.ts
+145 -139
View File
@@ -3,23 +3,36 @@
* 항목 카드 — 도면 정보 · 면적산출 · 재료산출(보기만 + [수정]) + 덧붙는 카드(선택 입력 …).
* M02 구조물 설계 컨테이너(`M02_MasterTemplete_Structure.ts`)에서 떼어 냄(계획서 25-2d) — 항목 고르기
* 모달(`ui_template_item_picker_detail.ts`)이 **같은 카드**를 쓰려고. 문서를 어디서 읽는지는
* 자료 자리(`ItemSource`)가 정함 · 카드는 몰라도 됨. 모양(클래스 · DOM)은 옮기기 전과 같음.
* 자료 자리(`ItemSource`)가 정함 · 카드는 몰라도 됨.
* 카드 겉 틀 · 제목 줄 · 부제 · [저장] · ? · 점(●) · 상태 글은 공용 틀(`M02_MasterTemplete_CardShell` · 31-7).
* 면적산출 · 재료산출 = 스프레드시트 · 부품은 카드를 열 때만 `import()`(다른 페이지 번들에 안 섞임).
* 덧붙는 카드는 `extraCards` 로 끼움 — 선택 입력 카드(`M02_MasterTemplete_InputsCard.ts`)가 그 자리.
* 덧붙는 카드는 `extraCards` 로 끼움 — 선택 입력 카드(`M02_MasterTemplete_Inputs.ts`)가 그 자리.
* `sheetEdit` 가 있으면 면적산출 · 재료산출 카드를 미리보기에서 고침(31-3) — 스프레드시트 `preview`(메뉴 없이
* 수식 입력 줄 · 칸 고침 · 단축키) + 아래 알약 줄 + 카드 [저장] · 없으면 보기만(고르기 모달).
* ========================================================================== */
import { createButton, el, showConfirmDialog, showToast } from "@ui/ui_template_elements";
import { createButton, el, showConfirmDialog } from "@ui/ui_template_elements";
import { attachCollapsible } from "@ui/ui_template_collapsible";
import { showLoading } from "@ui/ui_template_loading";
import type {
LinkOptions,
SpreadsheetHandle,
Workbook,
} from "../A00_Common/spreadsheet/spreadsheet";
import type { StructureDoc, StructureNumbers } from "./M02_MasterTemplete_Api_Fetch";
import { mountDrawingCard, type DrawingCardHandle } from "./M02_MasterTemplete_DrawingCard";
import {
cardShell,
helpButton,
saveControl,
type CardShell,
type SaveControl,
} from "./M02_MasterTemplete_CardShell";
import {
DRAWING_HELP,
DRAWING_KEYS,
drawingEditable,
mountDrawingCard,
type DrawingCardHandle,
} from "./M02_MasterTemplete_DrawingCard";
import type { ItemPart, ItemSource } from "./M02_MasterTemplete_ItemSource";
import "./M02_MasterTemplete_Structure.css";
@@ -46,28 +59,29 @@ const TEXT = {
noSheetDoc: "{value} 없음",
noFieldNumber: "{value} 없음",
noSheet: "스프레드시트를 못 띄움 — {value}",
readFailed: "구조물 도면을 못 읽음 — {value}",
discard: "도면 카드에 저장 안 한 고침이 있음 — 버리고 다른 항목을 열까요?",
save: "저장",
saved: "저장했음",
saveFailed: "저장 못 함 — {value}",
readFailed: "{value} 파일을 못 읽음 — {why}",
discard: "카드에 저장 안 한 고침이 있음 — 버리고 다른 항목을 열까요?",
sheetHelp: "단축키 — 칸을 고르고 바로 침",
};
/** 엑셀 카드 단축키 — 스프레드시트 미리보기(`spreadsheet_keys.ts`)가 받는 것만 */
const SHEET_KEYS: [string, string][] = [
["글자 · Enter · F2", "칸 고침(= 로 시작하면 식)"],
["화살표 · Tab · Enter", "칸 옮기기"],
["Shift+화살표 · Ctrl+A", "고르기 · 전부"],
["Delete · Backspace", "비우기 · 새로 쓰기"],
["Ctrl+C · Ctrl+V", "복사 · 붙여넣기"],
["Ctrl+D · Ctrl+R", "아래로 · 오른쪽으로 채우기"],
["Ctrl+Z · Ctrl+Y", "되돌리기 · 다시 하기"],
["Esc", "고침 멈춤"],
["Ctrl+S", "저장(카드 [저장]과 같음)"],
];
const why = (error: unknown): string => (error instanceof Error ? error.message : "");
const fill = (text: string, value: string): string => text.replace("{value}", value);
/** 스프레드시트는 면적산출 · 재료산출 카드를 열 때만 받음 */
const loadSpreadsheet = () => import("../A00_Common/spreadsheet/spreadsheet");
/** 카드 틀 — 제목 + 머리 + 본문(좌측 패널과 같은 공용 ui-sidebar 카드) */
export const itemCard = (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],
});
export const itemNote = (text: string): HTMLElement =>
el("p", { className: "m02-struct__empty", text });
export interface ItemCardsOptions {
/** 지금 자료 자리 — 열을 읽을 때마다 부름(층이 바뀌어도 따라감) */
source: () => ItemSource;
@@ -77,11 +91,11 @@ export interface ItemCardsOptions {
onEdit: (kind: EditKind) => void;
/** 문서에 번호가 없을 때 쓸 번호(집계표 번호 줄) */
numberOf?: (kind: EditKind, column: string) => string | undefined;
/** 도면을 못 읽었을 때 알릴까 — 기본 알림(M02 는 번호가 있는 열만) */
/** 못 읽었을 때 카드에 까닭을 보일까 — 기본 보임(M02 는 번호가 있는 열만 · 없는 열은 「없음」) */
warnOnFail?: (column: string) => boolean;
/** 세 카드 뒤에 덧붙는 카드(선택 입력 …) */
extraCards?: HTMLElement[];
/** 도면 카드에서 저장 안 한 고침이 생김 · 없어짐(PLAN 31-4) */
/** 카드 가운데 하나라도 저장 안 한 고침이 생김 · 없어짐(PLAN 31-4 · 31-7) */
onDirty?: (dirty: boolean) => void;
/** 면적산출 · 재료산출 카드를 미리보기에서 고침(31-3) — 없으면 보기만 */
sheetEdit?: SheetEditOptions;
@@ -130,82 +144,84 @@ export interface ItemCardsHandle {
destroy: () => void;
}
/** 카드 하나 — 틀 · [저장] · ? · [수정] · 부제 번호 · 이름 */
interface Card {
kind: EditKind;
shell: CardShell;
saver: SaveControl;
help: HTMLElement;
edit: HTMLButtonElement;
no: HTMLElement;
name: HTMLElement;
}
export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
let column: string | null = null;
let label = "";
let doc: StructureDoc | null = null;
let docVersion: string | null = null;
let preview: DrawingCardHandle | null = null;
let seq = 0;
const numberOf = (kind: EditKind, id: string): string => opts.numberOf?.(kind, id) ?? "";
const anyDirty = (): boolean => cards.some((c) => c.saver.dirty());
const reload = (): void => void load(column ? { id: column, label } : null, true);
/** 카드 틀 하나 — 제목 줄 오른쪽 = ? · [저장] · [〇〇 수정](빈 단추 한 모양) · 부제 = 번호 · 이름 */
const makeCard = (
kind: EditKind,
title: string,
body: HTMLElement,
save: () => Promise<void>,
) => {
const no = el("span", { className: "m02-struct__no" });
const name = el("span", { className: "m02-struct__title" });
const shell = cardShell({ title, body, sub: [no, name] });
const saver = saveControl(shell, save, () => opts.onDirty?.(anyDirty()));
const help = helpButton(
shell,
kind === "structure" ? DRAWING_HELP : TEXT.sheetHelp,
kind === "structure" ? DRAWING_KEYS : SHEET_KEYS,
);
const edit = createButton({
label: kind === "structure" ? TEXT.edit : fill(TEXT.editSheet, PART_WORD[kind]),
variant: "ghost",
size: "sm",
});
edit.addEventListener("click", () => opts.onEdit(kind));
shell.tools.append(help, saver.button, edit);
return { kind, shell, saver, help, edit, no, name };
};
const columnName = el("span", { className: "m02-struct__title" });
const number = el("span", { className: "m02-struct__no" });
const edit = createButton({ label: TEXT.edit, variant: "filled", size: "sm" });
const previewHost = el("div", { className: "m02-struct__preview" });
const drawingTools = el("span"); // 카드 안 ? · [저장](31-4 · 고칠 수 있을 때)
const infoCard = itemCard(
TEXT.drawingInfo,
el("div", {
className: "m02-struct__head",
children: [number, columnName, drawingTools, edit],
}),
previewHost,
const info = makeCard("structure", TEXT.drawingInfo, previewHost, () =>
preview ? preview.write() : Promise.resolve(),
);
/** 면적산출 · 재료산출 카드 — 번호 · [수정] · 스프레드시트 미리보기 */
interface SheetCard {
/** 면적산출 · 재료산출 카드 — 스프레드시트 미리보기 · 카드 고침(31-3) */
interface SheetCard extends Card {
kind: SheetKind;
root: HTMLElement;
no: HTMLElement;
edit: HTMLButtonElement;
host: HTMLElement;
doc: Workbook | null;
number: string;
handle: SpreadsheetHandle | null;
/** 카드 고침(31-3) — [저장] · 읽은 판 · 저장 안 한 고침 */
save: HTMLButtonElement;
version: string;
dirty: boolean;
}
const sheetCard = (kind: SheetKind): SheetCard => {
const no = el("span", { className: "m02-struct__no" });
const editButton = createButton({
label: fill(TEXT.editSheet, PART_WORD[kind]),
variant: "ghost",
size: "sm",
});
const host = el("div", { className: "m02-struct__sheet" });
const save = createButton({ label: TEXT.save, variant: "filled", size: "sm" });
save.hidden = true;
editButton.addEventListener("click", () => opts.onEdit(kind));
const card: SheetCard = {
const card = {
...makeCard(kind, PART_WORD[kind], host, () => saveSheet(card)),
kind,
root: itemCard(
PART_WORD[kind],
el("div", { className: "m02-struct__subhead", children: [no, editButton, save] }),
host,
),
no,
edit: editButton,
host,
doc: null,
number: "",
handle: null,
save,
version: "",
dirty: false,
};
save.addEventListener("click", () => void saveCard(card).catch(() => undefined));
} as SheetCard;
return card;
};
const sheets = [sheetCard("area"), sheetCard("material")];
edit.addEventListener("click", () => opts.onEdit("structure"));
const buttons: Record<EditKind, HTMLButtonElement> = {
structure: edit,
area: sheets[0].edit,
material: sheets[1].edit,
};
const cards: Card[] = [info, ...sheets];
const defaults: Record<EditKind, string> = {
structure: TEXT.edit,
area: fill(TEXT.editSheet, PART_WORD.area),
@@ -215,42 +231,38 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
const root = el("div", {
className: "m02-struct ui-sidebar-panel",
attrs: { hidden: "" },
children: [infoCard, ...sheets.map((c) => c.root), ...(opts.extraCards ?? [])],
children: [...cards.map((c) => c.shell.root), ...(opts.extraCards ?? [])],
});
attachCollapsible(root);
/** [저장] · ? 는 고칠 수 있는 카드에서 늘 보임(고쳐야 켜짐) · [수정] 은 editable 일 때 */
const paintTools = (): void => {
const drawEdit = drawingEditable(opts.editable(), opts.source());
const sheetEdit = !!opts.sheetEdit?.can();
for (const c of cards) {
const can = c.kind === "structure" ? drawEdit : sheetEdit;
c.saver.button.hidden = c.help.hidden = !can;
c.edit.hidden = !opts.editable();
}
};
const drop = (): void => {
preview?.destroy();
preview = null;
drawingTools.replaceChildren();
for (const c of sheets) {
c.handle?.destroy();
c.handle = null;
c.dirty = false;
c.save.hidden = true;
}
for (const c of cards) c.saver.mark(false);
};
/** 카드 [저장] — 읽은 문서(번호 등 계약 밖 칸)에 시트를 덮어 저장(전체 편집기 `doSave` 와 같은 모양) */
async function saveCard(c: SheetCard): Promise<void> {
/** 카드 [저장] 길 — 읽은 문서(번호 등 계약 밖 칸)에 시트를 덮어 저장(전체 편집기 `doSave` 와 같은 모양) */
async function saveSheet(c: SheetCard): Promise<void> {
const at = column;
if (!opts.sheetEdit || !c.handle || !c.dirty || !at) return;
const doc = {
...(c.doc as unknown as Record<string, unknown>),
...c.handle.getDoc(),
} as Workbook;
c.save.disabled = true;
try {
c.version = await opts.sheetEdit.save(c.kind, at, doc, c.version);
c.doc = doc;
c.dirty = false;
showToast(TEXT.saved, "success");
} catch (error) {
showToast(fill(TEXT.saveFailed, why(error)), "error");
throw error;
} finally {
c.save.disabled = !c.dirty;
}
if (!opts.sheetEdit || !c.handle || !at) return;
const next = { ...(c.doc as unknown as Record<string, unknown>), ...c.handle.getDoc() };
c.version = await opts.sheetEdit.save(c.kind, at, next, c.version);
c.doc = next as Workbook;
}
/** 미리보기 수정 — 메뉴 없이 수식 입력 줄 · 칸 고침 · 아래 알약 줄 · 덧붙는 판(재료산출 = 자재 조합) */
@@ -262,32 +274,28 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
const grid = el("div", { className: "m02-struct__sheet-grid" });
c.host.classList.add("is-edit");
c.host.replaceChildren(grid);
const mountGrid = (doc: Workbook, links: LinkOptions | undefined): void => {
const mountGrid = (book: Workbook, links: LinkOptions | undefined): void => {
c.handle?.destroy();
c.handle = create(grid, doc, {
c.handle = create(grid, book, {
preview: true,
tabs: false,
links,
onChange: () => {
c.dirty = true;
c.save.disabled = false;
c.saver.mark(true);
extra.refresh?.();
},
});
};
const control: SheetCardControl = {
column: column ?? "",
label: columnName.textContent ?? "",
label,
host: c.host,
handle: () => c.handle,
remount: (links) => {
const kept = c.handle?.getDoc();
if (kept) mountGrid(kept, links);
},
touched: () => {
c.dirty = true;
c.save.disabled = false;
},
touched: () => c.saver.mark(true),
};
// 알약을 못 받아도 칸은 고침 — 알약 줄만 없음
const extra: Awaited<ReturnType<SheetEditOptions["links"]>> = await opts
@@ -296,42 +304,33 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
if (mine !== seq || !c.doc) return;
mountGrid(c.doc, extra.links);
if (extra.below) c.host.append(extra.below);
c.save.hidden = false;
c.save.disabled = true;
};
/** 스프레드시트 미리보기 — 보기만(고침은 [수정] 이 여는 전체 화면) · 부품을 늦게 받음 ·
* 그 사이 열이 바뀌면 버림 */
const paintSheet = async (c: SheetCard, mine: number): Promise<void> => {
if (!c.doc)
return void c.host.replaceChildren(itemNote(fill(TEXT.noSheetDoc, PART_WORD[c.kind])));
if (!c.doc) return;
try {
const { createSpreadsheet } = await loadSpreadsheet();
if (mine !== seq || !c.doc) return;
if (opts.sheetEdit?.can()) return await paintEditable(c, mine, createSpreadsheet);
c.handle = createSpreadsheet(c.host, c.doc, { readOnly: true, tabs: false });
} catch (error) {
if (mine === seq) c.host.replaceChildren(itemNote(fill(TEXT.noSheet, why(error))));
if (mine === seq) c.shell.fail(fill(TEXT.noSheet, why(error)), reload);
}
};
/** 미리보기 · 스프레드시트 — 문서가 없으면 없음 글(서버가 열마다 미리 만들어 둬 보통은 없음) */
const paintBody = (mine: number): void => {
drop();
const at = column ?? "";
number.textContent = doc?.도번 || numberOf("structure", at) || TEXT.noNumber;
edit.hidden = !opts.editable();
paintTools();
info.no.textContent = doc?.도번 || numberOf("structure", at) || TEXT.noNumber;
for (const c of sheets) {
c.no.textContent =
c.number || numberOf(c.kind, at) || fill(TEXT.noFieldNumber, PART_FIELD[c.kind]);
c.edit.hidden = !opts.editable();
c.host.replaceChildren();
void paintSheet(c, mine);
}
if (!doc) {
previewHost.replaceChildren(itemNote(TEXT.noDrawing));
return;
}
if (!doc) return;
previewHost.replaceChildren();
// 미리보기 — 고칠 수 있으면 메뉴 없이 단축키로 고치고 카드 [저장](31-4 · `DrawingCard`)
preview = mountDrawingCard(previewHost, {
@@ -340,17 +339,26 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
source: opts.source(),
column: at,
editable: opts.editable(),
onDirty: (d) => opts.onDirty?.(d),
saver: info.saver,
});
drawingTools.replaceChildren(preview.tools);
};
async function load(col: { id: string; label: string } | null): Promise<void> {
// 도면 카드 고침을 저장 안 했으면 버릴지 물음 — 취소면 보던 열 그대로
if (preview?.dirty() && col?.id !== column && !(await showConfirmDialog(TEXT.discard))) return;
/** 못 읽음 — 번호 있는 열이면 카드 안 까닭 + [다시 불러오기] · 없는 열이면 「없음」 */
const missing = (c: Card, reason: unknown, empty: string): void => {
if (opts.warnOnFail?.(column ?? "") ?? true)
c.shell.fail(
TEXT.readFailed.replace("{value}", PART_WORD[c.kind]).replace("{why}", why(reason)),
reload,
);
else c.shell.note(empty);
};
async function load(col: { id: string; label: string } | null, again = false): Promise<void> {
// 카드 고침을 저장 안 했으면 버릴지 물음(한 번) — 취소면 보던 열 그대로
if (!again && anyDirty() && col?.id !== column && !(await showConfirmDialog(TEXT.discard)))
return;
const mine = ++seq;
drop();
opts.onDirty?.(false);
if (!col) {
root.hidden = true;
column = null;
@@ -359,8 +367,9 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
}
root.hidden = false;
column = col.id;
columnName.textContent = col.label;
number.textContent = numberOf("structure", col.id) || TEXT.noNumber;
label = col.label;
for (const c of cards) c.name.textContent = label;
info.no.textContent = numberOf("structure", col.id) || TEXT.noNumber;
doc = null;
docVersion = null;
previewHost.replaceChildren();
@@ -372,8 +381,8 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
c.host.replaceChildren();
}
const source = opts.source();
// 0.3초 넘으면 카드마다 칸 안 「불러오는 중」(PLAN 30-6) · 못 읽은 것은 아래 그대로(알림 · 「없음」)
const stops = [previewHost, ...sheets.map((c) => c.host)].map((host) => showLoading(host));
// 0.3초 넘으면 카드마다 칸 안 「불러오는 중」(PLAN 30-6 · 31-7)
const stops = cards.map((c) => c.shell.loading());
const [drawing, ...books] = await Promise.allSettled([
source.read("structure", col.id),
...sheets.map((c) => source.read(c.kind, col.id)),
@@ -383,13 +392,11 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
if (drawing.status === "fulfilled") {
doc = drawing.value.문서 as StructureDoc;
docVersion = drawing.value.판 ?? null;
}
// 도번 목록에 있는 열인데 못 읽으면 알림 — 없는 열은 그냥 「도면 없음」
else if (opts.warnOnFail?.(col.id) ?? true)
showToast(fill(TEXT.readFailed, why(drawing.reason)), "error");
} else missing(info, drawing.reason, TEXT.noDrawing);
books.forEach((got, i) => {
if (got.status !== "fulfilled") return;
const c = sheets[i];
if (got.status !== "fulfilled")
return missing(c, got.reason, fill(TEXT.noSheetDoc, PART_WORD[c.kind]));
const book = got.value.문서 as Workbook & Record<string, unknown>;
c.doc = book;
c.version = String((got.value as { 판?: string | null }).판 ?? "");
@@ -400,22 +407,21 @@ export function createItemCards(opts: ItemCardsOptions): ItemCardsHandle {
return {
root,
load,
setLabel: (label) => {
columnName.textContent = label;
load: (col) => load(col),
setLabel: (next) => {
label = next;
for (const c of cards) c.name.textContent = next;
},
relabel: (labels) => {
for (const kind of Object.keys(buttons) as EditKind[]) {
const button = buttons[kind];
(button.querySelector(".ui-btn__label") ?? button).textContent =
labels[kind] ?? defaults[kind];
for (const c of cards) {
(c.edit.querySelector(".ui-btn__label") ?? c.edit).textContent =
labels[c.kind] ?? defaults[c.kind];
}
},
column: () => column,
dirty: () => !!preview?.dirty() || sheets.some((c) => c.dirty),
dirty: anyDirty,
saveAll: async () => {
await preview?.save(); // 도면 카드(31-4)
for (const c of sheets) await saveCard(c);
for (const c of cards) if (c.saver.dirty() && !(await c.saver.run())) throw new Error();
},
discard: () => {
drop();
M02_MasterTemplete/M02_MasterTemplete_Structure.css
+49 -37
View File
@@ -64,30 +64,61 @@
display: none;
}
.m02-struct__head,
.m02-struct__subhead {
display: flex;
align-items: center;
gap: var(--spacing-12);
min-width: 0;
/* 공용 카드 틀(PLAN 31-7 · CardShell) — 제목 줄 = 제목 · 점(●) · 오른쪽 단추 자리 · 부제 한 줄 = 번호 · 이름 */
.m02-struct__card {
position: relative; /* ? 단축키 상자 자리 */
}
/* 머리 = 번호 · [수정] 한 줄, 이름은 그 아래 전체 폭 — 긴 이름도 잘리지 않게 줄바꿈 */
.m02-struct__head {
flex-wrap: wrap;
.m02-struct__card > .ui-collapsible__title {
gap: var(--spacing-8);
}
.m02-struct__dot {
color: var(--color-accent);
font-size: 0.75em;
}
.m02-struct__dot[hidden] {
display: none;
}
.m02-struct__card-tools {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--spacing-8);
margin-left: auto;
font-weight: normal;
}
.m02-struct__card-tools .ui-btn {
white-space: nowrap;
}
.m02-struct__sub {
display: flex;
align-items: center;
gap: var(--spacing-8);
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
/* 넘치면 말줄임 — 번호는 그대로 · 이름 · 요약이 줄어듦 */
.m02-struct__sub > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.m02-struct__title {
order: 1;
flex: 1 0 100%;
min-width: 0;
margin: 0;
flex: 1 1 auto;
color: var(--color-text);
font-size: var(--text-body);
overflow-wrap: anywhere; /* 이름이 길어도 잘리지 않게 줄바꿈 */
}
.m02-struct__no {
flex: none;
padding: 0 var(--spacing-8);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
@@ -96,15 +127,8 @@
white-space: nowrap;
}
.m02-struct__head .ui-btn,
.m02-struct__subhead .ui-btn {
margin-left: auto;
white-space: nowrap;
}
/* 미리보기 — 웹캐드는 높이를 부모에서 받음(`.m02-drawing` 이 flex: 1 1 0).
`.cad-host` 는 원래 상세 페이지 몫이라 min-height:420px 를 가짐 — 미리보기 카드 높이(24rem=384px)보다
커서 카드 밖으로 넘쳤음(넘침 숨김 + 강제로 0 으로 덮어씀). */
`.cad-host` 는 원래 상세 페이지 몫이라 min-height:420px 를 가짐 — 카드 밖으로 넘쳐 0 으로 덮어씀. */
.m02-struct__preview {
display: flex;
overflow: hidden;
@@ -117,22 +141,10 @@
min-height: 0;
}
/* 도면 카드 고치기(PLAN 31-4) — 머리 오른쪽 ? · [저장] · ? = 칸 오른쪽 위 단축키 도움말 */
.m02-struct__tools {
display: inline-flex;
gap: var(--spacing-8);
margin-left: auto;
/* ? 단축키 상자 — 카드 오른쪽 위(제목 줄 · 부제 아래 · 도면 · 엑셀 카드) */
.m02-struct__card > .m02-struct__keys {
top: calc(var(--spacing-64) + var(--spacing-8));
}
.m02-struct__head .m02-struct__tools .ui-btn,
.m02-struct__tools:not(:empty) + .ui-btn {
margin-left: 0;
}
.m02-struct__preview:has(.m02-struct__keys) {
position: relative;
}
.m02-struct__keys {
position: absolute;
top: var(--spacing-8);
resources/tester/test_m02_card_sheet_edit.py
+3 -4
View File
@@ -47,10 +47,9 @@ def test_카드는_sheetEdit_있을_때만_고침():
def test_카드_저장은_읽은_문서에_시트를_덮음():
cards = _text(M02 / "M02_MasterTemplete_ItemCards.ts")
save = cards.split("async function saveCard")[1].split("\n }\n")[0]
assert "...(c.doc as unknown as Record<string, unknown>)," in save
assert "...c.handle.getDoc()," in save
assert "c.version = await opts.sheetEdit.save(c.kind, at, doc, c.version);" in save
save = cards.split("async function saveSheet")[1].split("\n }\n")[0]
assert "...(c.doc as unknown as Record<string, unknown>), ...c.handle.getDoc()" in save
assert "c.version = await opts.sheetEdit.save(c.kind, at, next, c.version);" in save
assert 'c.version = String((got.value as { 판?: string | null }).판 ?? "");' in cards
struct = _text(M02 / "M02_MasterTemplete_Structure.ts")
assert "saveTemplate(getActiveLayer(), kind, at, null, version, doc)" in struct
resources/tester/test_m02_card_shell.py
+61
View File
@@ -0,0 +1,61 @@
"""M02 항목 카드 공용 틀(PLAN 31-7 · `M02_MasterTemplete_CardShell.ts`) — 네 카드가 틀 하나를 씀.
정함: 제목 줄(제목 · 점 ● · 오른쪽 단추) + 한 줄 부제 · 「〇〇 수정」 = 빈 단추 한 모양 ·
[저장] = 늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 알림 글 한 벌 · ? = 도면 · 엑셀 ·
불러오는 중 = 네 카드 · 실패 = 카드 안 글 + [다시 불러오기] · 물음 한 번. 화면 조작 판정은 ORCA.
"""
from __future__ import annotations
from pathlib import Path
ROOT = Path(__file__).resolve().parents[2]
M02 = ROOT / "M02_MasterTemplete"
def _text(name: str) -> str:
return (M02 / name).read_text(encoding="utf-8")
def test_틀_제목_줄_부제_상태():
shell = _text("M02_MasterTemplete_CardShell.ts")
assert 'children: [el("span", { text: opt.title }), dot, tools],' in shell
assert 'tools.addEventListener("click", (event) => event.stopPropagation());' in shell
assert 'el("div", { className: "m02-struct__sub", children: opt.sub })' in shell
assert "loading: () => showLoading(host)," in shell
assert "fail: (reason, retry) => host.replaceChildren(loadingError(reason, retry))," in shell
assert "setDirty: (dirty) => (dot.hidden = !dirty)," in shell
assert 'event.key.toLowerCase() !== "s"' in shell # 카드 안 Ctrl+S
def test_저장_단추_알림_한_벌():
shell = _text("M02_MasterTemplete_CardShell.ts")
assert 'saved: "저장했음"' in shell and 'failed: "저장 못 함 — {value}"' in shell
assert 'stale: "그 사이 바뀜 — 다시 읽음"' in shell
assert "button.disabled = !dirty || saving;" in shell
assert "error instanceof StaleError ? CARD_TEXT.stale" in shell
assert "shell.onSave(() => void (dirty && run()));" in shell
def test_네_카드가_틀을_씀_수정_단추_한_모양():
cards = _text("M02_MasterTemplete_ItemCards.ts")
assert "const shell = cardShell({ title, body, sub: [no, name] });" in cards
assert "shell.tools.append(help, saver.button, edit);" in cards
assert 'variant: "filled"' not in cards # [수정] 은 모두 빈 단추(ghost)
assert "c.saver.button.hidden = c.help.hidden = !can;" in cards # [저장] · ? 늘 보임
assert "DRAWING_KEYS" in cards and "SHEET_KEYS" in cards
inputs = _text("M02_MasterTemplete_Inputs.ts")
assert inputs.count("cardShell({") == 2 # 선택 입력 · 값 카드
assert "shell.fail(" in inputs and "shell.loading()" in inputs
assert "m02-struct__card ui-collapsible" not in inputs # 손으로 만든 겉 틀 없음
drawing = _text("M02_MasterTemplete_DrawingCard.ts")
assert "createButton" not in drawing and "showToast" not in drawing # 단추 · 알림은 틀
def test_실패는_카드_안_글과_다시_불러오기():
cards = _text("M02_MasterTemplete_ItemCards.ts")
assert "showToast" not in cards # 토스트 안 씀(저장 알림은 틀)
assert "c.shell.fail(" in cards and "reload" in cards
picker = (ROOT / "ui_template" / "ui_template_item_picker_detail.ts").read_text("utf-8")
assert "inputs.set(null, why(error), () => void paintInputs(row, seq));" in picker
assert "const stop = inputs.loading();" in picker
resources/tester/test_m02_drawing_card.py
+10 -8
View File
@@ -19,9 +19,13 @@ def _text(name: str) -> str:
def test_고치기는_권한과_저장_길_둘_다():
card = _text("M02_MasterTemplete_DrawingCard.ts")
assert "const edit = opt.editable && !!write;" in card
assert "const edit = drawingEditable(opt.editable, opt.source);" in card
assert "editable && !!source.write;" in card
assert "readOnly: !edit," in card and "preview: !edit," in card
assert "onSave: (drawing) => doSave(drawing)" in card # CAD Ctrl+S · 💾 = 카드 저장
assert (
"onSave: (drawing: DrawingTemplateDoc) => void opt.saver.run(() => doSave(drawing)),"
in card
) # CAD Ctrl+S = 카드 저장
source = _text("M02_MasterTemplete_ItemSource.ts")
assert (
"write: (part, column, 판, 문서) => saveTemplate(layer, part, column, null, 판, 문서)"
@@ -41,12 +45,10 @@ def test_메뉴는_숨기고_저장은_도면_칸만():
def test_저장_안_한_카드_고침은_물음():
cards = _text("M02_MasterTemplete_ItemCards.ts")
assert (
"if (preview?.dirty() && col?.id !== column && !(await showConfirmDialog(TEXT.discard)))"
in cards
)
# 도면 카드 + 엑셀 카드(31-3) 둘 다 봄
assert "dirty: () => !!preview?.dirty() || sheets.some((c) => c.dirty)," in cards
# 물음 한 번(31-7) — 어느 카드든(도면 · 엑셀) 고침이 있으면 · 틀의 저장 표시(saver)로 봄
assert "if (!again && anyDirty() && col?.id !== column && !(await showConfirmDialog(" in cards
assert "const anyDirty = (): boolean => cards.some((c) => c.saver.dirty());" in cards
assert "dirty: anyDirty," in cards
assert "dirty: () => cards.dirty()," in _text("M02_MasterTemplete_Structure.ts")
main = _text("M02_MasterTemplete_UI_Main.ts")
assert "const busy = (): boolean => dirty || !!panel?.dirty();" in main
resources/tester/test_ui_loading.py
+2 -1
View File
@@ -81,4 +81,5 @@ def test_실패_글과_다시_불러오기_M02_자리():
assert "loadingError(reason(error), () => void open(key))" in edit
assert "(current ? () => {} : showLoading(view))" in edit
assert "const stop = editor.loading();" in _text(M02 / "M02_MasterTemplete_Labor.ts")
assert "showLoading(host)" in _text(M02 / "M02_MasterTemplete_ItemCards.ts")
assert "cards.map((c) => c.shell.loading())" in _text(M02 / "M02_MasterTemplete_ItemCards.ts")
assert "loading: () => showLoading(host)," in _text(M02 / "M02_MasterTemplete_CardShell.ts")
ui_template/ui_template_item_picker_detail.ts
+4 -1
View File
@@ -303,6 +303,7 @@ export function createItemDetail(opts: ItemDetailOptions): ItemDetail {
async function paintInputs(row: PickerRow, mine: number): Promise<void> {
if (!inputs) return;
const stop = inputs.loading(); // 카드 안 「불러오는 중」(M02 31-7)
try {
const list = await loadInputs(row);
let link: InputLinks | null;
@@ -314,9 +315,11 @@ export function createItemDetail(opts: ItemDetailOptions): ItemDetail {
} else {
link = await readInputLinks(layerOf(row), row.key).catch(() => null);
}
stop();
if (mine === seq) inputs.set({ list, link, values });
} catch (error) {
if (mine === seq) inputs.set(null, why(error));
stop();
if (mine === seq) inputs.set(null, why(error), () => void paintInputs(row, seq));
}
}