fix: location missing field error

This commit is contained in:
Levente Orban
2025-09-25 09:28:44 +02:00
parent d2024d31ba
commit 26824eb3a8
12 changed files with 161 additions and 117 deletions

View File

@@ -14,7 +14,7 @@ CREATE TABLE IF NOT EXISTS events (
date DATE NOT NULL,
time TIME NOT NULL,
location VARCHAR(200) NOT NULL,
location_type VARCHAR(20) NOT NULL DEFAULT 'text' CHECK (location_type IN ('text','maps')),
location_type VARCHAR(20) NOT NULL DEFAULT 'none' CHECK (location_type IN ('none','text','maps')),
location_url VARCHAR(500),
type VARCHAR(20) NOT NULL CHECK (type IN ('limited','unlimited')),
attendee_limit INTEGER CHECK (attendee_limit > 0),

View File

@@ -17,7 +17,7 @@ import type { InferInsertModel, InferSelectModel } from 'drizzle-orm';
// --- Enums (matching the SQL CHECK constraints)
export const eventTypeEnum = pgEnum('event_type', ['limited', 'unlimited']);
export const visibilityEnum = pgEnum('visibility', ['public', 'private']);
export const locationTypeEnum = pgEnum('location_type', ['text', 'maps']);
export const locationTypeEnum = pgEnum('location_type', ['none', 'text', 'maps']);
// --- Events table
export const events = pgTable(
@@ -28,7 +28,7 @@ export const events = pgTable(
date: date('date', { mode: 'string' }).notNull(), // ISO 'YYYY-MM-DD'
time: time('time', { withTimezone: false }).notNull(), // 'HH:MM:SS'
location: varchar('location', { length: 200 }).notNull(),
locationType: locationTypeEnum('location_type').notNull().default('text'),
locationType: locationTypeEnum('location_type').notNull().default('none'),
locationUrl: varchar('location_url', { length: 500 }),
type: eventTypeEnum('type').notNull(),
attendeeLimit: integer('attendee_limit'), // nullable in SQL

View File

@@ -15,8 +15,10 @@
"time": "Time",
"location": "Location",
"locationType": "Location Type",
"locationNone": "None",
"locationText": "Text",
"locationMaps": "Google Maps",
"locationNoneDescription": "No location specified",
"locationTextDescription": "Enter location as plain text.",
"locationMapsDescription": "Enter Google Maps link.",
"googleMapsUrl": "Google Maps URL",
@@ -142,10 +144,12 @@
"locationLabel": "Location",
"locationPlaceholder": "Enter location",
"locationTypeLabel": "Location Type",
"locationNoneOption": "None",
"locationTextOption": "Plain Text",
"locationMapsOption": "Google Maps",
"locationTextDescription": "Enter location as plain text",
"locationMapsDescription": "Enter Google Maps link",
"locationNoneDescription": "No location specified.",
"locationTextDescription": "Enter location as plain text.",
"locationMapsDescription": "Enter Google Maps link.",
"googleMapsUrlLabel": "Google Maps URL",
"googleMapsUrlPlaceholder": "https://maps.google.com/...",
"typeLabel": "Type",
@@ -156,8 +160,8 @@
"visibilityLabel": "Visibility",
"publicOption": "🌍 Public",
"privateOption": "🔒 Private",
"publicDescription": "Public events are visible to everyone and can be discovered by others",
"privateDescription": "Private events are only visible to you and people you share the link with",
"publicDescription": "Public events are visible to everyone and can be discovered by others.",
"privateDescription": "Private events are only visible to you and people you share the link with.",
"creatingEvent": "Creating Event...",
"createEventButton": "Create Event"
},

View File

@@ -1,7 +1,7 @@
export type EventType = 'limited' | 'unlimited';
export type EventVisibility = 'public' | 'private';
export type ActionType = 'add' | 'remove';
export type LocationType = 'text' | 'maps';
export type LocationType = 'none' | 'text' | 'maps';
export interface Event {
id: string;

View File

@@ -25,7 +25,7 @@
<h2 class="mt-6 pt-8 text-xl md:text-2xl">
{t('home.whyCactoideTitle')}<span class="text-violet-400"
><a href="https://en.wikipedia.org/wiki/Cactoideae" target="_blank">*</a></span
>?🌵
>
</h2>
<p class="mt-4 text-lg md:text-xl">
{t('home.whyCactoideDescription')}

View File

@@ -21,7 +21,7 @@ export const actions: Actions = {
const date = formData.get('date') as string;
const time = formData.get('time') as string;
const location = formData.get('location') as string;
const locationType = formData.get('location_type') as 'text' | 'maps';
const locationType = formData.get('location_type') as 'none' | 'text' | 'maps';
const locationUrl = formData.get('location_url') as string;
const type = formData.get('type') as 'limited' | 'unlimited';
const attendeeLimit = formData.get('attendee_limit') as string;
@@ -34,8 +34,8 @@ export const actions: Actions = {
if (!name?.trim()) missingFields.push('name');
if (!date) missingFields.push('date');
if (!time) missingFields.push('time');
if (!location?.trim()) missingFields.push('location');
if (!locationType) missingFields.push('location_type');
if (locationType === 'text' && !location?.trim()) missingFields.push('location');
if (locationType === 'maps' && !locationUrl?.trim()) missingFields.push('location_url');
if (!userId) missingFields.push('userId');
@@ -99,7 +99,7 @@ export const actions: Actions = {
name: name.trim(),
date: date,
time: time,
location: location.trim(),
location: location?.trim() || '',
locationType: locationType,
locationUrl: locationType === 'maps' ? locationUrl?.trim() : null,
type: type,

View File

@@ -11,7 +11,7 @@
date: '',
time: '',
location: '',
location_type: 'text',
location_type: 'none',
location_url: '',
type: 'unlimited',
attendee_limit: undefined,
@@ -50,7 +50,10 @@
const handleLocationTypeChange = (locationType: LocationType) => {
eventData.location_type = locationType;
if (locationType === 'text') {
if (locationType === 'none') {
eventData.location = '';
eventData.location_url = '';
} else if (locationType === 'text') {
eventData.location_url = '';
eventData.location = '';
} else {
@@ -70,7 +73,7 @@
<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">
<div class="mx-auto max-w-2xl">
<!-- Event Creation Form -->
<div class="rounded-sm border p-8">
<h2 class="mb-8 text-center text-3xl font-bold text-violet-400">{t('create.formTitle')}</h2>
@@ -168,7 +171,17 @@
{t('create.locationTypeLabel')}
<span class="text-red-400">{t('common.required')}</span>
</legend>
<div class="grid grid-cols-2 gap-3">
<div class="grid grid-cols-3 gap-3">
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
'none'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700'}"
on:click={() => handleLocationTypeChange('none')}
>
{t('create.locationNoneOption')}
</button>
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
@@ -190,52 +203,56 @@
{t('create.locationMapsOption')}
</button>
</div>
<p class="mt-2 text-xs text-slate-400">
{eventData.location_type === 'text'
? t('create.locationTextDescription')
: t('create.locationMapsDescription')}
<p class="mt-2 text-xs text-slate-400 italic">
{eventData.location_type === 'none'
? t('create.locationNoneDescription')
: eventData.location_type === 'text'
? t('create.locationTextDescription')
: t('create.locationMapsDescription')}
</p>
</fieldset>
</div>
<!-- Location Input -->
<div>
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
{eventData.location_type === 'text'
? t('create.locationLabel')
: t('create.googleMapsUrlLabel')}
<span class="text-red-400">{t('common.required')}</span>
</label>
{#if eventData.location_type === 'text'}
<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={t('create.locationPlaceholder')}
maxlength="200"
required
/>
{:else}
<input
id="location_url"
name="location_url"
type="url"
bind:value={eventData.location_url}
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={t('create.googleMapsUrlPlaceholder')}
maxlength="500"
required
/>
{/if}
{#if errors.location}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
{/if}
{#if errors.location_url}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
{/if}
</div>
<!-- Location Input (only show when not 'none') -->
{#if eventData.location_type !== 'none'}
<div>
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
{eventData.location_type === 'text'
? t('create.locationLabel')
: t('create.googleMapsUrlLabel')}
<span class="text-red-400">{t('common.required')}</span>
</label>
{#if eventData.location_type === 'text'}
<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={t('create.locationPlaceholder')}
maxlength="200"
required
/>
{:else}
<input
id="location_url"
name="location_url"
type="url"
bind:value={eventData.location_url}
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={t('create.googleMapsUrlPlaceholder')}
maxlength="500"
required
/>
{/if}
{#if errors.location}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
{/if}
{#if errors.location_url}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
{/if}
</div>
{/if}
<!-- Event Type -->
<div>
@@ -274,7 +291,7 @@
<div>
<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
{t('create.attendeeLimitLabel')}
{t('common.required')}
<span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="attendee_limit"
@@ -322,7 +339,7 @@
{t('create.privateOption')}
</button>
</div>
<p class="mt-2 text-xs text-slate-400">
<p class="mt-2 text-xs text-slate-400 italic">
{eventData.visibility === 'public'
? t('create.publicDescription')
: t('create.privateDescription')}
@@ -342,7 +359,7 @@
<button
type="submit"
disabled={isSubmitting}
class="hover:bg-violet-400/70'l rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
class="hover:bg-violet-400/70'l flex-2 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 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">

View File

@@ -289,14 +289,16 @@
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
></path>
</svg>
{#if event.location_type === 'maps' && event.location_url}
{#if event.location_type === 'none'}
<span>N/A</span>
{:else if event.location_type === 'maps' && event.location_url}
<a
href={event.location_url}
target="_blank"
rel="noopener noreferrer"
class="text-slate-500 transition-colors duration-200 hover:text-slate-300"
>
{event.location}
{t('create.locationMapsOption')}
</a>
{:else}
<span>{event.location}</span>

View File

@@ -126,14 +126,16 @@
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
></path>
</svg>
{#if event.location_type === 'maps' && event.location_url}
{#if event.location_type === 'none'}
<span>N/A</span>
{:else if event.location_type === 'maps' && event.location_url}
<a
href={event.location_url}
target="_blank"
rel="noopener noreferrer"
class="text-slate-500 transition-colors duration-200 hover:text-slate-300"
>
{event.location}
Google Maps
</a>
{:else}
<span>{event.location}</span>

View File

@@ -106,7 +106,7 @@
</div>
</div>
{:else if event}
<div class="mx-auto max-w-md space-y-6">
<div class="mx-auto max-w-2xl space-y-6">
<!-- Event Details Card -->
<div class="rounded-sm border p-6 shadow-2xl">
@@ -136,7 +136,7 @@
</div>
</div>
<!-- Location -->
<!-- Location (only show when not 'none') -->
<div class="flex items-center space-x-3 text-violet-400">
<div class="flex h-8 w-8 items-center justify-center rounded-sm">
<svg class=" h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -155,14 +155,16 @@
</svg>
</div>
<div>
{#if event.location_type === 'maps' && event.location_url}
{#if event.location_type === 'none'}
<p class="font-semibold text-white">N/A</p>
{:else if event.location_type === 'maps' && event.location_url}
<a
href={event.location_url}
target="_blank"
rel="noopener noreferrer"
class="font-semibold text-white transition-colors duration-200 hover:text-violet-300"
>
{event.location}
{t('create.locationMapsOption')}
</a>
{:else}
<p class="font-semibold text-white">{event.location}</p>

View File

@@ -53,7 +53,7 @@ export const actions: Actions = {
const date = formData.get('date') as string;
const time = formData.get('time') as string;
const location = formData.get('location') as string;
const locationType = formData.get('location_type') as 'text' | 'maps';
const locationType = formData.get('location_type') as 'none' | 'text' | 'maps';
const locationUrl = formData.get('location_url') as string;
const type = formData.get('type') as 'limited' | 'unlimited';
const attendeeLimit = formData.get('attendee_limit') as string;
@@ -65,8 +65,8 @@ export const actions: Actions = {
if (!name?.trim()) missingFields.push('name');
if (!date) missingFields.push('date');
if (!time) missingFields.push('time');
if (!location?.trim()) missingFields.push('location');
if (!locationType) missingFields.push('location_type');
if (locationType === 'text' && !location?.trim()) missingFields.push('location');
if (locationType === 'maps' && !locationUrl?.trim()) missingFields.push('location_url');
if (missingFields.length > 0) {
@@ -132,7 +132,7 @@ export const actions: Actions = {
name: name.trim(),
date: date,
time: time,
location: location.trim(),
location: location?.trim() || '',
locationType: locationType,
locationUrl: locationType === 'maps' ? locationUrl?.trim() : null,
type: type,

View File

@@ -12,7 +12,7 @@
date: data.event.date,
time: data.event.time,
location: data.event.location,
location_type: data.event.locationType || 'text',
location_type: data.event.locationType || 'none',
location_url: data.event.locationUrl || '',
type: data.event.type,
attendee_limit: data.event.attendeeLimit,
@@ -53,7 +53,10 @@
const handleLocationTypeChange = (locationType: LocationType) => {
eventData.location_type = locationType;
if (locationType === 'text') {
if (locationType === 'none') {
eventData.location = '';
eventData.location_url = '';
} else if (locationType === 'text') {
eventData.location_url = '';
eventData.location = '';
} else {
@@ -73,7 +76,7 @@
<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">
<div class="mx-auto max-w-2xl">
<!-- Event Edit Form -->
<div class="rounded-sm border p-8">
<div class="mb-8 text-center">
@@ -169,7 +172,17 @@
{t('create.locationTypeLabel')}
<span class="text-red-400">{t('common.required')}</span>
</legend>
<div class="grid grid-cols-2 gap-3">
<div class="grid grid-cols-3 gap-3">
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
'none'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700'}"
on:click={() => handleLocationTypeChange('none')}
>
{t('create.locationNoneOption')}
</button>
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
@@ -192,51 +205,55 @@
</button>
</div>
<p class="mt-2 text-xs text-slate-400">
{eventData.location_type === 'text'
? t('create.locationTextDescription')
: t('create.locationMapsDescription')}
{eventData.location_type === 'none'
? t('create.locationNoneDescription')
: eventData.location_type === 'text'
? t('create.locationTextDescription')
: t('create.locationMapsDescription')}
</p>
</fieldset>
</div>
<!-- Location Input -->
<div>
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
{eventData.location_type === 'text'
? t('create.locationTypeLabel')
: t('create.googleMapsUrlLabel')}
<span class="text-red-400">{t('common.required')}</span>
</label>
{#if eventData.location_type === 'text'}
<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={t('create.locationPlaceholder')}
maxlength="200"
required
/>
{:else}
<input
id="location_url"
name="location_url"
type="url"
bind:value={eventData.location_url}
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={t('create.googleMapsUrlPlaceholder')}
maxlength="500"
required
/>
{/if}
{#if errors.location}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
{/if}
{#if errors.location_url}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
{/if}
</div>
<!-- Location Input (only show when not 'none') -->
{#if eventData.location_type !== 'none'}
<div>
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
{eventData.location_type === 'text'
? t('create.locationLabel')
: t('create.googleMapsUrlLabel')}
<span class="text-red-400">{t('common.required')}</span>
</label>
{#if eventData.location_type === 'text'}
<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={t('create.locationPlaceholder')}
maxlength="200"
required
/>
{:else}
<input
id="location_url"
name="location_url"
type="url"
bind:value={eventData.location_url}
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={t('create.googleMapsUrlPlaceholder')}
maxlength="500"
required
/>
{/if}
{#if errors.location}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
{/if}
{#if errors.location_url}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
{/if}
</div>
{/if}
<!-- Event Type -->
<div>