Make ids and names unique per ToE

clouditor · Oct 24, 2023 · 2a99ae0 · 2a99ae0
1 parent 2b10fbb
commit 2a99ae0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/src/lib/components/ComplianceChart.svelte b/src/lib/components/ComplianceChart.svelte
@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import type { ComplianceStatus } from '$lib/api/evaluation';
   import type { TargetOfEvaluation } from '$lib/api/orchestrator';
-  import { ArcElement, Chart, type ChartConfiguration, type ChartData } from 'chart.js/auto';
+  import { Chart, type ChartConfiguration, type ChartData } from 'chart.js/auto';
   import { onMount } from 'svelte';
 
   let canvas: HTMLCanvasElement;
@@ -53,8 +53,6 @@
     canvas.onclick = (evt) => {
       const res = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
 
-      console.log(res);
-
       if (res.length === 0) {
         return;
       } else {
@@ -136,18 +134,19 @@
   <div class="relative flex items-start mb-2">
     <div class="flex h-6 items-center">
       <input
-        id="merge"
-        aria-describedby="merge-description"
-        name="merge"
+        id="merge-{toe.catalogId}"
+        aria-describedby="merge-description-{toe.catalogId}"
+        name="merge-{toe.catalogId}"
         type="checkbox"
         class="h-4 w-4 rounded border-gray-300 text-clouditor focus:ring-clouditor"
         bind:checked={merge}
       />
     </div>
     <div class="ml-3 text-sm leading-6">
-      <label for="merge" class="font-medium text-gray-900">Merge manual results</label>
-      {' '}
-      <span id="merge-description" class="text-gray-500">
+      <label for="merge-{toe.catalogId}" class="font-medium text-gray-900"
+        >Merge manual results</label
+      >
+      <span id="merge-description-{toe.catalogId}" class="text-gray-500">
         <span class="sr-only">Merge manual results </span>
         with automatic results.
       </span>

diff --git a/src/lib/components/ComplianceStatusSelect.svelte b/src/lib/components/ComplianceStatusSelect.svelte
@@ -14,15 +14,17 @@
   const publishingOptions = [
     {
       name: 'Compliant',
-      description: 'This job posting can be viewed by anyone who has the link.',
+      description:
+        'This evaluation result will be considered as compliant. It will be marked as manually evaluated.',
       bgColor: 'bg-green-800',
       hoverColor: 'hover:bg-green-900 focus:ring-green-800',
       divideColor: 'divide-green-900',
       status: 'EVALUATION_STATUS_COMPLIANT_MANUALLY'
     },
     {
       name: 'Non-Compliant',
-      description: 'This job posting will no longer be publicly accessible.',
+      description:
+        'This evaluation result will be considered as compliant. It will be marked as manually evaluated.',
       bgColor: 'bg-red-800',
       hoverColor: 'hover:bg-red-900 focus:ring-red-900',
       divideColor: 'divide-red-900',
@@ -36,7 +38,7 @@
     status == 'EVALUATION_STATUS_COMPLIANT_MANUALLY' ? publishingOptions[0] : publishingOptions[1];
 </script>
 
-<Listbox bind:value={status}>
+<Listbox bind:value={status} class="mt-2">
   <ListboxLabel class="sr-only">Change published status</ListboxLabel>
   <div class="relative">
     <div class="inline-flex divide-x {selected.divideColor} rounded-md shadow-sm">