From 38aa91e9fa93731342dd0069ceefd587317afc92 Mon Sep 17 00:00:00 2001 From: melinoix Date: Tue, 24 Sep 2024 16:20:01 +0200 Subject: [PATCH 1/3] added the toggle button on non assessable nodes front but no liaison backend --- frontend/messages/en.json | 4 ++- frontend/messages/fr.json | 4 ++- .../[id=uuid]/+page.svelte | 31 +++++++++++++++++-- 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/frontend/messages/en.json b/frontend/messages/en.json index 1e469a5ef..d72b3ff9d 100644 --- a/frontend/messages/en.json +++ b/frontend/messages/en.json @@ -739,5 +739,7 @@ "nameDuplicate": "Name already exists", "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." + "xRaysEmptyMessage": "You have to create at least one project to use X-rays.", + "ShowAllNodesMessage": "Show all nodes", + "ShowOnlyAssessable": "Only assessable nodes" } diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json index adaf70cee..f3d49a504 100644 --- a/frontend/messages/fr.json +++ b/frontend/messages/fr.json @@ -672,5 +672,7 @@ "owner": "Propriétaire", "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." + "xRaysEmptyMessage": "Vous devez créer au moins un projet pour utiliser X-rays.", + "ShowAllNodesMessage": "Tous les noeuds", + "ShowOnlyAssessable": "uniquement les nœuds évaluables" } 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 index aad68ae6e..852de21f4 100644 --- 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 @@ -10,7 +10,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'; @@ -174,6 +174,7 @@ }; modalStore.trigger(modal); } + let assessableNode = true;
@@ -353,11 +354,37 @@ {assessableNodesCount(treeViewNodes)} + +
+ {#if assessableNode} +

{m.ShowAllNodesMessage()}

+ {:else} +

{m.ShowAllNodesMessage()}

+ {/if} + (assessableNode = !assessableNode)} + > + {#if assessableNode} +

{m.ShowOnlyAssessable()}

+ {:else} +

{m.ShowOnlyAssessable()}

+ {/if} + +

{m.mappingInferenceTip()}

- + {#if assessableNode} + + {:else} + + {/if}
{/if} From 08c7a21b5e62179fb8467199e0adefb5d3caaa94 Mon Sep 17 00:00:00 2001 From: melinoix Date: Wed, 25 Sep 2024 16:50:28 +0200 Subject: [PATCH 2/3] changed the tree view, connected the assessable nodes tree view --- .../TreeView/RecursiveTreeViewItem.svelte | 1 + .../[id=uuid]/+page.svelte | 34 +- .../[id=uuid]/TreeViewItemContent.svelte | 305 +++++++++--------- .../compliance-assessments/[id=uuid]/store.ts | 2 + 4 files changed, 179 insertions(+), 163 deletions(-) create mode 100644 frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts diff --git a/frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte b/frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte index 8fd463986..66c69e4f4 100644 --- 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} { node.resultCounts = countResults(node); + const hasAssessableChildren = Object.keys(node.children || {}).length > 0; + const hidden = !(!$assessableNode || 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; @@ -174,7 +183,6 @@ }; modalStore.trigger(modal); } - let assessableNode = true;
@@ -356,7 +364,7 @@
- {#if assessableNode} + {#if $assessableNode}

{m.ShowAllNodesMessage()}

{:else}

{m.ShowAllNodesMessage()}

@@ -366,10 +374,10 @@ class="flex flex-row items-center justify-center" active="bg-primary-500" background="bg-green-500" - bind:checked={assessableNode} - on:click={() => (assessableNode = !assessableNode)} + bind:checked={$assessableNode} + on:click={() => ($assessableNode = !$assessableNode)} > - {#if assessableNode} + {#if $assessableNode}

{m.ShowOnlyAssessable()}

{:else}

{m.ShowOnlyAssessable()}

@@ -380,11 +388,13 @@

{m.mappingInferenceTip()}

- {#if assessableNode} - - {:else} - - {/if} + {#key $assessableNode} + + {/key}
{/if} diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte index 292f849bf..feba8afea 100644 --- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte +++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte @@ -7,6 +7,7 @@ import { displayScoreColor, formatScoreValue } from '$lib/utils/helpers'; import { safeTranslate } from '$lib/utils/i18n'; import type { z } from 'zod'; + import { assessableNode } from './store.ts'; export let ref_id: string; export let name: string; @@ -101,163 +102,165 @@ $: classesPercentText = (resultColor: string) => (resultColor === '#000000' ? 'text-white' : ''); -
-
-
-
- {#if assessable} - - {#if canEditRequirementAssessment} - - {#if title} - {title} - {/if} - {#if description} -

{description}

- {/if} - - {:else} - - {#if title} - {title} - {/if} - {#if description} -

{description}

- {/if} - - {/if} - - {:else} -

- {#if title} - {title} - {/if} - {#if description} -

{description}

- {/if} -

- {/if} -
-
- {#if hasAssessableChildren} - {#each Object.entries(complianceStatusColorMap) as status} - {#if resultCounts[status[0]]} - - {resultCounts[status[0]]} - {safeTranslate(status[0])} - - {/if} - {/each} - {/if} -
-
- {#if (threats && threats.length > 0) || (reference_controls && reference_controls.length > 0)} -
{ - e.preventDefault(); - showInfo = !showInfo; - }} - on:keydown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); - showInfo = !showInfo; - } - }} - > - Learn more -
-
-
-

- - Suggested reference controls -

- {#if reference_controls?.length === 0} -

--

- {:else if reference_controls} - + {#if description} +

{description}

+ {/if} + + {:else} + + {#if title} + {title} + {/if} + {#if description} +

{description}

+ {/if} + + {/if} + + {:else} +

+ {#if title} + {title} + {/if} + {#if description} +

{description}

+ {/if} +

{/if}
-
-

- - Threats covered -

- {#if threats?.length === 0} -

--

- {:else if threats} -
    - {#each threats as threat} -
  • - {#if threat.id} - - {threat.name} - - {:else} -

    {threat.name}

    - {/if} -
    • - {/each} -
+
+ {#if hasAssessableChildren} + {#each Object.entries(complianceStatusColorMap) as status} + {#if resultCounts[status[0]]} + + {resultCounts[status[0]]} + {safeTranslate(status[0])} + + {/if} + {/each} {/if}
- {/if} -
- {#if hasAssessableChildren} -
-
- {#each orderedResultPercentages as rp} -
- {rp.percentage.display}% + {#if (threats && threats.length > 0) || (reference_controls && reference_controls.length > 0)} +
{ + e.preventDefault(); + showInfo = !showInfo; + }} + on:keydown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + showInfo = !showInfo; + } + }} + > + Learn more +
+
+
+

+ + Suggested reference controls +

+ {#if reference_controls?.length === 0} +

--

+ {:else if reference_controls} +
    + {#each reference_controls as func} +
  • + {#if func.id} + + {func.name} + + {:else} +

    {func.name}

    + {/if} +
    • + {/each} +
+ {/if}
- {/each} -
- {#if nodeScore() >= 0} - - {nodeScore()} - +
+

+ + Threats covered +

+ {#if threats?.length === 0} +

--

+ {:else if threats} +
    + {#each threats as threat} +
  • + {#if threat.id} + + {threat.name} + + {:else} +

    {threat.name}

    + {/if} +
    • + {/each} +
+ {/if} +
+
{/if}
- {/if} -
+ {#if hasAssessableChildren} +
+
+ {#each orderedResultPercentages as rp} +
+ {rp.percentage.display}% +
+ {/each} +
+ {#if nodeScore() >= 0} + + {nodeScore()} + + {/if} +
+ {/if} +
+{/if} diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts new file mode 100644 index 000000000..6c38487b1 --- /dev/null +++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts @@ -0,0 +1,2 @@ +import { writable } from 'svelte/store'; +export const assessableNode = writable(true); From fa4939d61a1b4735dc4abeb8d52f8fb6f3705f84 Mon Sep 17 00:00:00 2001 From: Nassim Tabchiche Date: Fri, 27 Sep 2024 21:00:04 +0200 Subject: [PATCH 3/3] Rename assessableNode store to displayAssessableNodes --- .../compliance-assessments/[id=uuid]/+page.svelte | 14 +++++++------- .../[id=uuid]/TreeViewItemContent.svelte | 4 ++-- .../compliance-assessments/[id=uuid]/store.ts | 2 +- 3 files changed, 10 insertions(+), 10 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 index 8602c2e2b..e12040ccf 100644 --- 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,7 +2,7 @@ import { page } from '$app/stores'; import RecursiveTreeView from '$lib/components/TreeView/RecursiveTreeView.svelte'; import { breadcrumbObject } from '$lib/utils/stores'; - import { assessableNode } from './store.ts'; + import { displayOnlyAssessableNodes } from './store'; import type { ModalComponent, @@ -73,7 +73,7 @@ return nodes.map(([id, node]) => { node.resultCounts = countResults(node); const hasAssessableChildren = Object.keys(node.children || {}).length > 0; - const hidden = !(!$assessableNode || node.assessable || hasAssessableChildren); + const hidden = !(!$displayOnlyAssessableNodes || node.assessable || hasAssessableChildren); return { id: id, @@ -364,7 +364,7 @@
- {#if $assessableNode} + {#if $displayOnlyAssessableNodes}

{m.ShowAllNodesMessage()}

{:else}

{m.ShowAllNodesMessage()}

@@ -374,10 +374,10 @@ class="flex flex-row items-center justify-center" active="bg-primary-500" background="bg-green-500" - bind:checked={$assessableNode} - on:click={() => ($assessableNode = !$assessableNode)} + bind:checked={$displayOnlyAssessableNodes} + on:click={() => ($displayOnlyAssessableNodes = !$displayOnlyAssessableNodes)} > - {#if $assessableNode} + {#if $displayOnlyAssessableNodes}

{m.ShowOnlyAssessable()}

{:else}

{m.ShowOnlyAssessable()}

@@ -388,7 +388,7 @@

{m.mappingInferenceTip()}

- {#key $assessableNode} + {#key $displayOnlyAssessableNodes} (resultColor === '#000000' ? 'text-white' : ''); -{#if !$assessableNode || assessable || hasAssessableChildren} +{#if !$displayOnlyAssessableNodes || assessable || hasAssessableChildren}
diff --git a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts index 6c38487b1..63631771f 100644 --- a/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts +++ b/frontend/src/routes/(app)/(third-party)/compliance-assessments/[id=uuid]/store.ts @@ -1,2 +1,2 @@ import { writable } from 'svelte/store'; -export const assessableNode = writable(true); +export const displayOnlyAssessableNodes = writable(false);