Merge pull request #871 from intuitem/CA-377-add-toggle-to-show-hide-…

…non-assessable-nodes-in-framework-audit-tree-views add toggle to show hide non assessable nodes in framework audit tree views
intuitem · Sep 27, 2024 · 390a6c6 · 390a6c6
2 parents 25ca880 + fa4939d
commit 390a6c6
Show file tree

Hide file tree

Showing 6 changed files with 202 additions and 155 deletions.
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -740,5 +740,7 @@
 	"noAnswer": "No answer",
 	"successfullyUpdatedClientSettings": "Client settings successfully updated, please refresh the page.",
 	"xRaysEmptyMessage": "You have to create at least one project to use X-rays.",
+	"ShowAllNodesMessage": "Show all nodes",
+	"ShowOnlyAssessable": "Only assessable nodes",
 	"NoPreviewMessage": "No preview available."
 }
diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json
@@ -673,5 +673,7 @@
 	"waitingRiskAcceptances": "Bonjour ! Vous avez actuellement {number} risque{s} en attente d'acceptation. Vous pouvez les retrouver dans l'onglet risque.",
 	"successfullyUpdatedClientSettings": "Paramètres du client mis à jour avec succès. Vous pouvez rafrachir la page.",
 	"xRaysEmptyMessage": "Vous devez créer au moins un projet pour utiliser X-rays.",
+	"ShowAllNodesMessage": "Tous les noeuds",
+	"ShowOnlyAssessable": "uniquement les nœuds évaluables",
 	"NoPreviewMessage": "Aucun aperçu disponible."
 }
diff --git a/frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte b/frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte
@@ -135,6 +135,7 @@
 {#if nodes && nodes.length > 0}
 	{#each nodes as node, i}
 		<TreeViewItem
+			class={node.contentProps.hidden === true ? 'hidden' : null}
 			bind:this={treeItems[i]}
 			bind:children={children[i]}
 			bind:group

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
@@ -2,6 +2,8 @@
 	import { page } from '$app/stores';
 	import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte';
 	import { breadcrumbObject } from '$lib/utils/stores';
+	import { displayOnlyAssessableNodes } from './store';
+
 	import type {
 		ModalComponent,
 		ModalSettings,
@@ -10,7 +12,7 @@
 		ToastStore,
 		TreeViewNode
 	} from '@skeletonlabs/skeleton';
-	import { getModalStore, getToastStore, popup } from '@skeletonlabs/skeleton';
+	import { getModalStore, getToastStore, popup, SlideToggle } from '@skeletonlabs/skeleton';
 	import type { PageData } from './$types';
 	import TreeViewItemContent from './TreeViewItemContent.svelte';
 	import TreeViewItemLead from './TreeViewItemLead.svelte';
@@ -70,10 +72,17 @@
 	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);
+
 			return {
 				id: id,
 				content: TreeViewItemContent,
-				contentProps: { ...node, canEditRequirementAssessment },
+				contentProps: {
+					...node,
+					canEditRequirementAssessment,
+					hidden
+				},
 				lead: TreeViewItemLead,
 				leadProps: {
 					statusI18n: node.status_i18n,
@@ -89,7 +98,7 @@
 			};
 		});
 	}
-	let treeViewNodes: TreeViewNode[] = transformToTreeView(Object.entries(tree));
+	const treeViewNodes: TreeViewNode[] = transformToTreeView(Object.entries(tree));
 
 	function assessableNodesCount(nodes: TreeViewNode[]): number {
 		let count = 0;
@@ -353,11 +362,39 @@
 					{assessableNodesCount(treeViewNodes)}
 				</span>
 			</h4>
+
+			<div class="flex items-center justify-center space-x-4">
+				{#if $displayOnlyAssessableNodes}
+					<p class="font-bold text-sm">{m.ShowAllNodesMessage()}</p>
+				{:else}
+					<p class="font-bold text-sm text-green-500">{m.ShowAllNodesMessage()}</p>
+				{/if}
+				<SlideToggle
+					name="questionnaireToggle"
+					class="flex flex-row items-center justify-center"
+					active="bg-primary-500"
+					background="bg-green-500"
+					bind:checked={$displayOnlyAssessableNodes}
+					on:click={() => ($displayOnlyAssessableNodes = !$displayOnlyAssessableNodes)}
+				>
+					{#if $displayOnlyAssessableNodes}
+						<p class="font-bold text-sm text-primary-500">{m.ShowOnlyAssessable()}</p>
+					{:else}
+						<p class="font-bold text-sm">{m.ShowOnlyAssessable()}</p>
+					{/if}
+				</SlideToggle>
+			</div>
 			<div class="flex items-center my-2 text-xs space-x-2 text-gray-500">
 				<i class="fa-solid fa-diagram-project" />
 				<p>{m.mappingInferenceTip()}</p>
 			</div>
-			<RecursiveTreeView nodes={treeViewNodes} bind:expandedNodes hover="hover:bg-initial" />
+			{#key $displayOnlyAssessableNodes}
+				<RecursiveTreeView
+					nodes={transformToTreeView(Object.entries(tree))}
+					bind:expandedNodes
+					hover="hover:bg-initial"
+				/>
+			{/key}
 		</div>
 	{/if}
 </div>