jason/breedr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dogs): add delete button with confirm modal on DogList

Browse Source
This commit is contained in:
jason
2026-03-09 22:58:41 -05:00
parent 0ade8586f9
commit e44883b5e0
1 changed files with 147 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
client/src/pages/DogList.jsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom' import { Link, useNavigate } from 'react-router-dom'
import { Dog, Plus, Search, Calendar, Hash, ArrowRight } from 'lucide-react' import { Dog, Plus, Search, Calendar, Hash, ArrowRight, Trash2 } from 'lucide-react'
import axios from 'axios' import axios from 'axios'
import DogForm from '../components/DogForm' import DogForm from '../components/DogForm'
import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge' import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'
@@ -12,6 +12,8 @@ function DogList() {
const [sexFilter, setSexFilter] = useState('all') const [sexFilter, setSexFilter] = useState('all')
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [showAddModal, setShowAddModal] = useState(false) const [showAddModal, setShowAddModal] = useState(false)
const [deleteTarget, setDeleteTarget] = useState(null) // { id, name }
const [deleting, setDeleting] = useState(false)
useEffect(() => { fetchDogs() }, []) useEffect(() => { fetchDogs() }, [])
useEffect(() => { filterDogs() }, [dogs, search, sexFilter]) useEffect(() => { filterDogs() }, [dogs, search, sexFilter])
@@ -43,6 +45,21 @@ function DogList() {
const handleSave = () => { fetchDogs() } const handleSave = () => { fetchDogs() }
const handleDelete = async () => {
if (!deleteTarget) return
setDeleting(true)
try {
await axios.delete(`/api/dogs/${deleteTarget.id}`)
setDogs(prev => prev.filter(d => d.id !== deleteTarget.id))
setDeleteTarget(null)
} catch (err) {
console.error('Delete failed:', err)
alert('Failed to delete dog. Please try again.')
} finally {
setDeleting(false)
}
}
const calculateAge = (birthDate) => { const calculateAge = (birthDate) => {
if (!birthDate) return null if (!birthDate) return null
const today = new Date() const today = new Date()
@@ -55,7 +72,6 @@ function DogList() {
return `${years}y ${months}mo` return `${years}y ${months}mo`
} }
// A dog has champion blood if sire or dam is a champion
const hasChampionBlood = (dog) => const hasChampionBlood = (dog) =>
(dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion) (dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion)
@@ -132,18 +148,15 @@ function DogList() {
) : ( ) : (
<div style={{ display: 'grid', gap: '1rem' }}> <div style={{ display: 'grid', gap: '1rem' }}>
{filteredDogs.map(dog => ( {filteredDogs.map(dog => (
<Link <div
key={dog.id} key={dog.id}
to={`/dogs/${dog.id}`}
className="card" className="card"
style={{ style={{
padding: '1rem', padding: '1rem',
textDecoration: 'none',
display: 'flex', display: 'flex',
gap: '1rem', gap: '1rem',
alignItems: 'center', alignItems: 'center',
transition: 'var(--transition)', transition: 'var(--transition)',
cursor: 'pointer'
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.currentTarget.style.borderColor = 'var(--primary)' e.currentTarget.style.borderColor = 'var(--primary)'
@@ -157,36 +170,44 @@ function DogList() {
}} }}
> >
{/* Avatar */} {/* Avatar */}
<div style={{ <Link
width: '80px', height: '80px', flexShrink: 0, to={`/dogs/${dog.id}`}
borderRadius: 'var(--radius)', style={{ flexShrink: 0, textDecoration: 'none' }}
background: 'var(--bg-primary)', >
border: dog.is_champion <div style={{
? '2px solid var(--champion-gold)' width: '80px', height: '80px',
: hasChampionBlood(dog) borderRadius: 'var(--radius)',
? '2px solid var(--bloodline-amber)' background: 'var(--bg-primary)',
: '2px solid var(--border)', border: dog.is_champion
display: 'flex', alignItems: 'center', justifyContent: 'center', ? '2px solid var(--champion-gold)'
overflow: 'hidden', : hasChampionBlood(dog)
boxShadow: dog.is_champion ? '2px solid var(--bloodline-amber)'
? '0 0 8px var(--champion-glow)' : '2px solid var(--border)',
: hasChampionBlood(dog) display: 'flex', alignItems: 'center', justifyContent: 'center',
? '0 0 8px var(--bloodline-glow)' overflow: 'hidden',
: 'none' boxShadow: dog.is_champion
}}> ? '0 0 8px var(--champion-glow)'
{dog.photo_urls && dog.photo_urls.length > 0 ? ( : hasChampionBlood(dog)
<img ? '0 0 8px var(--bloodline-glow)'
src={dog.photo_urls[0]} : 'none'
alt={dog.name} }}>
style={{ width: '100%', height: '100%', objectFit: 'cover' }} {dog.photo_urls && dog.photo_urls.length > 0 ? (
/> <img
) : ( src={dog.photo_urls[0]}
<Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} /> alt={dog.name}
)} style={{ width: '100%', height: '100%', objectFit: 'cover' }}
</div> />
) : (
<Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
)}
</div>
</Link>
{/* Info */} {/* Info — clicking navigates to detail */}
<div style={{ flex: 1, minWidth: 0 }}> <Link
to={`/dogs/${dog.id}`}
style={{ flex: 1, minWidth: 0, textDecoration: 'none', color: 'inherit' }}
>
<h3 style={{ <h3 style={{
fontSize: '1.125rem', fontSize: '1.125rem',
marginBottom: '0.25rem', marginBottom: '0.25rem',
@@ -238,22 +259,108 @@ function DogList() {
{dog.registration_number} {dog.registration_number}
</div> </div>
)} )}
</div> </Link>
<div style={{ opacity: 0.5, transition: 'var(--transition)' }}> {/* Actions */}
<ArrowRight size={20} color="var(--text-muted)" /> <div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0, alignItems: 'center' }}>
<Link
to={`/dogs/${dog.id}`}
style={{ opacity: 0.5, transition: 'var(--transition)', color: 'inherit' }}
>
<ArrowRight size={20} color="var(--text-muted)" />
</Link>
<button
className="btn btn-ghost"
title={`Delete ${dog.name}`}
onClick={(e) => { e.stopPropagation(); setDeleteTarget({ id: dog.id, name: dog.name }) }}
style={{
padding: '0.4rem',
color: 'var(--text-muted)',
border: '1px solid transparent',
borderRadius: 'var(--radius-sm)',
display: 'flex', alignItems: 'center',
transition: 'var(--transition)'
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = '#ef4444'
e.currentTarget.style.borderColor = '#ef4444'
e.currentTarget.style.background = 'rgba(239,68,68,0.08)'
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-muted)'
e.currentTarget.style.borderColor = 'transparent'
e.currentTarget.style.background = 'transparent'
}}
>
<Trash2 size={16} />
</button>
</div> </div>
</Link> </div>
))} ))}
</div> </div>
)} )}
{/* Add Dog Modal */}
{showAddModal && ( {showAddModal && (
<DogForm <DogForm
onClose={() => setShowAddModal(false)} onClose={() => setShowAddModal(false)}
onSave={handleSave} onSave={handleSave}
/> />
)} )}
{/* Delete Confirmation Modal */}
{deleteTarget && (
<div style={{
position: 'fixed', inset: 0,
background: 'rgba(0,0,0,0.65)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
zIndex: 1000,
backdropFilter: 'blur(4px)'
}}>
<div className="card" style={{ maxWidth: 420, width: '90%', padding: '2rem', textAlign: 'center' }}>
<div style={{
width: 56, height: 56,
borderRadius: '50%',
background: 'rgba(239,68,68,0.12)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
margin: '0 auto 1rem'
}}>
<Trash2 size={26} style={{ color: '#ef4444' }} />
</div>
<h3 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>Delete Dog?</h3>
<p style={{ color: 'var(--text-secondary)', marginBottom: '1.75rem', lineHeight: 1.6 }}>
<strong style={{ color: 'var(--text-primary)' }}>{deleteTarget.name}</strong> will be
permanently removed along with all parent relationships, health records,
and heat cycles. This cannot be undone.
</p>
<div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
<button
className="btn btn-ghost"
onClick={() => setDeleteTarget(null)}
disabled={deleting}
style={{ minWidth: 100 }}
>
Cancel
</button>
<button
className="btn"
onClick={handleDelete}
disabled={deleting}
style={{
minWidth: 140,
background: '#ef4444',
color: '#fff',
border: '1px solid #ef4444',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem'
}}
>
<Trash2 size={15} />
{deleting ? 'Deleting…' : 'Yes, Delete'}
</button>
</div>
</div>
</div>
)}
</div> </div>
) )
} }