Better email template display
This commit is contained in:
Roman Krček
13
.github/copilot-instructions.md
vendored
13
.github/copilot-instructions.md
vendored
@@ -1,12 +1,11 @@
|
||||
GitHub Copilot Instructions for This Repository
|
||||
|
||||
If you have any questions, always ask me first.
|
||||
|
||||
Use Svelte 5 runes exclusively
|
||||
|
||||
Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc.
|
||||
svelte.dev
|
||||
svelte.dev
|
||||
Basics:
|
||||
- If you have any questions, always ask me first!
|
||||
- Use Svelte 5 runes exclusively
|
||||
- Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc.
|
||||
- When doing client-side loading, always implement placeholders and loaders, so the UI remains responsive and layout shifts are minimized.
|
||||
- Don't use placeholders and loaders for static data like heading etc.
|
||||
|
||||
Do not fall back to the legacy $: label syntax or Svelte 3/4 stores! This is important!
|
||||
|
||||
|
||||
@@ -252,64 +252,60 @@
|
||||
<!-- Event Information -->
|
||||
<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
|
||||
{#if loading}
|
||||
<!-- Loading placeholder -->
|
||||
<div class="space-y-4">
|
||||
<div class="h-8 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
|
||||
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
{:else if event}
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
||||
<span class="text-sm text-gray-900">{formatDate(event.date)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
||||
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
||||
<a
|
||||
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-1 h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
Open in Google Sheets
|
||||
</a>
|
||||
</div>
|
||||
<!-- Loading placeholder with header -->
|
||||
<div>
|
||||
<h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
||||
<div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
||||
<div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
||||
<div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="mb-3 text-lg font-medium text-gray-900">Email Details</h3>
|
||||
<div class="space-y-2">
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-500">Subject:</span>
|
||||
<p class="text-sm text-gray-900">{event.email_subject}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-medium text-gray-500">Body:</span>
|
||||
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if event}
|
||||
<div>
|
||||
<h2 class="mb-4 text-2xl font-semibold text-gray-900">{event.name}</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Date:</span>
|
||||
<span class="text-sm text-gray-900">{formatDate(event.date)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Created:</span>
|
||||
<span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
|
||||
<a
|
||||
href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-1 h-3 w-3"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
|
||||
/>
|
||||
</svg>
|
||||
Open in Google Sheets
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -320,23 +316,65 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Email Template Section -->
|
||||
<div class="rounded-lg border border-gray-300 bg-white p-6 mb-4">
|
||||
<div class="mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-900">Email Template</h2>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<!-- Loading placeholder for email template content -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
|
||||
<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
|
||||
<div class="h-28 w-full animate-pulse rounded bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if event}
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Subject:</span>
|
||||
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
|
||||
<p class="text-sm text-gray-900">{event.email_subject}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block mb-1 text-sm font-medium text-gray-700">Body:</span>
|
||||
<div class="bg-gray-50 p-3 rounded-lg border border-gray-200 max-h-48 overflow-y-auto">
|
||||
<p class="text-sm whitespace-pre-wrap text-gray-900">{event.email_body}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Google Authentication Section -->
|
||||
<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">Google Account</h2>
|
||||
<p class="text-sm text-gray-500">Required for syncing participants and sending emails</p>
|
||||
</div>
|
||||
<GoogleAuthButton
|
||||
size="small"
|
||||
variant="secondary"
|
||||
onSuccess={() => {
|
||||
// Refresh the page or update UI state as needed
|
||||
error = '';
|
||||
}}
|
||||
onError={(errorMsg) => {
|
||||
error = errorMsg;
|
||||
}}
|
||||
/>
|
||||
{#if loading}
|
||||
<div class="h-10 w-48 animate-pulse rounded bg-gray-200"></div>
|
||||
{:else}
|
||||
<GoogleAuthButton
|
||||
size="small"
|
||||
variant="secondary"
|
||||
onSuccess={() => {
|
||||
// Refresh the page or update UI state as needed
|
||||
error = '';
|
||||
}}
|
||||
onError={(errorMsg) => {
|
||||
error = errorMsg;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Participants Section -->
|
||||
@@ -345,7 +383,7 @@
|
||||
<h2 class="text-xl font-semibold text-gray-900">Participants</h2>
|
||||
<button
|
||||
onclick={syncParticipants}
|
||||
disabled={syncingParticipants || !event}
|
||||
disabled={syncingParticipants || !event || loading}
|
||||
class="rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{#if syncingParticipants}
|
||||
@@ -356,7 +394,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if participantsLoading}
|
||||
{#if participantsLoading || loading}
|
||||
<!-- Loading placeholder for participants -->
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
@@ -475,12 +513,20 @@
|
||||
<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>
|
||||
<div class="text-sm text-gray-500">
|
||||
{participants.filter(p => !p.email_sent).length} uncontacted participants
|
||||
</div>
|
||||
{#if !loading}
|
||||
<div class="text-sm text-gray-500">
|
||||
{participants.filter(p => !p.email_sent).length} uncontacted participants
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm text-gray-500">
|
||||
Loading participants...
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if sendingEmails}
|
||||
{#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">
|
||||
|
||||
Reference in New Issue
Block a user