37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
|
# Date Navigation Implementation Learnings
|
||
|
|
|
||
|
|
## Implementation Details
|
||
|
|
- Added left/right arrow navigation to both `StatisticsView.vue` and `BudgetView.vue`
|
||
|
|
- Used `<van-icon name="arrow-left" />` and `<van-icon name="arrow" />` for directional arrows
|
||
|
|
- Text center remains clickable for date picker popup
|
||
|
|
- Arrows use `@click.stop` to prevent event propagation
|
||
|
|
|
||
|
|
## StatisticsView.vue
|
||
|
|
- `navigateDate(direction)` method handles both month and year modes
|
||
|
|
- Month mode: handles year boundaries (Jan -> Dec of previous year, Dec -> Jan of next year)
|
||
|
|
- Year mode: increments/decrements year directly
|
||
|
|
- Resets `showAllExpense` state on navigation
|
||
|
|
|
||
|
|
## BudgetView.vue
|
||
|
|
- `navigateDate(direction)` uses native Date object manipulation
|
||
|
|
- `setMonth()` automatically handles month/year boundaries
|
||
|
|
- Updates `selectedDate` ref which triggers data fetching via watcher
|
||
|
|
|
||
|
|
## Styling
|
||
|
|
- Added `.nav-date-picker` with flex layout and 12px gap
|
||
|
|
- `.nav-date-text` for clickable center text
|
||
|
|
- `.nav-arrow` with 8px horizontal padding for touch-friendly targets
|
||
|
|
- Active state opacity transition for visual feedback
|
||
|
|
- Arrow font size: 18px for clear visibility
|
||
|
|
|
||
|
|
## Key Decisions
|
||
|
|
- Used `@click.stop` on arrows to prevent opening date picker
|
||
|
|
- Centered layout preserved (van-nav-bar default behavior)
|
||
|
|
- Consistent styling across both views
|
||
|
|
- Touch-friendly padding for mobile UX
|
||
|
|
|
||
|
|
## Verification
|
||
|
|
- ESLint: No new errors introduced
|
||
|
|
- Build: Successful compilation
|
||
|
|
- Date math: Correctly handles month/year boundaries
|