From 68c1ae47786dc3f0006a895ad178b71753e5f008 Mon Sep 17 00:00:00 2001
From: zsbrown97 <brownz@unityfoundation.io>
Date: Wed, 24 Apr 2024 12:20:44 -0500
Subject: [PATCH] group name now shows up in breadcrumbs on services list

Signed-off-by: zsbrown97 <brownz@unityfoundation.io>
---
 .../src/routes/groups/[group_id]/+page.svelte   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/routes/groups/[group_id]/+page.svelte b/frontend/src/routes/groups/[group_id]/+page.svelte
index 237a27bc..8d7d893f 100644
--- a/frontend/src/routes/groups/[group_id]/+page.svelte
+++ b/frontend/src/routes/groups/[group_id]/+page.svelte
@@ -18,13 +18,18 @@
 	import ServiceListItem from '$lib/components/ServiceDefinitionEditor/ServiceListItem.svelte';
 	import DragAndDrop from '$lib/components/DragAndDrop.svelte';
 
-	interface Crumb {
-		label: string;
-		href: string;
+	let groupId = Number($page.params.group_id);
+	let groupName = '';
+
+	async function getGroupName(groupId: number) {
+		const groups = await libre311.getGroupList();
+
+		const group = groups.find((group) => group.id === groupId);
+		if (group) groupName = group.name;
 	}
 
-	const crumbs: Crumb[] = [
-		{ label: 'Groups', href: '/groups' },
+	$: crumbs = [
+		{ label: `Groups: ${groupName}`, href: '/groups' },
 		{ label: 'Services', href: `/groups/${$page.params.group_id}` }
 	];
 
@@ -33,10 +38,10 @@
 
 	let serviceList: AsyncResult<GetServiceListResponse> = ASYNC_IN_PROGRESS;
 	let isDropDownVisable = false;
-	let groupId = Number($page.params.group_id);
 	let newServiceName: FormInputValue<string> = createInput();
 
 	function fetchServiceList() {
+		getGroupName(groupId);
 		libre311
 			.getServiceList()
 			.then((res) => {