Madhura68 a59c35b9ae feat(PBI-96/T-1070): NewProductDocDialog + dialog-spec

- components/product-docs/new-product-doc-dialog.tsx: één client-component
  dat trigger-knop + dialog combineert. Folder-select uit enabled folders,
  title-input met auto-slug-suggestie (totdat user slug zelf bewerkt),
  starter-template-knop per folder. Deep-link via ?new=1 → dialog opent
  automatisch (initial state, geen useEffect setState).
- docs/specs/dialogs/product-doc.md: verplichte dialog-spec (volgt
  docs/patterns/dialog.md), beschrijft modes (alleen create), velden,
  UX-details (auto-slug, template, minimale frontmatter-wrap),
  server-actions, foutmappings, drie-laagse demo-policy, deep-link
  conventie, en niet-doelen (geen rich-text, geen template-picker UI).
- Folder-page hookt de dialog in als "Nieuwe doc"-knop bij enabled
  folder (verborgen bij disabled folder — banner volgt in T-1071).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-16 14:33:07 +02:00

4.5 KiB

Raw Blame History

title

status

audience

language

last_updated

ProductDocDialog Profiel

active

ai-agent

contributor

2026-05-16

NewProductDocDialog Profiel

Volgt docs/patterns/dialog.md (de generieke spec voor élke entity-dialog in Scrum4Me). Dit document beschrijft alleen de Product-Doc-specifieke afwijkingen — alle gedeelde regels (layout, motion, demo-policy, foutcodes, validatie, theming) staan in de generieke spec.

Plan: PBI-96 §C.3 + §D.

Modes

Eén mode voor v1: create. Edit/delete gebeuren via aparte routes (?edit=1 op de detail-page → ProductDocEditor-wrapper; DeleteProductDocButton-AlertDialog).

Mode	Trigger	Component
`create`	"Nieuwe doc"-knop op folder-page of `?new=1` deep-link	`NewProductDocDialog`
`edit`	`?edit=1` searchParam op `/[folder]/[slug]`	`ProductDocEditor` (geen modal — inline op page)
`delete`	"Verwijderen"-knop op detail-page	`DeleteProductDocButton` (AlertDialog)

Afwijking van generieke spec: edit gebruikt geen dialog maar een inline-editor — vergelijkbaar met de keuze in IdeaDialog (markdown-editor verdient meer ruimte dan een modal).

Velden (`create`)

Veld	Type	Validatie	Bron-zod
`folder`	enum-string	one of `product.enabled_doc_folders` (UI filtert al)	`productDocCreateSchema.folder`
`title`	string (required)	trim, 1-200 chars	uit frontmatter → `productDocFrontmatterSchema.title`
`slug`	string (required)	regex `/^[a-z0-9][a-z0-9-]{0,79}$/`; uniek per (product_id, folder)	`productDocCreateSchema.slug`
`content_md`	string (required)	1-100 000 chars; eerste regel `---`; frontmatter parseerbaar via `parseProductDocMd`	`productDocCreateSchema.content_md`

UX-details

Slug auto-suggest: bij elke title-change → slugify(title), totdat user de slug zelf bewerkt (slugTouched flag). Daarna leidend wat de user typt.
Starter-template: "Gebruik {folder}-template"-knop vult content_md met PRODUCT_DOC_FOLDER_DEFAULTS[folder].template (uit lib/schemas/product-doc-frontmatter-defaults.ts), met title: "..." vervangen door de huidige titel.
Minimale frontmatter-wrap: als de user geen --- aan begin heeft staan bij submit, wordt automatisch ---\ntitle: ...\nstatus: draft\n---\n\n toegevoegd. Voor power-users die alleen body typen.
Geen live-validatie in dialog: het frontmatter wordt server-side gevalideerd via parseProductDocMd (422 met line-info bij fout). Voor live-validatie tijdens edit zie ProductDocEditor (T-1069).

Server-action

Create: createProductDocAction({ product_id, folder, slug, content_md }) — zie actions/product-docs.ts (T-1062).
Op success: redirect naar /products/[id]/docs/[folder]/[slug] via router.push.

Foutmappings

Fout	Code	UX
Niet ingelogd	401	toast.error
Demo-user (laag 2)	403	toast.error (UI laag 3 zou dit al moeten voorkomen — DemoTooltip + disabled)
Slug-conflict (P2002)	422	toast.error met "Slug X bestaat al in folder Y"
Folder uitgeschakeld	422	toast.error met "Folder X staat uit voor dit product" — UI filtert dit normaal al
Frontmatter parse-fail	422 + `details`	toast.error met server-message; details zichtbaar bij volgende edit-poging

Demo-policy (drie lagen, generieke spec § 6)

Laag	Implementatie
1 (proxy.ts)	geen wijziging — geen REST-route in v1
2 (server-action)	`createProductDocAction` heeft `if (session.isDemo) return { error: ..., code: 403 }` aan top
3 (UI)	"Nieuwe doc"-trigger is `<DemoTooltip show={isDemo}>` wrapped + `disabled={isDemo}`

Deep-link `?new=1`

Folder-card CTA op de INDEX-page linkt naar /products/[id]/docs/[folder]?new=1. De dialog-component leest searchParams.get('new') en opent automatisch via useEffect. Bij sluiten wordt ?new=1 uit de URL gestript via router.replace.

Niet-doelen (v1)

Geen rich-text-editor — alleen <Textarea>.
Geen template-picker UI — alleen een knop per huidige folder.
Geen dirty-close-guard — content gaat verloren bij Esc/buiten-klikken. Dit accepteren we omdat de user nog niets heeft opgeslagen; de generieke spec § 7 staat dit toe voor create mode wanneer er nog geen meaningful data is.
Geen folder-switch-warning als de user de starter-template heeft toegepast en daarna folder wijzigt. Edge case; user kan opnieuw "Gebruik X-template" klikken.

4.5 KiB Raw Blame History