fix: Load actual start_date in edit form + improve timeline display
**Problem 1:** Edit form showed today's date instead of stored start_date
- Cause: Fallback logic `goal.start_date || today` always defaulted to today
- Fix: Load actual date or empty string (no fallback)
- Input field: Remove fallback from value binding
**Problem 2:** Timeline only showed target_date, not start_date
- Added dedicated timeline display below values
- Shows: "📅 15.01.26 → 31.05.26"
- Only appears if at least one date exists
- Start date with calendar icon, target date bold
**Result:**
- Editing goals now preserves the start_date ✓
- Timeline clearly shows start → target dates ✓
- No more accidental overwrites with today's date ✓
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
e479627f0f
commit
3604ebc781
|
|
@ -196,7 +196,7 @@ export default function GoalsPage() {
|
||||||
priority: goal.priority || 2,
|
priority: goal.priority || 2,
|
||||||
target_value: goal.target_value,
|
target_value: goal.target_value,
|
||||||
unit: goal.unit,
|
unit: goal.unit,
|
||||||
start_date: goal.start_date || new Date().toISOString().split('T')[0],
|
start_date: goal.start_date || '', // Load actual date or empty (not today!)
|
||||||
target_date: goal.target_date || '',
|
target_date: goal.target_date || '',
|
||||||
name: goal.name || '',
|
name: goal.name || '',
|
||||||
description: goal.description || '',
|
description: goal.description || '',
|
||||||
|
|
@ -683,14 +683,24 @@ export default function GoalsPage() {
|
||||||
<span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '}
|
<span style={{ color: 'var(--text2)' }}>Ziel:</span>{' '}
|
||||||
<strong style={{ color: catInfo.color }}>{goal.target_value} {goal.unit}</strong>
|
<strong style={{ color: catInfo.color }}>{goal.target_value} {goal.unit}</strong>
|
||||||
</div>
|
</div>
|
||||||
{goal.target_date && (
|
|
||||||
<div style={{ color: 'var(--text2)' }}>
|
|
||||||
<Calendar size={14} style={{ verticalAlign: 'middle', marginRight: 4 }} />
|
|
||||||
{dayjs(goal.target_date).format('DD.MM.YYYY')}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Timeline: Start → Ziel */}
|
||||||
|
{(goal.start_date || goal.target_date) && (
|
||||||
|
<div style={{ display: 'flex', gap: 12, fontSize: 13, color: 'var(--text2)', marginBottom: 12, alignItems: 'center' }}>
|
||||||
|
{goal.start_date && (
|
||||||
|
<>
|
||||||
|
<Calendar size={13} style={{ verticalAlign: 'middle' }} />
|
||||||
|
<span>{dayjs(goal.start_date).format('DD.MM.YY')}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{goal.start_date && goal.target_date && <span>→</span>}
|
||||||
|
{goal.target_date && (
|
||||||
|
<span style={{ fontWeight: 500 }}>{dayjs(goal.target_date).format('DD.MM.YY')}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{goal.progress_pct !== null && (
|
{goal.progress_pct !== null && (
|
||||||
<div>
|
<div>
|
||||||
<div style={{
|
<div style={{
|
||||||
|
|
@ -1108,7 +1118,7 @@ export default function GoalsPage() {
|
||||||
type="date"
|
type="date"
|
||||||
className="form-input"
|
className="form-input"
|
||||||
style={{ width: '100%', textAlign: 'left' }}
|
style={{ width: '100%', textAlign: 'left' }}
|
||||||
value={formData.start_date || new Date().toISOString().split('T')[0]}
|
value={formData.start_date || ''}
|
||||||
onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))}
|
onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
<div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}>
|
<div style={{ fontSize: 12, color: 'var(--text3)', marginTop: 4 }}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user