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

feat(ui): 고르기 모달 나무 M02 나무 꼴 — 층 단추 셋 · 잎 = 마지막 이름 · 폴더 먼저 · 왼쪽 폭 320px(173-2)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018jonfdxn1Xit9bdkNJpE4G
This commit is contained in:
eomsangdon
2026-10-10 08:41:06 +09:00
co-authored by Claude Opus 5.5
parent f9bf31d1a8
commit daf093c399
5 changed files with 175 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui_template/ui_template_item_picker.css
+15 -4
View File
@@ -3,7 +3,8 @@
.ui-item-picker__cols {
display: grid;
grid-template-columns: minmax(220px, 3fr) minmax(320px, 9fr);
/* 왼쪽 = M02 좌측 패널 폭(320px · 173-2) */
grid-template-columns: var(--wf-left-panel-width) minmax(320px, 1fr);
gap: var(--spacing-12);
flex: 1;
min-height: 0;
@@ -17,18 +18,28 @@
min-width: 0;
}
.ui-item-picker__layers {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-4);
}
/* 나무 상자 = M02 나무 꼴(테두리 없음 · 긴 이름은 줄바꿈 · 173-2) */
.ui-item-picker__tree {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-height: 0;
padding: var(--spacing-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: auto;
}
.ui-item-picker__tree .ui-tree__row {
min-width: 0;
overflow-wrap: anywhere;
}
.ui-item-picker__detail {
display: flex;
flex-direction: column;
ui_template/ui_template_item_picker.ts
+55 -10
View File
@@ -8,6 +8,7 @@
*
* 26-3b — 카드 · 편집 · [재적용] · [개인에 저장] 은 **고르는 구조물의 복사본**(`structureId`) 기준.
* 나무 개인 그룹 · 폴더를 오른쪽 클릭하면 「새 항목」(프로젝트에서 새 항목 → 개인 층에도 만들고 폼에 지정).
* 173-2 — 나무 = M02 나무 꼴: 층 단추 셋(하나만 보임 · 뿌리 줄 없음) · 개인 맨 위 「새 항목」 = 빈 자리 오른쪽 클릭.
* ========================================================================== */
import "./ui_template_item_picker.css";
@@ -17,6 +18,7 @@ import {
buildTree,
filterRows,
isCurrent,
PICKER_LAYERS,
layerOf,
ownerOf,
pathIds,
@@ -30,7 +32,13 @@ import {
} from "./ui_template_item_picker_data";
import { t } from "./ui_template_locale";
import { openModal } from "./ui_template_modal";
import { createTreeRow, renderTree, type TreeMenuItem, type TreeNode } from "./ui_template_tree";
import {
createTreeRow,
openTreeMenu,
renderTree,
type TreeMenuItem,
type TreeNode,
} from "./ui_template_tree";
import { askFields } from "./ui_template_item_picker_ask";
import { projectItems, type CreatedItem } from "./ui_template_item_picker_project";
import { createItemDetail, type EditRequest } from "./ui_template_item_picker_detail";
@@ -119,11 +127,14 @@ export function openItemPicker(opts: ItemPickerOptions): Promise<ItemPickerResul
return new Promise((resolve) => {
let rows: PickerRow[] = [];
let chosen: PickerRow | null = null;
/** 보이는 층 하나(M02 층 단추 꼴) */
let layer: PickerLayer = "personal";
/** 접었다 펼친 것을 다시 그려도 남기려고 펼친 줄 id 를 기억 */
const opened = new Set<string>();
const leafButtons = new Map<string, HTMLElement>();
const search = createInputField({ placeholder: t("M02_PickerSearch"), compact: true });
const layerBar = el("div", { className: "ui-item-picker__layers" });
const treeHost = el("div", { className: "ui-item-picker__tree" });
const detailView = createItemDetail({
projectId: opts.projectId ?? null,
@@ -138,7 +149,10 @@ export function openItemPicker(opts: ItemPickerOptions): Promise<ItemPickerResul
const cols = el("div", {
className: "ui-item-picker__cols",
children: [
el("div", { className: "ui-item-picker__left", children: [search.root, treeHost] }),
el("div", {
className: "ui-item-picker__left",
children: [search.root, layerBar, treeHost],
}),
detailView.root,
],
});
@@ -198,20 +212,42 @@ export function openItemPicker(opts: ItemPickerOptions): Promise<ItemPickerResul
children: node.children?.map((child) => toTree(child, searching)),
});
/** 층 단추 셋 — 고른 층 = filled · 찾는 중엔 층마다 맞은 수 */
const paintLayers = (groups: PickNode[], searching: boolean): void => {
layerBar.replaceChildren(
...PICKER_LAYERS.map((one) => {
const name = labels().layers[one];
const count = groups.find((group) => group.id === one)?.count ?? 0;
const button = createButton({
label: searching ? `${name} (${count})` : name,
variant: one === layer ? "filled" : "ghost",
onClick: () => {
layer = one;
paintTree();
},
});
button.setAttribute("aria-pressed", String(one === layer));
return button;
}),
);
};
const paintTree = (): void => {
leafButtons.clear();
const text = search.input.value;
const searching = text.trim() !== "";
const groups = buildTree(filterRows(rows, text), labels())
// 찾는 중에는 결과가 없는 그룹을 감춤
.filter((group) => !searching || (group.count ?? 0) > 0)
.map((group) => toTree(group, searching));
if (!groups.length) {
treeHost.replaceChildren(hint(t("M02_PickerNoMatch")));
const groups = buildTree(filterRows(rows, text), labels());
paintLayers(groups, searching);
// 뿌리 줄 없음 — 고른 층의 폴더 · 항목부터(M02 29-6 꼴)
const nodes = (groups.find((group) => group.id === layer)?.children ?? []).map((node) =>
toTree(node, searching),
);
if (!nodes.length) {
treeHost.replaceChildren(hint(t(searching ? "M02_PickerNoMatch" : "M02_TreeEmpty")));
return;
}
treeHost.replaceChildren(
...renderTree(groups, (node, caret, depth, onClick) => {
...renderTree(nodes, (node, caret, depth, onClick) => {
const button = createTreeRow(node, caret, depth, () => {
onClick();
if (!node.children?.length) return;
@@ -243,9 +279,10 @@ export function openItemPicker(opts: ItemPickerOptions): Promise<ItemPickerResul
if (start) {
for (const id of pathIds(start, labels())) opened.add(id);
chosen = start;
layer = layerOf(start);
} else {
// 지정된 게 없으면 개인(142-1 · M02 기본 층 134-4 와 같게) — 개인 항목이 없으면(회사 없음 등) 마스터
opened.add(rows.some((row) => layerOf(row) === "personal") ? "personal" : "system");
layer = rows.some((row) => layerOf(row) === "personal") ? "personal" : "system";
}
paintTree();
paintDetail();
@@ -253,6 +290,14 @@ export function openItemPicker(opts: ItemPickerOptions): Promise<ItemPickerResul
};
search.input.addEventListener("input", paintTree);
// 빈 자리 오른쪽 클릭 = 고른 층 맨 위 메뉴(개인만 「새 항목」 · 줄 위는 줄 메뉴)
treeHost.addEventListener("contextmenu", (event) => {
if ((event.target as HTMLElement).closest(".ui-tree__row")) return;
const items = menuOf({ id: layer, label: "", count: 0, folder: { layer, path: [] } });
if (!items) return;
event.preventDefault();
openTreeMenu(event, items());
});
applyButton.addEventListener(
"click",
() => chosen && finish({ action: "apply", item: toSummary(chosen) }),
ui_template/ui_template_item_picker_data.ts
+13 -4
View File
@@ -71,6 +71,9 @@ export function pathOf(row: PickerRow): string[] {
/** 보이는 항목 이름 — 경로를 이음(비면 열 id · 키) */
export const itemName = (row: PickerRow): string => pathOf(row).join(" ") || row.열 || row.key;
/** 나무 잎 글 — 경로 마지막 이름(M02 나무와 같게 · 173-2) · 비면 열 id · 키 */
export const leafLabel = (row: PickerRow): string => pathOf(row).at(-1) || row.열 || row.key;
/** 마우스를 올렸을 때 — 층 이름 + 키 */
export const rowTip = (row: PickerRow, labels: TreeLabels): string =>
`${labels.layers[layerOf(row)]} · ${row.key}`;
@@ -115,7 +118,13 @@ export interface TreeLabels {
const folderId = (layer: PickerLayer, path: string[]): string => [layer, ...path].join("|");
/** 그룹 → 폴더(경로 앞부분 · 깊이 자유) → 항목(잎). 서버가 준 차례를 지킴 · 빈 그룹도 한 줄 남김. */
/** 폴더 먼저 · 잎 뒤(M02 나무와 같게 · 173-2) — 같은 갈래 안은 서버 차례 그대로(안정 정렬) */
function foldersFirst(node: PickNode): PickNode {
node.children?.sort((a, b) => Number(!!a.row) - Number(!!b.row)).forEach(foldersFirst);
return node;
}
/** 그룹 → 폴더(경로 앞부분 · 깊이 자유) → 항목(잎). 폴더 먼저 · 빈 그룹도 한 줄 남김. */
export function buildTree(rows: PickerRow[], labels: TreeLabels): PickNode[] {
return PICKER_LAYERS.map((layer) => {
const root: PickNode = {
@@ -142,8 +151,8 @@ export function buildTree(rows: PickerRow[], labels: TreeLabels): PickNode[] {
});
parent.children?.push({
id: rowId(row),
label: itemName(row),
tip: rowTip(row, labels),
label: leafLabel(row),
tip: `${itemName(row)} · ${rowTip(row, labels)}`,
count: null,
row,
});
@@ -152,7 +161,7 @@ export function buildTree(rows: PickerRow[], labels: TreeLabels): PickNode[] {
if (node) node.count = (node.count ?? 0) + 1;
}
}
return root;
return foldersFirst(root);
});
}