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 {
@@ -105,8 +104,8 @@
 
 <div class="modal modal-open z-8">
 	<div class="modal-box w-full max-w-xl gap-4">
-		<div class="bg-base-100 sticky top-0 z-5">
-			<ModalButtons onClose={closeModal} {createProfile} />
+		<div class="bg-base-100 z-5 sticky top-0">
+			<ModalButtons onClose={closeModal} createProfile={()=>{createProfile();closeModal()}} />
 			<div class="divider"></div>
 		</div>
 		<ul class="list bg-base-100 rounded-box shadow-md">
@@ -143,14 +142,6 @@
 							{create_relationship_and_person()}
 						</button>
 					{/if}
-					<button
-						class="btn btn-secondary btn-sm"
-						onclick={() => {
-							editProfile(profile.id!);
-						}}
-					>
-						{edit()}
-					</button>
 					{#if profile.label?.includes('DeletedPerson')}
 						<button
 							class="btn btn-error btn-sm"
@@ -161,12 +152,18 @@
 							{hard_delete()}
 						</button>
 					{:else}
+						<button
+							class="btn btn-secondary btn-sm"
+							onclick={() => {
+								editProfile(profile.id!);
+							}}>
+							{edit()}
+						</button>
 						<button
 							class="btn btn-error btn-sm"
 							onclick={() => {
 								deleteProfile(profile.id!);
-							}}
-						>
+							}}>
 							{delete_profile()}
 						</button>
 					{/if}

apps/app/src/lib/graph/FamilyEdge.svelte

@@ -21,7 +21,7 @@
 		data as components['schemas']['FamilyRelationship'] & { type: string }
 	).type.toLowerCase();
 	let edgeLabel: string = $state(edgeType);
-	let edgeColor: string;
+	let edgeColor: string = $state('stroke: gray;');
 	let srcPos;
 	let tgtPos;
 	if (edgeType === 'spouse') {

apps/app/src/lib/graph/PersonMenu.svelte

@@ -17,7 +17,7 @@
 	export let deleteNode: () => void;
 	export let createRelationshipAndNode: () => void;
 	export let addRelationship: () => void;
-	export let addAdmin: (() => void) | undefined;
+	// export let addAdmin: (() => void) | undefined;
 
 	let contextMenu: HTMLDivElement;
 	let isAdmin: boolean = false;

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

@@ -4,7 +4,8 @@
 		description,
 		life_events,
 		unknown,
-		until
+		until,
+		remove
 	} from '$lib/paraglide/messages';
 	import type { components } from '$lib/api/api.gen';
 
@@ -23,10 +24,16 @@
 	}
 
 	function addEvent() {
-		const newEvent = { from: '', to: '', description: '' };
+		const newEvent = { from: '', to: undefined, description: '' };
 		person_life_events = [...(person_life_events ?? []), newEvent];
 		onChange('life_events', person_life_events);
 	}
+
+	function removeEvent(index: number) {
+		if (!person_life_events) return;
+		person_life_events = person_life_events.filter((_, i) => i !== index);
+		onChange('life_events', person_life_events);
+	}
 </script>
 
 {#if person_life_events?.length}
@@ -34,15 +41,25 @@
 	<ul class="timeline timeline-snap-start timeline-vertical">
 		{#each person_life_events as event, index}
 			<li>
-				<div class="timeline-start">
+				<div class="timeline-start flex items-center">
 					{#if editorMode}
 						<input
-							type="text"
+							type="date"
 							class="input input-xs input-bordered"
 							value={event.from ?? ''}
 							on:input={(e) => updateEvent(index, 'from', e.currentTarget.value)}
 							placeholder={unknown().toLowerCase()}
 						/>
+						<!-- Remove button -->
+						<button
+							type="button"
+							class="btn btn-xs btn-ghost text-error ml-2"
+							title={remove()}
+							on:click={() => removeEvent(index)}
+							aria-label={remove() + ' ' + life_events()}
+						>
+							&#10005;
+						</button>
 					{:else}
 						{event.from ?? unknown().toLowerCase()}
 					{/if}
@@ -69,7 +86,7 @@
 							{until()}
 							{#if editorMode}
 								<input
-									type="text"
+									type="date"
 									class="input input-xs input-bordered ml-1"
 									value={event.to ?? ''}
 									on:input={(e) => updateEvent(index, 'to', e.currentTarget.value)}

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

@@ -30,7 +30,9 @@
 	) {
 		draftPerson[field] = value;
 		if (field === 'invite_code') {
-			save();
+			save().then(() => {
+				editorMode = true;
+			});
 			return;
 		}
 	}
@@ -47,6 +49,7 @@
 
 	async function save() {
 		try {
+			console.debug('Saving person data:', draftPerson);
 			const response = await fetch(`/api/person/${person.id}`, {
 				method: 'PATCH',
 				headers: {
@@ -56,7 +59,8 @@
 			});
 
 			if (!response.ok) {
-				alert('Error saving person data, status: ' + response.status);
+				console.error('Error saving person data, status: ', response.status, (await response.json()));
+				alert('Error saving person data, status: ' + response.status + (await response.json()));
 				return;
 			}
 
@@ -67,12 +71,8 @@
 				};
 			} else {
 				const errorDetails = await response.json();
-				alert(
-					'Error saving person data, status: ' +
-						response.status +
-						' ' +
-						JSON.stringify(errorDetails)
-				);
+				console.error('Error details:', errorDetails);
+				alert(`Error saving person data, status: ${response.status} ${JSON.stringify(errorDetails)}`);
 			}
 		} catch (error) {
 			alert('An unexpected error occurred: ' + error);
@@ -82,8 +82,8 @@
 </script>
 
 <div class="modal modal-open" transition:fade>
-	<div class="modal-box max-h-screen w-full max-h-80 max-w-5xl overflow-y-auto">
-		<div class="bg-base-100 sticky top-0 z-7">
+	<div class="modal-box max-h-80 max-h-screen w-full max-w-5xl overflow-y-auto">
+		<div class="bg-base-100 z-7 sticky top-0">
 			<ModalButtons {editorMode} onClose={close} onSave={save} onToggleEdit={toggleEdit} />
 			<div class="divider"></div>
 		</div>

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'];
@@ -29,7 +30,8 @@
 		'notes',
 		'phone',
 		'audios',
-		'google_id'
+		'google_id',
+		'invite_code'
 	];
 	let newNote = {
 		title: " ",
@@ -37,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,
@@ -115,7 +116,8 @@
 				let newNode = {
 					id: "person"+String(data.person?.Id),
 					data: {
-						...data.person?.Props
+						...data.person?.Props,
+						id: data.person?.Id,
 					},
 					position: { x: 0, y: 0 },
 					type: 'personNode'
@@ -205,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');
 				}
@@ -149,7 +154,7 @@
 		);
 		edges = [...newLayout.Edges];
 		nodes = [...newLayout.Nodes];
-	};
+	}
 
 	let handleNodeClickFunc = handleNodeClick(
 		(
@@ -157,8 +162,8 @@
 				id: number | undefined;
 			}
 		) => {
-			openPersonPanel = true;
 			selectedPerson = { ...person, id: String(person.id) };
+			openPersonPanel = true;
 			fetch('/api/person/' + person.id, {
 				method: 'GET',
 				headers: {
@@ -180,6 +185,7 @@
 						};
 						selectedPerson.id = String(person.id);
 					}
+					console.debug('Fetched person data:', data);
 				});
 		}
 	);
@@ -273,7 +279,7 @@
 					onOnlyPersonCreation={() => {
 						createPerson = false;
 					}}
-					onCreation={(node,edges) => {
+					onCreation={(node, edges) => {
 						onCreation([node], edges);
 						createPerson = false;
 					}}
@@ -355,19 +361,19 @@
 									};
 									selectedPerson.id = String(id);
 									openPersonPanel = true;
-								}else {
+								} else {
 									alert('Error fetching person data');
 								}
 							});
 					}}
-					onChange={() => {}}
+					removePersonFromGraph={removePersonFromGraph}
 				/>
 			{/if}
 		</SvelteFlow>
 	</SvelteFlowProvider>
 </div>
 
-<div class="absolute top-2 left-2 flex flex-row items-center gap-2">
+<div class="absolute left-2 top-2 flex flex-row items-center gap-2">
 	<HamburgerIcon
 		open_admin_panel={() => {
 			adminMenu = !adminMenu;

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

@@ -1,7 +1,6 @@
 import { client } from '$lib/api/client';
 import { redirect } from '@sveltejs/kit';
 import type { RequestEvent } from './$types';
-import { json } from 'stream/consumers';
 
 export async function GET(event: RequestEvent): Promise<Response> {
 	if (event.locals.session === null) {

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';