Merge pull request #163 from intuitem/CA-318-Display-the-number-of-re…

…quirements-for-each-node Update TreeViewItemContent.svelte
intuitem · Mar 20, 2024 · ce51312 · ce51312
2 parents 6178443 + fa5859c
commit ce51312
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 10 deletions.
diff --git a/frontend/src/lib/components/Chart/DonutChart.svelte b/frontend/src/lib/components/Chart/DonutChart.svelte
@@ -12,7 +12,6 @@
 	export let title = '';
 
 	export let values: any[]; // Set the types for these variables later on
-	export let labels: string[];
 	export let colors: string[] = [];
 
 	for (const index in values) {

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
@@ -60,7 +60,6 @@
 				contentProps: { ...node, canEditRequirementAssessment },
 				lead: node.status ? TreeViewItemLead : '',
 				leadProps: {
-					status: node.status,
 					statusI18n: node.status_i18n,
 					assessable: node.assessable,
 					statusDisplay: node.status_display,
@@ -72,6 +71,19 @@
 	}
 	let treeViewNodes: TreeViewNode[] = transformToTreeView(Object.entries(tree));
 
+	function assessableNodesCount(nodes: TreeViewNode[]): number {
+		let count = 0;
+		for (const node of nodes) {
+			if (node.contentProps.assessable) {
+				count++;
+			}
+			if (node.children) {
+				count += assessableNodesCount(node.children);
+			}
+		}
+		return count;
+	}
+
 	let expandedNodes: TreeViewNode[] = [];
 
 	import { localStorageStore } from '@skeletonlabs/skeleton';
@@ -167,7 +179,12 @@
 	</div>
 
 	<div class="card px-6 py-4 bg-white flex flex-col shadow-lg">
-		<h4 class="h4 font-semibold">{m.associatedRequirements()}</h4>
+		<h4 class="h4 flex items-center font-semibold">
+			{m.associatedRequirements()}
+			<span class="badge variant-soft-primary ml-1">
+				{assessableNodesCount(treeViewNodes)}
+			</span>
+		</h4>
 		<RecursiveTreeView nodes={treeViewNodes} bind:expandedNodes hover="hover:bg-initial" />
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
@@ -27,7 +27,8 @@
 		canEditRequirementAssessment,
 		status,
 		statusCounts,
-		assessable
+		assessable,
+		...$$restProps
 	} as const;
 
 	type TreeViewItemNode = typeof node;
@@ -90,15 +91,14 @@
 	$: classesShowInfoText = (show: boolean) => (show ? 'text-primary-500' : '');
 	$: classesPercentText = (statusColor: string) => (statusColor === '#000000' ? 'text-white' : '');
 </script>
-
 <div class="flex flex-row justify-between space-x-8">
 	<div class="flex flex-1 max-w-[80ch] flex-col">
 		<span style="font-weight: 300;">
 			{#if assessable && canEditRequirementAssessment}
 				<span class="w-full h-full flex rounded-token hover:text-primary-500">
 					<a href="/requirement-assessments/{ra_id}?next={$page.url.pathname}">
 						{#if title} 
-							<span style="font-weight: 600;">{title}</span>&nbsp;&nbsp;
+							<span style="font-weight: 600;">{title}</span>
 						{/if}
 						{#if description}
 							<p>{description}</p>
@@ -108,7 +108,12 @@
 			{:else}
 				<p class="max-w-[80ch] whitespace-pre-line">
 					{#if title} 
-						<span style="font-weight: 600;">{title}</span>&nbsp;&nbsp;
+						<span style="font-weight: 600;">{title}</span>
+						{#if assessableNodes.length > 0} 
+							<span class="badge variant-soft-primary">
+								{assessableNodes.length}
+							</span>
+						{/if}
 					{/if}
 					{#if description}
 						<p>{description}</p>

diff --git a/frontend/src/routes/(app)/frameworks/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/frameworks/[id=uuid]/+page.svelte
@@ -27,6 +27,19 @@
 		});
 	}
 	let treeViewNodes: TreeViewNode[] = transformToTreeView(Object.entries(tree));
+
+	function assessableNodesCount(nodes: TreeViewNode[]): number {
+		let count = 0;
+		for (const node of nodes) {
+			if (node.contentProps.assessable) {
+				count++;
+			}
+			if (node.children) {
+				count += assessableNodesCount(node.children);
+			}
+		}
+		return count;
+	}
 </script>
 
 <div class="flex flex-col space-y-4 whitespace-pre-line">
@@ -82,7 +95,12 @@
 	</div>
 
 	<div class="card px-6 py-4 bg-white flex flex-col shadow-lg">
-		<h4 class="h4 font-semibold">{m.associatedRequirements()}</h4>
+		<h4 class="h4 flex items-center font-semibold">
+			{m.associatedRequirements()}
+			<span class="badge variant-soft-primary ml-1">
+				{assessableNodesCount(treeViewNodes)}
+			</span>
+		</h4>
 		<RecursiveTreeView nodes={treeViewNodes} hover="hover:bg-initial" />
 	</div>
 </div>
diff --git a/frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte
@@ -5,6 +5,35 @@
 	export let threats: Record<string, unknown>[];
 	export let reference_controls: Record<string, unknown>[];
 	export let children: Record<string, unknown>[];
+	export let assessable: boolean;
+
+	const node = {
+		ref_id,
+		name,
+		description,
+		threats,
+		reference_controls,
+		children,
+		assessable,
+		...$$restProps
+	} as const;
+	
+	type TreeViewItemNode = typeof node;
+
+	const getAssessableNodes = (
+		startNode: TreeViewItemNode,
+		assessableNodes: TreeViewItemNode[] = []
+	) => {
+		if (startNode.assessable) assessableNodes.push(startNode);
+		if (startNode.children) {
+			for (const value of Object.values(startNode.children) as TreeViewItemNode[]) {
+				getAssessableNodes(value, assessableNodes);
+			}
+		}
+		return assessableNodes;
+	};
+
+	const assessableNodes = getAssessableNodes(node);
 
 	const pattern = (ref_id ? 2 : 0) + (name ? 1 : 0)
 	const title: string = 
@@ -22,8 +51,19 @@
 <div>
 	<span class="whitespace-pre-line" style="font-weight: 300};">
 		<p class="max-w-[80ch]">
-			{#if title} <span style="font-weight: 600;">{title}</span>&nbsp;&nbsp;{/if}
-			{#if description}{description}{/if}
+			{#if title} 
+				<span style="font-weight: 600;">
+					{title}
+				</span>
+				{#if assessableNodes.length > 1} 
+					<span class="badge variant-soft-primary">
+						{assessableNodes.length}
+					</span>
+				{/if}
+			{/if}
+			{#if description}
+				{description}
+			{/if}
 		</p>
 	</span>
 	{#if (threats && threats.length > 0) || (reference_controls && reference_controls.length > 0)}