feat/ui-theme-settings-champion #29
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
|
||||
import { Dog, Plus, Search, Calendar, Hash, ArrowRight } from 'lucide-react'
|
||||
import axios from 'axios'
|
||||
import DogForm from '../components/DogForm'
|
||||
import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'
|
||||
|
||||
function DogList() {
|
||||
const [dogs, setDogs] = useState([])
|
||||
@@ -12,13 +13,8 @@ function DogList() {
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showAddModal, setShowAddModal] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetchDogs()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
filterDogs()
|
||||
}, [dogs, search, sexFilter])
|
||||
useEffect(() => { fetchDogs() }, [])
|
||||
useEffect(() => { filterDogs() }, [dogs, search, sexFilter])
|
||||
|
||||
const fetchDogs = async () => {
|
||||
try {
|
||||
@@ -33,24 +29,19 @@ function DogList() {
|
||||
|
||||
const filterDogs = () => {
|
||||
let filtered = dogs
|
||||
|
||||
if (search) {
|
||||
filtered = filtered.filter(dog =>
|
||||
dog.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
(dog.registration_number && dog.registration_number.toLowerCase().includes(search.toLowerCase()))
|
||||
)
|
||||
}
|
||||
|
||||
if (sexFilter !== 'all') {
|
||||
filtered = filtered.filter(dog => dog.sex === sexFilter)
|
||||
}
|
||||
|
||||
setFilteredDogs(filtered)
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
fetchDogs()
|
||||
}
|
||||
const handleSave = () => { fetchDogs() }
|
||||
|
||||
const calculateAge = (birthDate) => {
|
||||
if (!birthDate) return null
|
||||
@@ -58,17 +49,16 @@ function DogList() {
|
||||
const birth = new Date(birthDate)
|
||||
let years = today.getFullYear() - birth.getFullYear()
|
||||
let months = today.getMonth() - birth.getMonth()
|
||||
|
||||
if (months < 0) {
|
||||
years--
|
||||
months += 12
|
||||
}
|
||||
|
||||
if (months < 0) { years--; months += 12 }
|
||||
if (years === 0) return `${months}mo`
|
||||
if (months === 0) return `${years}y`
|
||||
return `${years}y ${months}mo`
|
||||
}
|
||||
|
||||
// A dog has champion blood if sire or dam is a champion
|
||||
const hasChampionBlood = (dog) =>
|
||||
(dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion)
|
||||
|
||||
if (loading) {
|
||||
return <div className="container loading">Loading dogs...</div>
|
||||
}
|
||||
@@ -109,12 +99,9 @@ function DogList() {
|
||||
<option value="female">Females ♀</option>
|
||||
</select>
|
||||
{(search || sexFilter !== 'all') && (
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
onClick={() => {
|
||||
setSearch('')
|
||||
setSexFilter('all')
|
||||
}}
|
||||
<button
|
||||
className="btn btn-ghost"
|
||||
onClick={() => { setSearch(''); setSexFilter('all') }}
|
||||
style={{ padding: '0.625rem 1rem', fontSize: '0.875rem' }}
|
||||
>
|
||||
Clear
|
||||
@@ -131,8 +118,8 @@ function DogList() {
|
||||
{search || sexFilter !== 'all' ? 'No dogs found' : 'No dogs yet'}
|
||||
</h3>
|
||||
<p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>
|
||||
{search || sexFilter !== 'all'
|
||||
? 'Try adjusting your search or filters'
|
||||
{search || sexFilter !== 'all'
|
||||
? 'Try adjusting your search or filters'
|
||||
: 'Add your first dog to get started'}
|
||||
</p>
|
||||
{!search && sexFilter === 'all' && (
|
||||
@@ -145,13 +132,13 @@ function DogList() {
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: '1rem' }}>
|
||||
{filteredDogs.map(dog => (
|
||||
<Link
|
||||
key={dog.id}
|
||||
to={`/dogs/${dog.id}`}
|
||||
className="card"
|
||||
style={{
|
||||
<Link
|
||||
key={dog.id}
|
||||
to={`/dogs/${dog.id}`}
|
||||
className="card"
|
||||
style={{
|
||||
padding: '1rem',
|
||||
textDecoration: 'none',
|
||||
textDecoration: 'none',
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
alignItems: 'center',
|
||||
@@ -169,65 +156,60 @@ function DogList() {
|
||||
e.currentTarget.style.boxShadow = 'var(--shadow-sm)'
|
||||
}}
|
||||
>
|
||||
{/* Avatar Photo */}
|
||||
<div style={{
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
flexShrink: 0,
|
||||
{/* Avatar */}
|
||||
<div style={{
|
||||
width: '80px', height: '80px', flexShrink: 0,
|
||||
borderRadius: 'var(--radius)',
|
||||
background: 'var(--bg-primary)',
|
||||
border: '2px solid var(--border)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
overflow: 'hidden'
|
||||
border: dog.is_champion
|
||||
? '2px solid var(--champion-gold)'
|
||||
: hasChampionBlood(dog)
|
||||
? '2px solid var(--bloodline-amber)'
|
||||
: '2px solid var(--border)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
overflow: 'hidden',
|
||||
boxShadow: dog.is_champion
|
||||
? '0 0 8px var(--champion-glow)'
|
||||
: hasChampionBlood(dog)
|
||||
? '0 0 8px var(--bloodline-glow)'
|
||||
: 'none'
|
||||
}}>
|
||||
{dog.photo_urls && dog.photo_urls.length > 0 ? (
|
||||
<img
|
||||
src={dog.photo_urls[0]}
|
||||
alt={dog.name}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover'
|
||||
}}
|
||||
<img
|
||||
src={dog.photo_urls[0]}
|
||||
alt={dog.name}
|
||||
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info Section */}
|
||||
{/* Info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<h3 style={{
|
||||
fontSize: '1.125rem',
|
||||
marginBottom: '0.375rem',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
<h3 style={{
|
||||
fontSize: '1.125rem',
|
||||
marginBottom: '0.25rem',
|
||||
display: 'flex', alignItems: 'center', gap: '0.5rem',
|
||||
flexWrap: 'wrap'
|
||||
}}>
|
||||
{dog.name}
|
||||
<span style={{
|
||||
marginLeft: '0.5rem',
|
||||
fontSize: '1rem',
|
||||
color: dog.sex === 'male' ? 'var(--primary)' : '#ec4899'
|
||||
}}>
|
||||
<span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{dog.name}
|
||||
</span>
|
||||
<span style={{ color: dog.sex === 'male' ? 'var(--primary)' : '#ec4899', fontSize: '1rem' }}>
|
||||
{dog.sex === 'male' ? '♂' : '♀'}
|
||||
</span>
|
||||
{dog.is_champion ? <ChampionBadge /> : hasChampionBlood(dog) ? <ChampionBloodlineBadge /> : null}
|
||||
</h3>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.75rem',
|
||||
fontSize: '0.8125rem',
|
||||
color: 'var(--text-secondary)',
|
||||
marginBottom: '0.5rem'
|
||||
|
||||
<div style={{
|
||||
display: 'flex', flexWrap: 'wrap', gap: '0.75rem',
|
||||
fontSize: '0.8125rem', color: 'var(--text-secondary)', marginBottom: '0.5rem'
|
||||
}}>
|
||||
<span>{dog.breed}</span>
|
||||
{dog.birth_date && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>·</span>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
|
||||
<Calendar size={12} />
|
||||
{calculateAge(dog.birth_date)}
|
||||
@@ -236,23 +218,20 @@ function DogList() {
|
||||
)}
|
||||
{dog.color && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span>·</span>
|
||||
<span>{dog.color}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{dog.registration_number && (
|
||||
<div style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.25rem',
|
||||
<div style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: '0.25rem',
|
||||
padding: '0.25rem 0.5rem',
|
||||
background: 'var(--bg-primary)',
|
||||
border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
fontSize: '0.75rem',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.75rem', fontFamily: 'monospace',
|
||||
color: 'var(--text-muted)'
|
||||
}}>
|
||||
<Hash size={10} />
|
||||
@@ -261,11 +240,7 @@ function DogList() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Arrow Indicator */}
|
||||
<div style={{
|
||||
opacity: 0.5,
|
||||
transition: 'var(--transition)'
|
||||
}}>
|
||||
<div style={{ opacity: 0.5, transition: 'var(--transition)' }}>
|
||||
<ArrowRight size={20} color="var(--text-muted)" />
|
||||
</div>
|
||||
</Link>
|
||||
@@ -283,4 +258,4 @@ function DogList() {
|
||||
)
|
||||
}
|
||||
|
||||
export default DogList
|
||||
export default DogList
|
||||
|
||||
Reference in New Issue
Block a user