fix: DogForm accepts isExternal prop — sets is_external flag, hides litter/parent pickers, shows banner
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { X, Award } from 'lucide-react'
|
||||
import { X, Award, ExternalLink } from 'lucide-react'
|
||||
import axios from 'axios'
|
||||
|
||||
function DogForm({ dog, onClose, onSave }) {
|
||||
function DogForm({ dog, onClose, onSave, isExternal = false }) {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
registration_number: '',
|
||||
@@ -16,6 +16,7 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
dam_id: null,
|
||||
litter_id: null,
|
||||
is_champion: false,
|
||||
is_external: isExternal ? 1 : 0,
|
||||
})
|
||||
const [dogs, setDogs] = useState([])
|
||||
const [litters, setLitters] = useState([])
|
||||
@@ -24,9 +25,14 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
const [useManualParents, setUseManualParents] = useState(true)
|
||||
const [littersAvailable, setLittersAvailable] = useState(false)
|
||||
|
||||
// Derive effective external state (editing an existing external dog or explicitly flagged)
|
||||
const effectiveExternal = isExternal || (dog && dog.is_external)
|
||||
|
||||
useEffect(() => {
|
||||
fetchDogs()
|
||||
fetchLitters()
|
||||
if (!effectiveExternal) {
|
||||
fetchDogs()
|
||||
fetchLitters()
|
||||
}
|
||||
if (dog) {
|
||||
setFormData({
|
||||
name: dog.name || '',
|
||||
@@ -41,6 +47,7 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
dam_id: dog.dam?.id || null,
|
||||
litter_id: dog.litter_id || null,
|
||||
is_champion: !!dog.is_champion,
|
||||
is_external: dog.is_external ?? (isExternal ? 1 : 0),
|
||||
})
|
||||
setUseManualParents(!dog.litter_id)
|
||||
}
|
||||
@@ -104,9 +111,10 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
const submitData = {
|
||||
...formData,
|
||||
is_champion: formData.is_champion ? 1 : 0,
|
||||
sire_id: formData.sire_id || null,
|
||||
dam_id: formData.dam_id || null,
|
||||
litter_id: useManualParents ? null : (formData.litter_id || null),
|
||||
is_external: effectiveExternal ? 1 : 0,
|
||||
sire_id: effectiveExternal ? null : (formData.sire_id || null),
|
||||
dam_id: effectiveExternal ? null : (formData.dam_id || null),
|
||||
litter_id: (effectiveExternal || useManualParents) ? null : (formData.litter_id || null),
|
||||
registration_number: formData.registration_number || null,
|
||||
birth_date: formData.birth_date || null,
|
||||
color: formData.color || null,
|
||||
@@ -133,10 +141,31 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
<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>
|
||||
<h2>
|
||||
{effectiveExternal && <ExternalLink size={18} style={{ marginRight: '0.4rem', verticalAlign: 'middle', color: 'var(--text-muted)' }} />}
|
||||
{dog ? 'Edit Dog' : effectiveExternal ? 'Add External Dog' : 'Add New Dog'}
|
||||
</h2>
|
||||
<button className="btn-icon" onClick={onClose}><X size={24} /></button>
|
||||
</div>
|
||||
|
||||
{effectiveExternal && (
|
||||
<div style={{
|
||||
margin: '0 0 1rem',
|
||||
padding: '0.6rem 1rem',
|
||||
background: 'rgba(99,102,241,0.08)',
|
||||
border: '1px solid rgba(99,102,241,0.25)',
|
||||
borderRadius: 'var(--radius)',
|
||||
fontSize: '0.875rem',
|
||||
color: 'var(--text-secondary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
}}>
|
||||
<ExternalLink size={14} />
|
||||
External dog — not part of your kennel roster. Litter and parent fields are not applicable.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="modal-body">
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
@@ -221,69 +250,71 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Parent Section */}
|
||||
<div style={{
|
||||
marginTop: '1.5rem', padding: '1rem',
|
||||
background: 'rgba(194, 134, 42, 0.04)',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(194, 134, 42, 0.15)'
|
||||
}}>
|
||||
<label className="label" style={{ marginBottom: '0.75rem', display: 'block', fontWeight: '600' }}>Parent Information</label>
|
||||
{/* Parent Section — hidden for external dogs */}
|
||||
{!effectiveExternal && (
|
||||
<div style={{
|
||||
marginTop: '1.5rem', padding: '1rem',
|
||||
background: 'rgba(194, 134, 42, 0.04)',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(194, 134, 42, 0.15)'
|
||||
}}>
|
||||
<label className="label" style={{ marginBottom: '0.75rem', display: 'block', fontWeight: '600' }}>Parent Information</label>
|
||||
|
||||
{littersAvailable && (
|
||||
<div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
|
||||
<input type="radio" name="parentMode" checked={!useManualParents}
|
||||
onChange={() => setUseManualParents(false)} style={{ width: '16px', height: '16px' }} />
|
||||
<span>Link to Litter</span>
|
||||
</label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
|
||||
<input type="radio" name="parentMode" checked={useManualParents}
|
||||
onChange={() => setUseManualParents(true)} style={{ width: '16px', height: '16px' }} />
|
||||
<span>Manual Parent Selection</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{littersAvailable && (
|
||||
<div style={{ display: 'flex', gap: '1.5rem', marginBottom: '1rem', flexWrap: 'wrap' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
|
||||
<input type="radio" name="parentMode" checked={!useManualParents}
|
||||
onChange={() => setUseManualParents(false)} style={{ width: '16px', height: '16px' }} />
|
||||
<span>Link to Litter</span>
|
||||
</label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.95rem' }}>
|
||||
<input type="radio" name="parentMode" checked={useManualParents}
|
||||
onChange={() => setUseManualParents(true)} style={{ width: '16px', height: '16px' }} />
|
||||
<span>Manual Parent Selection</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!useManualParents && littersAvailable ? (
|
||||
<div className="form-group" style={{ marginTop: '0.5rem' }}>
|
||||
<label className="label">Select Litter</label>
|
||||
<select name="litter_id" className="input"
|
||||
value={formData.litter_id || ''} onChange={handleChange}>
|
||||
<option value="">No Litter</option>
|
||||
{litters.map(l => (
|
||||
<option key={l.id} value={l.id}>
|
||||
{l.sire_name} x {l.dam_name} - {new Date(l.breeding_date).toLocaleDateString()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{formData.litter_id && (
|
||||
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--primary)', fontStyle: 'italic' }}>
|
||||
✓ Parents will be automatically set from the selected litter
|
||||
{!useManualParents && littersAvailable ? (
|
||||
<div className="form-group" style={{ marginTop: '0.5rem' }}>
|
||||
<label className="label">Select Litter</label>
|
||||
<select name="litter_id" className="input"
|
||||
value={formData.litter_id || ''} onChange={handleChange}>
|
||||
<option value="">No Litter</option>
|
||||
{litters.map(l => (
|
||||
<option key={l.id} value={l.id}>
|
||||
{l.sire_name} x {l.dam_name} - {new Date(l.breeding_date).toLocaleDateString()}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{formData.litter_id && (
|
||||
<div style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--primary)', fontStyle: 'italic' }}>
|
||||
✓ Parents will be automatically set from the selected litter
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="form-grid" style={{ marginTop: '0.5rem' }}>
|
||||
<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}{d.is_champion ? ' ✪' : ''}</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}{d.is_champion ? ' ✪' : ''}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="form-grid" style={{ marginTop: '0.5rem' }}>
|
||||
<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}{d.is_champion ? ' ✪' : ''}</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}{d.is_champion ? ' ✪' : ''}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group" style={{ marginTop: '1rem' }}>
|
||||
<label className="label">Notes</label>
|
||||
@@ -294,7 +325,7 @@ function DogForm({ dog, onClose, onSave }) {
|
||||
<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'}
|
||||
{loading ? 'Saving...' : dog ? 'Update Dog' : effectiveExternal ? 'Add External Dog' : 'Add Dog'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user