113 lines
3.0 KiB
JavaScript
113 lines
3.0 KiB
JavaScript
import { useState } from 'react'
|
|
import { createEvent } from '../api/api'
|
|
import './EventForm.css'
|
|
|
|
const he = {
|
|
createNewEvent: 'צור אירוע חדש',
|
|
eventNameRequired: 'שם האירוע נדרש',
|
|
failedCreate: 'נכשל בהוספת אירוע',
|
|
eventName: 'שם האירוע',
|
|
eventDate: 'תאריך',
|
|
location: 'מיקום',
|
|
create: 'צור',
|
|
cancel: 'ביטול'
|
|
}
|
|
|
|
function EventForm({ onEventCreated, onCancel }) {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
date: '',
|
|
location: ''
|
|
})
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[name]: value
|
|
}))
|
|
}
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault()
|
|
if (!formData.name.trim()) {
|
|
setError(he.eventNameRequired)
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
setError('')
|
|
|
|
try {
|
|
const newEvent = await createEvent(formData)
|
|
setFormData({ name: '', date: '', location: '' })
|
|
onEventCreated(newEvent)
|
|
} catch (err) {
|
|
setError(err.response?.data?.detail || he.failedCreate)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="event-form-container">
|
|
<div className="event-form-overlay" onClick={onCancel}></div>
|
|
<div className="event-form">
|
|
<h2>{he.createNewEvent}</h2>
|
|
{error && <div className="error-message">{error}</div>}
|
|
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="form-group">
|
|
<label htmlFor="name">{he.eventName} *</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="לדוגמה: חתונה, יום הולדת, מפגש"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="date">{he.eventDate}</label>
|
|
<input
|
|
type="datetime-local"
|
|
id="date"
|
|
name="date"
|
|
value={formData.date}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="location">{he.location}</label>
|
|
<input
|
|
type="text"
|
|
id="location"
|
|
name="location"
|
|
value={formData.location}
|
|
onChange={handleChange}
|
|
placeholder="לדוגמה: תל אביב, ישראל"
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-actions">
|
|
<button type="button" onClick={onCancel} className="btn-cancel">
|
|
{he.cancel}
|
|
</button>
|
|
<button type="submit" disabled={loading} className="btn-submit">
|
|
{loading ? 'יוצר...' : he.create}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EventForm
|