venues and ui changes
This commit is contained in:
113
components/forms/CreateVenueForm.tsx
Normal file
113
components/forms/CreateVenueForm.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { Input } from '../ui/input'
|
||||
import { Button } from '../ui/button'
|
||||
import { Label } from '../ui/label'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface CreateVenueFormProps {
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
export default function CreateVenueForm({ onSuccess }: CreateVenueFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postalCode: '',
|
||||
country: 'United States',
|
||||
phone: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({ ...prev, [name]: value }))
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
if (!formData.name || !formData.address || !formData.city || !formData.state || !formData.postalCode) {
|
||||
toast.error('Please fill in all required fields')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch('/api/venues/create', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Failed to create venue')
|
||||
|
||||
toast.success('Venue created!')
|
||||
setFormData({
|
||||
name: '',
|
||||
address: '',
|
||||
city: '',
|
||||
state: '',
|
||||
postalCode: '',
|
||||
country: 'United States',
|
||||
phone: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
if (onSuccess) onSuccess()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
toast.error('Something went wrong')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{[
|
||||
{ label: 'Name', name: 'name', required: true },
|
||||
{ label: 'Address', name: 'address', required: true },
|
||||
{ label: 'City', name: 'city', required: true },
|
||||
{ label: 'State', name: 'state', required: true },
|
||||
{ label: 'Postal Code', name: 'postalCode', required: true },
|
||||
{ label: 'Country', name: 'country', required: false },
|
||||
{ label: 'Phone', name: 'phone', required: false },
|
||||
{ label: 'Email', name: 'email', required: false }
|
||||
].map(field => (
|
||||
<div key={field.name} className="space-y-1">
|
||||
<Label htmlFor={field.name}>
|
||||
{field.label}{field.required && ' *'}
|
||||
</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={formData[field.name as keyof typeof formData]}
|
||||
onChange={handleChange}
|
||||
required={field.required}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{/* <div className="space-y-1">
|
||||
<Label htmlFor='name'>
|
||||
Name *
|
||||
</Label>
|
||||
<Input
|
||||
id='name'
|
||||
name='name'
|
||||
value={formData[field.name as keyof typeof formData]}
|
||||
onChange={handleChange}
|
||||
required={field.required}
|
||||
/>
|
||||
</div> */}
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Creating...' : 'Create Venue'}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
93
components/forms/EditEventForm.tsx
Normal file
93
components/forms/EditEventForm.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Input } from '../ui/input'
|
||||
import { Label } from '../ui/label'
|
||||
import { Button } from '../ui/button'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
interface EditEventFormProps {
|
||||
event: EventData
|
||||
onSuccess?: () => void
|
||||
}
|
||||
|
||||
export default function EditEventForm({ event, onSuccess }: EditEventFormProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: event.name,
|
||||
date: event.date?.toISOString().substring(0, 10) || '',
|
||||
venueId: event.venue?.id || ''
|
||||
})
|
||||
|
||||
const [venues, setVenues] = useState<{ id: string; name: string }[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchVenues() {
|
||||
const res = await fetch('/api/venues/fetch')
|
||||
const data = await res.json()
|
||||
setVenues(data)
|
||||
}
|
||||
fetchVenues()
|
||||
}, [])
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({ ...prev, [name]: value }))
|
||||
}
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/events/${event.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
})
|
||||
|
||||
if (!res.ok) throw new Error('Failed to update event')
|
||||
toast.success('Event updated!')
|
||||
|
||||
if (onSuccess) onSuccess()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
toast.error('Something went wrong')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name">Event Name</Label>
|
||||
<Input id="name" name="name" value={formData.name} onChange={handleChange} required />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="date">Event Date</Label>
|
||||
<Input id="date" name="date" type="date" value={formData.date} onChange={handleChange} />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="venueId">Venue</Label>
|
||||
<select
|
||||
id="venueId"
|
||||
name="venueId"
|
||||
className="input input-bordered w-full"
|
||||
value={formData.venueId}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">No venue</option>
|
||||
{venues.map(v => (
|
||||
<option key={v.id} value={v.id}>
|
||||
{v.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<Button type="submit" disabled={loading}>
|
||||
{loading ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user