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

Split event view into components

Browse Source
This commit is contained in:
Roman Krček
2025-07-12 14:40:46 +02:00
parent d6eee9c498
commit d945209465
8 changed files with 575 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/routes/private/events/event/view/components/EmailResults.svelte Normal file
View File

@@ -0,0 +1,100 @@
<script lang="ts">
interface EmailResultItem {
participant: {
id: string;
name: string;
surname: string;
email: string;
};
success: boolean;
error?: string;
}
interface EmailResultsSummary {
success: number;
errors: number;
total: number;
}
interface EmailResultsData {
success: boolean;
results: EmailResultItem[];
summary: EmailResultsSummary;
}
let { emailResults } = $props<{
emailResults: EmailResultsData | null;
}>();
</script>
{#if emailResults}
<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">Email Results</h2>
<div class="text-sm text-gray-500">
{emailResults.summary.success} successful, {emailResults.summary.errors} failed
</div>
</div>
<div class="mb-4">
<div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-sm font-medium">Sent: {emailResults.summary.success}</span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<span class="text-sm font-medium">Failed: {emailResults.summary.errors}</span>
</div>
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-blue-500"></div>
<span class="text-sm font-medium">Total: {emailResults.summary.total}</span>
</div>
</div>
</div>
{#if emailResults.results.length > 0}
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Name</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Email</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Status</th>
</tr>
</thead>
<tbody>
{#each emailResults.results as result}
<tr class="border-b border-gray-200 hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-900">
{result.participant.name} {result.participant.surname}
</td>
<td class="px-4 py-3 text-sm text-gray-900">{result.participant.email}</td>
<td class="px-4 py-3 text-sm">
{#if result.success}
<div class="flex items-center text-green-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
<span class="text-sm font-medium">Sent</span>
</div>
{:else}
<div class="flex items-center text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<span class="text-sm font-medium">Failed</span>
{#if result.error}
<span class="text-xs text-red-500 ml-2">({result.error})</span>
{/if}
</div>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
</div>
{/if}