From 297641ee2da93b3e3dfb2f22477c0fa9f903de47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Tue, 24 Jun 2025 17:30:34 +0200
Subject: [PATCH] Disable button if not all conditions are satisfied

---
 .../private/creator/steps/StepOverview.svelte | 77 ++++++++++++-------
 1 file changed, 48 insertions(+), 29 deletions(-)

diff --git a/src/routes/private/creator/steps/StepOverview.svelte b/src/routes/private/creator/steps/StepOverview.svelte
index ed4350b..34cb497 100644
--- a/src/routes/private/creator/steps/StepOverview.svelte
+++ b/src/routes/private/creator/steps/StepOverview.svelte
@@ -1,43 +1,62 @@
 <script lang="ts">
-    let { new_event, participants, subject, body } = $props();
+	let { new_event, participants, subject, body } = $props();
 </script>
 
 <!-- New Event Overview -->
-<div class="bg-white border border-gray-300 rounded p-4 mb-4">
-  <h2 class="text-xl font-bold mb-2">Event Overview</h2>
-  <ul class="space-y-1">
-    <li><span class="font-semibold">Name:</span> {new_event.name}</li>
-    <li><span class="font-semibold">Date:</span> {new_event.date}</li>
-    <li><span class="font-semibold">Description:</span> {new_event.description}</li>
-  </ul>
+<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
+	<ul class="space-y-1">
+		<li><span class="font-semibold">Name:</span> {new_event.name}</li>
+		<li><span class="font-semibold">Date:</span> {new_event.date}</li>
+		<li><span class="font-semibold">Description:</span> {new_event.description}</li>
+	</ul>
 </div>
 
 <!-- Email Overview -->
-<div class="bg-white border border-gray-300 rounded p-4 mb-4">
-  <h2 class="text-xl font-bold mb-2">Email Preview</h2>
-  <div class="mb-2"><span class="font-semibold">Subject:</span> {subject}</div>
-  <div class="whitespace-pre-line border rounded p-2 bg-gray-50 text-gray-700"><span class="font-semibold"></span>
-    <div>{body}</div>
-  </div>
+<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
+	<div class="mb-2"><span class="font-semibold">Subject:</span> {subject}</div>
+	<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
+		<span class="font-semibold"></span>
+		<div>{body}</div>
+	</div>
 </div>
 
 <!-- Participants Overview -->
-<div class="bg-white border border-gray-300 rounded p-4">
-    <h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2>
-    <ul class="space-y-1">
-        {#each participants.slice(0, 10) as p}
-        <li class="flex items-center gap-2 border-b last:border-b-0 pb-1">
-            <span class="font-semibold">{p.name} {p.surname}</span>
-            <span class="flex-1"></span>
-            <span class="font-mono text-xs text-gray-600 text-right">{p.email}</span>
-        </li>
-        {/each}
-    </ul>
-    <p class="text-sm text-gray-500 mt-2">Note: Only the first 10 participants are shown.</p>
+<div class="rounded border border-gray-300 bg-white p-4">
+	<h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
+	<ul class="space-y-1">
+		{#each participants.slice(0, 10) as p}
+			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
+				<span class="font-semibold">{p.name} {p.surname}</span>
+				<span class="flex-1"></span>
+				<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
+			</li>
+		{/each}
+	</ul>
+	<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
 </div>
 
 <button
-    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded mt-4 transition-colors duration-200"
+	class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
+    transition-colors duration-200 hover:bg-blue-700
+    disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
+	disabled={!new_event?.name || !participants?.length || !subject || !body}
 >
-    Generate QR codes and send
-</button>
\ No newline at end of file
+	Generate QR codes and send
+</button>
+
+<div class="mt-2 space-y-1">
+	{#if !new_event?.name}
+		<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
+	{/if}
+	{#if !participants?.length}
+		<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
+	{/if}
+	{#if !subject}
+		<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
+	{/if}
+	{#if !body}
+		<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
+	{/if}
+</div>