feat: track workshop 4 activity

frontend/messages/en.json

@@ -993,7 +993,12 @@
 	"noReviewer": "No reviewer assigned",
 	"selectAudit": "Select audit",
 	"operarionalScenario": "Operational scenario",
+	"operationalScenarios": "Operational scenarios",
 	"addOperationalScenario": "Add operational scenario",
 	"workshopFour": "Workshop 4",
-	"noThreat": "No threat"
+	"noThreat": "No threat",
+	"likely": "Likely",
+	"unlikely": "Unlikely",
+	"veryLikely": "Very likely",
+	"certain": "Certain"
 }

frontend/src/lib/components/Forms/ModelForm.svelte

@@ -273,7 +273,7 @@
 	{:else if URLModel === 'attack-paths'}
 		<AttackPathForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
 	{:else if URLModel === 'operational-scenarios'}
-		<OperationalScenarioForm {form} {model} {cacheLocks} {formDataCache} {initialData} />
+		<OperationalScenarioForm {form} {model} {cacheLocks} {formDataCache} {initialData} {context}/>
 	{/if}
 	<div class="flex flex-row justify-between space-x-4">
 		{#if closeModal}

frontend/src/lib/components/Forms/ModelForm/OperationalScenarioForm.svelte

@@ -7,12 +7,27 @@
 	import { getOptions } from '$lib/utils/crud';
 	import TextArea from '../TextArea.svelte';
 	import Select from '../Select.svelte';
+	import { page } from '$app/stores';
 
 	export let form: SuperValidated<any>;
 	export let model: ModelInfo;
 	export let cacheLocks: Record<string, CacheLock> = {};
 	export let formDataCache: Record<string, any> = {};
 	export let initialData: Record<string, any> = {};
+	export let context: string;
+
+	const activityBackground = context === 'edit' ? 'bg-white' : 'bg-surface-100-800-token';
+
+	let activeActivity: string | null = null;
+	$page.url.searchParams.forEach((value, key) => {
+		if (key === 'activity' && value === 'one') {
+			activeActivity = 'one';
+		} else if (key === 'activity' && value === 'two') {
+			activeActivity = 'two';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
 </script>
 
 <AutocompleteSelect
@@ -24,42 +39,76 @@
 	label={m.ebiosRmStudy()}
 	hidden={initialData.ebios_rm_study}
 />
-<AutocompleteSelect
-	{form}
-	multiple
-	options={getOptions({
-		objects: model.foreignKeys['threats'],
-		extra_fields: [['folder', 'str']],
-		label: 'auto'
-	})}
-	field="threats"
-	cacheLock={cacheLocks['threats']}
-	bind:cachedValue={formDataCache['threats']}
-	label={m.threats()}
-/>
-<AutocompleteSelect
-	multiple
-	{form}
-	options={getOptions({
-		objects: model.foreignKeys['attack_paths'],
-		label: 'str'
-	})}
-	field="attack_paths"
-	label={m.attackPaths()}
-/>
-<Select
-	{form}
-	options={model.selectOptions['likelihood']}
-	field="likelihood"
-	label={m.likelihood()}
-	cacheLock={cacheLocks['likelihood']}
-	bind:cachedValue={formDataCache['likelihood']}
-/>
-<Checkbox {form} field="is_selected" label={m.isSelected()} />
-<TextArea
-	{form}
-	field="justification"
-	label={m.justification()}
-	cacheLock={cacheLocks['justification']}
-	bind:cachedValue={formDataCache['justification']}
-/>
+<div
+	class="relative p-2 space-y-2 rounded-md {activeActivity === 'one'
+		? 'border-2 border-primary-500'
+		: 'border-2 border-gray-300 border-dashed'}"
+>
+	<p
+		class="absolute -top-3 {activityBackground} font-bold {activeActivity === 'one'
+			? 'text-primary-500'
+			: 'text-gray-500'}"
+	>
+		{m.activityOne()}
+	</p>
+	<TextArea
+		{form}
+		field="description"
+		label={m.description()}
+		cacheLock={cacheLocks['description']}
+		bind:cachedValue={formDataCache['description']}
+		data-focusindex="1"
+	/>
+	<AutocompleteSelect
+		{form}
+		multiple
+		options={getOptions({
+			objects: model.foreignKeys['threats'],
+			extra_fields: [['folder', 'str']],
+			label: 'auto'
+		})}
+		field="threats"
+		cacheLock={cacheLocks['threats']}
+		bind:cachedValue={formDataCache['threats']}
+		label={m.threats()}
+	/>
+	<AutocompleteSelect
+		multiple
+		{form}
+		options={getOptions({
+			objects: model.foreignKeys['attack_paths'],
+			label: 'str'
+		})}
+		field="attack_paths"
+		label={m.attackPaths()}
+	/>
+</div>
+<div
+	class="relative p-2 space-y-2 rounded-md {activeActivity === 'two'
+		? 'border-2 border-primary-500'
+		: 'border-2 border-gray-300 border-dashed'}"
+>
+	<p
+		class="absolute -top-3 {activityBackground} font-bold {activeActivity === 'two'
+			? 'text-primary-500'
+			: 'text-gray-500'}"
+	>
+		{m.activityTwo()}
+	</p>
+	<Select
+		{form}
+		options={model.selectOptions['likelihood']}
+		field="likelihood"
+		label={m.likelihood()}
+		cacheLock={cacheLocks['likelihood']}
+		bind:cachedValue={formDataCache['likelihood']}
+	/>
+	<Checkbox {form} field="is_selected" label={m.isSelected()} />
+	<TextArea
+		{form}
+		field="justification"
+		label={m.justification()}
+		cacheLock={cacheLocks['justification']}
+		bind:cachedValue={formDataCache['justification']}
+	/>
+</div>

frontend/src/routes/(app)/(internal)/[model=urlmodel]/[id=uuid]/edit/+page.svelte

@@ -5,6 +5,8 @@
 
 	export let data: PageData;
 
+	const customNameDescription = ['operational-scenarios'].includes(data.model.urlModel);
+
 	breadcrumbObject.set(data.object);
 </script>
 
@@ -14,5 +16,6 @@
 	selectOptions={data.selectOptions}
 	foreignKeys={data.foreignKeys}
 	model={data.model}
+	customNameDescription={customNameDescription}
 	context="edit"
 />

frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte

@@ -79,12 +79,12 @@
 			{
 				title: safeTranslate(m.ebiosWs4_1()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-four/operational-scenario?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-four/operational-scenario?activity=one&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs4_2()),
 				status: 'to_do',
-				href: `${$page.url.pathname}/workshop-four/operational-scenario?next=${$page.url.pathname}`
+				href: `${$page.url.pathname}/workshop-four/operational-scenario?activity=two&next=${$page.url.pathname}`
 			}
 		],
 		ws5: [

frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-four/operational-scenario/+page.svelte

@@ -8,6 +8,7 @@
 	import MissingConstraintsModal from '$lib/components/Modals/MissingConstraintsModal.svelte';
 	import { checkConstraints } from '$lib/utils/crud';
 	import * as m from '$paraglide/messages.js';
+	import { page } from '$app/stores';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -50,9 +51,20 @@
 		}
 		modalStore.trigger(modal);
 	}
+
+	let activeActivity: string | null = null;
+	$page.url.searchParams.forEach((value, key) => {
+		if (key === 'activity' && value === 'one') {
+			activeActivity = 'one';
+		} else if (key === 'activity' && value === 'two') {
+			activeActivity = 'two';
+		} else if (key === 'activity' && value === 'three') {
+			activeActivity = 'three';
+		}
+	});
 </script>
 
-<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel}>
+<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel} detailQueryParameter={`activity=${activeActivity}`}>
 	<div slot="addButton">
 		<span class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
 			<button

frontend/src/routes/(app)/(internal)/operational-scenarios/[id=uuid]/+page.svelte

@@ -21,13 +21,12 @@
 		}
 	});
 
-	// const pertinenceColor = {
-	// 	undefined: 'bg-gray-200 text-gray-700',
-	// 	irrelevant: 'bg-green-200 text-green-700',
-	// 	'partially relevant': 'bg-yellow-200 text-yellow-700',
-	// 	fairly_relevant: 'bg-orange-200 text-orange-700',
-	// 	higly_relevant: 'bg-red-200 text-red-700'
-	// };
+    const likelihoodChoices = [
+        { label: m.unlikely(), value: 0 },
+        { label: m.likely(), value: 1 },
+        { label: m.veryLikely(), value: 2 },
+        { label: m.certain(), value: 3 },
+    ];
 </script>
 
 <div class="card p-4 bg-white shadow-lg">
@@ -82,7 +81,7 @@
 				<ul class="list-disc list-inside text-gray-600">
 					{#if operationalScenario.threats?.length}
 						{#each operationalScenario.threats as threat}
-							<li>{threat.str}</li>
+							<li><a class="anchor" href="/threats/{threat.id}">{threat.str}</a></li>
 						{/each}
 					{:else}
 						<li>{m.noThreat()}</li>
@@ -116,6 +115,27 @@
 					<span class="badge bg-red-200 text-red-700">{m.notSelected()}</span>
 				{/if}
 			</p>
+            <div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
+                <h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
+					<i class="fa-solid fa-dice text-black opacity-75"></i>
+					<span>{m.likelihood()}</span>
+				</h3>
+                <div class="grid grid-cols-4 gap-2 p-2">
+                    {#each likelihoodChoices as choice}
+                        {#if operationalScenario.likelihood.value === choice.value}
+                            <div style="background-color: {operationalScenario.likelihood.hexcolor}" class="flex flex-col items-center justify-center border rounded-md p-4 font-semibold">
+                                <span>{choice.label}</span>
+                                <span>({choice.value})</span>
+                            </div>
+                        {:else}
+                            <div class="flex flex-col items-center justify-center border rounded-md bg-gray-200 p-4 text-gray-500">
+                                <span>{choice.label}</span>
+                                <span>({choice.value})</span>
+                            </div>
+                        {/if}
+                    {/each}
+                </div>
+            </div>
 			<div class="w-full p-4 bg-gray-50 border rounded-md shadow-sm">
 				<h3 class="font-semibold text-lg text-gray-700 flex items-center space-x-2">
 					<i class="fa-solid fa-eye text-gray-500 opacity-75"></i>