Scrum4Me/docs/old/task-dialog.md

title	status	audience	language	last_updated
TaskDialog Profiel	active	maintainer contributor	nl	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