diff --git a/reports/src/capability/CapabilityTable.tsx b/reports/src/capability/CapabilityTable.tsx index 950d072..00c6f64 100644 --- a/reports/src/capability/CapabilityTable.tsx +++ b/reports/src/capability/CapabilityTable.tsx @@ -1,6 +1,15 @@ -import { Box, Breadcrumbs, Typography } from "@mui/material"; +import { + Box, + Breadcrumbs, + List, + ListItem, + ListItemButton, + ListItemText, + Paper, + Typography, +} from "@mui/material"; import { Capability } from "./capabilityTypes"; -import { useMatches } from "react-router-dom"; +import { useMatches, useNavigate } from "react-router-dom"; import { ReactNode } from "react"; import { Report } from "./capabilityTypes"; import { CapabilityTableHeader } from "./CapabilityTableHeader"; @@ -37,6 +46,7 @@ export const CapabilityTable = ({ report, participantMissing, }: CapabilityTableProps) => { + const navigate = useNavigate(); if (!capability) { return Capability not found; } @@ -56,9 +66,22 @@ export const CapabilityTable = ({ }} > {participantMissing ? ( - - Select a participant in the top bar - + <> + + {report.participants?.length ? "Participants" : "Participant"} + + + + {report.participants?.map((p, i) => ( + + navigate(`/${i}`)}> + + + + ))} + + + ) : ( <> diff --git a/reports/src/capability/CapabilityTableHeader.tsx b/reports/src/capability/CapabilityTableHeader.tsx index 0428280..6489c44 100644 --- a/reports/src/capability/CapabilityTableHeader.tsx +++ b/reports/src/capability/CapabilityTableHeader.tsx @@ -1,19 +1,9 @@ -import { - AppBar, - Toolbar, - Typography, - FormControl, - InputLabel, - Select, - MenuItem, - IconButton, - SelectChangeEvent, -} from "@mui/material"; +import { AppBar, Toolbar, Typography, IconButton, Box } from "@mui/material"; import Brightness4Icon from "@mui/icons-material/Brightness4"; import Brightness7Icon from "@mui/icons-material/Brightness7"; import { Capability, Report } from "./capabilityTypes"; import { useTheme } from "../ThemeContext"; -import { useLocation, useNavigate } from "react-router-dom"; +import { ParticipantSelector } from "./ParticipantSelector"; type CapabilityTableHeaderProps = { capability: Capability; @@ -25,39 +15,18 @@ export const CapabilityTableHeader = ({ report, }: CapabilityTableHeaderProps) => { const { colorMode, toggleColorMode } = useTheme(); - const location = useLocation(); - const navigate = useNavigate(); - const ussp = parseInt(location.pathname.split("/")[1]) || 0; - - const handleUsspSelect = (event: SelectChangeEvent) => { - const id = event.target.value; - navigate(`/${id}`); - }; return ( {report.name} - {capability.name} - - USSP - - - - - {colorMode === "dark" ? : } - + + + + {colorMode === "dark" ? : } + + ); diff --git a/reports/src/capability/ParticipantSelector.tsx b/reports/src/capability/ParticipantSelector.tsx new file mode 100644 index 0000000..b07493c --- /dev/null +++ b/reports/src/capability/ParticipantSelector.tsx @@ -0,0 +1,47 @@ +import { + FormControl, + InputLabel, + Select, + MenuItem, + SelectChangeEvent, +} from "@mui/material"; +import { useLocation, useNavigate } from "react-router-dom"; +import { Report } from "./capabilityTypes"; + +export const ParticipantSelector = ({ + report, + hideIfNoParticipant, +}: { + report: Report; + hideIfNoParticipant?: boolean; +}) => { + const location = useLocation(); + const navigate = useNavigate(); + const ussp = parseInt(location.pathname.split("/")[1]); + + const handleUsspSelect = (event: SelectChangeEvent) => { + const id = event.target.value; + navigate(`/${id}`); + }; + if (hideIfNoParticipant && Number.isNaN(ussp)) { + return null; + } + return ( + + USSP + + + ); +}; diff --git a/reports/src/capability/RequirementTable.tsx b/reports/src/capability/RequirementTable.tsx index dc98292..2410e38 100644 --- a/reports/src/capability/RequirementTable.tsx +++ b/reports/src/capability/RequirementTable.tsx @@ -102,8 +102,9 @@ const CheckAggregateRow = ({ checks }: { checks: Check[] }) => { ); }; -const getCheckId = (check: Check): string => { +const getCheckId = (check: Check, requirementName: string): string => { return [ + requirementName, check.scenario.name, check.case.name, check.step.name, @@ -114,7 +115,7 @@ const getCheckId = (check: Check): string => { const checkAggregatedRows = (requirement: Requirement) => { // Group checks by ID const aggregatedChecks = requirement.checks.reduce((acc, check) => { - const checkId = getCheckId(check); + const checkId = getCheckId(check, requirement.name); if (checkId in acc) { return { ...acc, [checkId]: [...acc[checkId], check] }; } else {