36 lines
1.4 KiB
Markdown
36 lines
1.4 KiB
Markdown
# Phase 4 Research: Heatmap Interaction
|
|
|
|
**Researched:** 2026-04-08
|
|
|
|
## Kimai Timesheet Navigation
|
|
|
|
### Route
|
|
- Route name: `timesheet`
|
|
- URL: `/timesheet`
|
|
- Date filtering uses toolbar form with `dateRange` parameter
|
|
- Query param format for date filtering needs experimentation, but likely: `/timesheet?dateRange=2026-04-08+-+2026-04-08` or similar DateRange format
|
|
|
|
### Click-through approach
|
|
Navigate to `/timesheet` with the clicked date. The Twig template should pass the timesheet base URL via a `data-timesheet-url` attribute. The JS builds the full URL with date params.
|
|
|
|
## Project Filtering
|
|
|
|
### API endpoint
|
|
- `GET /api/projects?visible=1&orderBy=name` returns JSON array of projects
|
|
- Each project has `id`, `name`, `customer` fields
|
|
- This is a standard Kimai API endpoint with auth
|
|
|
|
### Current HeatmapController
|
|
Already supports `?project=<id>` query param for filtering aggregation data. No backend changes needed.
|
|
|
|
### UI approach
|
|
- Render a `<select>` dropdown above the heatmap
|
|
- Fetch project list from `/api/projects` on init
|
|
- On change, re-fetch heatmap data with `?project=<id>` and re-render
|
|
- "All projects" as default option (no filter)
|
|
|
|
## Implementation Notes
|
|
|
|
- Click navigation and project filtering are independent features
|
|
- Both are JS-only changes + template updates (no new PHP code needed)
|
|
- Tests: mock fetch responses, verify click handlers set `window.location`, verify dropdown triggers re-render
|