From 6bdbee1271b9ae3c2bbe2c00b5e47380721a7342 Mon Sep 17 00:00:00 2001
From: Vargha Csongor <Culisa1023@gmail.com>
Date: Sun, 5 May 2024 12:21:27 +0200
Subject: [PATCH] Add person menu

---
 .../src/lib/family_tree/PersonMenu.svelte     | 41 ++++++++++
 .../src/lib/family_tree/PersonNode.svelte     |  3 +-
 .../src/lib/family_tree/setFamilyTreeNodes.ts | 40 ++++++++++
 frontend/src/routes/+page.svelte              | 75 ++++++++-----------
 4 files changed, 116 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/lib/family_tree/PersonMenu.svelte
 create mode 100644 frontend/src/lib/family_tree/setFamilyTreeNodes.ts

diff --git a/frontend/src/lib/family_tree/PersonMenu.svelte b/frontend/src/lib/family_tree/PersonMenu.svelte
new file mode 100644
index 0000000..9d99dbd
--- /dev/null
+++ b/frontend/src/lib/family_tree/PersonMenu.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	export let onClick: () => void;
+	export let deleteNode: () => void;
+	export let addRelationship: () => void;
+	export let addFamilymember: () => void;
+	export let id: string;
+	export let top: number | undefined;
+	export let left: number | undefined;
+	export let right: number | undefined;
+	export let bottom: number | undefined;
+</script>
+
+<div
+	style="top: {top}px; left: {left}px; right: {right}px; bottom: {bottom}px;"
+	class="context-menu bg-primary-100 rounded-lg shadow-lg"
+	on:click={onClick}
+>
+	<p style="margin: 0.5em;">
+		<small>node: {id}</small>
+	</p>
+	<button on:click={addRelationship}>Add Relationship</button>
+	<button on:click={addFamilymember}>Add familymember</button>
+	<button on:click={deleteNode}>Delete</button>
+</div>
+
+<style>
+	.context-menu {
+		border-style: solid;
+		box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
+		position: absolute;
+		z-index: 10;
+	}
+
+	.context-menu button {
+		border: none;
+		display: block;
+		padding: 0.5em;
+		text-align: left;
+		width: 100%;
+	}
+</style>
diff --git a/frontend/src/lib/family_tree/PersonNode.svelte b/frontend/src/lib/family_tree/PersonNode.svelte
index b8f7ee9..eed65ce 100644
--- a/frontend/src/lib/family_tree/PersonNode.svelte
+++ b/frontend/src/lib/family_tree/PersonNode.svelte
@@ -37,9 +37,10 @@
 			</figure>
 		</div>
 		<h2 class="card-title text-base-content">
-			{data.Lastname}
+			
 			{data.Firstname}
 			{data.Middlename}
+			{data.Lastname}
 		</h2>
 	</div>
 </div>
diff --git a/frontend/src/lib/family_tree/setFamilyTreeNodes.ts b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
new file mode 100644
index 0000000..643fdee
--- /dev/null
+++ b/frontend/src/lib/family_tree/setFamilyTreeNodes.ts
@@ -0,0 +1,40 @@
+import { fetch_family_tree } from '$lib/family_tree/getFamilyTree';
+import { getLayoutedElements } from '$lib/family_tree/dagreLayout';
+import { AddToNodesData, AddToEdgesData } from '$lib/family_tree/dataAdapter';
+import type { Node, Edge } from '@xyflow/svelte';
+import { useEdges, useNodes } from '@xyflow/svelte';
+
+const nodes = useNodes();
+const edges = useEdges();
+
+export function setFamilyTreeNodes() {
+    console.log('fetching nodes');
+    fetch_family_tree().then((data) => {
+        let nodes_data: Node[] = [];
+        function pushNodeToData(node: Node) {
+            nodes_data.push(node);
+        }
+
+        AddToNodesData(data, 0, pushNodeToData);
+        AddToNodesData(data, 2, pushNodeToData);
+        AddToNodesData(data, 4, pushNodeToData);
+        AddToNodesData(data, 6, pushNodeToData);
+        AddToNodesData(data, 8, pushNodeToData);
+
+        let edges_data: Edge[] = [];
+        function pushEdgeToData(edge: Edge) {
+            edges_data.push(edge);
+        }
+
+        AddToEdgesData(data, 1, pushEdgeToData);
+        AddToEdgesData(data, 3, pushEdgeToData);
+        AddToEdgesData(data, 5, pushEdgeToData);
+        AddToEdgesData(data, 7, pushEdgeToData);
+
+        const layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
+
+        $nodes = layoutedElements.nodes;
+        $edges = layoutedElements.edges;
+    });
+    console.log('nodes fetched and set');
+}
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index d31396c..060813a 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -5,52 +5,20 @@
 	import type { Node, Edge, NodeTypes } from '@xyflow/svelte';
 	import { isAuthenticated } from '../lib/stores';
 	import PersonNode from './../lib/family_tree/PersonNode.svelte';
+	import { setFamilyTreeNodes } from '../lib/family_tree/setFamilyTreeNodes';
 	import { login } from '../lib/auth';
-	import { fetch_family_tree } from '$lib/family_tree/getFamilyTree';
-	import { getLayoutedElements } from '$lib/family_tree/dagreLayout';
-	import { AddToNodesData, AddToEdgesData } from '$lib/family_tree/dataAdapter';
-	let edges_data: {
-		id: string;
-		source: string;
-		target: string;
-		data: { type: string; verified: boolean };
-	}[] = [];
+
+	import PersonMenu from '$lib/family_tree/PersonMenu.svelte';
+	import PersonPanel from '$lib/family_tree/PersonPanel.svelte';
 	const nodes = writable<Node[]>([]);
 	const edges = writable<Edge[]>([]);
 	onMount(() => {
 		if (!$isAuthenticated) {
-			console.log('user authenticated:', $isAuthenticated);
+			console.log('user is not authenticated');
 			login();
 		} else {
-			console.log('user authenticated:', $isAuthenticated);
-			console.log('fetching nodes');
-			fetch_family_tree().then((data) => {
-				let nodes_data: Node[] = [];
-				function pushNodeToData(node: Node) {
-					nodes_data.push(node);
-				}
-
-				AddToNodesData(data, 0, pushNodeToData);
-				AddToNodesData(data, 2, pushNodeToData);
-				AddToNodesData(data, 4, pushNodeToData);
-				AddToNodesData(data, 6, pushNodeToData);
-				AddToNodesData(data, 8, pushNodeToData);
-
-				let edges_data: Edge[] = [];
-				function pushEdgeToData(edge: Edge) {
-					edges_data.push(edge);
-				}
-
-				AddToEdgesData(data, 1, pushEdgeToData);
-				AddToEdgesData(data, 3, pushEdgeToData);
-				AddToEdgesData(data, 5, pushEdgeToData);
-				AddToEdgesData(data, 7, pushEdgeToData);
-
-				const layoutedElements = getLayoutedElements(nodes_data, edges_data, 'TB');
-
-				$nodes = layoutedElements.nodes;
-				$edges = layoutedElements.edges;
-			});
+			console.log('user is authenticated');
+			setFamilyTreeNodes();
 		}
 	});
 
@@ -58,6 +26,8 @@
 		custom: PersonNode
 	};
 
+	let personPanel: {} | null;
+
 	let menu: { id: string; top?: number; left?: number; right?: number; bottom?: number } | null;
 	let width: number;
 	let height: number;
@@ -69,7 +39,7 @@
 		// Calculate position of the context menu. We want to make sure it
 		// doesn't get positioned off-screen.
 		menu = {
-			id: node.id,
+			id: node.data.ID,
 			top: event.clientY < height - 200 ? event.clientY : undefined,
 			left: event.clientX < width - 200 ? event.clientX : undefined,
 			right: event.clientX >= width - 200 ? width - event.clientX : undefined,
@@ -85,9 +55,30 @@
 
 <div style="height:100vh;">
 	<SvelteFlowProvider>
-		<SvelteFlow {nodes} {nodeTypes} {edges} class="bg-base-100" fitView onlyRenderVisibleElements>
+		<SvelteFlow
+			{nodes}
+			{nodeTypes}
+			{edges}
+			on:nodecontextmenu={handleContextMenu}
+			on:nodeclick
+			on:paneclick={handlePaneClick}
+			class="bg-base-100"
+			fitView
+			onlyRenderVisibleElements
+		>
 			<Controls class="bg-base-300 text-base-content" />
-			<MiniMap class="bg-base-200"/>
+			<MiniMap class="bg-base-200" />
+			{#if menu}
+				<PersonMenu
+					onClick={handlePaneClick}
+					id={menu.id}
+					top={menu.top}
+					left={menu.left}
+					right={menu.right}
+					bottom={menu.bottom}
+				/>
+			{/if}
+			<PersonPanel showPanel={personPanel != null} data={personPanel} />
 		</SvelteFlow>
 	</SvelteFlowProvider>
 </div>