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

Add the ability to add participants to already created events

Browse Source
This commit is contained in:
Roman Krček
2025-06-29 17:12:36 +02:00
parent c7275b7ae8
commit 1508b501af
5 changed files with 167 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/routes/private/events/creator/+page.svelte
View File

@@ -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>