810 lines
24 KiB
Vue
810 lines
24 KiB
Vue
<template>
|
|
<v-dialog v-model="show" max-width="600" persistent>
|
|
<v-card v-if="event">
|
|
<v-card-title class="d-flex justify-space-between align-center">
|
|
<div class="d-flex align-center">
|
|
<v-icon class="me-2" :color="eventTypeColor">{{ eventTypeIcon }}</v-icon>
|
|
<span>{{ event?.title || 'Event Details' }}</span>
|
|
</div>
|
|
<v-btn
|
|
@click="close"
|
|
icon
|
|
variant="text"
|
|
size="small"
|
|
>
|
|
<v-icon>mdi-close</v-icon>
|
|
</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<!-- Event Type Badge -->
|
|
<v-chip
|
|
:color="eventTypeColor"
|
|
size="small"
|
|
variant="tonal"
|
|
class="mb-4"
|
|
>
|
|
<v-icon start>{{ eventTypeIcon }}</v-icon>
|
|
{{ eventTypeLabel }}
|
|
</v-chip>
|
|
|
|
<!-- Event Details -->
|
|
<v-row class="mb-4">
|
|
<!-- Date & Time -->
|
|
<v-col cols="12">
|
|
<div class="d-flex align-center mb-2">
|
|
<v-icon class="me-2">mdi-calendar-clock</v-icon>
|
|
<div>
|
|
<div class="font-weight-medium">{{ formatEventDate }}</div>
|
|
<div class="text-body-2 text-medium-emphasis">{{ formatEventTime }}</div>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
|
|
<!-- Location -->
|
|
<v-col v-if="event.location" cols="12">
|
|
<div class="d-flex align-center mb-2">
|
|
<v-icon class="me-2">mdi-map-marker</v-icon>
|
|
<span>{{ event.location }}</span>
|
|
</div>
|
|
</v-col>
|
|
|
|
<!-- Description -->
|
|
<v-col v-if="event.description" cols="12">
|
|
<div class="d-flex align-start mb-2">
|
|
<v-icon class="me-2 mt-1">mdi-text</v-icon>
|
|
<div>
|
|
<div class="font-weight-medium mb-1">Description</div>
|
|
<!-- Display HTML content safely -->
|
|
<div
|
|
class="text-body-2 rich-text-content"
|
|
v-html="event.description"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
|
|
<!-- Capacity -->
|
|
<v-col v-if="event.max_attendees" cols="12">
|
|
<div class="d-flex align-center mb-2">
|
|
<v-icon class="me-2">mdi-account-group</v-icon>
|
|
<div>
|
|
<span class="font-weight-medium">Capacity:</span>
|
|
<span class="ms-2">
|
|
{{ event.current_attendees || 0 }} / {{ event.max_attendees }}
|
|
</span>
|
|
<v-progress-linear
|
|
:model-value="capacityPercentage"
|
|
:color="capacityColor"
|
|
height="4"
|
|
class="mt-1"
|
|
rounded
|
|
/>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Payment Information -->
|
|
<v-alert
|
|
v-if="event.is_paid === 'true'"
|
|
type="info"
|
|
variant="tonal"
|
|
class="mb-4"
|
|
>
|
|
<v-alert-title>
|
|
<v-icon start>mdi-currency-eur</v-icon>
|
|
Payment Required
|
|
</v-alert-title>
|
|
<div class="mt-2">
|
|
<div v-if="memberPrice && nonMemberPrice">
|
|
<strong>Members:</strong> €{{ memberPrice }}<br>
|
|
<strong>Non-Members:</strong> €{{ nonMemberPrice }}
|
|
</div>
|
|
<div v-else-if="memberPrice">
|
|
<strong>Cost:</strong> €{{ memberPrice }}
|
|
</div>
|
|
<div v-if="event.member_pricing_enabled === 'false'" class="text-caption mt-1">
|
|
<v-icon size="small">mdi-information</v-icon>
|
|
Member pricing is not available for this event
|
|
</div>
|
|
</div>
|
|
</v-alert>
|
|
|
|
<!-- RSVP Status -->
|
|
<v-card
|
|
v-if="hasRSVP"
|
|
variant="outlined"
|
|
class="mb-4"
|
|
:color="rsvpStatusColor"
|
|
>
|
|
<v-card-text class="py-3">
|
|
<div class="d-flex align-center justify-space-between">
|
|
<div class="d-flex align-center">
|
|
<v-icon :color="rsvpStatusColor" class="me-2">{{ rsvpStatusIcon }}</v-icon>
|
|
<div>
|
|
<div class="font-weight-medium">{{ rsvpStatusText }}</div>
|
|
<div v-if="userRSVP?.rsvp_notes" class="text-caption">{{ userRSVP.rsvp_notes }}</div>
|
|
</div>
|
|
</div>
|
|
<v-btn
|
|
@click="changeRSVP"
|
|
size="small"
|
|
variant="outlined"
|
|
:color="rsvpStatusColor"
|
|
>
|
|
Change
|
|
</v-btn>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- Payment Details (if RSVP'd to paid event) -->
|
|
<v-card
|
|
v-if="showPaymentDetails"
|
|
variant="outlined"
|
|
class="mb-4"
|
|
>
|
|
<v-card-title class="py-3">
|
|
<v-icon class="me-2">mdi-bank-transfer</v-icon>
|
|
Payment Details
|
|
</v-card-title>
|
|
<v-card-text class="pt-0">
|
|
<v-row dense>
|
|
<v-col cols="12">
|
|
<div class="text-body-2">
|
|
<strong>Amount:</strong> €{{ paymentAmount }}
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<div class="text-body-2">
|
|
<strong>IBAN:</strong> {{ paymentInfo.iban }}
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<div class="text-body-2">
|
|
<strong>Recipient:</strong> {{ paymentInfo.recipient }}
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<div class="text-body-2">
|
|
<strong>Reference:</strong> {{ userRSVP?.payment_reference }}
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
<v-btn
|
|
@click="copyPaymentDetails"
|
|
size="small"
|
|
variant="outlined"
|
|
class="mt-3"
|
|
prepend-icon="mdi-content-copy"
|
|
>
|
|
Copy Details
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- RSVP Form -->
|
|
<v-card v-if="!hasRSVP && canRSVP" variant="outlined">
|
|
<v-card-title class="py-3">
|
|
<v-icon class="me-2">mdi-account-check</v-icon>
|
|
RSVP to this Event
|
|
</v-card-title>
|
|
<v-card-text class="pt-0">
|
|
<v-form v-model="rsvpValid">
|
|
<!-- Guest Selection (if event allows guests) -->
|
|
<div v-if="allowsGuests" class="mb-4">
|
|
<v-card variant="tonal" class="mb-3">
|
|
<v-card-text class="py-3">
|
|
<div class="d-flex align-center mb-2">
|
|
<v-icon class="me-2">mdi-account-group</v-icon>
|
|
<span class="font-weight-medium">Bring Guests</span>
|
|
</div>
|
|
<p class="text-body-2 text-medium-emphasis mb-3">
|
|
This event allows up to {{ maxGuestsAllowed }} additional guests per person.
|
|
</p>
|
|
<v-select
|
|
v-model="selectedGuests"
|
|
:items="guestOptions"
|
|
label="Number of Additional Guests"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
|
|
<v-textarea
|
|
v-model="rsvpNotes"
|
|
label="Notes (optional)"
|
|
rows="2"
|
|
variant="outlined"
|
|
class="mb-3"
|
|
/>
|
|
|
|
<v-btn
|
|
@click="submitRSVP('confirmed')"
|
|
color="primary"
|
|
:loading="rsvpLoading"
|
|
:disabled="isEventFull && !isWaitlistAvailable"
|
|
size="large"
|
|
block
|
|
class="mb-2"
|
|
>
|
|
<v-icon start>mdi-check</v-icon>
|
|
{{ isEventFull ? 'Join Waitlist' : 'RSVP' }}
|
|
</v-btn>
|
|
</v-form>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<!-- Event Full Message -->
|
|
<v-alert
|
|
v-if="isEventFull && !hasRSVP && !isWaitlistAvailable"
|
|
type="warning"
|
|
variant="tonal"
|
|
>
|
|
<v-alert-title>Event Full</v-alert-title>
|
|
This event has reached maximum capacity and waitlist is not available.
|
|
</v-alert>
|
|
|
|
<!-- Past Event Message -->
|
|
<v-alert
|
|
v-if="isPastEvent"
|
|
type="info"
|
|
variant="tonal"
|
|
>
|
|
<v-alert-title>Past Event</v-alert-title>
|
|
This event has already occurred.
|
|
</v-alert>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="pa-4">
|
|
<!-- Delete button for admin/board -->
|
|
<v-btn
|
|
v-if="canDeleteEvent"
|
|
@click="showDeleteConfirm = true"
|
|
color="error"
|
|
variant="outlined"
|
|
prepend-icon="mdi-delete"
|
|
:loading="deleteLoading"
|
|
>
|
|
Delete Event
|
|
</v-btn>
|
|
|
|
<v-spacer />
|
|
<v-btn
|
|
@click="close"
|
|
variant="outlined"
|
|
>
|
|
Close
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
|
|
<!-- Delete Confirmation Dialog -->
|
|
<v-dialog v-model="showDeleteConfirm" max-width="500" persistent>
|
|
<v-card>
|
|
<v-card-title class="d-flex align-center">
|
|
<v-icon class="me-2 text-error">mdi-alert</v-icon>
|
|
Delete Event
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-alert type="warning" variant="tonal" class="mb-4">
|
|
<v-alert-title>Warning: This action cannot be undone</v-alert-title>
|
|
This will permanently delete the event and all associated RSVP data.
|
|
</v-alert>
|
|
|
|
<p class="text-body-1 mb-4">
|
|
Are you sure you want to delete "<strong>{{ event?.title }}</strong>"?
|
|
</p>
|
|
|
|
<div class="text-body-2 text-medium-emphasis">
|
|
<div v-if="event?.current_attendees && parseInt(event.current_attendees) > 0">
|
|
<v-icon size="small" class="me-1">mdi-information</v-icon>
|
|
This event has {{ event.current_attendees }} confirmed attendees. Their RSVPs will also be deleted.
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="pa-4">
|
|
<v-spacer />
|
|
<v-btn
|
|
@click="showDeleteConfirm = false"
|
|
variant="outlined"
|
|
:disabled="deleteLoading"
|
|
>
|
|
Cancel
|
|
</v-btn>
|
|
<v-btn
|
|
@click="handleDeleteEvent"
|
|
color="error"
|
|
:loading="deleteLoading"
|
|
>
|
|
Delete Event
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Event, EventRSVP } from '~/utils/types';
|
|
import { useEvents } from '~/composables/useEvents';
|
|
import { useAuth } from '~/composables/useAuth';
|
|
// Helper function to replace date-fns format
|
|
const formatDate = (date: Date, formatStr: string): string => {
|
|
if (formatStr === 'EEEE, MMMM d, yyyy') {
|
|
return date.toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
} else if (formatStr === 'MMM d') {
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric'
|
|
});
|
|
} else if (formatStr === 'MMM d, yyyy') {
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
} else if (formatStr === 'HH:mm') {
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false
|
|
});
|
|
}
|
|
|
|
return date.toLocaleDateString();
|
|
};
|
|
|
|
interface Props {
|
|
modelValue: boolean;
|
|
event: Event | null;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean];
|
|
'rsvp-updated': [event: Event];
|
|
}>();
|
|
|
|
const { rsvpToEvent, deleteEvent } = useEvents();
|
|
const { isAdmin, isBoard } = useAuth();
|
|
|
|
// Reactive state
|
|
const rsvpValid = ref(false);
|
|
const rsvpLoading = ref(false);
|
|
const rsvpNotes = ref('');
|
|
const selectedGuests = ref(0);
|
|
const deleteLoading = ref(false);
|
|
const showDeleteConfirm = ref(false);
|
|
|
|
// Computed properties
|
|
const show = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
});
|
|
|
|
|
|
const userRSVP = computed((): EventRSVP | null => {
|
|
return props.event?.user_rsvp || null;
|
|
});
|
|
|
|
const hasRSVP = computed(() => !!userRSVP.value);
|
|
|
|
const canRSVP = computed(() => {
|
|
return props.event && !isPastEvent.value;
|
|
});
|
|
|
|
const isPastEvent = computed(() => {
|
|
if (!props.event) return false;
|
|
return new Date(props.event.start_datetime) < new Date();
|
|
});
|
|
|
|
const isEventFull = computed(() => {
|
|
if (!props.event?.max_attendees) return false;
|
|
const maxAttendees = parseInt(props.event.max_attendees);
|
|
const currentAttendees = typeof props.event.current_attendees === 'string'
|
|
? parseInt(props.event.current_attendees) || 0
|
|
: props.event.current_attendees || 0;
|
|
return currentAttendees >= maxAttendees;
|
|
});
|
|
|
|
const isWaitlistAvailable = computed(() => true); // Always allow waitlist for now
|
|
|
|
const eventTypeColor = computed(() => {
|
|
const colors = {
|
|
'meeting': 'blue',
|
|
'social': 'green',
|
|
'fundraiser': 'orange',
|
|
'workshop': 'purple',
|
|
'board-only': 'red'
|
|
};
|
|
return colors[props.event?.event_type as keyof typeof colors] || 'grey';
|
|
});
|
|
|
|
const eventTypeIcon = computed(() => {
|
|
const icons = {
|
|
'meeting': 'mdi-account-group',
|
|
'social': 'mdi-party-popper',
|
|
'fundraiser': 'mdi-heart',
|
|
'workshop': 'mdi-school',
|
|
'board-only': 'mdi-shield-account'
|
|
};
|
|
return icons[props.event?.event_type as keyof typeof icons] || 'mdi-calendar';
|
|
});
|
|
|
|
const eventTypeLabel = computed(() => {
|
|
const labels = {
|
|
'meeting': 'Meeting',
|
|
'social': 'Social Event',
|
|
'fundraiser': 'Fundraiser',
|
|
'workshop': 'Workshop',
|
|
'board-only': 'Board Only'
|
|
};
|
|
return labels[props.event?.event_type as keyof typeof labels] || 'Event';
|
|
});
|
|
|
|
const formatEventDate = computed(() => {
|
|
if (!props.event) return '';
|
|
const startDate = new Date(props.event.start_datetime);
|
|
const endDate = new Date(props.event.end_datetime);
|
|
|
|
if (startDate.toDateString() === endDate.toDateString()) {
|
|
return formatDate(startDate, 'EEEE, MMMM d, yyyy');
|
|
} else {
|
|
return `${formatDate(startDate, 'MMM d')} - ${formatDate(endDate, 'MMM d, yyyy')}`;
|
|
}
|
|
});
|
|
|
|
const formatEventTime = computed(() => {
|
|
if (!props.event) return '';
|
|
const startDate = new Date(props.event.start_datetime);
|
|
const endDate = new Date(props.event.end_datetime);
|
|
|
|
return `${formatDate(startDate, 'HH:mm')} - ${formatDate(endDate, 'HH:mm')}`;
|
|
});
|
|
|
|
const capacityPercentage = computed(() => {
|
|
if (!props.event?.max_attendees) return 0;
|
|
const max = parseInt(props.event.max_attendees);
|
|
const current = typeof props.event.current_attendees === 'string'
|
|
? parseInt(props.event.current_attendees) || 0
|
|
: props.event.current_attendees || 0;
|
|
return (current / max) * 100;
|
|
});
|
|
|
|
const capacityColor = computed(() => {
|
|
const percentage = capacityPercentage.value;
|
|
if (percentage >= 100) return 'error';
|
|
if (percentage >= 80) return 'warning';
|
|
return 'success';
|
|
});
|
|
|
|
const memberPrice = computed(() => props.event?.cost_members);
|
|
const nonMemberPrice = computed(() => props.event?.cost_non_members);
|
|
|
|
const rsvpStatusColor = computed(() => {
|
|
const status = userRSVP.value?.rsvp_status;
|
|
switch (status) {
|
|
case 'confirmed': return 'success';
|
|
case 'waitlist': return 'warning';
|
|
case 'declined': return 'error';
|
|
default: return 'info';
|
|
}
|
|
});
|
|
|
|
const rsvpStatusIcon = computed(() => {
|
|
const status = userRSVP.value?.rsvp_status;
|
|
switch (status) {
|
|
case 'confirmed': return 'mdi-check-circle';
|
|
case 'waitlist': return 'mdi-clock';
|
|
case 'declined': return 'mdi-close-circle';
|
|
default: return 'mdi-help-circle';
|
|
}
|
|
});
|
|
|
|
const rsvpStatusText = computed(() => {
|
|
const status = userRSVP.value?.rsvp_status;
|
|
switch (status) {
|
|
case 'confirmed': return 'You are attending this event';
|
|
case 'waitlist': return 'You are on the waitlist';
|
|
case 'declined': return 'You declined this event';
|
|
default: return 'Status unknown';
|
|
}
|
|
});
|
|
|
|
const showPaymentDetails = computed(() => {
|
|
return props.event?.is_paid === 'true' &&
|
|
userRSVP.value?.rsvp_status === 'confirmed' &&
|
|
userRSVP.value?.payment_status === 'pending';
|
|
});
|
|
|
|
const paymentAmount = computed(() => {
|
|
if (!userRSVP.value || !props.event) return '0';
|
|
|
|
const isMemberPricing = userRSVP.value.is_member_pricing === 'true';
|
|
return isMemberPricing ? props.event.cost_members : props.event.cost_non_members;
|
|
});
|
|
|
|
const paymentInfo = computed(() => ({
|
|
iban: 'FR76 1234 5678 9012 3456 7890 123', // This should come from config
|
|
recipient: 'MonacoUSA Association' // This should come from config
|
|
}));
|
|
|
|
// Guest functionality
|
|
const allowsGuests = computed(() => {
|
|
return props.event?.guests_permitted === 'true';
|
|
});
|
|
|
|
const maxGuestsAllowed = computed(() => {
|
|
if (!allowsGuests.value) return 0;
|
|
return parseInt(props.event?.max_guests_permitted || '0');
|
|
});
|
|
|
|
const guestOptions = computed(() => {
|
|
const max = maxGuestsAllowed.value;
|
|
const options = [];
|
|
for (let i = 0; i <= max; i++) {
|
|
options.push({
|
|
title: i === 0 ? 'No additional guests' : `${i} guest${i > 1 ? 's' : ''}`,
|
|
value: i
|
|
});
|
|
}
|
|
return options;
|
|
});
|
|
|
|
// Admin/Board permissions
|
|
const canDeleteEvent = computed(() => {
|
|
console.log('[EventDetailsDialog] canDeleteEvent computed triggered');
|
|
console.log('[EventDetailsDialog] Auth composable values:', {
|
|
isAdmin: isAdmin.value,
|
|
isBoard: isBoard.value,
|
|
typeof_isAdmin: typeof isAdmin.value,
|
|
typeof_isBoard: typeof isBoard.value
|
|
});
|
|
|
|
const canDelete = isAdmin.value || isBoard.value;
|
|
console.log('[EventDetailsDialog] Final canDelete result:', canDelete);
|
|
return canDelete;
|
|
});
|
|
|
|
// Add watcher to see when dialog opens
|
|
watch(() => show.value, (newValue) => {
|
|
if (newValue) {
|
|
console.log('[EventDetailsDialog] Dialog opened');
|
|
console.log('[EventDetailsDialog] Event prop:', props.event);
|
|
console.log('[EventDetailsDialog] Auth status check on open:', {
|
|
isAdmin: isAdmin.value,
|
|
isBoard: isBoard.value,
|
|
canDelete: canDeleteEvent.value
|
|
});
|
|
}
|
|
});
|
|
|
|
// Methods
|
|
const close = () => {
|
|
show.value = false;
|
|
rsvpNotes.value = '';
|
|
};
|
|
|
|
const submitRSVP = async (status: 'confirmed' | 'declined') => {
|
|
console.log('[EventDetailsDialog] submitRSVP called with status:', status);
|
|
|
|
if (!props.event) {
|
|
console.error('[EventDetailsDialog] No event provided');
|
|
return;
|
|
}
|
|
|
|
rsvpLoading.value = true;
|
|
|
|
try {
|
|
// Use event_id field for consistent RSVP relationships
|
|
// This ensures RSVPs are linked properly to events using the business identifier
|
|
let eventId = props.event.event_id ||
|
|
(props.event as any).extendedProps?.event_id ||
|
|
(props.event as any).Id || // Fallback to database ID if event_id not available
|
|
props.event.id ||
|
|
(props.event as any).id; // Additional fallback
|
|
|
|
// Direct access to Id field as backup
|
|
if (!eventId && 'Id' in props.event) {
|
|
eventId = (props.event as any)['Id'];
|
|
console.log('[EventDetailsDialog] Found Id via direct property access:', eventId);
|
|
}
|
|
|
|
// Try to access the Id property using Object.keys approach
|
|
if (!eventId) {
|
|
const keys = Object.keys(props.event);
|
|
console.log('[EventDetailsDialog] Available keys:', keys);
|
|
if (keys.includes('Id')) {
|
|
eventId = props.event['Id' as keyof Event];
|
|
console.log('[EventDetailsDialog] Found Id via keys lookup:', eventId);
|
|
}
|
|
}
|
|
|
|
console.log('[EventDetailsDialog] Using event identifier for RSVP:', eventId);
|
|
console.log('[EventDetailsDialog] Event object keys:', Object.keys(props.event));
|
|
console.log('[EventDetailsDialog] Event event_id field:', props.event.event_id);
|
|
console.log('[EventDetailsDialog] Event database Id field:', (props.event as any).Id);
|
|
console.log('[EventDetailsDialog] Event id field:', props.event.id);
|
|
console.log('[EventDetailsDialog] Full event object:', JSON.stringify(props.event, null, 2));
|
|
|
|
if (!eventId) {
|
|
console.error('[EventDetailsDialog] Unable to determine event identifier');
|
|
throw new Error('Unable to determine event identifier');
|
|
}
|
|
|
|
console.log('[EventDetailsDialog] Calling rsvpToEvent with:', {
|
|
eventId,
|
|
status,
|
|
notes: rsvpNotes.value,
|
|
guests: selectedGuests.value
|
|
});
|
|
|
|
const result = await rsvpToEvent(eventId, {
|
|
member_id: '', // This will be filled by the composable
|
|
rsvp_status: status,
|
|
rsvp_notes: rsvpNotes.value,
|
|
extra_guests: selectedGuests.value.toString()
|
|
});
|
|
|
|
console.log('[EventDetailsDialog] RSVP submitted successfully:', result);
|
|
|
|
emit('rsvp-updated', props.event);
|
|
// TODO: Show success message
|
|
|
|
} catch (error) {
|
|
console.error('[EventDetailsDialog] Error submitting RSVP:', error);
|
|
// TODO: Show error message
|
|
} finally {
|
|
rsvpLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const changeRSVP = () => {
|
|
// For now, just allow re-submitting RSVP
|
|
// In the future, this could open an edit dialog
|
|
if (userRSVP.value?.rsvp_status === 'confirmed') {
|
|
submitRSVP('declined');
|
|
} else if (userRSVP.value?.rsvp_status === 'declined') {
|
|
submitRSVP('confirmed');
|
|
}
|
|
};
|
|
|
|
const copyPaymentDetails = async () => {
|
|
const details = `
|
|
Event: ${props.event?.title}
|
|
Amount: €${paymentAmount.value}
|
|
IBAN: ${paymentInfo.value.iban}
|
|
Recipient: ${paymentInfo.value.recipient}
|
|
Reference: ${userRSVP.value?.payment_reference}
|
|
`.trim();
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(details);
|
|
} catch (error) {
|
|
console.error('Error copying to clipboard:', error);
|
|
}
|
|
};
|
|
|
|
const handleDeleteEvent = async () => {
|
|
if (!props.event) return;
|
|
|
|
deleteLoading.value = true;
|
|
|
|
try {
|
|
// Use the correct event identifier for deletion
|
|
const eventId = (props.event as any).Id || props.event.id || props.event.event_id;
|
|
|
|
if (!eventId) {
|
|
throw new Error('Unable to determine event ID for deletion');
|
|
}
|
|
|
|
console.log('[EventDetailsDialog] Deleting event with ID:', eventId);
|
|
|
|
const result = await deleteEvent(eventId.toString());
|
|
|
|
console.log('[EventDetailsDialog] Event deleted successfully:', result);
|
|
|
|
// Close both dialogs
|
|
showDeleteConfirm.value = false;
|
|
show.value = false;
|
|
|
|
// Emit event for parent component to refresh
|
|
emit('rsvp-updated', props.event);
|
|
|
|
} catch (error) {
|
|
console.error('[EventDetailsDialog] Error deleting event:', error);
|
|
// TODO: Show error message to user
|
|
} finally {
|
|
deleteLoading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-card {
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.text-medium-emphasis {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.v-progress-linear {
|
|
max-width: 200px;
|
|
}
|
|
|
|
/* Rich text content styling */
|
|
.rich-text-content {
|
|
word-wrap: break-word;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.rich-text-content :deep(h1),
|
|
.rich-text-content :deep(h2),
|
|
.rich-text-content :deep(h3) {
|
|
color: rgb(var(--v-theme-on-surface));
|
|
font-weight: 600;
|
|
margin: 16px 0 8px 0;
|
|
}
|
|
|
|
.rich-text-content :deep(h1) {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.rich-text-content :deep(h2) {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.rich-text-content :deep(h3) {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.rich-text-content :deep(p) {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.rich-text-content :deep(ul),
|
|
.rich-text-content :deep(ol) {
|
|
padding-left: 20px;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.rich-text-content :deep(li) {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.rich-text-content :deep(strong) {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.rich-text-content :deep(em) {
|
|
font-style: italic;
|
|
}
|
|
|
|
.rich-text-content :deep(u) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.rich-text-content :deep(a) {
|
|
color: rgb(var(--v-theme-primary));
|
|
text-decoration: none;
|
|
}
|
|
|
|
.rich-text-content :deep(a:hover) {
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|