132 lines
3.3 KiB
Svelte
132 lines
3.3 KiB
Svelte
<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 { onMount } from 'svelte';
|
|
import { page } from '$app/state';
|
|
|
|
let { data, form } = $props();
|
|
|
|
let event = $state({});
|
|
let participants = $state([]);
|
|
let email = $state({ body: '', subject: '' });
|
|
let authorized = $state(false);
|
|
let existingEventId = $state(null);
|
|
let isAddingParticipants = $state(false);
|
|
|
|
onMount(async () => {
|
|
const eventId = page.url.searchParams.get('eventId');
|
|
if (eventId) {
|
|
existingEventId = eventId;
|
|
isAddingParticipants = true;
|
|
|
|
// Fetch existing event data to prefill the form
|
|
const { data: existingEvent } = await data.supabase
|
|
.from('events')
|
|
.select('*')
|
|
.eq('id', eventId)
|
|
.single();
|
|
|
|
if (existingEvent) {
|
|
event = {
|
|
name: existingEvent.name,
|
|
date: existingEvent.date,
|
|
id: existingEvent.id
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
$effect(() => {
|
|
if (form && form.event) {
|
|
event = form.event;
|
|
}
|
|
if (form && form.participants) {
|
|
participants = form.participants;
|
|
}
|
|
});
|
|
|
|
// 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>
|
|
|
|
{#if isAddingParticipants}
|
|
<div class="mt-2 mb-4">
|
|
<h1 class="text-center text-xl font-semibold text-gray-700">
|
|
Adding Participants to "{event.name}"
|
|
</h1>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if step == 0}
|
|
<StepConnectGoogle bind:authorized />
|
|
{:else if step == 1}
|
|
<StepCreateEvent bind:event readonly={isAddingParticipants} />
|
|
{:else if step == 2}
|
|
<StepUploadParticipants bind:participants />
|
|
{:else if step == 3}
|
|
<StepCraftEmail bind:email />
|
|
{:else if step == 4}
|
|
<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="justify-content-center container mx-auto flex max-w-2xl p-2">
|
|
<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 flex-1 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>
|