close modal after relationship creation

apps/app/messages/en.json

@@ -4,6 +4,7 @@
 	"accept": "Accept",
 	"add": "Add",
 	"add_administrator": "Add administrator",
+	"add_note": "Add Note",
 	"add_relationship": "Add Relationship",
 	"address": "Address",
 	"admin": "Admin",
@@ -160,6 +161,7 @@
 	"until": "Until",
 	"vaccination": "Vaccination",
 	"vegetable": "Vegetable",
+	"verified": "Verified",
 	"video": "Video",
 	"website": "Website",
 	"weight": "Weight",

apps/app/messages/hu.json

@@ -4,6 +4,7 @@
 	"accept": "Elfogadás",
 	"add": "Hozzáadás",
 	"add_administrator": "Adminisztrátor hozzáadása",
+	"add_note": "Jegyzet hozzáadása",
 	"add_relationship": "Kapcsolat hozzáadása",
 	"address": "Cím",
 	"admin": "Adminisztrátor",
@@ -157,6 +158,7 @@
 	"until": "-ig",
 	"vaccination": "Oltás",
 	"vegetable": "Zöldség",
+	"verified": "Igazolt",
 	"video": "Videó",
 	"website": "Weboldal",
 	"weight": "Súly",

apps/app/src/lib/admin/Modal.svelte

@@ -15,13 +15,13 @@
 	let {
 		closeModal,
 		editProfile = () => {},
-		onChange = () => {},
+		removePersonFromGraph = () => {},
 		addRelationship = () => {},
 		createProfile = () => {},
 		createRelationshipAndProfile = () => {}
 	} = $props<{
 		closeModal: () => void;
-		onChange?: () => void;
+		removePersonFromGraph?: (id: any) => void;
 		addRelationship?: (id: number) => void;
 		createRelationshipAndProfile?: (id: number) => void;
 		editProfile?: (id: number) => void;
@@ -65,7 +65,7 @@
 		})
 			.then((response) => {
 				if (response.ok) {
-					onChange();
+					removePersonFromGraph(id);
 					managed_profiles_list.forEach((profile) => {
 						if (profile.id === id) {
 							profile.label = ['DeletedPerson'];
@@ -90,7 +90,6 @@
 		})
 			.then((response) => {
 				if (response.ok) {
-					onChange();
 					managed_profiles_list = managed_profiles_list.filter((profile) => profile.id !== id);
 					return;
 				} else {
@@ -106,7 +105,7 @@
 <div class="modal modal-open z-8">
 	<div class="modal-box w-full max-w-xl gap-4">
 		<div class="bg-base-100 z-5 sticky top-0">
-			<ModalButtons onClose={closeModal} {createProfile} />
+			<ModalButtons onClose={closeModal} createProfile={()=>{createProfile();closeModal()}} />
 			<div class="divider"></div>
 		</div>
 		<ul class="list bg-base-100 rounded-box shadow-md">

apps/app/src/lib/profile/OtherDetails.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { callMessageFunction } from '$lib/i18n';
 	import type { MessageKeys } from '$lib/i18n';
+	import { add_note, notes, theme } from '$lib/paraglide/messages';
 	import type { components } from '$lib/api/api.gen';
 
 	export let person: components['schemas']['PersonProperties'];
@@ -38,15 +39,60 @@
 	};
 </script>
 
-<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
-	{#each person.notes??[] as note}
-		<div class="card bg-base-100 shadow-sm">
-			<div class="card-body">
-				<h2 class="card-title">{note.title}</h2>
-				<p>{note.note}</p>
+<div class="mt-5 flex flex-col gap-2 justify-center items-center">
+	{#each person.notes ?? [] as note, i}
+		<div class="card bg-base-100 shadow-sm relative w-full max-w-xl">
+			<div class="card-body p-4 w-full">
+				{#if editorMode}
+					<input
+						type="text"
+						class="input input-bordered input-sm w-full mb-2"
+						placeholder={theme()}
+						bind:value={note.title}
+						oninput={() => onChange('notes', person.notes)}
+					/>
+					<textarea
+						class="textarea textarea-bordered textarea-sm w-full"
+						placeholder={notes()}
+						bind:value={note.note}
+						oninput={() => onChange('notes', person.notes)}
+					></textarea>
+					<button
+						type="button"
+						class="absolute top-2 right-2 btn btn-xs btn-ghost text-error ml-2"
+						aria-label="Remove note"
+						onclick={() => {
+							person.notes = (person.notes ?? []).filter((_, idx) => idx !== i);
+							onChange('notes', person.notes);
+						}}
+					>
+						&#10005;
+					</button>
+				{:else}
+					<h2 class="card-title">{note.title}</h2>
+					<p class="text-sm text-gray-500">{note.date}</p>
+					<p>{note.note}</p>
+				{/if}
 			</div>
 		</div>
 	{/each}
+	{#if editorMode}
+		<button
+			class="btn btn-accent btn-sm w-auto self-start"
+			onclick={() => {
+				const now = new Date();
+				const formattedDate = now.getFullYear() + '-' +
+					String(now.getMonth() + 1).padStart(2, '0') + '-' +
+					String(now.getDate()).padStart(2, '0');
+				person.notes = [...(person.notes ?? []), { title: '', note: '', date: formattedDate }];
+				onChange('notes', person.notes);
+			}}
+		>
+			{add_note()}
+		</button>
+	{/if}
+</div>
+<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
 	{#each Object.entries(person) as [key, value]}
 		{#if !skipFields.includes(key) && ((value !== undefined && value !== null) || editorMode)}
 			<div>

apps/app/src/lib/profile/create/Modal.svelte

@@ -2,6 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import {
 		create,
+		create_person,
 		close,
 		born,
 		mothers_first_name,
@@ -206,7 +207,7 @@
 <div class="modal modal-open max-h-screen" transition:fade>
 	<div class="modal-box flex w-full max-w-5xl flex-col items-center justify-center overflow-y-auto">
 		<div class="flex w-full max-w-5xl items-center justify-between p-2">
-			<h3 class="text-left text-lg font-bold">{create_relationship_and_person()}</h3>
+			<h3 class="text-left text-lg font-bold">{relationshipStartID !== null?create_relationship_and_person():create_person()}</h3>
 			<div>
 				<button class="btn btn-error btn-sm" onclick={onClose}>
 					{close()}

apps/app/src/lib/relationship/Modal.svelte

@@ -7,7 +7,7 @@
 		parent,
 		relation,
 		relation_type,
-		relationship,
+		verified,
 		sibling,
 		spouse,
 		until
@@ -131,11 +131,12 @@
 		});
 
 		if (!response.ok) {
-			console.log('Cannot create relationship' + ', status: ' + response.status);
+			console.error('Cannot create relationship' + ', status: ' + response.status + (await response.json()));
 			return;
 		}
 
 		const created = (await response.json()) as components['schemas']['dbtypeRelationship'][];
+		console.debug('Relationship created successfully',created);
 		relationships.push(...created);
 
 		let newEdges: Edge[] = [];
@@ -149,6 +150,7 @@
 			});
 		}
 		onCreation(newEdges);
+		closeModal();
 	}
 </script>
 
@@ -203,7 +205,7 @@
 								class="checkbox"
 							/>
 						{:else}
-							<p><strong>Verified:</strong>{r.Props?.verified}</p>
+							<p><strong>{verified()}:</strong>{r.Props?.verified}</p>
 						{/if}
 					</div>
 					<div class="form-control mt-2">

apps/app/src/routes/+page.svelte

@@ -54,6 +54,12 @@
 
 	let clientWidth: number | undefined = $state();
 	let clientHeight: number | undefined = $state();
+
+	let removePersonFromGraph = (id: any) => {
+		nodes = nodes.filter((n) => n.data.id !== id);
+		edges = edges.filter((e) => e.source !== 'person' + id && e.target !== 'person' + id);
+	};
+
 	let delete_profile = (id: any) => {
 		fetch('/api/person/' + id, {
 			method: 'DELETE',
@@ -63,8 +69,7 @@
 		})
 			.then((response) => {
 				if (response.ok) {
-					nodes = nodes.filter((n) => n.data.id !== id);
-					edges = edges.filter((e) => e.source !== 'person' + id && e.target !== 'person' + id);
+					removePersonFromGraph(id);
 				} else {
 					alert('Error deleting person');
 				}
@@ -361,7 +366,7 @@
 								}
 							});
 					}}
-					onChange={() => {}}
+					removePersonFromGraph={removePersonFromGraph}
 				/>
 			{/if}
 		</SvelteFlow>

apps/app/src/routes/api/relationship/+server.ts

@@ -12,7 +12,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
 		params: {
 			header: { 'X-User-ID': event.locals.session.userId }
 		},
-		body: event.request.json() as {
+		body: (await event.request.json()) as {
 			id1?: number;
 			id2?: number;
 			type?: 'child' | 'parent' | 'spouse' | 'sibling';