eomsangdonandClaude Opus 5.5
bcb1c725c4
- 공용 틀 — 제목 줄(제목 · 저장 안 한 점 ● · 오른쪽 단추 자리) + 한 줄 부제(번호 · 이름 · 말줄임) · 상태(불러오는 중 · 실패 + 다시 불러오기 · 비었음) · [저장](늘 보임 · 고쳐야 켜짐 · 카드 안 Ctrl+S · 알림 글 한 벌) · ?(단축키 상자) - 도면 정보 · 면적산출 · 재료산출(ItemCards) · 선택 입력(관리 화면 · 고르기 모달 값 카드)이 틀에 내용만 넣음 - 「〇〇 수정」 빈 단추 한 모양 · 엑셀 카드에도 ? · 불러오는 중 네 카드 · 실패는 카드 안 글(토스트 안 씀) · 물음 한 번(어느 카드든) - 저장 길(saveTemplate · 도면 write · sheetEdit.save · 위 [저장] saveInputs) · 단축키는 그대로 · 고르기 모달은 보기만 - 시험 test_m02_card_shell 새로 · 옛 모양 시험 맞춤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
574 lines
22 KiB
TypeScript
574 lines
22 KiB
TypeScript
/* =============================================================================
|
|
* M02_MasterTemplete_Inputs.ts
|
|
* 구조물집계표 아래 넷째 카드 「선택 입력」(PLAN 25-2c) — 고른 열(항목) 일위대가의 로직마다 묶어
|
|
* 입력 목록을 보이고, 입력마다 자리(면적산출 알약 · 재료산출 알약 · 선택 · 안 씀)를 사용자가 고름.
|
|
*
|
|
* · 처음은 모두 「안 씀」 — 프로그램이 추측해 나누지 않음 · 이름이 같은 입력도 로직마다 따로.
|
|
* · 마스터 층에서는 값을 받지 않음 — 자리 연결만(값은 프로젝트 복사본 몫 · 25-2b).
|
|
* · 저장은 집계표 [저장]과 같은 단추 흐름 — 여기는 고른 것을 초안으로 들고 있다가 `save()` 가 서버로 보냄
|
|
* (자동저장 없음). 고름이 바뀌면 `onDirty` 로 메인에 알림(떠날 때 물음).
|
|
* · 면적 · 재료로 고른 입력은 그 시트 편집 화면 알약 줄에 뜸(`inputPills` → `pillsFor`).
|
|
* ========================================================================== */
|
|
|
|
import { createButton, el } from "@ui/ui_template_elements";
|
|
import type { LinkItem } from "../A00_Common/spreadsheet/spreadsheet_links";
|
|
import {
|
|
fetchItemInputs,
|
|
fetchItemRows,
|
|
getActiveLayer,
|
|
readInputLinks,
|
|
saveInputLinks,
|
|
type InputLinks,
|
|
type InputSeat,
|
|
type ItemInput,
|
|
type ItemInputs,
|
|
type ItemLogic,
|
|
type ItemRow,
|
|
type Layer,
|
|
} from "./M02_MasterTemplete_Api_Fetch";
|
|
import {
|
|
autoText,
|
|
choicesOf,
|
|
countOf,
|
|
inputKey,
|
|
linesOf,
|
|
pickedGroups,
|
|
pillsOf,
|
|
rangeOf,
|
|
seatsOf,
|
|
SEAT_OPTIONS,
|
|
valueHint,
|
|
type SeatMap,
|
|
type ValueDoc,
|
|
} from "./M02_MasterTemplete_Inputs_Model";
|
|
import { cardNote, cardShell } from "./M02_MasterTemplete_CardShell";
|
|
import "./M02_MasterTemplete_Inputs.css";
|
|
|
|
const TEXT = {
|
|
title: "선택 입력",
|
|
count: "로직 {logics} · 입력 {inputs}",
|
|
chosen: "면적산출 {area} · 재료산출 {material} · 선택 {pick}",
|
|
auto: "자동값",
|
|
noItem: "구조물 조합을 먼저 저장하면 입력 목록이 나옴",
|
|
noCombo: "일위대가를 먼저 고름 — 구조물 조합 일위대가 줄에서 고름",
|
|
unsavedCombo: "고른 일위대가는 구조물 조합을 저장하면 입력 목록이 나옴",
|
|
noLogic: "이 일위대가에 담긴 로직이 없음",
|
|
missing: "빠진 로직 {value}",
|
|
failed: "입력 목록을 못 받음 — {value}",
|
|
seat: "자리",
|
|
};
|
|
|
|
const why = (error: unknown): string => (error instanceof Error ? error.message : "");
|
|
const fill = (text: string, values: Record<string, string | number>): string =>
|
|
text.replace(/\{(\w+)\}/g, (_, key: string) => String(values[key] ?? ""));
|
|
|
|
/** 열 하나의 초안 — 서버 목록 · 판 · 고른 자리 · 바뀜 */
|
|
interface Draft {
|
|
key: string;
|
|
판: string | null;
|
|
list: ItemInputs;
|
|
seats: SeatMap;
|
|
dirty: boolean;
|
|
}
|
|
|
|
export interface InputsCardOptions {
|
|
/** 이 층에서 고칠 수 있나 — 아니면 자리 고르기가 잠김 */
|
|
isAdmin: boolean;
|
|
/** 고름이 바뀜 — 메인의 「저장 안 한 고침」 표시 */
|
|
onDirty: () => void;
|
|
}
|
|
|
|
export interface InputsCardHandle {
|
|
root: HTMLElement;
|
|
/** 고른 열 — `combo` = 집계표에 지금 고른 일위대가(저장 전일 수 있음) · null 이면 카드 비움 */
|
|
show: (colId: string | null, combo: string | null) => Promise<void>;
|
|
/** 고른 게 저장 안 됐나 */
|
|
dirty: () => boolean;
|
|
/** 바뀐 열마다 서버에 저장 — 실패하면 던짐(판이 다르면 `StaleError`) */
|
|
save: () => Promise<void>;
|
|
/** 항목 목록(열 ↔ 키)을 다시 받게 함 — 집계표 [저장] 뒤 */
|
|
invalidate: () => void;
|
|
destroy: () => void;
|
|
}
|
|
|
|
export function createInputsCard(opts: InputsCardOptions): InputsCardHandle {
|
|
const drafts = new Map<string, Draft>();
|
|
let rows: Promise<ItemRow[]> | null = null;
|
|
let seq = 0;
|
|
|
|
const summary = el("div", { className: "m02-inputs__summary" });
|
|
const body = el("div", { className: "m02-inputs__body" });
|
|
// 공용 카드 틀(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();
|
|
};
|
|
|
|
const itemRows = (): Promise<ItemRow[]> =>
|
|
(rows ??= fetchItemRows(getActiveLayer()).catch((error: unknown) => {
|
|
rows = null;
|
|
throw error;
|
|
}));
|
|
|
|
function paintSummary(draft: Draft): void {
|
|
const count = countOf(draft.list);
|
|
// 목록에 있는 입력의 자리만 셈 — 서버 목록에서 빠진 입력의 옛 고름은 안 셈(저장 때도 빠짐)
|
|
const listed = new Set(
|
|
draft.list.로직.flatMap((l) => l.입력.map((i) => inputKey(l.로직, i.이름))),
|
|
);
|
|
const seats = [...draft.seats].filter(([key]) => listed.has(key)).map(([, seat]) => seat);
|
|
const by = (seat: InputSeat): number => seats.filter((s) => s === seat).length;
|
|
summary.replaceChildren(
|
|
el("span", { className: "m02-inputs__count", text: fill(TEXT.count, count) }),
|
|
el("span", {
|
|
className: "m02-inputs__chosen",
|
|
text: fill(TEXT.chosen, { area: by("면적"), material: by("재료"), pick: by("선택") }),
|
|
}),
|
|
);
|
|
}
|
|
|
|
function paint(draft: Draft): void {
|
|
paintSummary(draft);
|
|
const groups = draft.list.로직.map((logic) =>
|
|
el("div", {
|
|
className: "m02-inputs__logic",
|
|
attrs: { "data-logic": logic.로직 },
|
|
children: [
|
|
el("h4", {
|
|
className: "m02-inputs__logic-title",
|
|
children: [
|
|
el("span", { text: logic.이름 }),
|
|
...(logic.결과단위 ? [el("small", { text: logic.결과단위 })] : []),
|
|
el("small", { className: "m02-inputs__logic-key", text: logic.로직 }),
|
|
],
|
|
}),
|
|
...logic.입력.map((input) => {
|
|
const key = inputKey(logic.로직, input.이름);
|
|
const select = el("select", {
|
|
className: "m02-inputs__seat",
|
|
attrs: { "aria-label": `${logic.이름} ${input.이름} ${TEXT.seat}` },
|
|
children: SEAT_OPTIONS.map((o) =>
|
|
el("option", { text: o.label, attrs: { value: o.value } }),
|
|
),
|
|
}) as HTMLSelectElement;
|
|
select.value = draft.seats.get(key) ?? "";
|
|
select.disabled = !opts.isAdmin;
|
|
select.addEventListener("change", () => {
|
|
if (select.value) draft.seats.set(key, select.value as InputSeat);
|
|
else draft.seats.delete(key);
|
|
draft.dirty = true;
|
|
paintSummary(draft);
|
|
shell.setDirty(true);
|
|
opts.onDirty();
|
|
});
|
|
const hint = valueHint(input);
|
|
const auto = autoText(input);
|
|
return el("div", {
|
|
className: "m02-inputs__row",
|
|
attrs: { "data-input": input.이름 },
|
|
children: [
|
|
el("div", {
|
|
className: "m02-inputs__info",
|
|
children: [
|
|
el("span", { className: "m02-inputs__name", text: input.이름 }),
|
|
...(input.단위 ? [el("small", { text: input.단위 })] : []),
|
|
...(input.설명
|
|
? [el("small", { className: "m02-inputs__desc", text: input.설명 })]
|
|
: []),
|
|
...(hint ? [el("small", { className: "m02-inputs__hint", text: hint })] : []),
|
|
...(auto
|
|
? [
|
|
el("small", {
|
|
className: "m02-inputs__auto",
|
|
text: `${TEXT.auto} ${auto}`,
|
|
}),
|
|
]
|
|
: []),
|
|
],
|
|
}),
|
|
select,
|
|
],
|
|
});
|
|
}),
|
|
],
|
|
}),
|
|
);
|
|
const missing = draft.list.빠진로직;
|
|
body.replaceChildren(
|
|
...(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);
|
|
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;
|
|
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 shell.note(TEXT.noCombo);
|
|
const draft: Draft = {
|
|
key: row.key,
|
|
판: links.판,
|
|
list,
|
|
seats: seatsOf(links),
|
|
dirty: false,
|
|
};
|
|
drafts.set(colId, draft);
|
|
paint(draft);
|
|
} catch (error) {
|
|
// 실패 = 카드 안 까닭 + [다시 불러오기](31-7)
|
|
if (mine === seq)
|
|
shell.fail(fill(TEXT.failed, { value: why(error) }), () => void show(colId, combo));
|
|
} finally {
|
|
stop();
|
|
}
|
|
}
|
|
|
|
return {
|
|
root,
|
|
show,
|
|
dirty: () => [...drafts.values()].some((d) => d.dirty),
|
|
save: async () => {
|
|
const layer = getActiveLayer();
|
|
for (const draft of drafts.values()) {
|
|
if (!draft.dirty) continue;
|
|
const got = await saveInputLinks(
|
|
layer,
|
|
draft.key,
|
|
draft.판,
|
|
linesOf(draft.list, draft.seats),
|
|
);
|
|
draft.판 = got.판;
|
|
draft.dirty = false;
|
|
}
|
|
shell.setDirty(false);
|
|
},
|
|
invalidate: () => {
|
|
rows = null;
|
|
for (const [id, draft] of drafts) if (!draft.dirty) drafts.delete(id); // 서버 것으로 다시 읽음
|
|
},
|
|
destroy: () => {
|
|
seq += 1;
|
|
root.remove();
|
|
},
|
|
};
|
|
}
|
|
|
|
/** 그 열의 면적산출 · 재료산출 편집 화면 알약 — 자리를 그 시트로 고른 입력(프로젝트 층은 25-2b 몫이라 없음) */
|
|
export async function inputPills(column: string, seat: "면적" | "재료"): Promise<LinkItem[]> {
|
|
const layer = getActiveLayer();
|
|
if (layer === "project") return [];
|
|
try {
|
|
const row = (await fetchItemRows(layer)).find((r) => r.열 === column);
|
|
if (!row?.일위대가) return [];
|
|
const [list, links] = await Promise.all([
|
|
fetchItemInputs(layer, row.key),
|
|
readInputLinks(layer, row.key),
|
|
]);
|
|
return pillsOf(list, links, seat);
|
|
} catch {
|
|
return []; // 서버 길이 아직 없거나 못 읽어도 시트 편집은 그대로
|
|
}
|
|
}
|
|
|
|
/* ── 프로젝트 복사본에서 값 받기(PLAN 25-2d) — 고르기 모달 카드 ─────────────────────────────
|
|
* 같은 카드 틀 · 같은 입력 목록인데 여기서는 자리 고르기 대신 **값**을 받음: 자리가 「선택」 인 입력만
|
|
* 로직마다 묶어, 고르기 = 목록 · 범위 = 숫자 · 자동값은 흐리게 · 「확인함」 표시. 자동값은 저장값이 아님
|
|
* (확인 안 한 입력은 계산 때 「빠진 입력」). 값은 로직마다 따로 — 이름이 같아도 합치지 않음.
|
|
* mode "view" 보기만 + [선택 입력 수정] · mode "value" 값 받기(범위 밖은 저장 막음) */
|
|
|
|
export interface InputsValueData {
|
|
list: ItemInputs;
|
|
link: InputLinks | null;
|
|
values: ValueDoc;
|
|
}
|
|
|
|
export interface InputsValueOptions {
|
|
mode: "view" | "value";
|
|
/** mode "view" — [선택 입력 수정] */
|
|
onEdit?: () => void;
|
|
/** mode "value" — 값이 바뀔 때마다 */
|
|
onChange?: (values: ValueDoc) => void;
|
|
}
|
|
|
|
export interface InputsValueHandle {
|
|
root: HTMLElement;
|
|
/** 자료를 바꿔 끼움 — `null` 은 못 읽은 경우(까닭 글 `note`) */
|
|
set: (data: InputsValueData | null, note?: string, retry?: () => void) => void;
|
|
/** 목록을 받는 동안 0.3초 넘으면 「불러오는 중」(31-7) — 돌려받은 함수 = 끝 */
|
|
loading: () => () => void;
|
|
/** 지금 값(확인한 것 · 값이 든 것만) */
|
|
getValues: () => ValueDoc;
|
|
/** 범위 밖 값이 없나 */
|
|
isValid: () => boolean;
|
|
/** [선택 입력 수정] 글 — 아직 안 가져온 항목이면 「프로젝트로 가져와 고침」 */
|
|
setEditLabel: (label: string) => void;
|
|
}
|
|
|
|
const VALUE_TEXT = {
|
|
edit: "선택 입력 수정",
|
|
none: "선택으로 이은 입력이 없음",
|
|
auto: "자동값",
|
|
unconfirmed: "확인 안 함",
|
|
confirmed: "✓ 확인함",
|
|
confirmBox: "확인",
|
|
outOfRange: "범위 {value} 밖",
|
|
summary: "선택 {value}",
|
|
places: "면적산출 알약 {area} · 재료산출 알약 {material}",
|
|
noList: "입력 목록을 못 읽음 — {value}",
|
|
};
|
|
|
|
type ValueEntry = ValueDoc[string][string];
|
|
|
|
export function createInputsValueCard(opts: InputsValueOptions): InputsValueHandle {
|
|
let data: InputsValueData | null = null;
|
|
let values: ValueDoc = {};
|
|
let invalid = 0;
|
|
|
|
const summary = el("span", { className: "m02-struct__no" });
|
|
const edit = createButton({ label: VALUE_TEXT.edit, variant: "ghost", size: "sm" });
|
|
edit.hidden = opts.mode !== "view";
|
|
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" });
|
|
// 공용 카드 틀(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) : [];
|
|
const one = (logic: string, name: string): ValueEntry =>
|
|
values[logic]?.[name] ?? { 값: null, 확인: false };
|
|
const isEmpty = (value: string | number | null): boolean => value === null || value === "";
|
|
const put = (logic: string, name: string, next: ValueEntry): void => {
|
|
(values[logic] ??= {})[name] = next;
|
|
};
|
|
const autoOf = (input: ItemInput): string | number | null => {
|
|
const auto = input.자동값;
|
|
return typeof auto === "string" || typeof auto === "number" ? auto : null;
|
|
};
|
|
|
|
const paintSummary = (): void => {
|
|
let total = 0;
|
|
let confirmed = 0;
|
|
for (const { logic, inputs } of groups())
|
|
for (const input of inputs) {
|
|
total += 1;
|
|
if (one(logic.로직, input.이름).확인) confirmed += 1;
|
|
}
|
|
summary.textContent = data ? fill(VALUE_TEXT.summary, { value: `${confirmed}/${total}` }) : "";
|
|
};
|
|
|
|
/** 값 칸 하나 — 자동값은 흐리게(기울임 · placeholder · 첫 줄) */
|
|
const valueCell = (logic: ItemLogic, input: ItemInput): HTMLElement => {
|
|
const stored = one(logic.로직, input.이름);
|
|
const auto = autoOf(input);
|
|
const state = el("span", { className: "m02-inputval__state" });
|
|
const paintState = (): void => {
|
|
const now = one(logic.로직, input.이름);
|
|
state.textContent = now.확인 ? VALUE_TEXT.confirmed : VALUE_TEXT.unconfirmed;
|
|
state.classList.toggle("is-confirmed", now.확인);
|
|
};
|
|
if (opts.mode === "view") {
|
|
const text = isEmpty(stored.값) ? auto : stored.값;
|
|
const shown = el("span", {
|
|
className: `m02-inputval__value${isEmpty(stored.값) ? " is-auto" : ""}`,
|
|
text: text === null ? "—" : String(text),
|
|
attrs: isEmpty(stored.값) ? { title: VALUE_TEXT.auto } : {},
|
|
});
|
|
paintState();
|
|
return el("div", { className: "m02-inputval__cell", children: [shown, state] });
|
|
}
|
|
|
|
const emit = (): void => {
|
|
paintState();
|
|
paintSummary();
|
|
opts.onChange?.(values);
|
|
};
|
|
const range = rangeOf(input);
|
|
const choices = choicesOf(input);
|
|
const control = (
|
|
choices.length
|
|
? el("select", { className: "ui-select ui-select--sm m02-inputval__control" })
|
|
: el("input", {
|
|
className: "ui-input m02-inputval__control",
|
|
attrs: {
|
|
type: range ? "number" : "text",
|
|
...(range?.min !== undefined ? { min: String(range.min) } : {}),
|
|
...(range?.max !== undefined ? { max: String(range.max) } : {}),
|
|
...(range ? { step: "any" } : {}),
|
|
placeholder: auto === null ? "" : String(auto),
|
|
},
|
|
})
|
|
) as HTMLInputElement | HTMLSelectElement;
|
|
const error = el("span", { className: "m02-inputval__error" });
|
|
const box = el("input", {
|
|
attrs: {
|
|
type: "checkbox",
|
|
title: VALUE_TEXT.confirmBox,
|
|
"aria-label": VALUE_TEXT.confirmBox,
|
|
},
|
|
}) as HTMLInputElement;
|
|
|
|
if (control instanceof HTMLSelectElement) {
|
|
control.append(
|
|
el("option", {
|
|
attrs: { value: "" },
|
|
text: auto === null ? "—" : `${VALUE_TEXT.auto} ${String(auto)}`,
|
|
}),
|
|
...choices.map((c) => el("option", { attrs: { value: c.값 }, text: c.이름 })),
|
|
);
|
|
}
|
|
control.value = isEmpty(stored.값) ? "" : String(stored.값);
|
|
control.classList.toggle("is-auto", isEmpty(stored.값));
|
|
box.checked = stored.확인;
|
|
|
|
const outside = (raw: string): boolean => {
|
|
if (!range || raw.trim() === "") return false;
|
|
const value = Number(raw);
|
|
return (
|
|
!Number.isFinite(value) ||
|
|
(range.min !== undefined && value < range.min) ||
|
|
(range.max !== undefined && value > range.max)
|
|
);
|
|
};
|
|
let wasBad = false;
|
|
const changed = (): void => {
|
|
const raw = control.value;
|
|
const bad = outside(raw);
|
|
if (bad !== wasBad) invalid += bad ? 1 : -1;
|
|
wasBad = bad;
|
|
control.setAttribute("aria-invalid", bad ? "true" : "false");
|
|
error.textContent = bad
|
|
? fill(VALUE_TEXT.outOfRange, { value: `${range?.min ?? ""}~${range?.max ?? ""}` })
|
|
: "";
|
|
control.classList.toggle("is-auto", raw === "");
|
|
const value: string | number | null =
|
|
raw === "" ? null : range ? Number(raw) : (choices.find((c) => c.값 === raw)?.raw ?? raw);
|
|
// 값을 넣으면 확인 · 비우면 확인 풀림(자동값은 저장값이 아님)
|
|
put(logic.로직, input.이름, { 값: bad ? null : value, 확인: raw !== "" && !bad });
|
|
box.checked = raw !== "" && !bad;
|
|
emit();
|
|
};
|
|
control.addEventListener(control instanceof HTMLSelectElement ? "change" : "input", changed);
|
|
// 확인 상자 — 비운 채 켜면 자동값을 그대로 받아들임 · 끄면 확인만 풀림
|
|
box.addEventListener("change", () => {
|
|
const now = one(logic.로직, input.이름);
|
|
if (box.checked && isEmpty(now.값) && auto !== null) {
|
|
control.value = String(auto);
|
|
control.classList.remove("is-auto");
|
|
put(logic.로직, input.이름, { 값: range ? Number(auto) : auto, 확인: true });
|
|
} else if (box.checked && isEmpty(now.값)) {
|
|
box.checked = false; // 받아들일 값이 없음
|
|
} else {
|
|
put(logic.로직, input.이름, { ...now, 확인: box.checked });
|
|
}
|
|
emit();
|
|
});
|
|
paintState();
|
|
return el("div", { className: "m02-inputval__cell", children: [control, box, state, error] });
|
|
};
|
|
|
|
const paint = (note?: string, retry?: () => void): void => {
|
|
invalid = 0;
|
|
paintSummary();
|
|
if (!data) {
|
|
places.textContent = "";
|
|
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;
|
|
const material = seats.filter((seat) => seat === "재료").length;
|
|
places.textContent = area + material ? fill(VALUE_TEXT.places, { area, material }) : "";
|
|
const shown = groups();
|
|
const missing = data.list.빠진로직.length
|
|
? [
|
|
el("p", {
|
|
className: "m02-inputval__missing",
|
|
text: fill(TEXT.missing, { value: data.list.빠진로직.join(", ") }),
|
|
}),
|
|
]
|
|
: [];
|
|
if (!shown.length) {
|
|
body.replaceChildren(cardNote(VALUE_TEXT.none), ...missing);
|
|
return;
|
|
}
|
|
body.replaceChildren(
|
|
...shown.map(({ logic, inputs }) =>
|
|
el("section", {
|
|
className: "m02-inputval__logic",
|
|
attrs: { "data-logic": logic.로직 },
|
|
children: [
|
|
el("h4", {
|
|
className: "m02-inputval__logic-name",
|
|
text: logic.이름 || logic.로직,
|
|
attrs: { title: `${logic.로직}${logic.결과단위 ? ` · ${logic.결과단위}` : ""}` },
|
|
}),
|
|
...inputs.map((input) =>
|
|
el("div", {
|
|
className: "m02-inputval__row",
|
|
attrs: { "data-input": inputKey(logic.로직, input.이름) },
|
|
children: [
|
|
el("span", {
|
|
className: "m02-inputval__name",
|
|
text: input.단위 ? `${input.이름} (${input.단위})` : input.이름,
|
|
attrs: input.설명 ? { title: input.설명 } : {},
|
|
}),
|
|
valueCell(logic, input),
|
|
],
|
|
}),
|
|
),
|
|
],
|
|
}),
|
|
),
|
|
...missing,
|
|
);
|
|
};
|
|
|
|
return {
|
|
root,
|
|
set: (next, note, retry) => {
|
|
data = next;
|
|
values = next ? structuredClone(next.values) : {};
|
|
paint(note, retry);
|
|
},
|
|
loading: () => shell.loading(),
|
|
getValues: () => {
|
|
// 확인한 것 · 값이 든 것만 — 입력 목록에서 없어진 입력은 그대로 둠(다음 가져오기가 정함)
|
|
const out: ValueDoc = {};
|
|
for (const [logic, byName] of Object.entries(values))
|
|
for (const [name, entry] of Object.entries(byName))
|
|
if (entry.확인 || !isEmpty(entry.값)) (out[logic] ??= {})[name] = entry;
|
|
return out;
|
|
},
|
|
isValid: () => invalid === 0,
|
|
setEditLabel: (label) => {
|
|
(edit.querySelector(".ui-btn__label") ?? edit).textContent = label;
|
|
},
|
|
};
|
|
}
|