erman/scan-wave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable button if not all conditions are satisfied

Browse Source
This commit is contained in:
Roman Krček
2025-06-24 17:30:34 +02:00
parent 2c2ee18fa3
commit 297641ee2d
1 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/routes/private/creator/steps/StepOverview.svelte
View File

@@ -3,8 +3,8 @@
</script> </script>
<!-- New Event Overview --> <!-- New Event Overview -->
<div class="bg-white border border-gray-300 rounded p-4 mb-4"> <div class="mb-4 rounded border border-gray-300 bg-white p-4">
<h2 class="text-xl font-bold mb-2">Event Overview</h2> <h2 class="mb-2 text-xl font-bold">Event Overview</h2>
<ul class="space-y-1"> <ul class="space-y-1">
<li><span class="font-semibold">Name:</span> {new_event.name}</li> <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">Date:</span> {new_event.date}</li>
@@ -13,31 +13,50 @@
</div> </div>
<!-- Email Overview --> <!-- Email Overview -->
<div class="bg-white border border-gray-300 rounded p-4 mb-4"> <div class="mb-4 rounded border border-gray-300 bg-white p-4">
<h2 class="text-xl font-bold mb-2">Email Preview</h2> <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="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 class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
<span class="font-semibold"></span>
<div>{body}</div> <div>{body}</div>
</div> </div>
</div> </div>
<!-- Participants Overview --> <!-- Participants Overview -->
<div class="bg-white border border-gray-300 rounded p-4"> <div class="rounded border border-gray-300 bg-white p-4">
<h2 class="text-xl font-bold mb-2">Participants ({participants.length})</h2> <h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
<ul class="space-y-1"> <ul class="space-y-1">
{#each participants.slice(0, 10) as p} {#each participants.slice(0, 10) as p}
<li class="flex items-center gap-2 border-b last:border-b-0 pb-1"> <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="font-semibold">{p.name} {p.surname}</span>
<span class="flex-1"></span> <span class="flex-1"></span>
<span class="font-mono text-xs text-gray-600 text-right">{p.email}</span> <span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
</li> </li>
{/each} {/each}
</ul> </ul>
<p class="text-sm text-gray-500 mt-2">Note: Only the first 10 participants are shown.</p> <p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
</div> </div>
<button <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 Generate QR codes and send
</button> </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>