From 40d639b9e395d612d3e04c4f442dfb2e8cd05c59 Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Sep 2024 15:54:03 +0200
Subject: [PATCH 1/2] feat: make evidence deletion responsive

---
 .../Modals/DeleteConfirmModal.svelte          |  2 +-
 .../[id=uuid]/table-mode/+page.server.ts      |  6 +--
 .../[id=uuid]/table-mode/+page.svelte         | 43 ++++++++++++-------
 .../entity-assessments/[id=uuid]/+page.svelte |  5 ++-
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte b/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte
index e5b028b02..a3f044ef3 100644
--- a/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte
+++ b/frontend/src/lib/components/Modals/DeleteConfirmModal.svelte
@@ -38,7 +38,7 @@
 		</header>
 		<article>{$modalStore[0].body ?? '(body missing)'}</article>
 		<!-- Enable for debugging: -->
-		<form method="POST" action={formAction} class="modal-form {cForm}">
+		<form method="POST" action={formAction} use:enhance class="modal-form {cForm}">
 			<!-- prettier-ignore -->
 			<footer class="modal-footer {parent.regionFooter}">
         <button type="button" class="btn {parent.buttonNeutral}" data-testid="delete-cancel-button" on:click={parent.onClose}>{m.cancel()}</button>
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts
index bc8b04ed8..5a0fdbb98 100644
--- a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts
+++ b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.server.ts
@@ -124,13 +124,13 @@ export const actions: Actions = {
 			return fail(400, { form: form });
 		}
 
-		const createdObject = await res.json();
+		const createdEvidence = await res.json();
 
 		if (fileFields) {
 			for (const [, file] of Object.entries(fileFields)) {
 				if (!file) continue;
 				if (file.size <= 0) continue;
-				const fileUploadEndpoint = `${BASE_API_URL}/${'evidences'}/${createdObject.id}/upload/`;
+				const fileUploadEndpoint = `${BASE_API_URL}/${'evidences'}/${createdEvidence.id}/upload/`;
 				const fileUploadRequestInitOptions: RequestInit = {
 					headers: {
 						'Content-Disposition': `attachment; filename=${encodeURIComponent(file.name)}`
@@ -159,7 +159,7 @@ export const actions: Actions = {
 			},
 			event
 		);
-		return { createForm: form };
+		return { createForm: form, createdEvidence };
 	},
 	deleteEvidence: async (event) => {
 		const formData = await event.request.formData();
diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
index 59cbe645c..b5f246dee 100644
--- a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
+++ b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PageData } from './$types';
+	import type { PageData, Actions } from './$types';
 	import {
 		Accordion,
 		AccordionItem,
@@ -22,10 +22,9 @@
 	import { safeTranslate } from '$lib/utils/i18n';
 	import { capitalizeFirstLetter } from '$lib/utils/locales';
 	import { getModelInfo } from '$lib/utils/crud';
-	import { invalidate } from '$app/navigation';
-	import { page } from '$app/stores';
 
 	export let data: PageData;
+	export let form: Actions;
 
 	/** Is the page used for shallow routing? */
 	export let shallow = false;
@@ -33,6 +32,7 @@
 	export let actionPath: string = '';
 	export let questionnaireOnly: boolean = false;
 	export let assessmentOnly: boolean = false;
+	export let invalidateAll: boolean = true;
 
 	if (!shallow) breadcrumbObject.set(data.compliance_assessment);
 
@@ -54,6 +54,8 @@
 		data.requirements.map((requirement) => [requirement.id, requirement])
 	);
 
+	$: createdEvidence = form?.createdEvidence;
+
 	function title(requirementAssessment) {
 		const requirement = requirementHashmap[requirementAssessment.requirement];
 		const parent = data.requirements.find((req) => req.urn === requirement.parent_urn);
@@ -98,7 +100,7 @@
 			props: {
 				form: createform,
 				formAction: `${actionPath}?/createEvidence`,
-				invalidateAll: false,
+				invalidateAll: invalidateAll,
 				model: data.evidenceModel,
 				debug: false
 			}
@@ -107,15 +109,20 @@
 			type: 'component',
 			component: modalComponent,
 			title: safeTranslate('add' + capitalizeFirstLetter(data.evidenceModel.localName)),
-			response: (r) => {
-				if (r === true) {
-					invalidate($page.url.pathname);
-				}
-			}
 		};
 		modalStore.trigger(modal);
 	}
 
+	$: if (createdEvidence) {
+		console.log(createdEvidence);
+		data.requirement_assessments.find(
+			(requirementAssessment) => requirementAssessment.id === createdEvidence.requirement_assessments[0]
+		).evidences.push({
+			str: createdEvidence.name,
+			id: createdEvidence.id
+		});
+	}
+
 	function modalConfirmDelete(id: string, name: string): void {
 		const modalComponent: ModalComponent = {
 			ref: DeleteConfirmModal,
@@ -123,7 +130,7 @@
 				_form: data.deleteForm,
 				formAction: `${actionPath}?/deleteEvidence`,
 				id: id,
-				invalidateAll: false,
+				invalidateAll: invalidateAll,
 				debug: false,
 				URLModel: getModelInfo('evidences').urlModel
 			}
@@ -136,6 +143,9 @@
 			body: `${m.deleteModalMessage()}: ${name}?`
 		};
 		modalStore.trigger(modal);
+		data.requirement_assessments.forEach(requirementAssessment => {
+			requirementAssessment.evidences = requirementAssessment.evidences.filter(evidence => evidence.id !== id);
+		});
 	}
 </script>
 
@@ -193,7 +203,7 @@
 											value={option.id}
 											bind:group={requirementAssessment.status}
 											name="status"
-											on:change={(event) => update(requirementAssessment, 'status', option.id)}
+											on:change={() => update(requirementAssessment, 'status', option.id)}
 											>{option.label}</RadioItem
 										>
 									{/each}
@@ -213,7 +223,7 @@
 											value={option.id}
 											bind:group={requirementAssessment.result}
 											name="result"
-											on:change={(event) => update(requirementAssessment, 'result', option.id)}
+											on:change={() => update(requirementAssessment, 'result', option.id)}
 											>{option.label}</RadioItem
 										>
 									{/each}
@@ -245,7 +255,7 @@
 													bind:group={question.answer}
 													name="question"
 													value={option}
-													on:change={(event) =>
+													on:change={() =>
 														update(requirementAssessment, 'answer', option, question)}
 													>{option}</RadioItem
 												>
@@ -257,7 +267,7 @@
 											placeholder=""
 											class="input w-fit"
 											bind:value={question.answer}
-											on:change={(event) =>
+											on:change={() =>
 												update(requirementAssessment, 'answer', question.answer, question)}
 											{...$$restProps}
 										/>
@@ -267,7 +277,7 @@
 											class="input w-full"
 											bind:value={question.answer}
 											on:keydown={(event) => event.key === 'Enter' && event.preventDefault()}
-											on:change={(event) =>
+											on:change={() =>
 												update(requirementAssessment, 'answer', question.answer, question)}
 											{...$$restProps}
 										/>
@@ -293,7 +303,7 @@
 										{#if requirementAssessment.observationBuffer !== requirementAssessment.observation}
 											<button
 												class="rounded-md w-8 h-8 border shadow-lg hover:bg-green-300 hover:text-green-500 duration-300"
-												on:click={(event) => {
+												on:click={() => {
 													update(
 														requirementAssessment,
 														'observation',
@@ -337,6 +347,7 @@
 											<p class="card p-2">
 												<i class="fa-solid fa-file mr-2"></i>{evidence.str}
 												<button
+													class="cursor-pointer"
 													on:click={(_) => modalConfirmDelete(evidence.id, evidence.str)}
 													type="button"
 												>
diff --git a/frontend/src/routes/(app)/entity-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/entity-assessments/[id=uuid]/+page.svelte
index 5d485a271..bb29cdcaf 100644
--- a/frontend/src/routes/(app)/entity-assessments/[id=uuid]/+page.svelte
+++ b/frontend/src/routes/(app)/entity-assessments/[id=uuid]/+page.svelte
@@ -5,9 +5,10 @@
 	import * as m from '$paraglide/messages';
 	import { TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
 	import AuditTableMode from '../../compliance-assessments/[id=uuid]/table-mode/+page.svelte';
-	import type { PageData } from './$types';
+	import type { PageData, Actions } from './$types';
 
 	export let data: PageData;
+	export let form: Actions;
 
 	import { breadcrumbObject } from '$lib/utils/stores';
 	breadcrumbObject.set(data.data);
@@ -38,10 +39,12 @@
 						{#if Object.hasOwn($page.state, 'auditTableMode')}
 							<div class="max-h-[48rem] overflow-y-scroll">
 								<AuditTableMode
+									form={form}
 									data={$page.state.auditTableMode}
 									actionPath={`/compliance-assessments/${data.data.compliance_assessment.id}/table-mode`}
 									shallow
 									questionnaireOnly
+									invalidateAll={false}
 								/>
 							</div>
 						{/if}

From 215c4258a50bfbdeb670cfb2c78f5a0e0e07f37c Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Fri, 13 Sep 2024 18:44:06 +0200
Subject: [PATCH 2/2] feat: evidence can be add with reactivity

---
 .../[id=uuid]/table-mode/+page.svelte         | 85 ++++++++++---------
 1 file changed, 47 insertions(+), 38 deletions(-)

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
index b5f246dee..906a183f7 100644
--- a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
+++ b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/table-mode/+page.svelte
@@ -113,15 +113,19 @@
 		modalStore.trigger(modal);
 	}
 
-	$: if (createdEvidence) {
-		console.log(createdEvidence);
-		data.requirement_assessments.find(
-			(requirementAssessment) => requirementAssessment.id === createdEvidence.requirement_assessments[0]
-		).evidences.push({
-			str: createdEvidence.name,
-			id: createdEvidence.id
-		});
-	}
+	let addeddEvidence = 0;
+
+	
+	$: if (createdEvidence && shallow) {
+			data.requirement_assessments.find(
+				(requirementAssessment) => requirementAssessment.id === createdEvidence.requirement_assessments[0]
+			).evidences.push({
+				str: createdEvidence.name,
+				id: createdEvidence.id
+			});
+			createdEvidence = undefined;
+			addeddEvidence =+ 1;
+		}
 
 	function modalConfirmDelete(id: string, name: string): void {
 		const modalComponent: ModalComponent = {
@@ -329,35 +333,40 @@
 									</div>
 								</svelte:fragment>
 							</AccordionItem>
-							<AccordionItem>
-								<svelte:fragment slot="summary"
-									><p class="flex">
-										{m.evidence()} ({requirementAssessment.evidences.length})
-									</p></svelte:fragment
-								>
-								<svelte:fragment slot="content">
-									<div class="flex flex-row space-x-2 items-center">
-										<button
-											class="btn variant-filled-primary self-start"
-											on:click={() =>
-												modalEvidenceCreateForm(requirementAssessment.evidenceCreateForm)}
-											type="button"><i class="fa-solid fa-plus mr-2" />{m.addEvidence()}</button
-										>
-										{#each requirementAssessment.evidences as evidence}
-											<p class="card p-2">
-												<i class="fa-solid fa-file mr-2"></i>{evidence.str}
-												<button
-													class="cursor-pointer"
-													on:click={(_) => modalConfirmDelete(evidence.id, evidence.str)}
-													type="button"
-												>
-													<i class="fa-solid fa-xmark ml-2 text-red-500"></i>
-												</button>
-											</p>
-										{/each}
-									</div>
-								</svelte:fragment>
-							</AccordionItem>
+								<AccordionItem>
+									<svelte:fragment slot="summary"
+										><p class="flex items-center space-x-2">
+											<span>{m.evidence()}</span>
+											{#key addeddEvidence}
+												<span class="badge variant-soft-primary">{requirementAssessment.evidences.length}</span>
+											{/key}
+										</p></svelte:fragment
+									>
+									<svelte:fragment slot="content">
+										<div class="flex flex-row space-x-2 items-center">
+											<button
+												class="btn variant-filled-primary self-start"
+												on:click={() =>
+													modalEvidenceCreateForm(requirementAssessment.evidenceCreateForm)}
+												type="button"><i class="fa-solid fa-plus mr-2" />{m.addEvidence()}</button
+											>
+											{#key addeddEvidence}
+												{#each requirementAssessment.evidences as evidence}
+													<p class="card p-2">
+														<i class="fa-solid fa-file mr-2"></i>{evidence.str}
+														<button
+															class="cursor-pointer"
+															on:click={(_) => modalConfirmDelete(evidence.id, evidence.str)}
+															type="button"
+														>
+															<i class="fa-solid fa-xmark ml-2 text-red-500"></i>
+														</button>
+													</p>
+												{/each}
+											{/key}
+										</div>
+									</svelte:fragment>
+								</AccordionItem>
 						</Accordion>
 					</div>
 				</form>