66ad0095ea
* docs(front-matter): add YAML front-matter to docs/ root * docs(front-matter): add YAML front-matter to patterns/ * docs(index): regenerate INDEX.md after front-matter pass
135 lines
6.1 KiB
Markdown
135 lines
6.1 KiB
Markdown
---
|
||
title: "TaskDialog Profiel"
|
||
status: active
|
||
audience: [maintainer, contributor]
|
||
language: nl
|
||
last_updated: 2026-05-03
|
||
---
|
||
|
||
# TaskDialog Profiel
|
||
|
||
> Volgt **`docs/patterns/dialog.md`** (de generieke spec voor élke entity-dialog in Scrum4Me).
|
||
> Dit document beschrijft alleen de Task-specifieke afwijkingen en keuzes — alle gedeelde regels (layout, motion, demo-policy, foutcodes, validatie, theming, dialog-gedrag) staan in de generieke spec en worden hier niet herhaald.
|
||
|
||
> **Belangrijk:** als een regel in dit profiel botst met de generieke spec, wint de generieke spec. Documenteer hier de afwijking + reden, of pas de generieke spec aan.
|
||
|
||
---
|
||
|
||
## Velden
|
||
|
||
| Veld | Type | Mode | Validatie |
|
||
|---|---|---|---|
|
||
| `title` | `string` (required) | beide | trim, 1-120 chars |
|
||
| `description` | `string \| null` | beide | optional, max 2.000 chars, markdown |
|
||
| `implementation_plan` | `string \| null` | beide | optional, max 10.000 chars, markdown |
|
||
| `priority` | `int` (1-4, P1 = hoogste) | beide | int 1-4, default 3 |
|
||
| `status` | `TaskStatus` enum | alleen edit (default `TO_DO` op create, niet getoond) | enum |
|
||
| `created_at` | `Date` | alleen edit | read-only metadata in header |
|
||
|
||
`TaskStatus` enum: `TO_DO | IN_PROGRESS | REVIEW | DONE`.
|
||
|
||
### Veld-specifiek gedrag
|
||
|
||
- **Auto-grow textareas** (`description`, `implementation_plan`) via `react-textarea-autosize`. Max 6 regels (description) / 12 regels (implementation_plan), daarna `overflow-y-auto`.
|
||
- **Karakter-counter** vanaf 75% van de limiet, klein, rechtsonder, `text-muted-foreground`. Bv. `1547 / 2000`.
|
||
- **Markdown-hint** onder elk textarea: `Markdown ondersteund (lijstjes, **vet**, \`code\`)`.
|
||
- **Priority** als segmented buttons via `<PrioritySelect>` / `<PrioritySegmented>`. Default P3 (Medium).
|
||
- **Status** met gekleurde dot:
|
||
- `TO_DO` — grijs
|
||
- `IN_PROGRESS` — `status-in-progress` (blauw)
|
||
- `REVIEW` — paars
|
||
- `DONE` — `status-done` (groen)
|
||
- **`created_at` als header-metadata** in edit-mode, naast de titel: `Aangemaakt: 23 apr 2026`. Klein, `muted-foreground`, géén form-veld.
|
||
|
||
---
|
||
|
||
## URL- of state-pattern
|
||
|
||
- **Gekozen:** URL-based (`searchParams`)
|
||
- **Reden:** TaskDialog wordt geopend vanuit twee context-pagina's (sprint-detail en product-backlog) en moet deep-linkable zijn voor share/refresh-scenario's. Suspense + skeleton voor edit-mode loading is gewenst.
|
||
- **Routes:**
|
||
```
|
||
/sprint/<sprintId>?newTask=1 → create
|
||
/sprint/<sprintId>?editTask=<taskId> → edit
|
||
/products/<productId>/backlog?newTask=1 → create
|
||
/products/<productId>/backlog?editTask=<taskId> → edit
|
||
```
|
||
- **Sluiten:** `router.push(<base-route>)` zonder query-params.
|
||
- **Server-side fetch in edit-mode:** server component fetcht de taak vóór render mét `productAccessFilter(userId)`. Bestaat de taak niet of valt 'm buiten scope → toast + redirect naar de context-route.
|
||
- Optioneel: `nuqs` als de query-state-handling te omslachtig wordt — pas introduceren als losse refactor-task, niet inline.
|
||
|
||
---
|
||
|
||
## Status-veld
|
||
|
||
Verberg `status` in **create-mode** (default = `TO_DO` is genoeg). Toon alleen in edit-mode als `<Select>` met gekleurde dot per optie.
|
||
|
||
---
|
||
|
||
## Server actions
|
||
|
||
| Actie | Locatie | Context-arg | Revalidatie |
|
||
|---|---|---|---|
|
||
| `saveTask` | `app/actions/tasks.ts` | `{ sprintId?: string; productId?: string }` | `revalidatePath('/sprint/<sprintId>')` óf `revalidatePath('/products/<productId>/backlog')` afhankelijk van context |
|
||
| `deleteTask` | `app/actions/tasks.ts` | idem | idem |
|
||
|
||
Beide acties volgen de drielaagse demo-policy + auth-scoping uit `docs/patterns/dialog.md` § 6–7.
|
||
|
||
---
|
||
|
||
## Speciale gedragingen
|
||
|
||
### Triggers (bestaande UI vervangen)
|
||
|
||
Deze TaskDialog is de **enige** create/edit-flow voor taken in beide contexten (sprint én backlog). Bestaande inline-edit-paden in `components/sprint/task-list.tsx` en het backlog-equivalent worden vervangen, niet ernaast geplaatst.
|
||
|
||
- **Create-trigger:** filled button `+ Nieuwe taak` in tasklist-header → zet `?newTask=1` op huidige route
|
||
- **Edit-trigger:** klik op de hele rij in de tasklist (geen apart edit-icoon) → zet `?editTask=<id>` op huidige route
|
||
- **Loading edit-mode:** Suspense met minimale skeleton (3 grijze balken), `200ms`-delay zodat snelle fetches geen flicker tonen
|
||
|
||
### Markdown-rendering elders
|
||
|
||
`description` en `implementation_plan` worden buiten de dialog (taakdetail, hover-card) gerenderd via de gedeelde `<Markdown>`-wrapper (`react-markdown` + `remark-gfm`). Niet in de dialog zelf.
|
||
|
||
---
|
||
|
||
## Implementatie-volgorde (suggestie)
|
||
|
||
Hergebruik dit als checklist bij het bouwen of refactoren van TaskDialog:
|
||
|
||
1. Dependencies in `package.json` (zie `docs/patterns/dialog.md` § 2)
|
||
2. zod-schema in `lib/schemas/task.ts` — gedeeld door form en action
|
||
3. `productAccessFilter`-helper checken in `lib/auth/`
|
||
4. `saveTask` / `deleteTask` in `app/actions/tasks.ts` met auth-scoping + demo-check (laag 2)
|
||
5. `proxy.ts`-guard voor demo-write-routes (laag 1) — alleen als nog niet aanwezig
|
||
6. Eventueel ontbrekende MD3-tokens in `app/styles/theme.css` aanvullen
|
||
7. `<DemoTooltip>` rond submit/delete-knoppen (laag 3)
|
||
8. TaskDialog — create-mode eerst (minder edge cases)
|
||
9. Edit-mode toevoegen (status, delete, `created_at`-metadata)
|
||
10. URL-state via native `searchParams` op beide context-pagina's
|
||
11. Bestaande task-row trigger refactoren (klikbaar maken naar dialog)
|
||
12. Suspense + skeleton voor edit-mode + scope-check op fetch
|
||
13. Dirty-close-guard
|
||
14. Keyboard shortcuts (Cmd+Enter)
|
||
|
||
---
|
||
|
||
## Bewust NIET in v1
|
||
|
||
Specifiek voor TaskDialog (boven op de algemene out-of-scope-lijst in `docs/patterns/dialog.md` § 13):
|
||
|
||
- ❌ Sub-tasks / parent-child relaties tussen taken
|
||
- ❌ Tags / labels / categorieën op taken
|
||
- ❌ Due dates / reminders per taak
|
||
- ❌ Time tracking (uren-registratie) — wel relevant voor inspannings-monitor, eigen feature
|
||
- ❌ Sharing / collaboration per taak
|
||
- ❌ Templates voor terugkerende taken
|
||
|
||
---
|
||
|
||
## Referenties
|
||
|
||
- `docs/patterns/dialog.md` — generieke spec (bron-of-truth voor alles wat hier niet beschreven is)
|
||
- `docs/architecture.md` — datamodel `Task`
|
||
- `docs/styling.md` — MD3-tokens, status- en priority-kleuren
|
||
- `lib/task-status.ts` — enum-mapper DB ↔ API
|