From bcb1c725c45fd33ddf869ca1b7477c4bb4f9007c Mon Sep 17 00:00:00 2001 From: umsangdon Date: Wed, 30 Sep 2026 21:24:49 +0900 Subject: [PATCH] =?UTF-8?q?refactor(M02):=20=ED=95=AD=EB=AA=A9=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20=EB=84=B7=20=EA=B3=B5=EC=9A=A9=20=ED=8B=80=20CardSh?= =?UTF-8?q?ell=20(PLAN=2031-7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 공용 틀 — 제목 줄(제목 · 저장 안 한 점 ● · 오른쪽 단추 자리) + 한 줄 부제(번호 · 이름 · 말줄임) · 상태(불러오는 중 · 실패 + 다시 불러오기 · 비었음) · [저장](늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 알림 글 한 벌) · ?(단축키 상자) - 도면 정보 · 면적산출 · 재료산출(ItemCards) · 선택 입력(관리 화면 · 고르기 모달 값 카드)이 틀에 내용만 넣음 - 「〇〇 수정」 빈 단추 한 모양 · 엑셀 카드에도 ? · 불러오는 중 네 카드 · 실패는 카드 안 글(토스트 안 씀) · 물음 한 번(어느 카드든) - 저장 길(saveTemplate · 도면 write · sheetEdit.save · 위 [저장] saveInputs) · 단축키는 그대로 · 고르기 모달은 보기만 - 시험 test_m02_card_shell 새로 · 옛 모양 시험 맞춤 Co-Authored-By: Claude Opus 5.5 --- .../M02_MasterTemplete_CardShell.ts | 160 ++++++++++ .../M02_MasterTemplete_DrawingCard.ts | 115 ++----- .../M02_MasterTemplete_Inputs.ts | 74 ++--- .../M02_MasterTemplete_ItemCards.ts | 284 +++++++++--------- .../M02_MasterTemplete_Structure.css | 86 +++--- resources/tester/test_m02_card_sheet_edit.py | 7 +- resources/tester/test_m02_card_shell.py | 61 ++++ resources/tester/test_m02_drawing_card.py | 18 +- resources/tester/test_ui_loading.py | 3 +- ui_template/ui_template_item_picker_detail.ts | 5 +- 10 files changed, 500 insertions(+), 313 deletions(-) create mode 100644 M02_MasterTemplete/M02_MasterTemplete_CardShell.ts create mode 100644 resources/tester/test_m02_card_shell.py diff --git a/M02_MasterTemplete/M02_MasterTemplete_CardShell.ts b/M02_MasterTemplete/M02_MasterTemplete_CardShell.ts new file mode 100644 index 00000000..a62a07a1 --- /dev/null +++ b/M02_MasterTemplete/M02_MasterTemplete_CardShell.ts @@ -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) => Promise; +} + +/** 카드 [저장] — 늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 저장 뒤 점 지움 · `onDirty` = 페이지에 알림 */ +export function saveControl( + shell: CardShell, + save: () => Promise, + 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 = save): Promise => { + 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; +} diff --git a/M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts b/M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts index 46d1f7dc..af4077f2 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_DrawingCard.ts @@ -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; + /** 저장 길 한 번(카드 [저장] · 위 [저장]이 틀의 `run` 으로 부름) — 못 하면 던짐 */ + write: () => Promise; 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 { - 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() }; } diff --git a/M02_MasterTemplete/M02_MasterTemplete_Inputs.ts b/M02_MasterTemplete/M02_MasterTemplete_Inputs.ts index 586a1378..8b31ae48 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Inputs.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_Inputs.ts @@ -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 { 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 => 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 = {}; diff --git a/M02_MasterTemplete/M02_MasterTemplete_ItemCards.ts b/M02_MasterTemplete/M02_MasterTemplete_ItemCards.ts index 4c034a8d..fa329afe 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_ItemCards.ts +++ b/M02_MasterTemplete/M02_MasterTemplete_ItemCards.ts @@ -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, + ) => { + 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 = { - structure: edit, - area: sheets[0].edit, - material: sheets[1].edit, - }; + const cards: Card[] = [info, ...sheets]; const defaults: Record = { 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 { + /** 카드 [저장] 길 — 읽은 문서(번호 등 계약 밖 칸)에 시트를 덮어 저장(전체 편집기 `doSave` 와 같은 모양) */ + async function saveSheet(c: SheetCard): Promise { const at = column; - if (!opts.sheetEdit || !c.handle || !c.dirty || !at) return; - const doc = { - ...(c.doc as unknown as Record), - ...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), ...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> = 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 => { - 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 { - // 도면 카드 고침을 저장 안 했으면 버릴지 물음 — 취소면 보던 열 그대로 - 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 { + // 카드 고침을 저장 안 했으면 버릴지 물음(한 번) — 취소면 보던 열 그대로 + 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; 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(); diff --git a/M02_MasterTemplete/M02_MasterTemplete_Structure.css b/M02_MasterTemplete/M02_MasterTemplete_Structure.css index 3b487550..b44d120e 100644 --- a/M02_MasterTemplete/M02_MasterTemplete_Structure.css +++ b/M02_MasterTemplete/M02_MasterTemplete_Structure.css @@ -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); diff --git a/resources/tester/test_m02_card_sheet_edit.py b/resources/tester/test_m02_card_sheet_edit.py index ce994a23..a4b3e62c 100644 --- a/resources/tester/test_m02_card_sheet_edit.py +++ b/resources/tester/test_m02_card_sheet_edit.py @@ -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)," 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), ...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 diff --git a/resources/tester/test_m02_card_shell.py b/resources/tester/test_m02_card_shell.py new file mode 100644 index 00000000..8501c994 --- /dev/null +++ b/resources/tester/test_m02_card_shell.py @@ -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 diff --git a/resources/tester/test_m02_drawing_card.py b/resources/tester/test_m02_drawing_card.py index 03521d06..5bffa587 100644 --- a/resources/tester/test_m02_drawing_card.py +++ b/resources/tester/test_m02_drawing_card.py @@ -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 diff --git a/resources/tester/test_ui_loading.py b/resources/tester/test_ui_loading.py index f2f205dc..cb1b173a 100644 --- a/resources/tester/test_ui_loading.py +++ b/resources/tester/test_ui_loading.py @@ -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") diff --git a/ui_template/ui_template_item_picker_detail.ts b/ui_template/ui_template_item_picker_detail.ts index 482a3b23..2f7ba2cf 100644 --- a/ui_template/ui_template_item_picker_detail.ts +++ b/ui_template/ui_template_item_picker_detail.ts @@ -303,6 +303,7 @@ export function createItemDetail(opts: ItemDetailOptions): ItemDetail { async function paintInputs(row: PickerRow, mine: number): Promise { 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)); } }