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 [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
const [filter, setFilter] = useState('30') // days to show (7, 30, 90, 'all')
|
||||
|
||||
const startEdit = (e) => {
|
||||
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) {
|
||||
return (
|
||||
<div className="card section-gap">
|
||||
|
|
@ -83,17 +92,34 @@ function DataTab({ entries, onUpdate }) {
|
|||
|
||||
return (
|
||||
<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 && (
|
||||
<div style={{padding:'8px 12px',background:'#FCEBEB',borderRadius:8,fontSize:13,color:'#D85A30',marginBottom:12}}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{entries.map((e, i) => {
|
||||
{filteredEntries.map((e, i) => {
|
||||
const isEditing = editId === e.id
|
||||
return (
|
||||
<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'
|
||||
}}>
|
||||
{!isEditing ? (
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user