Add DogForm component for creating/editing dogs
This commit is contained in:
230
client/src/components/DogForm.jsx
Normal file
230
client/src/components/DogForm.jsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X } from 'lucide-react'
|
||||
import axios from 'axios'
|
||||
|
||||
function DogForm({ dog, onClose, onSave }) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
registration_number: '',
|
||||
breed: '',
|
||||
sex: 'male',
|
||||
birth_date: '',
|
||||
color: '',
|
||||
microchip: '',
|
||||
notes: '',
|
||||
sire_id: '',
|
||||
dam_id: ''
|
||||
})
|
||||
const [dogs, setDogs] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
fetchDogs()
|
||||
if (dog) {
|
||||
setFormData({
|
||||
name: dog.name || '',
|
||||
registration_number: dog.registration_number || '',
|
||||
breed: dog.breed || '',
|
||||
sex: dog.sex || 'male',
|
||||
birth_date: dog.birth_date || '',
|
||||
color: dog.color || '',
|
||||
microchip: dog.microchip || '',
|
||||
notes: dog.notes || '',
|
||||
sire_id: dog.sire?.id || '',
|
||||
dam_id: dog.dam?.id || ''
|
||||
})
|
||||
}
|
||||
}, [dog])
|
||||
|
||||
const fetchDogs = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/dogs')
|
||||
setDogs(res.data)
|
||||
} catch (error) {
|
||||
console.error('Error fetching dogs:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({ ...prev, [name]: value }))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
if (dog) {
|
||||
// Update existing dog
|
||||
await axios.put(`/api/dogs/${dog.id}`, formData)
|
||||
} else {
|
||||
// Create new dog
|
||||
await axios.post('/api/dogs', formData)
|
||||
}
|
||||
onSave()
|
||||
onClose()
|
||||
} catch (error) {
|
||||
setError(error.response?.data?.error || 'Failed to save dog')
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const males = dogs.filter(d => d.sex === 'male' && d.id !== dog?.id)
|
||||
const females = dogs.filter(d => d.sex === 'female' && d.id !== dog?.id)
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>{dog ? 'Edit Dog' : 'Add New Dog'}</h2>
|
||||
<button className="btn-icon" onClick={onClose}>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="modal-body">
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<div className="form-grid">
|
||||
<div className="form-group">
|
||||
<label className="label">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
className="input"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Registration Number</label>
|
||||
<input
|
||||
type="text"
|
||||
name="registration_number"
|
||||
className="input"
|
||||
value={formData.registration_number}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Breed *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="breed"
|
||||
className="input"
|
||||
value={formData.breed}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Sex *</label>
|
||||
<select
|
||||
name="sex"
|
||||
className="input"
|
||||
value={formData.sex}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Birth Date</label>
|
||||
<input
|
||||
type="date"
|
||||
name="birth_date"
|
||||
className="input"
|
||||
value={formData.birth_date}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Color</label>
|
||||
<input
|
||||
type="text"
|
||||
name="color"
|
||||
className="input"
|
||||
value={formData.color}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Microchip Number</label>
|
||||
<input
|
||||
type="text"
|
||||
name="microchip"
|
||||
className="input"
|
||||
value={formData.microchip}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Sire (Father)</label>
|
||||
<select
|
||||
name="sire_id"
|
||||
className="input"
|
||||
value={formData.sire_id}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Unknown</option>
|
||||
{males.map(d => (
|
||||
<option key={d.id} value={d.id}>{d.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="label">Dam (Mother)</label>
|
||||
<select
|
||||
name="dam_id"
|
||||
className="input"
|
||||
value={formData.dam_id}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Unknown</option>
|
||||
{females.map(d => (
|
||||
<option key={d.id} value={d.id}>{d.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group" style={{ marginTop: '1rem' }}>
|
||||
<label className="label">Notes</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
className="input"
|
||||
rows="4"
|
||||
value={formData.notes}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-secondary" onClick={onClose} disabled={loading}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={loading}>
|
||||
{loading ? 'Saving...' : dog ? 'Update Dog' : 'Add Dog'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DogForm
|
||||
Reference in New Issue
Block a user