feat: add result filtering

intuitem · Feb 19, 2025 · db7d7d8 · db7d7d8
1 parent 42b348f
commit db7d7d8
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/+page.svelte
@@ -106,22 +106,37 @@
 		return resultCounts;
 	};
 
-	let filterStatus = ['done', 'to_do', 'in_progress', 'in_review'];
-	function toggleStatus(status: (typeof filterStatus)[number]) {
-		if (filterStatus.includes(status)) {
-			filterStatus = filterStatus.filter((s) => s !== status);
+	let selectedStatus = ['done', 'to_do', 'in_progress', 'in_review'];
+	let selectedResults = [
+		'compliant',
+		'non_compliant',
+		'partially_compliant',
+		'not_assessed',
+		'not_applicable'
+	];
+	function toggleItem(item, selectedItems) {
+		if (selectedItems.includes(item)) {
+			return selectedItems.filter((s) => s !== item);
 		} else {
-			filterStatus = [...filterStatus, status];
+			return [...selectedItems, item];
 		}
 	}
 
+	function toggleStatus(status) {
+		selectedStatus = toggleItem(status, selectedStatus);
+	}
+
+	function toggleResult(result) {
+		selectedResults = toggleItem(result, selectedResults);
+	}
 	function transformToTreeView(nodes: Node[]) {
 		return nodes.map(([id, node]) => {
 			node.resultCounts = countResults(node);
 			const hasAssessableChildren = Object.keys(node.children || {}).length > 0;
 			const hidden =
 				!(!$displayOnlyAssessableNodes || node.assessable || hasAssessableChildren) ||
-				(!filterStatus.includes(node.status) && node.assessable);
+				((!selectedStatus.includes(node.status) || !selectedResults.includes(node.result)) &&
+					node.assessable);
 
 			return {
 				id: id,
@@ -130,7 +145,7 @@
 					...node,
 					canEditRequirementAssessment,
 					hidden,
-					filterStatus
+					selectedStatus
 				},
 				lead: TreeViewItemLead,
 				leadProps: {
@@ -439,24 +454,39 @@
 					{assessableNodesCount(treeViewNodes)}
 				{/if}
 			</span>
-			<div
-				class="flex flex-wrap gap-2 ml-2 text-xs bg-gray-100 border-2 p-1 rounded-md"
-			>
+			<span class="text-xs ml-2 text-gray-500">{m.filters()}</span>
+			<div class="flex flex-wrap gap-2 ml-2 text-xs bg-gray-100 border-2 p-1 rounded-md">
 				{#each Object.entries(complianceStatusColorMap) as [status, color]}
 					<button
 						type="button"
 						on:click={() => toggleStatus(status)}
 						class="px-2 py-1 rounded-md font-bold"
-						style="background-color: {filterStatus.includes(status)
+						style="background-color: {selectedStatus.includes(status)
 							? color + '44'
-							: 'grey'}; color: {filterStatus.includes(status)
+							: 'grey'}; color: {selectedStatus.includes(status)
 							? darkenColor(color, 0.3)
-							: 'black'}; opacity: {filterStatus.includes(status) ? 1 : 0.5};"
+							: 'black'}; opacity: {selectedStatus.includes(status) ? 1 : 0.5};"
 					>
 						{safeTranslate(status)}
 					</button>
 				{/each}
 			</div>
+			<div class="flex flex-wrap gap-2 ml-2 text-xs bg-gray-100 border-2 p-1 rounded-md">
+				{#each Object.entries(complianceResultColorMap) as [result, color]}
+					<button
+						type="button"
+						on:click={() => toggleResult(result)}
+						class="px-2 py-1 rounded-md font-bold"
+						style="background-color: {selectedResults.includes(result)
+							? color + '44'
+							: 'grey'}; color: {selectedResults.includes(result)
+							? darkenColor(color, 0.3)
+							: 'black'}; opacity: {selectedResults.includes(result) ? 1 : 0.5};"
+					>
+						{safeTranslate(result)}
+					</button>
+				{/each}
+			</div>
 			<div id="toggle" class="flex items-center justify-center space-x-4 text-xs ml-auto mr-4">
 				{#if $displayOnlyAssessableNodes}
 					<p class="font-bold">{m.ShowAllNodesMessage()}</p>
@@ -485,7 +515,7 @@
 			<p>{m.mappingInferenceTip()}</p>
 		</div>
 		{#key data}
-			{#key $displayOnlyAssessableNodes || filterStatus}
+			{#key $displayOnlyAssessableNodes || selectedStatus || selectedResults}
 				<RecursiveTreeView
 					nodes={transformToTreeView(Object.entries(tree))}
 					bind:expandedNodes

diff --git a/...rc/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/...rc/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
@@ -19,7 +19,7 @@
 	export let reference_controls: z.infer<typeof ReferenceControlSchema>[] | undefined = undefined;
 	export let children: Record<string, Record<string, unknown>> | undefined = undefined;
 	export let canEditRequirementAssessment: boolean;
-	export let filterStatus: string[][];
+	export let selectedStatus: string[][];
 	export let resultCounts: Record<string, number> | undefined;
 	export let assessable: boolean;
 	export let max_score: number;
@@ -157,7 +157,7 @@
 				<div>
 					{#if hasAssessableChildren}
 						{#each Object.entries(complianceStatusColorMap) as [status, color]}
-							{#if resultCounts[status] && filterStatus.includes(status)}
+							{#if resultCounts[status] && selectedStatus.includes(status)}
 								<span
 									class="badge mr-1"
 									style="background-color: {color + '44'}; color: {darkenColor(color, 0.3)}"