From 3375def5f4717e02f85a3a87209d4ec72ea61b22 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Wed, 11 Dec 2024 12:25:25 +0100
Subject: [PATCH] feat: highlight activities in ebios rm study edit view

---
 .../Forms/ModelForm/EbiosRmForm.svelte        | 40 ++++++++++++++++---
 .../workshop-one/ebios-rm-study/+page.svelte  |  2 +-
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte b/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte
index 9a96e0eb8..72ff48a71 100644
--- a/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte
+++ b/frontend/src/lib/components/Forms/ModelForm/EbiosRmForm.svelte
@@ -3,10 +3,10 @@
 	import type { ModelInfo, CacheLock } from '$lib/utils/types';
 	import TextField from '$lib/components/Forms/TextField.svelte';
 	import AutocompleteSelect from '$lib/components/Forms/AutocompleteSelect.svelte';
-	import Select from '$lib/components/Forms/Select.svelte';
 	import * as m from '$paraglide/messages.js';
 	import { getOptions } from '$lib/utils/crud';
 	import TextArea from '../TextArea.svelte';
+	import { page } from '$app/stores';
 
 	export let form: SuperValidated<any>;
 	export let model: ModelInfo;
@@ -14,6 +14,16 @@
 	export let formDataCache: Record<string, any> = {};
 	export let initialData: Record<string, any> = {};
 	export let context: string;
+
+	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';
+		}
+	});
 </script>
 
 {#if context !== 'ebiosRmStudy'}
@@ -50,8 +60,18 @@
 		helpText={m.ebiosRmMatrixHelpText()}
 	/>
 {:else if context === 'ebiosRmStudy'}
-	<div class="relative p-2 space-y-2 border rounded-md">
-		<p class="absolute -top-3 bg-white font-bold">{m.activityOne()}</p>
+	<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 bg-white font-bold {activeActivity === 'one'
+				? 'text-primary-500'
+				: 'text-gray-500'}"
+		>
+			{m.activityOne()}
+		</p>
 		<TextField
 			{form}
 			field="version"
@@ -92,8 +112,18 @@
 			label={m.reviewers()}
 		/>
 	</div>
-	<div class="relative p-2 space-y-2 border rounded-md">
-		<p class="absolute -top-3 bg-white font-bold">{m.activityTwo()}</p>
+	<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 bg-white font-bold {activeActivity === 'two'
+				? 'text-primary-500'
+				: 'text-gray-500'}"
+		>
+			{m.activityTwo()}
+		</p>
 		<AutocompleteSelect
 			multiple
 			{form}
diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte
index a04e689b2..929915e55 100644
--- a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/workshop-one/ebios-rm-study/+page.svelte
@@ -85,7 +85,7 @@
 				</span>
 			</div>
 			<a
-				href={`${$page.url.pathname}/edit?next=${$page.url.pathname}`}
+				href={`${$page.url.pathname}/edit?activity=${activeActivity}&next=${$page.url.pathname}?activity=${activeActivity}`}
 				class="btn variant-filled-primary h-fit"
 			>
 				<i class="fa-solid fa-pen-to-square mr-2" data-testid="edit-button" />