feat(rails): node detail drawer — click any sub-task to inspect
Backend:
- rails.service.ts: getSubTaskDetail(id) - calls rails GET /api/sub-tasks/:id
- rails.controller.ts: GET /api/rails/sub-tasks/:id
Frontend:
- components/rails/SubTaskDetailDrawer.tsx — slide-in drawer
Header: role badge, title, close button (ESC)
Body: state/agent/model/duration/complexity grid,
description, error, result JSON
children list
event log timeline (color-coded by event type)
- components/rails/SubTaskTree.tsx: clickable Node, hover state, onSelectNode prop
- app/rails/page.tsx: detailNodeId state, drawer mount
- app/office/page.tsx: same drawer wired to its sub-tree
ESC key closes drawer. Backdrop click closes.
This commit is contained in:
@@ -1 +1 @@
|
||||
1775810293
|
||||
1775811234
|
||||
|
||||
@@ -44,6 +44,15 @@ export class RailsController {
|
||||
return { pipelineId: id, tree };
|
||||
}
|
||||
|
||||
@Get('sub-tasks/:id')
|
||||
async subTaskDetail(@Param('id') id: string) {
|
||||
const detail = await this.rails.getSubTaskDetail(id);
|
||||
if (!detail) {
|
||||
throw new HttpException('sub-task not found', HttpStatus.NOT_FOUND);
|
||||
}
|
||||
return detail;
|
||||
}
|
||||
|
||||
@Post('pipelines/start')
|
||||
async start(
|
||||
@Body() body: { project: string; requirements: string },
|
||||
|
||||
@@ -72,6 +72,14 @@ export class RailsService {
|
||||
return data.tree ?? [];
|
||||
}
|
||||
|
||||
async getSubTaskDetail(id: string): Promise<unknown | null> {
|
||||
try {
|
||||
return await this.fetchJson(`/api/sub-tasks/${id}`);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async startPipeline(input: {
|
||||
project: string;
|
||||
requirements: string;
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
} from '@/lib/useRailsSocket';
|
||||
import OfficeFloor from '@/components/office/OfficeFloor';
|
||||
import SubTaskTree from '@/components/rails/SubTaskTree';
|
||||
import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
|
||||
|
||||
type SisterKey = 'harang' | 'narang' | 'darang' | 'erang';
|
||||
|
||||
@@ -110,6 +111,7 @@ export default function OfficePage() {
|
||||
const [pipelines, setPipelines] = useState<RailsPipelineSummary[]>([]);
|
||||
const [trees, setTrees] = useState<Map<string, RailsSubTaskNode[]>>(new Map());
|
||||
const [selectedSister, setSelectedSister] = useState<SisterKey | null>(null);
|
||||
const [detailNodeId, setDetailNodeId] = useState<string | null>(null);
|
||||
|
||||
const { connected } = useRailsSocket({
|
||||
onPipelinesSnapshot: (next) => setPipelines(next),
|
||||
@@ -223,7 +225,7 @@ export default function OfficePage() {
|
||||
</CardTitle>
|
||||
{selectedSister ? (
|
||||
selectedSubTree.length > 0 ? (
|
||||
<SubTaskTree tree={selectedSubTree} />
|
||||
<SubTaskTree tree={selectedSubTree} onSelectNode={setDetailNodeId} />
|
||||
) : (
|
||||
<Empty>{selectedSister}는 지금 노는 중</Empty>
|
||||
)
|
||||
@@ -232,6 +234,13 @@ export default function OfficePage() {
|
||||
)}
|
||||
</Card>
|
||||
</TwoCol>
|
||||
|
||||
{detailNodeId && (
|
||||
<SubTaskDetailDrawer
|
||||
subTaskId={detailNodeId}
|
||||
onClose={() => setDetailNodeId(null)}
|
||||
/>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
type RailsSubTaskNode,
|
||||
} from '@/lib/useRailsSocket';
|
||||
import SubTaskTree from '@/components/rails/SubTaskTree';
|
||||
import SubTaskDetailDrawer from '@/components/rails/SubTaskDetailDrawer';
|
||||
|
||||
const Page = styled.main`
|
||||
display: flex;
|
||||
@@ -304,6 +305,7 @@ export default function RailsPage() {
|
||||
const [projectInput, setProjectInput] = useState('');
|
||||
const [reqInput, setReqInput] = useState('');
|
||||
const [starting, setStarting] = useState(false);
|
||||
const [detailNodeId, setDetailNodeId] = useState<string | null>(null);
|
||||
|
||||
const { connected } = useRailsSocket({
|
||||
onPipelinesSnapshot: (next) => {
|
||||
@@ -451,7 +453,7 @@ export default function RailsPage() {
|
||||
</DetailHeader>
|
||||
|
||||
{tree.length > 0 ? (
|
||||
<SubTaskTree tree={tree} />
|
||||
<SubTaskTree tree={tree} onSelectNode={setDetailNodeId} />
|
||||
) : (
|
||||
<Empty>아직 sub-task 가 생성 안 됐어.</Empty>
|
||||
)}
|
||||
@@ -461,6 +463,13 @@ export default function RailsPage() {
|
||||
)}
|
||||
</Pane>
|
||||
</Layout>
|
||||
|
||||
{detailNodeId && (
|
||||
<SubTaskDetailDrawer
|
||||
subTaskId={detailNodeId}
|
||||
onClose={() => setDetailNodeId(null)}
|
||||
/>
|
||||
)}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
499
frontend/components/rails/SubTaskDetailDrawer.tsx
Normal file
499
frontend/components/rails/SubTaskDetailDrawer.tsx
Normal file
@@ -0,0 +1,499 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { API_URL } from '@/lib/config';
|
||||
|
||||
interface SubTaskEvent {
|
||||
id: number;
|
||||
eventType: string;
|
||||
payload: unknown;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
interface ParentLink {
|
||||
id: string;
|
||||
role: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
interface ChildSummary {
|
||||
id: string;
|
||||
role: string;
|
||||
agentName: string;
|
||||
title: string;
|
||||
state: string;
|
||||
model: string;
|
||||
startedAt: string | null;
|
||||
completedAt: string | null;
|
||||
}
|
||||
|
||||
interface SubTaskDetail {
|
||||
id: string;
|
||||
pipelineId: string;
|
||||
parentId: string | null;
|
||||
role: string;
|
||||
agentName: string;
|
||||
title: string;
|
||||
description: string;
|
||||
state: string;
|
||||
complexityScore: number | null;
|
||||
complexityTier: string | null;
|
||||
model: string;
|
||||
resultJson: string | null;
|
||||
errorReason: string | null;
|
||||
startedAt: string | null;
|
||||
completedAt: string | null;
|
||||
createdAt: string;
|
||||
parents: ParentLink[];
|
||||
childrenList: ChildSummary[];
|
||||
events: SubTaskEvent[];
|
||||
}
|
||||
|
||||
const Backdrop = styled.div`
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const Drawer = styled.div`
|
||||
width: min(640px, 95vw);
|
||||
height: 100%;
|
||||
background: var(--bg-main);
|
||||
border-left: 1px solid var(--border-color);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Header = styled.div`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--bg-main);
|
||||
padding: 24px 28px 18px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
const TopRow = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
`;
|
||||
|
||||
const RoleBadge = styled.span<{ $role: string }>`
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
background: ${({ $role }) => roleColor($role)};
|
||||
`;
|
||||
|
||||
const Close = styled.button`
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
border-color: #5fafff;
|
||||
}
|
||||
`;
|
||||
|
||||
const Title = styled.h2`
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
letter-spacing: -0.01em;
|
||||
word-break: break-word;
|
||||
`;
|
||||
|
||||
const Breadcrumb = styled.div`
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Body = styled.div`
|
||||
padding: 24px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
`;
|
||||
|
||||
const Section = styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
`;
|
||||
|
||||
const SectionLabel = styled.h3`
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const Grid = styled.div`
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
`;
|
||||
|
||||
const Field = styled.div`
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
const FieldLabel = styled.span`
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
const FieldValue = styled.span`
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-mono);
|
||||
word-break: break-all;
|
||||
`;
|
||||
|
||||
const StateBadge = styled.span<{ $state: string }>`
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
background: ${({ $state }) => stateColor($state)};
|
||||
`;
|
||||
|
||||
const Description = styled.p`
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-input);
|
||||
padding: 14px 16px;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
`;
|
||||
|
||||
const ChildList = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
`;
|
||||
|
||||
const ChildCard = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
const ChildTitle = styled.span`
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
const Events = styled.ol`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const EventRow = styled.li`
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 10px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
`;
|
||||
|
||||
const EventType = styled.span<{ $type: string }>`
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: ${({ $type }) => eventColor($type)};
|
||||
flex-shrink: 0;
|
||||
width: 90px;
|
||||
`;
|
||||
|
||||
const EventTime = styled.span`
|
||||
color: var(--text-secondary);
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const EventPayload = styled.pre`
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
color: var(--text-primary);
|
||||
opacity: 0.8;
|
||||
`;
|
||||
|
||||
const Loading = styled.div`
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
`;
|
||||
|
||||
function roleColor(role: string): string {
|
||||
switch (role) {
|
||||
case 'manager':
|
||||
return '#8b5cf6';
|
||||
case 'principal':
|
||||
return '#3b82f6';
|
||||
case 'lead':
|
||||
return '#f97316';
|
||||
case 'junior':
|
||||
return '#22c55e';
|
||||
default:
|
||||
return '#6b7280';
|
||||
}
|
||||
}
|
||||
|
||||
function stateColor(state: string): string {
|
||||
switch (state) {
|
||||
case 'done':
|
||||
return '#22c55e';
|
||||
case 'running':
|
||||
return '#f97316';
|
||||
case 'failed':
|
||||
case 'escalated':
|
||||
return '#ef4444';
|
||||
case 'queued':
|
||||
return '#6b7280';
|
||||
default:
|
||||
return '#525252';
|
||||
}
|
||||
}
|
||||
|
||||
function eventColor(type: string): string {
|
||||
switch (type) {
|
||||
case 'spawned':
|
||||
return '#8b5cf6';
|
||||
case 'started':
|
||||
return '#f97316';
|
||||
case 'progress':
|
||||
case 'output':
|
||||
return '#5fafff';
|
||||
case 'completed':
|
||||
return '#22c55e';
|
||||
case 'failed':
|
||||
case 'escalated':
|
||||
return '#ef4444';
|
||||
default:
|
||||
return '#6b7280';
|
||||
}
|
||||
}
|
||||
|
||||
function duration(start: string | null, end: string | null): string {
|
||||
if (!start) return '—';
|
||||
const s = new Date(start).getTime();
|
||||
const e = end ? new Date(end).getTime() : Date.now();
|
||||
const ms = e - s;
|
||||
if (ms < 1000) return `${ms}ms`;
|
||||
if (ms < 60_000) return `${(ms / 1000).toFixed(2)}s`;
|
||||
return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
subTaskId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function SubTaskDetailDrawer({ subTaskId, onClose }: Props) {
|
||||
const [detail, setDetail] = useState<SubTaskDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
fetch(`${API_URL}/api/rails/sub-tasks/${subTaskId}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((r) => r.json())
|
||||
.then((data: SubTaskDetail) => {
|
||||
setDetail(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => setLoading(false));
|
||||
}, [subTaskId]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handler);
|
||||
return () => window.removeEventListener('keydown', handler);
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<Backdrop onClick={onClose}>
|
||||
<Drawer onClick={(e) => e.stopPropagation()}>
|
||||
{loading || !detail ? (
|
||||
<Loading>로딩 중...</Loading>
|
||||
) : (
|
||||
<>
|
||||
<Header>
|
||||
<TopRow>
|
||||
<RoleBadge $role={detail.role}>{detail.role}</RoleBadge>
|
||||
<Close onClick={onClose}>닫기 ESC</Close>
|
||||
</TopRow>
|
||||
<Title>{detail.title}</Title>
|
||||
{detail.parents.length > 0 && (
|
||||
<Breadcrumb>
|
||||
{detail.parents.map((p, i) => (
|
||||
<React.Fragment key={p.id}>
|
||||
<span>{p.role}</span>
|
||||
<span>›</span>
|
||||
{i === detail.parents.length - 1 && <span>현재</span>}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Breadcrumb>
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Body>
|
||||
<Section>
|
||||
<SectionLabel>상태 / 모델</SectionLabel>
|
||||
<Grid>
|
||||
<Field>
|
||||
<FieldLabel>State</FieldLabel>
|
||||
<FieldValue>
|
||||
<StateBadge $state={detail.state}>{detail.state}</StateBadge>
|
||||
</FieldValue>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Agent</FieldLabel>
|
||||
<FieldValue>{detail.agentName}</FieldValue>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Model</FieldLabel>
|
||||
<FieldValue>{detail.model || '—'}</FieldValue>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Duration</FieldLabel>
|
||||
<FieldValue>
|
||||
{duration(detail.startedAt, detail.completedAt)}
|
||||
</FieldValue>
|
||||
</Field>
|
||||
{detail.complexityTier && (
|
||||
<Field>
|
||||
<FieldLabel>Complexity</FieldLabel>
|
||||
<FieldValue>
|
||||
{detail.complexityTier} ({detail.complexityScore})
|
||||
</FieldValue>
|
||||
</Field>
|
||||
)}
|
||||
<Field>
|
||||
<FieldLabel>ID</FieldLabel>
|
||||
<FieldValue>{detail.id.slice(0, 16)}...</FieldValue>
|
||||
</Field>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
{detail.description && (
|
||||
<Section>
|
||||
<SectionLabel>설명</SectionLabel>
|
||||
<Description>{detail.description}</Description>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{detail.errorReason && (
|
||||
<Section>
|
||||
<SectionLabel>에러</SectionLabel>
|
||||
<Description>{detail.errorReason}</Description>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{detail.resultJson && (
|
||||
<Section>
|
||||
<SectionLabel>결과 JSON</SectionLabel>
|
||||
<Description>{detail.resultJson}</Description>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{detail.childrenList.length > 0 && (
|
||||
<Section>
|
||||
<SectionLabel>
|
||||
하위 노드 ({detail.childrenList.length})
|
||||
</SectionLabel>
|
||||
<ChildList>
|
||||
{detail.childrenList.map((c) => (
|
||||
<ChildCard key={c.id}>
|
||||
<RoleBadge $role={c.role}>{c.role}</RoleBadge>
|
||||
<ChildTitle>{c.title}</ChildTitle>
|
||||
<StateBadge $state={c.state}>{c.state}</StateBadge>
|
||||
<span style={{ fontSize: 10, opacity: 0.6 }}>
|
||||
{duration(c.startedAt, c.completedAt)}
|
||||
</span>
|
||||
</ChildCard>
|
||||
))}
|
||||
</ChildList>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
<Section>
|
||||
<SectionLabel>이벤트 ({detail.events.length})</SectionLabel>
|
||||
<Events>
|
||||
{detail.events.map((ev) => (
|
||||
<EventRow key={ev.id}>
|
||||
<EventType $type={ev.eventType}>{ev.eventType}</EventType>
|
||||
<EventTime>
|
||||
{new Date(ev.timestamp).toLocaleTimeString('ko-KR')}
|
||||
</EventTime>
|
||||
<EventPayload>
|
||||
{typeof ev.payload === 'string'
|
||||
? ev.payload
|
||||
: JSON.stringify(ev.payload)}
|
||||
</EventPayload>
|
||||
</EventRow>
|
||||
))}
|
||||
</Events>
|
||||
</Section>
|
||||
</Body>
|
||||
</>
|
||||
)}
|
||||
</Drawer>
|
||||
</Backdrop>
|
||||
);
|
||||
}
|
||||
@@ -13,14 +13,26 @@ const Wrap = styled.div`
|
||||
gap: 8px;
|
||||
`;
|
||||
|
||||
const Node = styled.div<{ $state: string }>`
|
||||
const Node = styled.button<{ $state: string }>`
|
||||
padding: 12px 16px;
|
||||
border-left: 3px solid ${({ $state }) => stateColor($state)};
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-sans);
|
||||
width: 100%;
|
||||
transition: all 0.15s;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-input);
|
||||
border-color: #5fafff;
|
||||
}
|
||||
`;
|
||||
|
||||
const RoleBadge = styled.span<{ $role: string }>`
|
||||
@@ -136,10 +148,16 @@ function duration(startedAt: string | null, completedAt: string | null): string
|
||||
return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`;
|
||||
}
|
||||
|
||||
function NodeRow({ node }: { node: RailsSubTaskNode }) {
|
||||
function NodeRow({
|
||||
node,
|
||||
onSelect,
|
||||
}: {
|
||||
node: RailsSubTaskNode;
|
||||
onSelect?: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<Node $state={node.state}>
|
||||
<Node $state={node.state} onClick={() => onSelect?.(node.id)}>
|
||||
<Row>
|
||||
<StateDot $state={node.state} />
|
||||
<RoleBadge $role={node.role}>{node.role}</RoleBadge>
|
||||
@@ -156,7 +174,7 @@ function NodeRow({ node }: { node: RailsSubTaskNode }) {
|
||||
{node.children.length > 0 && (
|
||||
<Children>
|
||||
{node.children.map((c) => (
|
||||
<NodeRow key={c.id} node={c} />
|
||||
<NodeRow key={c.id} node={c} onSelect={onSelect} />
|
||||
))}
|
||||
</Children>
|
||||
)}
|
||||
@@ -166,16 +184,17 @@ function NodeRow({ node }: { node: RailsSubTaskNode }) {
|
||||
|
||||
interface Props {
|
||||
tree: RailsSubTaskNode[];
|
||||
onSelectNode?: (id: string) => void;
|
||||
}
|
||||
|
||||
export default function SubTaskTree({ tree }: Props) {
|
||||
export default function SubTaskTree({ tree, onSelectNode }: Props) {
|
||||
if (tree.length === 0) {
|
||||
return <Wrap>No sub-tasks yet.</Wrap>;
|
||||
}
|
||||
return (
|
||||
<Wrap>
|
||||
{tree.map((node) => (
|
||||
<NodeRow key={node.id} node={node} />
|
||||
<NodeRow key={node.id} node={node} onSelect={onSelectNode} />
|
||||
))}
|
||||
</Wrap>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user