270 lines
9.1 KiB
TypeScript
270 lines
9.1 KiB
TypeScript
/* =============================================================================
|
|
* M01_MasterData_UI_Logic_List.ts
|
|
* 로직 목록 — 가운데 표 · 왼쪽 「전체」 + 구분 → 상세구분 거름이 고른 범위 + 이름 찾기
|
|
* 파일을 가로질러 한 목록 · 쪽 나눔 · 막힘(⛔)·고침(●) 표시 · 거르기는 화면에서(목록은 한 번 받음)
|
|
* 「별칭」 열(208-1) — 이름 옆 · 고치면 `onAlias`(캐시에 쌓고 [저장] 때 나감) · 찾기는 공용 `matchLogic`
|
|
* 묶음 접기(713-3) — 같은 절 · 작업량 로직은 머리 줄 밑으로 접음(`logic/…_list_fold`) · 찾는 중엔 펼침
|
|
* 「관련」 열 = 비고가 가리키는 로직 링크(계산 밖) · 덧칸은 서버 `/logics` 가 줌(정본 그대로)
|
|
* ========================================================================== */
|
|
|
|
import { createBadge } from "@ui/ui_template_badge";
|
|
import { createButton, createIconButton } from "@ui/ui_template_button";
|
|
import { createInputField, el } from "@ui/ui_template_elements";
|
|
import { aliasText, matchLogic } from "@ui/ui_template_logic_find";
|
|
import { buildPager } from "./M01_MasterData_UI_Cells";
|
|
import { pageKeepFirst, watchFit } from "@ui/ui_template_pager";
|
|
import type { LogicSummary } from "./M01_MasterData_UI_Logic_Api";
|
|
import { foldRows, type FoldRow } from "./logic/M01_MasterData_logic_list_fold";
|
|
import { tx } from "./M01_MasterData_UI_Logic_Text";
|
|
import "./M01_MasterData_UI_Head.css";
|
|
|
|
export type ListMark = "edited" | "new" | "deleted";
|
|
|
|
export interface ListItem {
|
|
id: string;
|
|
sub: string;
|
|
detail: string;
|
|
key: string;
|
|
number: string;
|
|
name: string;
|
|
/** 쉼표로 여럿 · 없으면 빈칸 */
|
|
alias: string;
|
|
unit: string;
|
|
source: string;
|
|
blocked: boolean;
|
|
reasons: string[];
|
|
/** 묶음 열쇠(파일 + 원문번호) · 작업량이면 부르는 로직 · 비고가 가리키는 로직(713-3) */
|
|
group?: string;
|
|
parents?: string[];
|
|
related?: string[];
|
|
}
|
|
|
|
/** `/logics` 덧칸(713-3 · `M01_MasterData_Store_List`) */
|
|
interface ListExtra {
|
|
묶음?: string;
|
|
작업량?: boolean;
|
|
부모?: string[];
|
|
관련?: string[];
|
|
}
|
|
|
|
export interface ListHandle {
|
|
root: HTMLElement;
|
|
setItems: (items: LogicSummary[]) => void;
|
|
/** 저장 안 한 새 로직도 목록 맨 위에 · aliases = 캐시에 고친 별칭(id → 글) */
|
|
setMarks: (marks: Map<string, ListMark>, extra: ListItem[], aliases: Map<string, string>) => void;
|
|
/** 왼쪽 거름이 고른 범위 — 비면 전체 */
|
|
setPick: (sub: string, detail: string) => void;
|
|
total: () => number;
|
|
}
|
|
|
|
export const logicId = (sub: string, key: string): string => `${sub}\n${key}`;
|
|
|
|
const DEFAULT_SIZE = 30; // 붙기 전 어림 — 붙은 뒤 화면 높이로 다시 셈
|
|
const COLS = [
|
|
"키",
|
|
"원문번호",
|
|
"구분",
|
|
"상세구분",
|
|
"이름",
|
|
"별칭",
|
|
"결과 단위",
|
|
"출처",
|
|
tx("List_Related"),
|
|
"",
|
|
] as const;
|
|
|
|
export function buildList(
|
|
onOpen: (item: ListItem) => void,
|
|
onAlias: (item: ListItem, alias: string) => void,
|
|
): ListHandle {
|
|
let items: ListItem[] = [];
|
|
let extra: ListItem[] = [];
|
|
let marks = new Map<string, ListMark>();
|
|
let aliases = new Map<string, string>();
|
|
const aliasOf = (x: ListItem): string => aliases.get(x.id) ?? x.alias;
|
|
let page = 1;
|
|
let size = DEFAULT_SIZE;
|
|
const open = new Set<string>(); // 펼친 머리 줄 키
|
|
const pick = { sub: "", detail: "" };
|
|
const searchField = createInputField({ type: "search", placeholder: tx("List_Search") });
|
|
const search = searchField.input;
|
|
const grid = el("div", { className: "ui-table-wrap m01-master__grid-wrap" });
|
|
|
|
const draw = (): void => {
|
|
const q = search.value;
|
|
const shown = [...extra, ...items].filter(
|
|
(x) =>
|
|
(!pick.sub || x.sub === pick.sub) &&
|
|
(!pick.detail || x.detail === pick.detail) &&
|
|
matchLogic(q, {
|
|
키: x.key,
|
|
원문번호: x.number,
|
|
이름: x.name,
|
|
구분: x.sub,
|
|
상세구분: x.detail,
|
|
별칭: aliasOf(x),
|
|
}).ok,
|
|
);
|
|
const folded = foldRows(shown, open, q.trim() !== "");
|
|
page = Math.min(page, Math.max(1, Math.ceil(folded.length / size)));
|
|
const rows = folded.slice((page - 1) * size, page * size).map(line);
|
|
pager.replaceWith((pager = buildPager(folded.length, size, page, go)));
|
|
grid.replaceChildren(
|
|
el("table", {
|
|
className: "ui-table m01-master__grid",
|
|
children: [
|
|
el("thead", {
|
|
children: [el("tr", { children: COLS.map((c) => el("th", { text: c })) })],
|
|
}),
|
|
el("tbody", { children: rows }),
|
|
],
|
|
}),
|
|
);
|
|
};
|
|
const go = (p: number): void => {
|
|
page = p;
|
|
draw();
|
|
};
|
|
const line = ({ item, depth, hidden, open: isOpen }: FoldRow<ListItem>): HTMLElement => {
|
|
const mark = marks.get(item.id);
|
|
const state = [
|
|
item.blocked ? `⛔ ${tx("List_Blocked")}` : "",
|
|
mark
|
|
? `● ${tx(({ edited: "List_Edited", new: "List_New", deleted: "List_Deleted" } as const)[mark])}`
|
|
: "",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
const cell = (v: string): HTMLElement => el("td", { text: v, attrs: { title: v } });
|
|
const tr = el("tr", {
|
|
className: `m01-master__table-row${mark ? " is-changed" : ""}`,
|
|
children: [
|
|
keyCell(item, hidden, isOpen),
|
|
...[item.number, item.sub, item.detail].map(cell),
|
|
cell(depth ? `└ ${item.name}` : item.name),
|
|
aliasCell(item, mark === "deleted"),
|
|
...[item.unit, item.source].map(cell),
|
|
relatedCell(item),
|
|
cell(state),
|
|
],
|
|
});
|
|
if (item.blocked) tr.title = item.reasons.join("\n");
|
|
tr.addEventListener("click", () => onOpen(item));
|
|
return tr;
|
|
};
|
|
|
|
/** 키 칸 — 묶음 머리면 접기 단추 + 접힌 줄 수 · 단추는 로직을 안 엶 */
|
|
const keyCell = (item: ListItem, hidden?: number, isOpen?: boolean): HTMLElement => {
|
|
if (!hidden) return el("td", { text: item.key, attrs: { title: item.key } });
|
|
const toggle = createIconButton({
|
|
icon: isOpen ? "chevronDown" : "chevronRight",
|
|
title: isOpen ? tx("List_Unfold") : tx("List_Fold", { n: hidden }),
|
|
size: 18,
|
|
pressed: Boolean(isOpen),
|
|
onClick: (e) => {
|
|
e.stopPropagation();
|
|
if (open.has(item.key)) open.delete(item.key);
|
|
else open.add(item.key);
|
|
draw();
|
|
},
|
|
});
|
|
const count = createBadge(`+${hidden}`, "neutral", { size: 18 });
|
|
return el("td", { children: [toggle, item.key, " ", count], attrs: { title: item.key } });
|
|
};
|
|
|
|
/** 관련 칸 — 비고가 가리키는 로직 키 링크(계산 밖) · 누르면 그 로직이 열림 */
|
|
const relatedCell = (item: ListItem): HTMLElement => {
|
|
const links = (item.related ?? []).map((key) =>
|
|
createButton({
|
|
label: key,
|
|
variant: "link",
|
|
size: 18,
|
|
onClick: (e) => {
|
|
e.stopPropagation();
|
|
const found = items.find((x) => x.key === key);
|
|
if (found) onOpen(found);
|
|
},
|
|
}),
|
|
);
|
|
return el("td", { children: links, attrs: { title: tx("List_RelatedTip") } });
|
|
};
|
|
|
|
/** 별칭 칸 — 눌러도 로직이 안 열림 · 고친 글은 「a, b」 꼴로 */
|
|
const aliasCell = (item: ListItem, locked: boolean): HTMLElement => {
|
|
const input = el("input", {
|
|
className: "m01-logic__alias",
|
|
attrs: { type: "text", value: aliasOf(item), placeholder: "—", title: tx("List_Alias") },
|
|
}) as HTMLInputElement;
|
|
input.disabled = locked;
|
|
input.addEventListener("click", (e) => e.stopPropagation());
|
|
input.addEventListener("change", () => {
|
|
const next = aliasText(input.value);
|
|
input.value = next;
|
|
if (next !== aliasOf(item)) onAlias(item, next);
|
|
});
|
|
return el("td", { children: [input] });
|
|
};
|
|
|
|
search.addEventListener("input", () => go(1));
|
|
let pager = buildPager(0, size, 1, go);
|
|
|
|
const root = el("div", {
|
|
className: "m01-logic__listview",
|
|
children: [
|
|
el("div", {
|
|
className: "m01-head__filters",
|
|
children: [searchField.root],
|
|
}),
|
|
grid,
|
|
pager,
|
|
],
|
|
});
|
|
watchFit(
|
|
root,
|
|
() => grid,
|
|
(rows) => {
|
|
if (rows === size) return;
|
|
page = pageKeepFirst(page, size, rows);
|
|
size = rows;
|
|
draw();
|
|
},
|
|
);
|
|
return {
|
|
root,
|
|
setItems: (logics) => {
|
|
items = logics.map((one) => {
|
|
const x = one as LogicSummary & ListExtra;
|
|
return {
|
|
id: logicId(x.구분, x.키),
|
|
sub: x.구분,
|
|
detail: x.상세구분,
|
|
key: x.키,
|
|
number: x.원문번호,
|
|
name: x.이름,
|
|
alias: x.별칭 ?? "",
|
|
unit: x.결과단위,
|
|
source: x.출처,
|
|
blocked: x.blocked,
|
|
reasons: x.reasons,
|
|
group: x.묶음 ? `${x.file}|${x.묶음}` : "",
|
|
parents: x.작업량 ? (x.부모 ?? []) : [],
|
|
related: x.관련 ?? [],
|
|
};
|
|
});
|
|
draw();
|
|
},
|
|
setMarks: (next, more, edited) => {
|
|
marks = next;
|
|
extra = more;
|
|
aliases = edited;
|
|
draw();
|
|
},
|
|
setPick: (sub, detail) => {
|
|
Object.assign(pick, { sub, detail });
|
|
if (!sub && !detail) search.value = ""; // 「전체」 — 찾는 글까지 비움
|
|
go(1);
|
|
},
|
|
total: () => items.length,
|
|
};
|
|
}
|