From 5d957b18eeb8fcf70da440251058db7dd163f8e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Mon, 14 Jul 2025 21:37:05 +0200
Subject: [PATCH] More notifications in participants table

---
 .github/copilot-instructions.md               |  4 +++
 .../private/events/event/view/+page.svelte    | 35 ++++++++++---------
 .../view/components/ParticipantsTable.svelte  | 12 +++++++
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index a7768ce..0302bc4 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -11,6 +11,10 @@ Basics: These you need to really follow!
   - server: $locals.supabase
 - Avoid unnceessary iterations. Once the problem is solved, ask me if i want to to continue and only then continue iterating.
 - Avoid sweeping changes throught the project. If you want to change something globally, ask me first.
+- to add a notification, use the toast component
+  - example: toast.success, toast.info, toast.warning, toast.error
+  
+
 
 Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
 
diff --git a/src/routes/private/events/event/view/+page.svelte b/src/routes/private/events/event/view/+page.svelte
index 367e143..482450c 100644
--- a/src/routes/private/events/event/view/+page.svelte
+++ b/src/routes/private/events/event/view/+page.svelte
@@ -74,10 +74,7 @@
 			event = eventData;
 		} catch (err) {
 			console.error('Error loading event:', err);
-			toast.add({
-				message: 'Failed to load event',
-				type: 'error'
-			});
+			toast.error('Failed to load event');
 		} finally {
 			loading = false;
 		}
@@ -98,25 +95,22 @@
 			participants = participantsData || [];
 		} catch (err) {
 			console.error('Error loading participants:', err);
-			toast.add({
-				message: 'Failed to load participants',
-				type: 'error'
-			});
+			toast.error('Failed to load participants');
 		} finally {
 			participantsLoading = false;
 		}
 	}
 
 	async function syncParticipants() {
-		if (!event || !event.sheet_id) return;
+		if (!event || !event.sheet_id) {
+			toast.error('Cannot sync participants: No Google Sheet is connected to this event');
+			return;
+		}
 
 		// Check if user has Google authentication
 		const refreshToken = localStorage.getItem('google_refresh_token');
 		if (!refreshToken) {
-			toast.add({
-				message: 'Please connect your Google account first to sync participants',
-				type: 'error'
-			});
+			toast.error('Please connect your Google account first to sync participants');
 			return;
 		}
 
@@ -183,12 +177,19 @@
 
 			// Reload participants
 			await loadParticipants();
+			
+			// Show success message with count of synced participants
+			const previousCount = participants.length;
+			const newCount = names.length;
+			const addedCount = Math.max(0, participants.length - previousCount);
+			
+			toast.success(
+				`Successfully synced participants. ${newCount} entries processed, ${addedCount} new participants added.`,
+				5000
+			);
 		} catch (err) {
 			console.error('Error syncing participants:', err);
-			toast.add({
-				message: 'Failed to sync participants',
-				type: 'error'
-			});
+			toast.error(`Failed to sync participants: ${err instanceof Error ? err.message : 'Unknown error'}`);
 		} finally {
 			syncingParticipants = false;
 		}
diff --git a/src/routes/private/events/event/view/components/ParticipantsTable.svelte b/src/routes/private/events/event/view/components/ParticipantsTable.svelte
index 1660920..7acb662 100644
--- a/src/routes/private/events/event/view/components/ParticipantsTable.svelte
+++ b/src/routes/private/events/event/view/components/ParticipantsTable.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { toast } from '$lib/stores/toast.js';
+  
   interface Participant {
     id: string;
     name: string;
@@ -28,6 +30,16 @@
     syncingParticipants: boolean;
     onSyncParticipants: () => void;
   }>();
+  
+  // Handle sync participants with toast notifications
+  function handleSyncParticipants() {
+    
+    // Show initial notification about sync starting
+    toast.info('Starting participant synchronization...', 2000);
+    
+    // Call the parent component's sync function
+    onSyncParticipants();
+  }
 </script>
 
 <div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">