fix life events mechanisms

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

@@ -49,6 +49,7 @@
 
 	async function save() {
 		try {
+			console.debug('Saving person data:', draftPerson);
 			const response = await fetch(`/api/person/${person.id}`, {
 				method: 'PATCH',
 				headers: {
@@ -58,6 +59,7 @@
 			});
 
 			if (!response.ok) {
+				console.error('Error saving person data, status: ', response.status, (await response.json()));
 				alert('Error saving person data, status: ' + response.status + (await response.json()));
 				return;
 			}
@@ -69,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);

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

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