fix life events mechanisms

Migrate 100 percent to svelte

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

@@ -105,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 sticky top-0 z-5">
+		<div class="bg-base-100 z-5 sticky top-0">
 			<ModalButtons onClose={closeModal} {createProfile} />
 			<div class="divider"></div>
 		</div>
@@ -143,14 +143,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 +153,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

@@ -29,7 +29,8 @@
 		'notes',
 		'phone',
 		'audios',
-		'google_id'
+		'google_id',
+		'invite_code'
 	];
 	let newNote = {
 		title: " ",

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

@@ -115,7 +115,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'

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

@@ -149,7 +149,7 @@
 		);
 		edges = [...newLayout.Edges];
 		nodes = [...newLayout.Nodes];
-	};
+	}
 
 	let handleNodeClickFunc = handleNodeClick(
 		(
@@ -157,8 +157,8 @@
 				id: number | undefined;
 			}
 		) => {
-			openPersonPanel = true;
 			selectedPerson = { ...person, id: String(person.id) };
+			openPersonPanel = true;
 			fetch('/api/person/' + person.id, {
 				method: 'GET',
 				headers: {
@@ -180,6 +180,7 @@
 						};
 						selectedPerson.id = String(person.id);
 					}
+					console.debug('Fetched person data:', data);
 				});
 		}
 	);
@@ -273,7 +274,7 @@
 					onOnlyPersonCreation={() => {
 						createPerson = false;
 					}}
-					onCreation={(node,edges) => {
+					onCreation={(node, edges) => {
 						onCreation([node], edges);
 						createPerson = false;
 					}}
@@ -355,7 +356,7 @@
 									};
 									selectedPerson.id = String(id);
 									openPersonPanel = true;
-								}else {
+								} else {
 									alert('Error fetching person data');
 								}
 							});
@@ -367,7 +368,7 @@
 	</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) {