mirror of
https://github.com/polaroi8d/cactoide.git
synced 2026-03-22 06:05:28 +00:00
feat: add edit events functionality
This commit is contained in:
Levente Orban
@@ -35,7 +35,7 @@
|
||||
|
||||
const eventId = $page.params.id;
|
||||
|
||||
function copyEventLink() {
|
||||
const copyEventLink = () => {
|
||||
const url = `${window.location.origin}/event/${eventId}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
success = 'Event link copied to clipboard!';
|
||||
@@ -43,12 +43,12 @@
|
||||
success = '';
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function clearMessages() {
|
||||
const clearMessages = () => {
|
||||
error = '';
|
||||
success = '';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -300,7 +300,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
succcess: {success}
|
||||
<!-- Action Buttons -->
|
||||
<div class="max-w-2xl">
|
||||
<button
|
||||
|
||||
123
src/routes/event/[id]/edit/+page.server.ts
Normal file
123
src/routes/event/[id]/edit/+page.server.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
import { database } from '$lib/database/db';
|
||||
import { events } from '$lib/database/schema';
|
||||
import { eq, and } from 'drizzle-orm';
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ params, cookies }) => {
|
||||
const eventId = params.id;
|
||||
const userId = cookies.get('cactoideUserId');
|
||||
|
||||
if (!userId) {
|
||||
throw redirect(303, '/');
|
||||
}
|
||||
|
||||
// Fetch the event and verify ownership
|
||||
const event = await database
|
||||
.select()
|
||||
.from(events)
|
||||
.where(and(eq(events.id, eventId), eq(events.userId, userId)))
|
||||
.limit(1);
|
||||
|
||||
if (event.length === 0) {
|
||||
throw redirect(303, '/event');
|
||||
}
|
||||
|
||||
return {
|
||||
event: event[0]
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request, params, cookies }) => {
|
||||
const eventId = params.id;
|
||||
const userId = cookies.get('cactoideUserId');
|
||||
const formData = await request.formData();
|
||||
|
||||
if (!userId) {
|
||||
return fail(401, { error: 'Unauthorized' });
|
||||
}
|
||||
|
||||
// Verify event ownership before allowing edit
|
||||
const existingEvent = await database
|
||||
.select()
|
||||
.from(events)
|
||||
.where(and(eq(events.id, eventId), eq(events.userId, userId)))
|
||||
.limit(1);
|
||||
|
||||
if (existingEvent.length === 0) {
|
||||
return fail(403, { error: 'You can only edit your own events' });
|
||||
}
|
||||
|
||||
const name = formData.get('name') as string;
|
||||
const date = formData.get('date') as string;
|
||||
const time = formData.get('time') as string;
|
||||
const location = formData.get('location') as string;
|
||||
const type = formData.get('type') as 'limited' | 'unlimited';
|
||||
const attendeeLimit = formData.get('attendee_limit') as string;
|
||||
const visibility = formData.get('visibility') as 'public' | 'private';
|
||||
|
||||
// Validation
|
||||
const missingFields: string[] = [];
|
||||
|
||||
if (!name?.trim()) missingFields.push('name');
|
||||
if (!date) missingFields.push('date');
|
||||
if (!time) missingFields.push('time');
|
||||
if (!location?.trim()) missingFields.push('location');
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
return fail(400, {
|
||||
error: `Missing or empty fields: ${missingFields.join(', ')}`,
|
||||
values: {
|
||||
name,
|
||||
date,
|
||||
time,
|
||||
location,
|
||||
type,
|
||||
attendee_limit: attendeeLimit,
|
||||
visibility
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Check if date is in the past (but allow editing past events for corrections)
|
||||
const eventDate = new Date(date);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
if (eventDate < today) {
|
||||
return fail(400, {
|
||||
error: 'Date cannot be in the past.',
|
||||
values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'limited' && (!attendeeLimit || parseInt(attendeeLimit) < 2)) {
|
||||
return fail(400, {
|
||||
error: 'Limit must be at least 2 for limited events.',
|
||||
values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
|
||||
});
|
||||
}
|
||||
|
||||
// Update the event
|
||||
await database
|
||||
.update(events)
|
||||
.set({
|
||||
name: name.trim(),
|
||||
date: date,
|
||||
time: time,
|
||||
location: location.trim(),
|
||||
type: type,
|
||||
attendeeLimit: type === 'limited' ? parseInt(attendeeLimit) : null,
|
||||
visibility: visibility,
|
||||
updatedAt: new Date()
|
||||
})
|
||||
.where(and(eq(events.id, eventId), eq(events.userId, userId)))
|
||||
.catch((error) => {
|
||||
console.error('Unexpected error updating event', error);
|
||||
throw error;
|
||||
});
|
||||
|
||||
throw redirect(303, `/event/${eventId}`);
|
||||
}
|
||||
};
|
||||
289
src/routes/event/[id]/edit/+page.svelte
Normal file
289
src/routes/event/[id]/edit/+page.svelte
Normal file
@@ -0,0 +1,289 @@
|
||||
<script lang="ts">
|
||||
import type { EventType } from '$lib/types';
|
||||
import { enhance } from '$app/forms';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let data;
|
||||
export let form: any;
|
||||
|
||||
let eventData = {
|
||||
name: data.event.name,
|
||||
date: data.event.date,
|
||||
time: data.event.time,
|
||||
location: data.event.location,
|
||||
type: data.event.type,
|
||||
attendee_limit: data.event.attendeeLimit,
|
||||
visibility: data.event.visibility
|
||||
};
|
||||
|
||||
let errors: Record<string, string> = {};
|
||||
let isSubmitting = false;
|
||||
|
||||
// Get today's date in YYYY-MM-DD format for min attribute
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
// Handle form errors from server
|
||||
$: if (form?.error) {
|
||||
errors.server = form.error;
|
||||
}
|
||||
|
||||
// Pre-fill form with values from server on error
|
||||
$: if (form && 'values' in form && form.values) {
|
||||
const values = form.values as any;
|
||||
eventData = {
|
||||
...eventData,
|
||||
...values,
|
||||
attendee_limit: values.attendee_limit ? parseInt(String(values.attendee_limit)) : null
|
||||
};
|
||||
}
|
||||
|
||||
const handleTypeChange = (type: EventType) => {
|
||||
eventData.type = type;
|
||||
if (type === 'unlimited') {
|
||||
eventData.attendee_limit = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
goto(`/event/${data.event.id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Edit Event - {data.event.name} - Cactoide</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto flex-1 px-4 py-8">
|
||||
<div class="mx-auto max-w-md">
|
||||
<!-- Event Edit Form -->
|
||||
<div class="rounded-sm border p-8">
|
||||
<div class="mb-8 text-center">
|
||||
<h2 class="text-3xl font-bold text-violet-400">Edit Event</h2>
|
||||
<p class="mt-2 text-sm text-slate-400">Update your event details</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
isSubmitting = true;
|
||||
return async ({ result, update }) => {
|
||||
isSubmitting = false;
|
||||
if (result.type === 'failure') {
|
||||
// Handle validation errors
|
||||
if (result.data?.error) {
|
||||
errors.server = String(result.data.error);
|
||||
}
|
||||
}
|
||||
update();
|
||||
};
|
||||
}}
|
||||
class="space-y-6"
|
||||
>
|
||||
<input type="hidden" name="type" value={eventData.type} />
|
||||
<input type="hidden" name="visibility" value={eventData.visibility} />
|
||||
|
||||
{#if errors.server}
|
||||
<div class="mb-6 rounded-sm border border-red-200 bg-red-50 p-4 text-red-700">
|
||||
{errors.server}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Event Name -->
|
||||
<div>
|
||||
<label for="name" class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Name <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
bind:value={eventData.name}
|
||||
class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
|
||||
placeholder="Enter event name"
|
||||
maxlength="100"
|
||||
required
|
||||
/>
|
||||
{#if errors.name}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.name}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Date and Time Row -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="date" class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Date <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="date"
|
||||
name="date"
|
||||
type="date"
|
||||
bind:value={eventData.date}
|
||||
min={today}
|
||||
class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
|
||||
required
|
||||
/>
|
||||
{#if errors.date}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.date}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="time" class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Time <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="time"
|
||||
name="time"
|
||||
type="time"
|
||||
bind:value={eventData.time}
|
||||
class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
|
||||
required
|
||||
/>
|
||||
{#if errors.time}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.time}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div>
|
||||
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Location <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="location"
|
||||
name="location"
|
||||
type="text"
|
||||
bind:value={eventData.location}
|
||||
class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
|
||||
placeholder="Enter location"
|
||||
maxlength="200"
|
||||
required
|
||||
/>
|
||||
{#if errors.location}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Event Type -->
|
||||
<div>
|
||||
<fieldset>
|
||||
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Type <span class="text-red-400">*</span>
|
||||
</legend>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
|
||||
'unlimited'
|
||||
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
|
||||
: 'border-dark-300 text-dark-700'}"
|
||||
on:click={() => handleTypeChange('unlimited')}
|
||||
>
|
||||
Unlimited
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
|
||||
'limited'
|
||||
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
|
||||
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
|
||||
on:click={() => handleTypeChange('limited')}
|
||||
>
|
||||
Limited
|
||||
</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Limit (only for limited events) -->
|
||||
{#if eventData.type === 'limited'}
|
||||
<div>
|
||||
<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Attendee Limit *
|
||||
</label>
|
||||
<input
|
||||
id="attendee_limit"
|
||||
name="attendee_limit"
|
||||
type="number"
|
||||
bind:value={eventData.attendee_limit}
|
||||
min="1"
|
||||
max="1000"
|
||||
class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
|
||||
placeholder="Enter limit"
|
||||
required
|
||||
/>
|
||||
{#if errors.attendee_limit}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.attendee_limit}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Event Visibility -->
|
||||
<div>
|
||||
<fieldset>
|
||||
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Visibility <span class="text-red-400">*</span>
|
||||
</legend>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
|
||||
'public'
|
||||
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
|
||||
: 'border-dark-300 text-dark-700'}"
|
||||
on:click={() => (eventData.visibility = 'public')}
|
||||
>
|
||||
🌍 Public
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
|
||||
'private'
|
||||
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
|
||||
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
|
||||
on:click={() => (eventData.visibility = 'private')}
|
||||
>
|
||||
🔒 Private
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-slate-400">
|
||||
{eventData.visibility === 'public'
|
||||
? 'Public events are visible to everyone and can be discovered by others'
|
||||
: 'Private events are only visible to you and people you share the link with'}
|
||||
</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
on:click={handleCancel}
|
||||
class="flex-1 rounded-sm border-2 border-slate-300 bg-slate-200 px-4 py-3 font-semibold text-slate-700 transition-all duration-200 hover:bg-slate-400 hover:text-slate-200"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
class="hover:bg-violet-400/70' flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
|
||||
>
|
||||
{#if isSubmitting}
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
|
||||
Updating...
|
||||
</div>
|
||||
{:else}
|
||||
Update Event
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user