development #13
@@ -57,10 +57,13 @@
|
||||
>
|
||||
Edit email
|
||||
</button>
|
||||
<div class="rounded border-l-4 border-green-500 p-4 text-green-700 bg-green-100">
|
||||
<ol>
|
||||
<li><strong>{email.subject}</strong></li>
|
||||
<li class="whitespace-pre-line">{email.body}</li>
|
||||
</ol>
|
||||
<div class="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="block font-semibold">{email.subject}</span>
|
||||
</div>
|
||||
<div class="whitespace-pre-line text-gray-800">
|
||||
{email.body}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -66,21 +66,13 @@
|
||||
>
|
||||
Edit the event
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if !showForm}
|
||||
<div
|
||||
class="rounded border-l-4 border-green-500 p-4 text-green-700"
|
||||
class:bg-gray-100={loading}
|
||||
class:bg-green-100={!loading}
|
||||
>
|
||||
{#if loading}
|
||||
<strong class="text-gray-700">Loading...</strong>
|
||||
{:else if Object.keys(event).length > 0}
|
||||
<ol>
|
||||
<li><strong>{event.name}</strong></li>
|
||||
<li>{event.date}</li>
|
||||
</ol>
|
||||
<div class="rounded border border-gray-300 bg-white p-4">
|
||||
<h2 class="mb-2 text-xl font-bold">Event Preview</h2>
|
||||
{#if Object.keys(event).length > 0}
|
||||
<ul>
|
||||
<li><span class="font-semibold">{event.name}</span></li>
|
||||
<li class="text-gray-700">{event.date}</li>
|
||||
</ul>
|
||||
{:else}
|
||||
<strong class="text-gray-700">No event created yet...</strong>
|
||||
{/if}
|
||||
|
||||
@@ -2,19 +2,20 @@
|
||||
import Papa from 'papaparse';
|
||||
|
||||
let { participants = $bindable() } = $props();
|
||||
let loading = $state(false);
|
||||
let showForm = $derived(participants.length === 0);
|
||||
let errors = $state([]);
|
||||
|
||||
function isValidEmail(email: string): boolean {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
loading = true;
|
||||
errors = [];
|
||||
const form = e.target as HTMLFormElement;
|
||||
const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
|
||||
const file = fileInput?.files?.[0];
|
||||
if (!file) {
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
if (!file) return;
|
||||
const csvText = await file.text();
|
||||
const { data: parsedRows } = Papa.parse<string[]>(csvText, {
|
||||
skipEmptyLines: true,
|
||||
@@ -24,13 +25,36 @@
|
||||
if (parsedRows.length > 0) {
|
||||
parsedRows.shift();
|
||||
}
|
||||
participants = parsedRows.map((row: string[]) => ({
|
||||
name: row[0],
|
||||
surname: row[1],
|
||||
email: row[2]
|
||||
}));
|
||||
const validated = [];
|
||||
parsedRows.forEach((row, idx) => {
|
||||
if (!row || row.length < 3) {
|
||||
errors.push(`Row ${idx + 2} is missing columns.`);
|
||||
return;
|
||||
}
|
||||
const [name, surname, email] = row;
|
||||
if (!name || !surname || !email) {
|
||||
errors.push(`Row ${idx + 2} has missing values.`);
|
||||
return;
|
||||
}
|
||||
validated.push({
|
||||
name,
|
||||
surname,
|
||||
email,
|
||||
email_valid: isValidEmail(email)
|
||||
});
|
||||
});
|
||||
if (errors.length > 0) {
|
||||
return; // Do not proceed if there are errors
|
||||
}
|
||||
if (validated.length === 0) {
|
||||
participants = [];
|
||||
return;
|
||||
}
|
||||
participants = validated.sort((a, b) => {
|
||||
if (a.email_valid === b.email_valid) return 0;
|
||||
return a.email_valid ? 1 : -1;
|
||||
});
|
||||
showForm = false;
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function showEditForm() {
|
||||
@@ -39,6 +63,15 @@
|
||||
</script>
|
||||
|
||||
{#if showForm}
|
||||
{#if errors.length > 0}
|
||||
<div class="mb-4 rounded border border-red-400 bg-red-50 p-4 text-red-700">
|
||||
<ul class="list-disc ml-4">
|
||||
{#each errors as err}
|
||||
<li>{err}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
<form
|
||||
onsubmit={handleSubmit}
|
||||
autocomplete="off"
|
||||
@@ -75,22 +108,51 @@
|
||||
{/if}
|
||||
|
||||
{#if !showForm}
|
||||
<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
|
||||
{#if loading}
|
||||
<strong class="text-gray-700">Loading...</strong>
|
||||
{:else if participants.length === 0}
|
||||
<strong class="text-gray-700">No participants yet...</strong>
|
||||
{:else}
|
||||
<ul class="space-y-2">
|
||||
{#each participants as p, i}
|
||||
<li class="flex items-center justify-between border-b pb-1">
|
||||
<div>
|
||||
<div class="font-semibold">{p.name} {p.surname}</div>
|
||||
<div class="font-mono text-xs text-gray-600">{p.email}</div>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="mt-4 rounded border border-gray-300 bg-white p-4">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<h2 class="text-xl font-bold">Participants ({participants.length})</h2>
|
||||
{#if participants.length > 0}
|
||||
{#if participants.some((p) => !p.email_valid)}
|
||||
<span class="text-xs text-gray-500">Some emails appear invalid</span>
|
||||
{:else}
|
||||
<span class="text-xs text-gray-500">All emails appear valid</span>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<ul class="space-y-1">
|
||||
{#each participants as p}
|
||||
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
|
||||
{#if p.email_valid}
|
||||
<svg
|
||||
title="Valid email"
|
||||
class="mr-2 inline h-4 w-4 text-green-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
title="Invalid email"
|
||||
class="mr-2 inline h-4 w-4 text-red-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
|
||||
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
|
||||
</svg>
|
||||
{/if}
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user