From 1508b501af11b340e2a2323b0ccdfb04dad51e54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Sun, 29 Jun 2025 17:12:36 +0200
Subject: [PATCH] Add the ability to add participants to already created events

---
 .../private/events/creator/+page.svelte       | 179 +++++++++++-------
 .../events/creator/finish/+page.svelte        |  23 ++-
 .../creator/steps/StepCreateEvent.svelte      |  24 ++-
 .../events/creator/steps/StepOverview.svelte  |   6 +-
 src/routes/private/events/event/+page.svelte  |  32 ++--
 5 files changed, 167 insertions(+), 97 deletions(-)

diff --git a/src/routes/private/events/creator/+page.svelte b/src/routes/private/events/creator/+page.svelte
index e82c77c..0b2e1f0 100644
--- a/src/routes/private/events/creator/+page.svelte
+++ b/src/routes/private/events/creator/+page.svelte
@@ -1,86 +1,129 @@
 <script lang="ts">
-  import StepConnectGoogle from "./steps/StepConnectGoogle.svelte";
-  import StepCraftEmail from "./steps/StepCraftEmail.svelte";
-  import StepCreateEvent from "./steps/StepCreateEvent.svelte";
-  import StepOverview from "./steps/StepOverview.svelte";
-	import StepUploadParticipants from "./steps/StepUploadParticipants.svelte";
+	import StepConnectGoogle from './steps/StepConnectGoogle.svelte';
+	import StepCraftEmail from './steps/StepCraftEmail.svelte';
+	import StepCreateEvent from './steps/StepCreateEvent.svelte';
+	import StepOverview from './steps/StepOverview.svelte';
+	import StepUploadParticipants from './steps/StepUploadParticipants.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
 
-  let { data, form } = $props();
+	let { data, form } = $props();
 
-  let event = $state({});
-  let participants = $state([]);
-  let email = $state({'body': '', 'subject': ''});
-  let authorized = $state(false);
+	let event = $state({});
+	let participants = $state([]);
+	let email = $state({ body: '', subject: '' });
+	let authorized = $state(false);
+	let existingEventId = $state(null);
+	let isAddingParticipants = $state(false);
 
-  $effect(() => {
-    if (form && form.event) {
-      event = form.event;
-    }
-    if (form && form.participants) {
-      participants = form.participants;
-    }
-  });
+	onMount(async () => {
+		const eventId = page.url.searchParams.get('id');
+		if (eventId) {
+			existingEventId = eventId;
+			isAddingParticipants = true;
 
-  // Array of step components in order
-  const steps = [
-    StepConnectGoogle,
-    StepCreateEvent,
-    StepUploadParticipants,
-    StepCraftEmail,
-    StepOverview
-  ];
+			// Fetch existing event data to prefill the form
+			const { data: existingEvent } = await data.supabase
+				.from('events')
+				.select('*')
+				.eq('id', eventId)
+				.single();
 
-  let step: number = $state(0);
+			if (existingEvent) {
+				event = {
+					name: existingEvent.name,
+					date: existingEvent.date,
+					id: existingEvent.id
+				};
+			}
+		}
+	});
 
-  let stepConditions = $derived([
-    authorized,
-    !!event?.name,
-    !!participants?.length,
-    !!email.subject
-  ]);
+	$effect(() => {
+		if (form && form.event) {
+			event = form.event;
+		}
+		if (form && form.participants) {
+			participants = form.participants;
+		}
+	});
 
-  function nextStep() {
-    if (step < steps.length - 1) step += 1;
-  }
-  function prevStep() {
-    if (step > 0) step -= 1;
-  }
+	// Array of step components in order
+	const steps = [
+		StepConnectGoogle,
+		StepCreateEvent,
+		StepUploadParticipants,
+		StepCraftEmail,
+		StepOverview
+	];
+
+	let step: number = $state(0);
+
+	let stepConditions = $derived([
+		authorized,
+		!!event?.name,
+		!!participants?.length,
+		!!email.subject
+	]);
+
+	function nextStep() {
+		if (step < steps.length - 1) step += 1;
+	}
+	function prevStep() {
+		if (step > 0) step -= 1;
+	}
 </script>
 
-<div class="flex items-center justify-between mb-4 mt-2">
-  <button
-    onclick={prevStep}
-    disabled={step === 0}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Previous
-  </button>
-  <span class="flex-1 text-center text-gray-600 font-medium">
-    Step {step + 1} of {steps.length}
-  </span>
-  <button
-    onclick={nextStep}
-    disabled={step === steps.length - 1 || !stepConditions[step]}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Next
-  </button>
+<div class="mt-2 mb-4">
+	{#if isAddingParticipants}
+		<h1 class="text-xl font-semibold text-gray-700 text-center">Add Participants to "{event.name}"</h1>
+	{/if}
 </div>
 
 {#if step == 0}
-  <StepConnectGoogle bind:authorized />
+	<StepConnectGoogle bind:authorized />
 {:else if step == 1}
-  <StepCreateEvent bind:event />
+	<StepCreateEvent bind:event readonly={isAddingParticipants} />
 {:else if step == 2}
-  <StepUploadParticipants bind:participants />
+	<StepUploadParticipants bind:participants />
 {:else if step == 3}
-  <StepCraftEmail bind:email />
+	<StepCraftEmail bind:email />
 {:else if step == 4}
-  <StepOverview
-    {data}
-    {event}
-    {participants}
-    {email}
-    {stepConditions}
-  />
+	<StepOverview
+		{data}
+		{event}
+		{participants}
+		{email}
+		{stepConditions}
+		{existingEventId}
+		{isAddingParticipants}
+	/>
 {/if}
+
+<div class="pb-20"></div>
+
+<div
+  class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
+  style="max-width: 100vw;"
+>
+  <div class="container mx-auto max-w-2xl p-2 flex justify-content-center">
+    <button
+      onclick={prevStep}
+      disabled={step === 0}
+      class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+      aria-label="Previous step"
+    >
+      Previous
+    </button>
+    <span class="flex-1 flex items-center justify-center text-center font-medium text-gray-600">
+      Step {step + 1} of {steps.length}
+    </span>
+    <button
+      onclick={nextStep}
+      disabled={step === steps.length - 1 || !stepConditions[step]}
+      class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      Next
+    </button>
+  </div>
+</div>
diff --git a/src/routes/private/events/creator/finish/+page.svelte b/src/routes/private/events/creator/finish/+page.svelte
index 64dcda3..93dc831 100644
--- a/src/routes/private/events/creator/finish/+page.svelte
+++ b/src/routes/private/events/creator/finish/+page.svelte
@@ -29,9 +29,18 @@
 		all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
 
 		try {
-			event_status = StepStatus.Loading;
-			const createdEvent = await createEventInSupabase(all_data.event);
-			event_status = StepStatus.Success;
+			let createdEvent;
+			
+			if (all_data.isAddingParticipants && all_data.existingEventId) {
+				// Skip event creation for existing events
+				event_status = StepStatus.Success;
+				createdEvent = { id: all_data.existingEventId, ...all_data.event };
+			} else {
+				// Create new event
+				event_status = StepStatus.Loading;
+				createdEvent = await createEventInSupabase(all_data.event);
+				event_status = StepStatus.Success;
+			}
 
 			participants_status = StepStatus.Loading;
 			createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent);
@@ -141,13 +150,17 @@
 
 <!-- Creating Event Entry -->
 <div class="mb-4 rounded border border-gray-300 bg-white p-4">
-	<h2 class="mb-2 text-xl font-bold">Creating event</h2>
+	<h2 class="mb-2 text-xl font-bold">
+		{all_data.isAddingParticipants ? 'Using existing event' : 'Creating event'}
+	</h2>
 	{#if event_status === StepStatus.Waiting}
 		<span class="text-black-600">Waiting...</span>
 	{:else if event_status === StepStatus.Loading}
 		<span class="text-black-600">Creating event...</span>
 	{:else if event_status === StepStatus.Success}
-		<span class="text-green-600">Event created successfully.</span>
+		<span class="text-green-600">
+			{all_data.isAddingParticipants ? 'Using existing event.' : 'Event created successfully.'}
+		</span>
 	{:else if event_status === StepStatus.Failure}
 		<span class="text-red-600">Failed to create event.</span>
 	{/if}
diff --git a/src/routes/private/events/creator/steps/StepCreateEvent.svelte b/src/routes/private/events/creator/steps/StepCreateEvent.svelte
index 7d69dc5..5c96e46 100644
--- a/src/routes/private/events/creator/steps/StepCreateEvent.svelte
+++ b/src/routes/private/events/creator/steps/StepCreateEvent.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	let { event = $bindable() } = $props();
+	let { event = $bindable(), readonly = false } = $props();
 
 	let loading = $state(false);
-	let showForm = $derived(!event.name || !event.date);
+	let showForm = $derived((!event.name || !event.date) && !readonly);
 
 	function handleSubmit(e: Event) {
 		e.preventDefault();
@@ -18,7 +18,9 @@
 	}
 
 	function showEditForm() {
-		showForm = true;
+		if (!readonly) {
+			showForm = true;
+		}
 	}
 </script>
 
@@ -59,13 +61,15 @@
 {/if}
 
 {#if !showForm}
-	<button
-		class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
-		onclick={showEditForm}
-		aria-label="Edit event"
-	>
-		Edit the event
-	</button>
+	{#if !readonly}
+		<button
+			class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+			onclick={showEditForm}
+			aria-label="Edit event"
+		>
+			Edit the event
+		</button>
+	{/if}
 	<div class="rounded border border-gray-300 bg-white p-4">
 		<h2 class="mb-2 text-xl font-bold">Event Preview</h2>
 		{#if Object.keys(event).length > 0}
diff --git a/src/routes/private/events/creator/steps/StepOverview.svelte b/src/routes/private/events/creator/steps/StepOverview.svelte
index cd77d45..836d1bd 100644
--- a/src/routes/private/events/creator/steps/StepOverview.svelte
+++ b/src/routes/private/events/creator/steps/StepOverview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	
-	let { data, event, participants, email, stepConditions } = $props();
+	let { data, event, participants, email, stepConditions, existingEventId = null, isAddingParticipants = false } = $props();
 
 	function redirectToFinish() {
 		// Generate a random variable name
@@ -9,7 +9,7 @@
 		// Save the data to sessionStorage
 		sessionStorage.setItem(
 			varName,
-			JSON.stringify({ event, participants, email })
+			JSON.stringify({ event, participants, email, existingEventId, isAddingParticipants })
 		);
 		// Redirect with the variable name as a query parameter
 		goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
@@ -58,7 +58,7 @@
 	disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
 	disabled={!stepConditions.every(Boolean)}
 >
-	Generate QR codes and send
+	{isAddingParticipants ? 'Add participants and send emails' : 'Generate QR codes and send'}
 </button>
 
 <div class="mt-2 space-y-1">
diff --git a/src/routes/private/events/event/+page.svelte b/src/routes/private/events/event/+page.svelte
index aa6223e..c9a18a1 100644
--- a/src/routes/private/events/event/+page.svelte
+++ b/src/routes/private/events/event/+page.svelte
@@ -37,13 +37,23 @@
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
 
 <div class="mb-2 rounded border border-gray-300 bg-white p-4">
-	<div class="flex flex-col gap-1">
-		{#if loading}
-			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
-			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
-		{:else}
-			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
-			<span class="text-black-500 text-sm">{event_data?.date}</span>
+	<div class="flex items-center justify-between gap-4">
+		<div class="flex flex-col gap-1">
+			{#if loading}
+				<div class="mb-2 h-6 w-40 animate-pulse rounded bg-gray-200"></div>
+				<div class="h-4 w-24 animate-pulse rounded bg-gray-100"></div>
+			{:else}
+				<span class="text-gray-700 text-lg font-semibold">{event_data?.name}</span>
+				<span class="text-gray-500 text-sm">{event_data?.date}</span>
+			{/if}
+		</div>
+		{#if !loading && event_data}
+			<a
+				href={`/private/events/creator?eventId=${event_data.id}`}
+				class="rounded border border-gray-300 bg-blue-600 px-6 py-2 font-semibold text-white transition hover:bg-blue-700"
+			>
+				Add Participants
+			</a>
 		{/if}
 	</div>
 </div>
@@ -60,7 +70,7 @@
 			<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 		</svg>
 		{#if loading}
-			<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
+			<div class="h-4 w-16 animate-pulse rounded bg-gray-200"></div>
 		{:else}
 			<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
 		{/if}
@@ -79,7 +89,7 @@
 			<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
 		</svg>
 		{#if loading}
-			<div class="h-4 w-24 bg-gray-200 rounded animate-pulse"></div>
+			<div class="h-4 w-24 animate-pulse rounded bg-gray-200"></div>
 		{:else}
 			<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
 		{/if}
@@ -89,7 +99,7 @@
 <div class="rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 rounded text-xl font-bold">
 		{#if loading}
-			<div class="h-6 w-32 bg-gray-200 rounded animate-pulse"></div>
+			<div class="h-6 w-32 animate-pulse rounded bg-gray-200"></div>
 		{:else}
 			Participants ({participants.length})
 		{/if}
@@ -97,7 +107,7 @@
 	<ul class="space-y-1">
 		{#if loading}
 			<li>
-				<div class="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
+				<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
 			</li>
 		{:else}
 			{#each participants as p}