fix: error message for same name in a scope

intuitem · Mar 12, 2024 · 251c0c2 · 251c0c2
1 parent 1971b6b
commit 251c0c2
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 63 deletions.
diff --git a/frontend/src/lib/components/Forms/Form.svelte b/frontend/src/lib/components/Forms/Form.svelte
@@ -4,6 +4,11 @@
 	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 	import type { AnyZodObject } from 'zod';
 
+	import type { ModalStore } from '@skeletonlabs/skeleton';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+
+	const modalStore: ModalStore = getModalStore();
+
 	export let data: SuperValidated<AnyZodObject>;
 	export let dataType: 'form' | 'json';
 	export let invalidateAll = true; // set to false to keep form data using muliple forms on a page
@@ -13,12 +18,26 @@
 
 	export let debug = false; // set to true to enable SuperDebug component
 
+	function handleFormUpdated({
+		form,
+		closeModal
+	}: {
+		form: any;
+		closeModal: boolean;
+	}) {
+		if (closeModal && form.valid) {
+			$modalStore[0] ? modalStore.close() : null;
+		}
+	}
+
 	export const _form = superForm(data, {
 		dataType: dataType,
 		invalidateAll: invalidateAll,
 		applyAction: applyAction,
 		resetForm: resetForm,
-		validators: validators
+		validators: validators,
+		onUpdated: ({ form }) => handleFormUpdated({ form, closeModal: true })
+		
 	});
 
 	const { form, message /*, tainted*/, delayed, errors, allErrors, enhance } = _form;

diff --git a/frontend/src/lib/components/Forms/ModelForm.svelte b/frontend/src/lib/components/Forms/ModelForm.svelte
@@ -17,8 +17,6 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import * as m from '$paraglide/messages.js';
-	import { localItems, toCamelCase } from '$lib/utils/locales';
-	import { languageTag } from '$paraglide/runtime';
 
 	export let form: SuperValidated<AnyZodObject>;
 	export let model: ModelInfo;

diff --git a/frontend/src/routes/(app)/[model=urlmodel]/+page.server.ts b/frontend/src/routes/(app)/[model=urlmodel]/+page.server.ts
@@ -128,19 +128,19 @@ export const actions: Actions = {
 			const model: string = urlParamModelVerboseName(event.params.model!);
 			// TODO: reference newly created object
 			if (model === 'User') {
-				return message(createForm, m.successfullyCreatedObject({object: localItems(languageTag())[model.toLowerCase()].toLowerCase()}));
+				setFlash({ type: 'success', message: m.successfullyCreatedObject({object: localItems(languageTag())[model.toLowerCase()].toLowerCase()}) }, event);
 			}
-			return message(createForm, m.successfullyCreatedObject({object: localItems(languageTag())[toCamelCase(model.toLowerCase())].toLowerCase()}));
+			setFlash({ type: 'success', message: m.successfullyCreatedObject({object: localItems(languageTag())[model.toLowerCase()].toLowerCase()}) }, event);
 		}
 		return { createForm };
 	},
-	delete: async ({ request, fetch, params }) => {
-		const formData = await request.formData();
+	delete: async (event) => {
+		const formData = await event.request.formData();
 		const schema = z.object({ id: z.string().uuid() });
 		const deleteForm = await superValidate(formData, schema);
 
 		const id = deleteForm.data.id;
-		const endpoint = `${BASE_API_URL}/${params.model}/${id}/`;
+		const endpoint = `${BASE_API_URL}/${event.params.model}/${id}/`;
 
 		if (!deleteForm.valid) {
 			console.log(deleteForm.errors);
@@ -151,7 +151,7 @@ export const actions: Actions = {
 			const requestInitOptions: RequestInit = {
 				method: 'DELETE'
 			};
-			const res = await fetch(endpoint, requestInitOptions);
+			const res = await event.fetch(endpoint, requestInitOptions);
 			if (!res.ok) {
 				const response = await res.json();
 				console.log(response);
@@ -160,9 +160,9 @@ export const actions: Actions = {
 				}
 				return fail(400, { form: deleteForm });
 			}
-			const model: string = urlParamModelVerboseName(params.model!);
+			const model: string = urlParamModelVerboseName(event.params.model!);
 			// TODO: reference object by name instead of id
-			return message(deleteForm, m.successfullyDeletedObject({object: localItems(languageTag())[toCamelCase(model.toLowerCase())].toLowerCase(), id: id}));
+			setFlash({ type: 'success', message: m.successfullyDeletedObject({object: localItems(languageTag())[toCamelCase(model.toLowerCase())].toLowerCase()}) }, event);
 		}
 		return { deleteForm };
 	}

diff --git a/frontend/src/routes/(app)/[model=urlmodel]/+page.svelte b/frontend/src/routes/(app)/[model=urlmodel]/+page.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import { page } from '$app/stores';
 	import CreateModal from '$lib/components/Modals/CreateModal.svelte';
 	import ModelTable from '$lib/components/ModelTable/ModelTable.svelte';
 	import type {
 		ModalComponent,
 		ModalSettings,
 		ModalStore,
-		ToastStore
 	} from '@skeletonlabs/skeleton';
-	import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
-	import { superForm } from 'sveltekit-superforms/client';
+	import { getModalStore } from '@skeletonlabs/skeleton';
 	import type { PageData } from './$types';
 	import * as m from '$paraglide/messages';
 	import { localItems, capitalizeFirstLetter } from '$lib/utils/locales';
@@ -18,52 +15,7 @@
 	export let data: PageData;
 
 	const modalStore: ModalStore = getModalStore();
-	const toastStore: ToastStore = getToastStore();
-
-	function handleFormUpdated({
-		form,
-		pageStatus,
-		closeModal
-	}: {
-		form: any;
-		pageStatus: number;
-		closeModal: boolean;
-	}) {
-		if (closeModal && form.valid) {
-			$modalStore[0] ? modalStore.close() : null;
-		}
-		if (form.message) {
-			const toast: { message: string; background: string } = {
-				message: form.message,
-				background: pageStatus === 200 ? 'variant-filled-success' : 'variant-filled-error'
-			};
-			toastStore.trigger(toast);
-		}
-	}
-
-	let { form: deleteForm, message: deleteMessage } = {
-		form: {},
-		message: {}
-	};
-
-	let { form: createForm, message: createMessage } = {
-		form: {},
-		message: {}
-	};
-
-	// NOTE: This is a workaround for an issue we had with getting the return value from the form actions after switching pages in route /[model=urlmodel]/ without a full page reload.
-	// invalidateAll() did not work.
-	$: {
-		({ form: createForm, message: createMessage } = superForm(data.createForm, {
-			onUpdated: ({ form }) =>
-				handleFormUpdated({ form, pageStatus: $page.status, closeModal: true })
-		}));
-		({ form: deleteForm, message: deleteMessage } = superForm(data.deleteForm, {
-			onUpdated: ({ form }) =>
-				handleFormUpdated({ form, pageStatus: $page.status, closeModal: true })
-		}));
-	}
-
+	
 	function modalCreateForm(): void {
 		const modalComponent: ModalComponent = {
 			ref: CreateModal,

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
@@ -131,7 +131,11 @@
 									}/${value.id}`}
 									<a href={itemHref} class="anchor">{value.str}</a>
 								{:else}
-									{value.str ?? value}
+									{#if localItems(languageTag())[toCamelCase(value.str ?? value)]}
+										{localItems(languageTag())[toCamelCase(value.str ?? value)]}
+									{:else}
+										{value.str ?? value}
+									{/if}
 								{/if}
 							{:else}
 								--

diff --git a/frontend/src/routes/(app)/risk-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/risk-assessments/[id=uuid]/+page.svelte
@@ -19,6 +19,7 @@
 	import RiskScenarioItem from '$lib/components/RiskMatrix/RiskScenarioItem.svelte';
 	import * as m from '$paraglide/messages';
 	import { languageTag } from '$paraglide/runtime';
+	import { localItems, toCamelCase } from '$lib/utils/locales.js';
 
 	export let data;
 	const showRisks = true;
@@ -211,7 +212,7 @@
 					<ul>
 						<li class="pb-1">
 							<span class="font-semibold">{m.status()}:</span>
-							{risk_assessment.status}
+							{localItems(languageTag())[risk_assessment.status]}
 						</li>
 						<li class="pb-1">
 							<span class="font-semibold">{m.authors()}:</span>