mirror of
https://github.com/polaroi8d/cactoide.git
synced 2026-03-22 14:15:28 +00:00
feat(tmp): invite link feature
This commit is contained in:
Levente Orban
@@ -10,7 +10,8 @@
|
||||
import { t } from '$lib/i18n/i18n.js';
|
||||
|
||||
export let data: { event: Event; rsvps: RSVP[]; userId: string };
|
||||
export let form;
|
||||
type FormDataLocal = { success?: boolean; error?: string; type?: 'add' | 'remove' | 'copy' };
|
||||
export let form: FormDataLocal | undefined;
|
||||
|
||||
let event: Event;
|
||||
let rsvps: RSVP[] = [];
|
||||
@@ -22,6 +23,9 @@
|
||||
let numberOfGuests = 1;
|
||||
let showCalendarModal = false;
|
||||
let calendarEvent: CalendarEvent;
|
||||
let toastType: 'add' | 'remove' | 'copy' | null = null;
|
||||
let typeToShow: 'add' | 'remove' | 'copy' | undefined;
|
||||
let successHideTimer: number | null = null;
|
||||
|
||||
// Use server-side data
|
||||
$: event = data.event;
|
||||
@@ -45,6 +49,9 @@
|
||||
success = '';
|
||||
}
|
||||
|
||||
// TODO: ERROR
|
||||
// //WHEN DELETING RSVP: THE MODAL MESSAGE IS "RSVP removed successfully."
|
||||
|
||||
// Handle form success from server
|
||||
$: if (form?.success) {
|
||||
success = 'RSVP added successfully!';
|
||||
@@ -52,17 +59,33 @@
|
||||
newAttendeeName = '';
|
||||
addGuests = false;
|
||||
numberOfGuests = 1;
|
||||
|
||||
// show and auto-hide success toast for add action
|
||||
toastType = 'add';
|
||||
if (browser) {
|
||||
if (successHideTimer) clearTimeout(successHideTimer);
|
||||
successHideTimer = window.setTimeout(() => {
|
||||
success = '';
|
||||
toastType = null;
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
|
||||
// Derive toast type from local or server form
|
||||
$: typeToShow = toastType ?? form?.type;
|
||||
|
||||
const eventId = $page.params.id || '';
|
||||
|
||||
const copyEventLink = () => {
|
||||
if (browser) {
|
||||
const url = `${$page.url.origin}/event/${eventId}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
success = 'Event link copied to clipboard!';
|
||||
toastType = 'copy';
|
||||
success = t('event.eventLinkCopied');
|
||||
|
||||
setTimeout(() => {
|
||||
success = '';
|
||||
toastType = null;
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
@@ -71,6 +94,7 @@
|
||||
const clearMessages = () => {
|
||||
error = '';
|
||||
success = '';
|
||||
toastType = null;
|
||||
};
|
||||
|
||||
// Calendar modal functions
|
||||
@@ -208,7 +232,13 @@
|
||||
<div class=" rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
|
||||
<h3 class=" mb-4 text-xl font-bold">{t('event.joinThisEvent')}</h3>
|
||||
|
||||
{#if event.type === 'limited' && event.attendee_limit && rsvps.length >= event.attendee_limit}
|
||||
{#if event.visibility === 'invite-only'}
|
||||
<div class="py-6 text-center">
|
||||
<div class="mb-3 text-4xl">🎫</div>
|
||||
<p class="font-semibold text-amber-400">{t('event.inviteOnlyBannerTitle')}</p>
|
||||
<p class="mt-1 text-sm text-amber-300">{t('common.inviteRequiredToDetails')}</p>
|
||||
</div>
|
||||
{:else if event.type === 'limited' && event.attendee_limit && rsvps.length >= event.attendee_limit}
|
||||
<div class="py-6 text-center">
|
||||
<div class="mb-3 text-4xl text-red-400">🚫</div>
|
||||
<p class="font-semibold text-red-400">{t('event.eventIsFull')}</p>
|
||||
@@ -316,92 +346,99 @@
|
||||
</div>
|
||||
|
||||
<!-- Attendees List -->
|
||||
<div class="rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class=" text-xl font-bold">{t('event.attendeesTitle')}</h3>
|
||||
<span class="text-2xl font-bold">{rsvps.length}</span>
|
||||
</div>
|
||||
|
||||
{#if rsvps.length === 0}
|
||||
<div class="text-dark-400 py-8 text-center">
|
||||
<p>{t('event.noAttendeesYet')}</p>
|
||||
<p class="mt-1 text-sm">{t('event.beFirstToJoin')}</p>
|
||||
{#if event.visibility !== 'invite-only'}
|
||||
<div class="rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class=" text-xl font-bold">{t('event.attendeesTitle')}</h3>
|
||||
<span class="text-2xl font-bold">{rsvps.length}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each rsvps as attendee, i (i)}
|
||||
<div
|
||||
class="flex items-center justify-between rounded-sm border border-white/20 p-3"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold {attendee.name.includes(
|
||||
"'s Guest"
|
||||
)
|
||||
? 'text-white-400 bg-violet-500/40'
|
||||
: 'bg-violet-500/20 text-violet-400'}"
|
||||
>
|
||||
{attendee.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="font-medium text-white {attendee.name.includes("'s Guest")
|
||||
? 'text-amber-300'
|
||||
: ''}"
|
||||
|
||||
{#if rsvps.length === 0}
|
||||
<div class="text-dark-400 py-8 text-center">
|
||||
<p>{t('event.noAttendeesYet')}</p>
|
||||
<p class="mt-1 text-sm">{t('event.beFirstToJoin')}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each rsvps as attendee, i (i)}
|
||||
<div
|
||||
class="flex items-center justify-between rounded-sm border border-white/20 p-3"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold {attendee.name.includes(
|
||||
"'s Guest"
|
||||
)
|
||||
? 'text-white-400 bg-violet-500/40'
|
||||
: 'bg-violet-500/20 text-violet-400'}"
|
||||
>
|
||||
{attendee.name}
|
||||
</p>
|
||||
<p class="text-xs text-violet-400">
|
||||
{(() => {
|
||||
const date = new Date(attendee.created_at);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}/${month}/${day} ${hours}:${minutes}`;
|
||||
})()}
|
||||
</p>
|
||||
{attendee.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
class="font-medium text-white {attendee.name.includes("'s Guest")
|
||||
? 'text-amber-300'
|
||||
: ''}"
|
||||
>
|
||||
{attendee.name}
|
||||
</p>
|
||||
<p class="text-xs text-violet-400">
|
||||
{(() => {
|
||||
const date = new Date(attendee.created_at);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}/${month}/${day} ${hours}:${minutes}`;
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if attendee.user_id === currentUserId}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/removeRSVP"
|
||||
use:enhance={() => {
|
||||
clearMessages();
|
||||
return async ({ result, update }) => {
|
||||
if (result.type === 'failure') {
|
||||
error = String(result.data?.error || 'Failed to remove RSVP');
|
||||
}
|
||||
update();
|
||||
};
|
||||
}}
|
||||
style="display: inline;"
|
||||
>
|
||||
<input type="hidden" name="rsvpId" value={attendee.id} />
|
||||
<button
|
||||
type="submit"
|
||||
class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
|
||||
aria-label={t('event.removeRsvpAriaLabel')}
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if attendee.user_id === currentUserId}
|
||||
<form
|
||||
method="POST"
|
||||
action="?/removeRSVP"
|
||||
use:enhance={() => {
|
||||
clearMessages();
|
||||
return async ({ result, update }) => {
|
||||
if (result.type === 'failure') {
|
||||
error = String(result.data?.error || 'Failed to remove RSVP');
|
||||
}
|
||||
update();
|
||||
};
|
||||
}}
|
||||
style="display: inline;"
|
||||
>
|
||||
<input type="hidden" name="rsvpId" value={attendee.id} />
|
||||
<button
|
||||
type="submit"
|
||||
class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
|
||||
aria-label={t('event.removeRsvpAriaLabel')}
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="max-w-2xl space-y-3">
|
||||
@@ -436,18 +473,26 @@
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
{#if success}
|
||||
{#if form?.type === 'add'}
|
||||
{#if typeToShow === 'add'}
|
||||
<div
|
||||
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500/30 bg-green-900/20 p-4 text-green-400"
|
||||
>
|
||||
{success}
|
||||
</div>
|
||||
{:else if form?.type === 'remove'}
|
||||
{:else if typeToShow === 'remove'}
|
||||
<div
|
||||
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
|
||||
>
|
||||
{t('event.removedRsvpSuccessfully')}
|
||||
</div>
|
||||
{:else if typeToShow === 'copy'}
|
||||
<div
|
||||
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
|
||||
>
|
||||
{t('event.eventLinkCopied')}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- fallback -->
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user