35 lines
1.6 KiB
Markdown
35 lines
1.6 KiB
Markdown
---
|
|
id: SEED-001
|
|
title: Replace basic dropdown with Kimai's native TomSelect entity pickers
|
|
planted: 2026-04-08
|
|
trigger: next milestone focused on UX polish, or when activity filtering gets added
|
|
status: planted
|
|
---
|
|
|
|
# SEED-001: Native Entity Pickers
|
|
|
|
## Why
|
|
|
|
Phase 4 shipped a plain `<select>` dropdown for project filtering. Kimai has a production-ready cascading picker system (Customer → Project → Activity) built on TomSelect with autocomplete, search, color-coded options, and consistent styling. Using it would:
|
|
|
|
- Enable activity filtering (currently descoped)
|
|
- Add customer-level filtering (cascade: customer → project)
|
|
- Match Kimai's native UX patterns
|
|
- Get autocomplete/search for free
|
|
|
|
## What
|
|
|
|
Replace the `<select class="form-select">` in `heatmap.ts` with Kimai's `KimaiFormSelect.js` + TomSelect integration. Use `data-api-url`, `data-related-select`, and `data-empty-url` attributes to wire up cascading.
|
|
|
|
## Breadcrumbs
|
|
|
|
- `dev/kimai/assets/js/forms/KimaiFormSelect.js` — cascading logic (lines 386-447)
|
|
- `dev/kimai/assets/js/forms/KimaiFormTomselectPlugin.js` — base TomSelect wrapper
|
|
- `dev/kimai/src/Form/Type/ProjectType.php` — Symfony form type with `api_data` config
|
|
- `dev/kimai/src/Form/Type/ActivityType.php` — activity picker form type
|
|
- API routes: `get_customers`, `get_projects`, `get_activities`
|
|
- Current implementation: `assets/src/heatmap.ts` init() function, lines 236-276
|
|
|
|
## Scope Estimate
|
|
|
|
Medium — needs backend changes (new API endpoint or reuse existing routes) + frontend refactor of the filter section. Tests need updating.
|