feat: add date filter to nutrition data tab
Added dropdown filter with options: - Letzte 7 Tage - Letzte 30 Tage (default) - Letzte 90 Tage - Letztes Jahr - Alle anzeigen Shows filtered count vs total count in title. Handles large datasets (7+ years) efficiently. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0f072f4735
commit
873f08042e
|
|
@ -24,6 +24,7 @@ function DataTab({ entries, onUpdate }) {
|
||||||
const [editValues, setEditValues] = useState({})
|
const [editValues, setEditValues] = useState({})
|
||||||
const [saving, setSaving] = useState(false)
|
const [saving, setSaving] = useState(false)
|
||||||
const [error, setError] = useState(null)
|
const [error, setError] = useState(null)
|
||||||
|
const [filter, setFilter] = useState('30') // days to show (7, 30, 90, 'all')
|
||||||
|
|
||||||
const startEdit = (e) => {
|
const startEdit = (e) => {
|
||||||
setEditId(e.id)
|
setEditId(e.id)
|
||||||
|
|
@ -72,6 +73,14 @@ function DataTab({ entries, onUpdate }) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Filter entries by date range
|
||||||
|
const filteredEntries = filter === 'all'
|
||||||
|
? entries
|
||||||
|
: entries.filter(e => {
|
||||||
|
const daysDiff = dayjs().diff(dayjs(e.date), 'day')
|
||||||
|
return daysDiff <= parseInt(filter)
|
||||||
|
})
|
||||||
|
|
||||||
if (entries.length === 0) {
|
if (entries.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="card section-gap">
|
<div className="card section-gap">
|
||||||
|
|
@ -83,17 +92,34 @@ function DataTab({ entries, onUpdate }) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card section-gap">
|
<div className="card section-gap">
|
||||||
<div className="card-title">Alle Einträge ({entries.length})</div>
|
<div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
|
||||||
|
<div className="card-title" style={{margin:0}}>
|
||||||
|
Alle Einträge ({filteredEntries.length}{filteredEntries.length !== entries.length ? ` von ${entries.length}` : ''})
|
||||||
|
</div>
|
||||||
|
<select
|
||||||
|
value={filter}
|
||||||
|
onChange={e => setFilter(e.target.value)}
|
||||||
|
style={{
|
||||||
|
padding:'6px 10px',fontSize:12,borderRadius:8,border:'1.5px solid var(--border2)',
|
||||||
|
background:'var(--surface)',color:'var(--text2)',cursor:'pointer',fontFamily:'var(--font)'
|
||||||
|
}}>
|
||||||
|
<option value="7">Letzte 7 Tage</option>
|
||||||
|
<option value="30">Letzte 30 Tage</option>
|
||||||
|
<option value="90">Letzte 90 Tage</option>
|
||||||
|
<option value="365">Letztes Jahr</option>
|
||||||
|
<option value="all">Alle anzeigen</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
{error && (
|
{error && (
|
||||||
<div style={{padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30',marginBottom:12}}>
|
<div style={{padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30',marginBottom:12}}>
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{entries.map((e, i) => {
|
{filteredEntries.map((e, i) => {
|
||||||
const isEditing = editId === e.id
|
const isEditing = editId === e.id
|
||||||
return (
|
return (
|
||||||
<div key={e.id || i} style={{
|
<div key={e.id || i} style={{
|
||||||
borderBottom: i < entries.length - 1 ? '1px solid var(--border)' : 'none',
|
borderBottom: i < filteredEntries.length - 1 ? '1px solid var(--border)' : 'none',
|
||||||
padding: '12px 0'
|
padding: '12px 0'
|
||||||
}}>
|
}}>
|
||||||
{!isEditing ? (
|
{!isEditing ? (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user