95 lines
3.8 KiB
Svelte
95 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
interface Participant {
|
|
id: string;
|
|
email_sent: boolean;
|
|
}
|
|
|
|
interface EmailProgress {
|
|
sent: number;
|
|
total: number;
|
|
}
|
|
|
|
let {
|
|
loading,
|
|
participants,
|
|
sendingEmails,
|
|
emailProgress,
|
|
event,
|
|
onSendEmails
|
|
} = $props<{
|
|
loading: boolean;
|
|
participants: Participant[];
|
|
sendingEmails: boolean;
|
|
emailProgress: EmailProgress;
|
|
event: any | null;
|
|
onSendEmails: () => void;
|
|
}>();
|
|
|
|
// Using the $derived rune to calculate uncontacted participants
|
|
let uncontactedParticipantsCount = $derived(participants.filter(p => !p.email_sent).length);
|
|
</script>
|
|
|
|
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<h2 class="text-xl font-semibold text-gray-900">Send Emails</h2>
|
|
{#if !loading}
|
|
<div class="text-sm text-gray-500">
|
|
{uncontactedParticipantsCount} uncontacted participants
|
|
</div>
|
|
{:else}
|
|
<div class="text-sm text-gray-500">
|
|
Loading participants...
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if loading}
|
|
<div class="h-16 w-full animate-pulse rounded bg-gray-200"></div>
|
|
{:else if sendingEmails}
|
|
<div class="rounded-lg bg-blue-50 p-4 border border-blue-200">
|
|
<div class="flex items-center justify-center">
|
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="text-blue-800 font-medium">Sending {emailProgress.total} emails... Please wait.</span>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="space-y-4">
|
|
{#if uncontactedParticipantsCount > 0}
|
|
<div class="rounded-lg bg-yellow-50 p-4 border border-yellow-200">
|
|
<div class="flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
<span class="text-yellow-800 text-sm sm:text-base">
|
|
<strong>Warning:</strong> Do not close this window while emails are being sent. The process may take several minutes.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end">
|
|
<button
|
|
onclick={onSendEmails}
|
|
disabled={!event || uncontactedParticipantsCount === 0}
|
|
class="rounded bg-green-600 px-4 py-2 text-white transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
Send Emails
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<div class="text-center py-4">
|
|
<div class="flex items-center justify-center text-green-600 mb-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<p class="text-green-700 font-medium">All participants have been contacted!</p>
|
|
<p class="text-sm text-green-600">No pending emails to send.</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|