feat(M02): 47-5 일위대가 줄 누름 = 고름 하이라이트 · [옵션] 단추로 넣을 값 모달 · 줄 단추 공용 묶음
- 단가산출 로직 표 줄 누름 = 고른 줄 하이라이트(로직 키 · 다시 그려도 유지) · 넣을 값 모달은 새 [옵션] 단추 - 줄 단추 이름 위로 · 아래로 · 옵션 · 삭제(빨강) · 카드 갈래 = 옵션 · 삭제 - 공용 단추 묶음 `ui-btn-group` · 간격 토큰 `--btn-group-gap`(4px) — 이 표에만 적용 - 시험: test_m02_card_shell 낡은 글 맞춤 + 47-5 확인 · 화면 시나리오 ui_checks/47-5_일위대가_줄_고름.js Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
This commit is contained in:
Claude Opus 5.5
@@ -119,6 +119,17 @@
|
||||
background: var(--color-mist-violet);
|
||||
}
|
||||
|
||||
/* 고른 줄(47-5) — 옵션 값 줄까지 한 덩이 · 왼쪽 띠 */
|
||||
.m02-labrow .m02-labrow__row.is-selected,
|
||||
.m02-labrow .m02-labrow__optrow.is-selected {
|
||||
background: var(--color-mist-violet);
|
||||
}
|
||||
|
||||
.m02-labrow__row.is-selected > td:first-child,
|
||||
.m02-labrow__optrow.is-selected > td:first-child {
|
||||
box-shadow: inset 3px 0 0 var(--color-primary);
|
||||
}
|
||||
|
||||
/* 별칭 칸(44-6) — 칸 안 글상자 · 누르면 바로 고침 */
|
||||
.m02-labrow__alias {
|
||||
min-width: 7rem;
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
* M02_MasterTemplete_Labor_Detail.ts
|
||||
* 일위대가 상세(39-3) — 구조물 열마다 하나(`labor/<열>.json`) · UI_Main 종류 `labor` 가 이 부품을 붙임
|
||||
* (양식 길 읽기 · [저장] · [다시 읽기]는 UI_Main). 차례 = 정보(단위 · 본뜬) → 담은 로직 → 자재목록 → 다이어그램.
|
||||
* · 담은 로직 줄 누름 = 입력 모달(`Labor_Input`) · [확인] = 화면 캐시만 · 저장은 [저장]
|
||||
* · 담은 로직 줄 누름 = 고름(하이라이트 · 다시 그려도 유지 · 47-5) · [옵션] = 입력 모달(`Labor_Input`) ·
|
||||
* [확인] = 화면 캐시만 · 저장은 [저장]
|
||||
* · 금액 = 서버 calc(기준 ③ · 최신 응답만 · 저장 안 함) · 고칠 때마다 뒤에서 다시 셈
|
||||
* · 같은 로직 두 번 · 같은 자재 두 번 막음 · 빈 일위대가도 저장 됨
|
||||
* ========================================================================== */
|
||||
@@ -57,8 +58,8 @@ export interface LaborDetailOptions {
|
||||
onChanged: (dirty: boolean) => void;
|
||||
/** 「면적산출에서 잇기」 — 그 열 면적산출 상세로(옮겨 가면 참 · 취소 = 거짓 · 없으면 단추 없음) */
|
||||
goArea: GoArea | null;
|
||||
/** 구조물 조합 카드 갈래(43-4) — 단가산출 로직 표 + 자재목록만 · 올리기 · 내리기 · 로직 추가 ·
|
||||
* 정보(단위 · 본뜬) · 다이어그램 없음 · 빼기 · 자재 추가 · 줄 · 수량 모달은 상세와 같음 */
|
||||
/** 구조물 조합 카드 갈래(43-4) — 단가산출 로직 표 + 자재목록만 · 위로 · 아래로 · 로직 추가 ·
|
||||
* 정보(단위 · 본뜬) · 다이어그램 없음 · 옵션 · 삭제 · 자재 추가 · 줄 · 수량 모달은 상세와 같음 */
|
||||
card?: boolean;
|
||||
}
|
||||
|
||||
@@ -84,6 +85,8 @@ export function mountLaborDetail(
|
||||
let seq = 0;
|
||||
let timer = 0;
|
||||
let alive = true;
|
||||
/** 고른 줄 로직 키(47-5) — 키로 둬서 순서가 바뀌어도 따라감 */
|
||||
let picked: string | null = null;
|
||||
/** 그 열 면적산출의 알약 → 칸 · 값(저장본 · 서버 calc 와 같은 것) */
|
||||
let links = new Map<string, { 칸: string; 값: number | null }>();
|
||||
const cells = (): Map<string, string> => new Map([...links].map(([k, v]) => [k, v.칸]));
|
||||
@@ -133,17 +136,18 @@ export function mountLaborDetail(
|
||||
const draw = (): void => {
|
||||
logicHost.replaceChildren(
|
||||
logicTable(
|
||||
{ rows: cur.담은로직, logics, calc, fail, cells: cells() },
|
||||
// 읽기만이면 순서 · 빼기 없음(줄 누름 = 보기 모달은 둠)
|
||||
{ rows: cur.담은로직, logics, calc, fail, cells: cells(), selected: picked },
|
||||
// 읽기만이면 순서 · 삭제 없음([옵션] = 보기 모달은 둠)
|
||||
edit
|
||||
? {
|
||||
open: openRow,
|
||||
open: pick,
|
||||
option: openRow,
|
||||
qty: openQty,
|
||||
...(opt.card ? {} : { move }),
|
||||
remove: removeRow,
|
||||
alias: setAlias,
|
||||
}
|
||||
: { open: openRow },
|
||||
: { open: pick, option: openRow },
|
||||
),
|
||||
);
|
||||
matHost.replaceChildren(
|
||||
@@ -265,7 +269,14 @@ export function mountLaborDetail(
|
||||
[cur.담은로직[i], cur.담은로직[j]] = [cur.담은로직[j], cur.담은로직[i]];
|
||||
changed();
|
||||
}
|
||||
/** 줄 고름(47-5) — 하이라이트만(표만 · 다이어그램 안 다시 그림) · 화면 캐시 안 바뀜 */
|
||||
function pick(i: number): void {
|
||||
picked = cur.담은로직[i].로직;
|
||||
for (const tr of logicHost.querySelectorAll<HTMLElement>("[data-labor-logic],[data-labor-opt]"))
|
||||
tr.classList.toggle("is-selected", (tr.dataset.laborLogic ?? tr.dataset.laborOpt) === picked);
|
||||
}
|
||||
function removeRow(i: number): void {
|
||||
if (cur.담은로직[i].로직 === picked) picked = null;
|
||||
cur.담은로직.splice(i, 1);
|
||||
changed();
|
||||
}
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
* 옵션 값(「지역 서울 · 규격 25mm」)은 줄 아래 이름 ~ 합계에 걸친 한 줄 · 맨 아래 합계 줄(전체 합계 강조).
|
||||
* 자재목록 = 코드 · 이름 · 규격 · 수량산출 · 단위 · 가격 다섯(기준 칸 강조) · 기준단가 / 반영 금액(43-3).
|
||||
* 금액은 calc 답(없으면 「…」).
|
||||
* 줄 누름 · 순서 단추는 `on` 이 있을 때만(보기 갈래 = 없음).
|
||||
* 줄 누름 · 줄 단추(위로 · 아래로 · 옵션 · 삭제 · 묶음 `ui-btn-group`)는 `on` 이 있을 때만(보기 갈래 = 없음) ·
|
||||
* 상세는 줄 누름 = 고름(`selected` 줄 하이라이트) · 넣을 값 모달은 [옵션](47-5).
|
||||
* ========================================================================== */
|
||||
|
||||
import { createButton, el } from "@ui/ui_template_elements";
|
||||
@@ -21,6 +22,7 @@ import type {
|
||||
LaborRow,
|
||||
} from "./M02_MasterTemplete_Labor_Api";
|
||||
import { tc } from "./M02_MasterTemplete_Labor_Text";
|
||||
import "@ui/ui_template_general_layout.css";
|
||||
import "./M02_MasterTemplete_Labor.css";
|
||||
import { valueLine } from "./M02_Labor_Values_Model";
|
||||
|
||||
@@ -98,7 +100,7 @@ function qtyCell(
|
||||
: el("span", { children: parts });
|
||||
if (open)
|
||||
body.addEventListener("click", (e) => {
|
||||
e.stopPropagation(); // 줄 누름(입력 모달)과 따로
|
||||
e.stopPropagation(); // 줄 누름(고름)과 따로
|
||||
open();
|
||||
});
|
||||
return el("td", {
|
||||
@@ -158,9 +160,11 @@ const table = (heads: string[], rows: HTMLElement[], foot: HTMLElement[]): HTMLE
|
||||
],
|
||||
});
|
||||
|
||||
/** 줄 누름 · 순서 · 빼기 — 순서 · 빼기가 없으면 그 칸 없음 */
|
||||
/** 줄 누름 · 순서 · 옵션 · 삭제 — 셋 다 없으면 그 칸 없음 */
|
||||
export interface RowHandlers {
|
||||
open: (i: number) => void;
|
||||
/** [옵션] 단추(47-5 · 넣을 값 모달) — 없으면 단추 없음 */
|
||||
option?: (i: number) => void;
|
||||
/** 수량산출 칸 누름(손 입력 · 엑셀에서 고르기) — 없으면 줄 누름과 같음 */
|
||||
qty?: (i: number) => void;
|
||||
move?: (i: number, d: number) => void;
|
||||
@@ -191,7 +195,7 @@ function aliasCell(
|
||||
},
|
||||
});
|
||||
input.value = value ?? "";
|
||||
input.addEventListener("click", (e) => e.stopPropagation()); // 줄 누름(입력 모달)과 따로
|
||||
input.addEventListener("click", (e) => e.stopPropagation()); // 줄 누름(고름)과 따로
|
||||
input.addEventListener("input", () => set(input.value.trim() || null));
|
||||
input.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") input.blur();
|
||||
@@ -211,14 +215,16 @@ export interface LogicTableData {
|
||||
fail?: string | null;
|
||||
/** 알약 키 → 이은 면적산출 칸(「B6」) */
|
||||
cells?: ReadonlyMap<string, string>;
|
||||
/** 고른 줄 로직 키(47-5 · 하이라이트) */
|
||||
selected?: string | null;
|
||||
}
|
||||
|
||||
/** 담은 로직 표 — 보기 갈래는 `on` 없이 */
|
||||
export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement {
|
||||
const wait = !data.calc && !data.fail;
|
||||
const { move, remove } = on ?? {};
|
||||
// 빼기만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만
|
||||
const tools = !!(move || remove);
|
||||
const { move, remove, option } = on ?? {};
|
||||
// 옵션 · 삭제만(구조물 조합 카드 · 43-4)이어도 끝 칸 — 순서 단추는 `move` 가 있을 때만
|
||||
const tools = !!(move || remove || option);
|
||||
const lineOf = (key: string): LaborCalcLine | undefined =>
|
||||
data.calc?.줄.find((l) => l.로직 === key);
|
||||
const trs = data.rows.flatMap((row, i) => {
|
||||
@@ -237,12 +243,13 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
|
||||
label,
|
||||
variant,
|
||||
onClick: (e) => {
|
||||
e.stopPropagation(); // 줄 누름(입력 모달)과 따로
|
||||
e.stopPropagation(); // 줄 누름(고름)과 따로
|
||||
run();
|
||||
},
|
||||
});
|
||||
const sel = data.selected === row.로직 ? " is-selected" : "";
|
||||
const tr = el("tr", {
|
||||
className: on ? "m02-labrow__row is-open" : "m02-labrow__row",
|
||||
className: (on ? "m02-labrow__row is-open" : "m02-labrow__row") + sel,
|
||||
attrs: { "data-labor-logic": row.로직 },
|
||||
children: [
|
||||
el("td", { className: "m02-labrow__no", text: String(i + 1) }),
|
||||
@@ -281,10 +288,16 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
|
||||
el("td", {
|
||||
className: "m02-labrow__move",
|
||||
children: [
|
||||
...(move
|
||||
? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))]
|
||||
: []),
|
||||
...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []),
|
||||
el("div", {
|
||||
className: "ui-btn-group",
|
||||
children: [
|
||||
...(move
|
||||
? [small(tc("Up"), () => move(i, -1)), small(tc("Down"), () => move(i, 1))]
|
||||
: []),
|
||||
...(option ? [small(tc("Labor_Option"), () => option(i))] : []),
|
||||
...(remove ? [small(tc("Remove"), () => remove(i), "danger")] : []),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
]
|
||||
@@ -295,7 +308,7 @@ export function logicTable(data: LogicTableData, on?: RowHandlers): HTMLElement
|
||||
if (!note) return [tr];
|
||||
// 옵션 값 줄(44-6) — 이름 ~ 합계 칸에 걸친 한 줄(말줄임 · 전체 글은 title) · 행 높이 안 커짐
|
||||
const opt = el("tr", {
|
||||
className: on ? "m02-labrow__optrow is-open" : "m02-labrow__optrow",
|
||||
className: (on ? "m02-labrow__optrow is-open" : "m02-labrow__optrow") + sel,
|
||||
attrs: { "data-labor-opt": row.로직 },
|
||||
children: [
|
||||
el("td", { className: "m02-labrow__no", text: "" }),
|
||||
|
||||
@@ -31,9 +31,10 @@ const TEXT = {
|
||||
Alias_Edit: ["눌러서 별칭 고침", "Click to edit alias"],
|
||||
Col_Unit: ["결과 단위", "Result unit"],
|
||||
Col_Move: ["순서", "Move"],
|
||||
Up: ["올리기", "Up"],
|
||||
Down: ["내리기", "Down"],
|
||||
Remove: ["빼기", "Remove"],
|
||||
Up: ["위로", "Up"],
|
||||
Down: ["아래로", "Down"],
|
||||
Remove: ["삭제", "Delete"],
|
||||
Labor_Option: ["옵션", "Options"],
|
||||
AddLogic: ["로직 추가", "Add logic"],
|
||||
NoLogic: ["단가산출 로직 없음", "No logics yet"],
|
||||
Open: ["열기", "Open"],
|
||||
|
||||
Reference in New Issue
Block a user