feat(PBI-74): Zustand product-workspace rearchitecture (Stories 1-8) (#180)
* feat(PBI-74): product-workspace store skelet + test-infra (Story 1)
Skelet voor de nieuwe `product-workspace-store` die op termijn de gefragmenteerde
`backlog-store`/`planner-store`/`selection-store`/`product-store` vervangt. Deze
PR levert alleen het skelet + tests; UI-consumers worden in latere stories
omgezet.
- vitest naar jsdom + tests/setup.ts (MemoryStorage, default fetch-stub) — G6/G8
- stores/product-workspace/{types,store,selectors,restore}.ts — immer-middleware,
alle slices en acties (hydrate, setActive*, ensure*Loaded met activeRequestId-
guard, applyRealtimeEvent, resyncActiveScopes/loadedScopes, optimistic
mutations). Restore-wiring in setters volgt in Story 4 (T-857/T-858).
- selectors gebruiken module-level EMPTY refs (G1) en documenteren useShallow-
vereiste (G2)
- 34 nieuwe unit-tests dekken §Testing setup-checklist uit het ontwerp:
hydrateSnapshot, selection-cascade, applyRealtimeEvent (I/U/D + parent-move +
ander-product + unknown-entity → resync), delete-cleanup, race-safe loaders,
ensureTaskLoaded _detail-flag, resyncActiveScopes ensure-keten, restore-hints
read/write/clear, optimistic mutation rollback/settle/SSE-echo idempotent
- docs/api/rest-contract.md: audit-sectie met de vier ontbrekende
ensure*Loaded-endpoints (worden toegevoegd in Story 7 / T-870)
Refs: PBI-74, ST-1318, T-837..T-843
Bron-ontwerp: docs/plans/zustand-store-rearchitecture.md
Implementatieplan: docs/plans/zustand-workspace-store-implementation.md
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): dual-dispatch hydratie + realtime naar workspace-store (Story 2)
Story 2 — schaduw-fase: BacklogHydrationWrapper en useBacklogRealtime voeden
nu ook de nieuwe product-workspace-store, terwijl de oude useBacklogStore /
useProductStore leidend blijft voor componenten. Story 3 verschuift consumers
één voor één; Story 8 ruimt de oude stores op.
- T-844: BacklogHydrationWrapper roept naast useBacklogStore.setInitialData
ook useProductWorkspaceStore.hydrateSnapshot aan. Productname-prop optioneel
toegevoegd voor activeProduct-context.
- T-845: useBacklogRealtime onmessage dispatcht events naar zowel oude store
(applyChange) als nieuwe store (applyRealtimeEvent). Geen wijziging aan
reconnect/visibility — Story 5.
- T-846: dev-only logWorkspaceFingerprint helper vergelijkt counts tussen
oude en nieuwe store na hydrate en na elk realtime-event. console.warn bij
mismatch; opt-in debug log via NEXT_PUBLIC_DEBUG_WORKSPACE_FINGERPRINT=1.
Bestand TODO-marked voor verwijdering in Story 8 (T-878).
- T-847: SetCurrentProduct schrijft naast oude useProductStore ook
useProductWorkspaceStore.setActiveProduct({id, name}); cleanup cleart beide.
setActiveProduct triggert ensureProductLoaded — fetch-stub tot Story 7
(T-870) de LIST-endpoints toevoegt.
Verify: lint+typecheck clean, 636/636 tests groen (geen UI-regressie omdat
oude store leidend blijft).
Refs: PBI-74, ST-1319, T-844..T-847
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): migreer backlog-componenten naar workspace-store (Story 3)
Story 3 verplaatst alle UI-consumers van de oude vier stores
(useBacklogStore/usePlannerStore/useSelectionStore/useProductStore) naar de
nieuwe product-workspace-store. De oude stores blijven nog bestaan voor
hydration-wrapper en realtime-hook (dual-dispatch); Story 8 ruimt ze op.
- T-848 backlog-split-pane.tsx: leest activePbiId/activeStoryId uit
context-slice (primitives, geen useShallow nodig).
- T-849 pbi-list.tsx: selectVisiblePbis(useShallow); DnD via
applyOptimisticMutation('pbi-order' + optionele 'entity-patch' bij
cross-priority drag), met settle/rollback per server-result.
- T-850 story-panel.tsx: selectStoriesForActivePbi(useShallow); DnD via
applyOptimisticMutation('story-order' + entity-patch bij priority change).
- T-851 task-panel.tsx: selectTasksForActiveStory(useShallow); DnD via
applyOptimisticMutation('task-order'); detail-view (ensureTaskLoaded +
isDetail) zit in de task-dialog (apart component, niet in deze lijst).
- T-852 start-sprint-button.tsx: selectActivePbi + selectStoriesForActivePbi
voor free-story count.
- T-853 set-current-product.tsx: alleen workspace-store.setActiveProduct
(oude useProductStore-import verwijderd).
- T-854 G1/G2-audit: alle nieuwe selectors gebruiken module-level EMPTY
refs (G1) en useShallow voor lijsten (G2). Geen 'Maximum update depth'-
warnings tijdens npm test.
- T-855 tests bijgewerkt: backlog-split-pane.test, task-panel.test,
integration.test gebruiken nu setState op workspace-store (helpers
resetWorkspace/setActiveStoryAndTasks/selectPbi/selectStory).
Verify: lint+typecheck clean, 636/636 tests groen. UI-consumers van
oude stores zijn nu nul (uitgezonderd dual-dispatch in hydration-wrapper en
realtime-hook + dev-fingerprint-helper, die in Story 8/T-873/T-878 verdwijnen).
Refs: PBI-74, ST-1320, T-848..T-855
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): race-safe loaders + restore-hints + URL-prioriteit (Story 4)
- T-856: activeRequestId-guard zat al in store.ts uit Story 1; bevestigd door
de race-safety test (in-flight ensurePbiLoaded mag niet overschrijven).
- T-857: restore-hint flow toegevoegd in setActiveProduct/setActivePbi/
setActiveStory. Async chain: await ensureXxxLoaded → guard check →
readHints → valideer hint via entities.byId → setActiveYyy(hint).
Geen setTimeout-trick — chain is alleen await-based.
- T-858: writeProductHint/writePbiHint/writeStoryHint/writeTaskHint
aangeroepen direct na set(...) zodat de hint-persistentie altijd
consistent is met de in-store selectie.
- T-859: nieuwe components/backlog/url-task-sync.tsx — leest
?editTask=<id> uit useSearchParams, schrijft de hint en roept
setActiveTask aan zodat de URL wint boven een eerder gepersisteerde
task-hint. Gemount in beide product-pages (desktop + mobile) binnen
BacklogHydrationWrapper.
- T-860: 6 nieuwe vitest-cases — 4 voor hint-persist per setter, 2 voor de
restore-flow chain (hint die niet in entities zit wordt genegeerd; hint
die wel in entities zit wordt toegepast). Bestaande race-safety test
blijft groen.
Verify: lint+typecheck clean, 642/642 tests groen.
Refs: PBI-74, ST-1321, T-856..T-860
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): hidden-tab + reconnect resync (Story 5)
Per ontwerp samen in één commit zodat geen vangnet wegvalt zonder vervanging.
- T-861: useBacklogRealtime sluit niet meer op visibilitychange hidden;
EventSource blijft open zolang browser/netwerk dit toelaten. Reconnect bij
netwerkfout blijft via backoff. visibilitychange fungeert nog wel als
re-connect-trigger als de stream tussentijds is gesloten (b.v. 240s
hard-close server-side).
- T-862: 'ready'-event-handler telt connect-cycles. De eerste 'ready' is de
initial connect (geen resync). Bij latere 'ready' (post-reconnect) wordt
resyncActiveScopes('reconnect') aangeroepen om gemiste events op te halen.
- T-863: nieuwe lib/realtime/use-workspace-resync.ts — luistert op
document.visibilitychange (hidden→visible) en window.online; dispatcht
resyncActiveScopes('visible') resp. 'reconnect'. Mounted in
BacklogHydrationWrapper na useBacklogRealtime.
- T-864: 4 nieuwe vitest-cases voor useWorkspaceResync (jsdom): visible→
visible event, online event, hidden negeren, cleanup-bij-unmount.
Daarnaast lint-cleanup: ongebruikte 'order'-variabelen in pbi-list en
story-panel weggehaald.
Verify: lint+typecheck clean, 646/646 tests groen.
Refs: PBI-74, ST-1322, T-861..T-864
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): unknown-event fallback tests (Story 6)
T-865 (isUnknownEntityEvent filter) en T-866 (resync-trigger in
applyRealtimeEvent) zijn al in Story 1 geïmplementeerd in store.ts;
deze story breidt de test-coverage uit met expliciete negatieve cases
voor het type-veld noise pattern.
T-867 — 5 nieuwe vitest-cases:
- unknown entity met ANDER product_id → geen resync
- claude_job_status (type) → geen resync
- worker_heartbeat (type) → geen resync
- claude_job_enqueued (type) → geen resync
- payload zonder entity en zonder type → genegeerd
- question-entity (entity-veld, geen type, niet pbi/story/task) → resync trigger
Verify: lint+typecheck clean, 651/651 tests groen.
Refs: PBI-74, ST-1323, T-865..T-867
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): cache-headers + LIST endpoints (Story 7)
- T-868: cache: 'no-store' was al ingebouwd in fetchJson helper (Story 1).
Bevestigd door bestaande ensureProductLoaded test die de fetch-init
controleert.
- T-869: force-dynamic toegevoegd op alle vier nieuwe LIST-endpoints.
- T-870: vier nieuwe routes voor ensure*Loaded:
- GET /api/products/:id/backlog → ProductBacklogSnapshot
- GET /api/pbis/:id/stories → BacklogStory[]
- GET /api/stories/:id/tasks → BacklogTask[]
- GET /api/tasks/:id (nieuwe handler naast bestaande PATCH) → TaskDetail
met _detail: true marker
Auth via authenticateApiRequest (Bearer of iron-session); access-control
via productAccessFilter (gebruiker is owner of member van het product).
Statussen worden via taskStatusToApi/storyStatusToApi/pbiStatusToApi
vertaald naar lowercase API-vorm.
- T-871: SSE-route /api/realtime/backlog stuurt al ready-event direct na
LISTEN (regel 106) — geen wijziging nodig.
Verify: lint+typecheck clean, 651/651 tests groen.
Refs: PBI-74, ST-1324, T-868..T-871
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* feat(PBI-74): oude stores opruimen (Story 8)
Workspace-store is nu de enige bron voor product-backlog client-state. De
vier voorgangers en de dual-dispatch-infrastructuur zijn verwijderd.
- T-872: grep over codebase op useBacklogStore/usePlannerStore/
useSelectionStore/useProductStore is leeg.
- T-873..T-876: stores/{backlog,planner,selection,product}-store.ts deleted.
- T-877: __tests__/realtime/payload-contract.test.ts en
__tests__/api/backlog-realtime.test.ts deleted — pbi/story/task I|U|D
payload-handling wordt al gedekt door
__tests__/stores/product-workspace/store.test.ts (incl. parent-move,
idempotent inserts, delete-cleanup).
- T-878: lib/realtime/dev-workspace-fingerprint.ts deleted, dual-dispatch
uit BacklogHydrationWrapper en lib/realtime/use-backlog-realtime.ts
weggehaald. stores/products-store.ts (lijst van producten ≠ active
product) blijft ongewijzigd.
Bijwerkingen:
- BacklogPbi en BacklogStory types in components/backlog/story-panel.tsx en
components/sprint/sprint-backlog.tsx krijgen sort_order zodat ze met de
workspace-types overeenkomen.
- Server-pages /products/[id]/page.tsx (desktop+mobile) en
/products/[id]/sprint/[sprintId]/page.tsx selecteren sort_order op story
en mappen het door in de hydration-payload.
Verify: lint+typecheck clean, 626/626 tests groen (verlies van 25 redundante
oude-store tests; workspace-store tests dekken hetzelfde gedrag).
Refs: PBI-74, ST-1325, T-872..T-878
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* docs(PBI-74): richtlijn workspace-store + realtime patroon
Documenteert het patroon dat in Stories 1-8 is opgeleverd, zodat een
volgende workspace-store (sprint, of een nieuwe bounded context) hetzelfde
recept volgt.
- docs/patterns/workspace-store.md (nieuw): wanneer een workspace-store, de
vijf state-slices, selectors-regels (G1/G2), race-safe ensure*Loaded met
activeRequestId-guard (G4), SSE-hook + applyRealtimeEvent met
unknown-event filter, hidden-tab + reconnect resync via
useWorkspaceResync, restore-hint flow met await-chain en URL-prioriteit,
optimistic mutations (applyOptimisticMutation/rollback/settle), API
endpoint-vereisten (force-dynamic, cache: no-store), test-setup met
MemoryStorage + originalActions snapshot + mockImplementation, gotchas
G1-G8 als comment-template, en het 8-staps migratiepad.
- docs/patterns/zustand-optimistic.md: bijgewerkt voor de nieuwe
workspace-store API; verwijst voor het bredere patroon naar
workspace-store.md. Voorbeelden voor pbi-order + entity-patch.
- CLAUDE.md: patterns quickref aangevuld met workspace-store-rij.
Verify: typecheck clean.
Refs: PBI-74
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(PBI-74): solo + notifications hooks volgen ook hidden-tab/resync patroon
Het uitgangspunt van PBI-74 (robuust tegen gemiste SSE-events, hidden tabs
en onbekende notify-vormen) gold universeel — niet alleen voor
product-workspace. use-solo-realtime en use-notifications-realtime hadden
nog dezelfde bug die use-backlog-realtime in Story 5 al opgelost kreeg:
sluit stream op hidden, geen resync.
Reproductie (zoals gemeld): solo-screen open in tab A, product-backlog
open in tab B; bewerk task-title in tab B → tab A's solo-SSE was gesloten
(hidden) en kreeg het NOTIFY-event nooit. Tab terug naar solo →
EventSource reconnect maar geen resync → oude title persisteert. Postgres
NOTIFY heeft geen replay, dus zonder resync zijn die events permanent
verloren.
Fix in beide hooks (zelfde patroon als Story 5 voor backlog):
- Stream blijft open op visibilitychange hidden — geen close() meer.
- Bij hidden→visible én bij window 'online': router.refresh() zodat de
server-component opnieuw fetcht en de initial-state-prop ververst (wat
voor solo de tasks-record reset via initTasks; voor notifications de
questions-bel-state).
- Bij latere 'ready'-events na reconnect (use-solo-realtime): zelfde
router.refresh() trigger zodat we niet vertrouwen op alleen het
visibility-pad.
Verify: lint + typecheck clean, 626/626 tests groen.
Refs: PBI-74
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* docs: fix broken links in research-repo plan
docs/plans/lees-de-readme-md-validated-book.md beschrijft een research-
repo migratiepad. De links waren geschreven vanuit het research-repo-
perspectief (paden als stores/data-store.ts, ../Scrum4Me/CLAUDE.md,
docs/plans/zustand-store-rearchitecture.md zonder relative-prefix), wat
de doc-link-checker hier laat falen.
- Header-note toegevoegd dat het document voor de research-repo is.
- Interne refs (zustand-store-rearchitecture.md, CLAUDE.md) → relatieve
paden die in deze repo wél resolven (./zustand-..., ../../CLAUDE.md).
- Research-repo-only refs (stores/data-store.ts,
hooks/use-event-stream.ts, components/*-select.tsx, etc.) → inline
code-tags met "(research-repo)" suffix; de link-checker slaat ze over
en de leesbaarheid blijft.
Verify: npm run docs:check-links → ✓ All doc links valid (118 files).
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser
GitHub
parent
0d126695db
commit
5df04feb11
46 changed files with 3736 additions and 736 deletions
|
|
@ -1,8 +1,15 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { useBacklogStore, type BacklogPbi, type BacklogStory, type BacklogTask } from '@/stores/backlog-store'
|
||||
import { useBacklogRealtime } from '@/lib/realtime/use-backlog-realtime'
|
||||
import { useWorkspaceResync } from '@/lib/realtime/use-workspace-resync'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import type {
|
||||
BacklogPbi,
|
||||
BacklogStory,
|
||||
BacklogTask,
|
||||
ProductBacklogSnapshot,
|
||||
} from '@/stores/product-workspace/types'
|
||||
|
||||
interface InitialData {
|
||||
pbis: BacklogPbi[]
|
||||
|
|
@ -13,6 +20,7 @@ interface InitialData {
|
|||
interface BacklogHydrationWrapperProps {
|
||||
initialData: InitialData
|
||||
productId: string
|
||||
productName?: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
|
|
@ -27,19 +35,40 @@ function fingerprint(data: InitialData): string {
|
|||
return `${pbiPart}|${storyPart}|${taskPart}`
|
||||
}
|
||||
|
||||
export function BacklogHydrationWrapper({ initialData, productId, children }: BacklogHydrationWrapperProps) {
|
||||
const setInitialData = useBacklogStore((s) => s.setInitialData)
|
||||
// PBI-74 / Story 8: workspace-store is nu enige bron — dual-dispatch weg.
|
||||
function toWorkspaceSnapshot(
|
||||
data: InitialData,
|
||||
productId: string,
|
||||
productName: string | undefined,
|
||||
): ProductBacklogSnapshot {
|
||||
return {
|
||||
product: { id: productId, name: productName ?? '' },
|
||||
pbis: data.pbis,
|
||||
storiesByPbi: data.storiesByPbi,
|
||||
tasksByStory: data.tasksByStory,
|
||||
}
|
||||
}
|
||||
|
||||
export function BacklogHydrationWrapper({
|
||||
initialData,
|
||||
productId,
|
||||
productName,
|
||||
children,
|
||||
}: BacklogHydrationWrapperProps) {
|
||||
const lastFingerprint = useRef<string>('')
|
||||
|
||||
useEffect(() => {
|
||||
const fp = fingerprint(initialData)
|
||||
if (fp !== lastFingerprint.current) {
|
||||
lastFingerprint.current = fp
|
||||
setInitialData(initialData)
|
||||
useProductWorkspaceStore
|
||||
.getState()
|
||||
.hydrateSnapshot(toWorkspaceSnapshot(initialData, productId, productName))
|
||||
}
|
||||
}, [initialData, setInitialData])
|
||||
}, [initialData, productId, productName])
|
||||
|
||||
useBacklogRealtime(productId)
|
||||
useWorkspaceResync()
|
||||
|
||||
return <>{children}</>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import { SplitPane, type SplitPaneProps } from '@/components/split-pane/split-pane'
|
||||
|
||||
type Props = Omit<SplitPaneProps, 'activeTab' | 'onActiveTabChange'>
|
||||
|
||||
// PBI-74 / T-848: leest active PBI/story-ids uit workspace-store. Primitives,
|
||||
// dus geen useShallow nodig.
|
||||
export function BacklogSplitPane(props: Props) {
|
||||
const { selectedPbiId, selectedStoryId } = useSelectionStore()
|
||||
const selectedPbiId = useProductWorkspaceStore((s) => s.context.activePbiId)
|
||||
const selectedStoryId = useProductWorkspaceStore((s) => s.context.activeStoryId)
|
||||
const [activeTab, setActiveTab] = useState(0)
|
||||
|
||||
// React-recommended "derived state from props" pattern: update state during render
|
||||
|
|
|
|||
|
|
@ -25,9 +25,10 @@ import { CheckSquare, Square } from 'lucide-react'
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { useBacklogStore } from '@/stores/backlog-store'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import { selectVisiblePbis } from '@/stores/product-workspace/selectors'
|
||||
import type { BacklogPbi as WorkspacePbi } from '@/stores/product-workspace/types'
|
||||
import { deletePbiAction } from '@/actions/pbis'
|
||||
import { reorderPbisAction, updatePbiPriorityAction } from '@/actions/stories'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
|
@ -235,10 +236,13 @@ function SortablePbiRow({
|
|||
}
|
||||
|
||||
// --- Main component ---
|
||||
// PBI-74 / T-849: leest pbis + actieve selectie uit workspace-store via
|
||||
// useShallow-selector. DnD-mutaties via applyOptimisticMutation/rollback/settle.
|
||||
export function PbiList({ productId, isDemo }: PbiListProps) {
|
||||
const pbis = useBacklogStore((s) => s.pbis)
|
||||
const { selectedPbiId, selectPbi } = useSelectionStore()
|
||||
const { pbiOrder, pbiPriority, initPbis, reorderPbis, rollbackPbis, updatePbiPriority } = usePlannerStore()
|
||||
// selectVisiblePbis is gesorteerd op priority/sort_order; useShallow
|
||||
// voorkomt re-render op ongerelateerde store-mutaties (G2).
|
||||
const pbis = useProductWorkspaceStore(useShallow(selectVisiblePbis)) as WorkspacePbi[]
|
||||
const selectedPbiId = useProductWorkspaceStore((s) => s.context.activePbiId)
|
||||
// Defaults match SSR; persisted values applied post-mount in the loader effect below.
|
||||
// This avoids hydration mismatch when localStorage holds non-default values.
|
||||
const [filterPriority, setFilterPriority] = useState<number | 'all'>('all')
|
||||
|
|
@ -295,22 +299,10 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
|
|||
useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:pbi_filter_status', filterStatus) }, [filterStatus, prefsLoaded])
|
||||
useEffect(() => { if (prefsLoaded) localStorage.setItem('scrum4me:pbi_sort_dir', sortDir) }, [sortDir, prefsLoaded])
|
||||
|
||||
// Sync server data into store — use stable string dep to avoid infinite loop
|
||||
const pbiIdKey = pbis.map(p => p.id).join(',')
|
||||
useEffect(() => {
|
||||
initPbis(productId, pbiIdKey ? pbiIdKey.split(',') : [])
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [productId, pbiIdKey])
|
||||
|
||||
// Build ordered PBI list from store (or fall back to server order)
|
||||
const order = pbiOrder[productId] ?? pbis.map(p => p.id)
|
||||
// pbis komen al gesorteerd binnen via selectVisiblePbis (priority + sort_order).
|
||||
// Geen aparte order/priority maps meer — workspace-store entities zijn de waarheid.
|
||||
const pbiMap = Object.fromEntries(pbis.map(p => [p.id, p]))
|
||||
|
||||
// Apply priority overrides from store
|
||||
const orderedPbis = order
|
||||
.map(id => pbiMap[id])
|
||||
.filter(Boolean)
|
||||
.map(p => ({ ...p, priority: pbiPriority[p.id] ?? p.priority }))
|
||||
const orderedPbis = pbis
|
||||
|
||||
const base = orderedPbis.filter(p => {
|
||||
if (filterPriority !== 'all' && p.priority !== filterPriority) return false
|
||||
|
|
@ -353,30 +345,58 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
|
|||
const overPbi = pbiMap[over.id as string]
|
||||
if (!activePbi || !overPbi) return
|
||||
|
||||
const prevOrder = [...order]
|
||||
const oldIndex = order.indexOf(active.id as string)
|
||||
const newIndex = order.indexOf(over.id as string)
|
||||
const newOrder = arrayMove([...order], oldIndex, newIndex)
|
||||
const store = useProductWorkspaceStore.getState()
|
||||
const prevOrder = [...store.relations.pbiIds]
|
||||
const oldIndex = prevOrder.indexOf(active.id as string)
|
||||
const newIndex = prevOrder.indexOf(over.id as string)
|
||||
if (oldIndex === -1 || newIndex === -1) return
|
||||
const newOrder = arrayMove([...prevOrder], oldIndex, newIndex)
|
||||
|
||||
// Optimistic update
|
||||
reorderPbis(productId, newOrder)
|
||||
// Snapshot rollback-info en pas optimistisch toe.
|
||||
const orderMutationId = store.applyOptimisticMutation({
|
||||
kind: 'pbi-order',
|
||||
prevPbiIds: prevOrder,
|
||||
})
|
||||
useProductWorkspaceStore.setState((s) => {
|
||||
s.relations.pbiIds = newOrder
|
||||
})
|
||||
|
||||
const priorityChanged = activePbi.priority !== overPbi.priority
|
||||
let priorityMutationId: string | null = null
|
||||
if (priorityChanged) {
|
||||
priorityMutationId = store.applyOptimisticMutation({
|
||||
kind: 'entity-patch',
|
||||
entity: 'pbi',
|
||||
id: active.id as string,
|
||||
prev: store.entities.pbisById[active.id as string],
|
||||
})
|
||||
useProductWorkspaceStore.setState((s) => {
|
||||
const pbi = s.entities.pbisById[active.id as string]
|
||||
if (pbi) pbi.priority = overPbi.priority
|
||||
})
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
const settle = () => {
|
||||
const st = useProductWorkspaceStore.getState()
|
||||
if (priorityMutationId) st.settleMutation(priorityMutationId)
|
||||
st.settleMutation(orderMutationId)
|
||||
}
|
||||
const rollback = (msg: string) => {
|
||||
const st = useProductWorkspaceStore.getState()
|
||||
if (priorityMutationId) st.rollbackMutation(priorityMutationId)
|
||||
st.rollbackMutation(orderMutationId)
|
||||
toast.error(msg)
|
||||
}
|
||||
|
||||
if (priorityChanged) {
|
||||
updatePbiPriority(active.id as string, overPbi.priority)
|
||||
const result = await updatePbiPriorityAction(active.id as string, overPbi.priority, productId)
|
||||
if (!result.success) {
|
||||
rollbackPbis(productId, prevOrder)
|
||||
toast.error('Prioriteit opslaan mislukt')
|
||||
}
|
||||
if (result.success) settle()
|
||||
else rollback('Prioriteit opslaan mislukt')
|
||||
} else {
|
||||
const result = await reorderPbisAction(productId, newOrder)
|
||||
if (!result.success) {
|
||||
rollbackPbis(productId, prevOrder)
|
||||
toast.error('Volgorde opslaan mislukt')
|
||||
}
|
||||
if (result.success) settle()
|
||||
else rollback('Volgorde opslaan mislukt')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -384,7 +404,9 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
|
|||
function handleDelete(id: string) {
|
||||
startTransition(async () => {
|
||||
await deletePbiAction(id)
|
||||
if (selectedPbiId === id) selectPbi(null)
|
||||
if (selectedPbiId === id) {
|
||||
useProductWorkspaceStore.getState().setActivePbi(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -561,7 +583,7 @@ export function PbiList({ productId, isDemo }: PbiListProps) {
|
|||
isDemo={isDemo}
|
||||
selectionMode={selectionMode}
|
||||
isChecked={selectedIds.has(pbi.id)}
|
||||
onSelect={() => selectPbi(pbi.id)}
|
||||
onSelect={() => useProductWorkspaceStore.getState().setActivePbi(pbi.id)}
|
||||
onToggleCheck={() => toggleCheck(pbi.id)}
|
||||
onEdit={() => setDialogState({ mode: 'edit', productId, pbi })}
|
||||
onDelete={() => handleDelete(pbi.id)}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,10 @@ import { Button } from '@/components/ui/button'
|
|||
import { Badge } from '@/components/ui/badge'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { usePlannerStore } from '@/stores/planner-store'
|
||||
import { useBacklogStore } from '@/stores/backlog-store'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import { selectStoriesForActivePbi } from '@/stores/product-workspace/selectors'
|
||||
import type { BacklogStory as WorkspaceStory } from '@/stores/product-workspace/types'
|
||||
import { reorderStoriesAction } from '@/actions/stories'
|
||||
import { StoryDialog, type StoryDialogState } from './story-dialog'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
|
@ -55,6 +56,7 @@ export interface Story {
|
|||
description: string | null
|
||||
acceptance_criteria: string | null
|
||||
priority: number
|
||||
sort_order: number
|
||||
status: string
|
||||
pbi_id: string
|
||||
sprint_id: string | null
|
||||
|
|
@ -122,10 +124,12 @@ function SortableStoryBlock({
|
|||
}
|
||||
|
||||
// --- Main component ---
|
||||
// PBI-74 / T-850: leest stories voor active PBI via selectStoriesForActivePbi
|
||||
// (useShallow). DnD via applyOptimisticMutation('story-order').
|
||||
export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
||||
const { selectedPbiId, selectedStoryId, selectStory } = useSelectionStore()
|
||||
const storiesByPbi = useBacklogStore((s) => s.storiesByPbi)
|
||||
const { storyOrder, initStories, reorderStories, rollbackStories } = usePlannerStore()
|
||||
const selectedPbiId = useProductWorkspaceStore((s) => s.context.activePbiId)
|
||||
const selectedStoryId = useProductWorkspaceStore((s) => s.context.activeStoryId)
|
||||
const rawStories = useProductWorkspaceStore(useShallow(selectStoriesForActivePbi)) as WorkspaceStory[]
|
||||
const [filterStatus, setFilterStatus] = useState<string | null>(null)
|
||||
const [filterPriority, setFilterPriority] = useState<number | null>(null)
|
||||
const [sortMode, setSortMode] = useState<SortMode>(() => {
|
||||
|
|
@ -138,20 +142,9 @@ export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
|||
|
||||
useEffect(() => { localStorage.setItem('scrum4me:story_sort', sortMode) }, [sortMode])
|
||||
|
||||
const rawStories = selectedPbiId ? (storiesByPbi[selectedPbiId] ?? []) : []
|
||||
|
||||
// Sync into store — use stable string dep to avoid infinite loop
|
||||
const storyIdKey = rawStories.map(s => s.id).join(',')
|
||||
useEffect(() => {
|
||||
if (selectedPbiId) {
|
||||
initStories(selectedPbiId, storyIdKey ? storyIdKey.split(',') : [])
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedPbiId, storyIdKey])
|
||||
|
||||
// rawStories komt al gesorteerd binnen via selectStoriesForActivePbi.
|
||||
const storyMap = Object.fromEntries(rawStories.map(s => [s.id, s]))
|
||||
const order = (selectedPbiId ? storyOrder[selectedPbiId] : null) ?? rawStories.map(s => s.id)
|
||||
const orderedStories = order.map(id => storyMap[id]).filter(Boolean)
|
||||
const orderedStories = rawStories
|
||||
|
||||
const base = orderedStories
|
||||
.filter(s => !filterStatus || s.status === filterStatus)
|
||||
|
|
@ -185,14 +178,36 @@ export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
|||
const overStory = storyMap[over.id as string]
|
||||
if (!activeStory || !overStory) return
|
||||
|
||||
const prevOrder = [...order]
|
||||
const oldIndex = order.indexOf(active.id as string)
|
||||
const newIndex = order.indexOf(over.id as string)
|
||||
const newOrder = arrayMove([...order], oldIndex, newIndex)
|
||||
const store = useProductWorkspaceStore.getState()
|
||||
const prevOrder = [...(store.relations.storyIdsByPbi[selectedPbiId] ?? [])]
|
||||
const oldIndex = prevOrder.indexOf(active.id as string)
|
||||
const newIndex = prevOrder.indexOf(over.id as string)
|
||||
if (oldIndex === -1 || newIndex === -1) return
|
||||
const newOrder = arrayMove([...prevOrder], oldIndex, newIndex)
|
||||
|
||||
reorderStories(selectedPbiId, newOrder)
|
||||
const orderMutationId = store.applyOptimisticMutation({
|
||||
kind: 'story-order',
|
||||
pbiId: selectedPbiId,
|
||||
prevStoryIds: prevOrder,
|
||||
})
|
||||
useProductWorkspaceStore.setState((s) => {
|
||||
s.relations.storyIdsByPbi[selectedPbiId] = newOrder
|
||||
})
|
||||
|
||||
const priorityChanged = activeStory.priority !== overStory.priority
|
||||
let priorityMutationId: string | null = null
|
||||
if (priorityChanged) {
|
||||
priorityMutationId = store.applyOptimisticMutation({
|
||||
kind: 'entity-patch',
|
||||
entity: 'story',
|
||||
id: active.id as string,
|
||||
prev: store.entities.storiesById[active.id as string],
|
||||
})
|
||||
useProductWorkspaceStore.setState((s) => {
|
||||
const story = s.entities.storiesById[active.id as string]
|
||||
if (story) story.priority = overStory.priority
|
||||
})
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await reorderStoriesAction(
|
||||
|
|
@ -201,8 +216,13 @@ export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
|||
newOrder,
|
||||
priorityChanged ? overStory.priority : undefined
|
||||
)
|
||||
if (!result.success) {
|
||||
rollbackStories(selectedPbiId, prevOrder)
|
||||
const st = useProductWorkspaceStore.getState()
|
||||
if (result.success) {
|
||||
if (priorityMutationId) st.settleMutation(priorityMutationId)
|
||||
st.settleMutation(orderMutationId)
|
||||
} else {
|
||||
if (priorityMutationId) st.rollbackMutation(priorityMutationId)
|
||||
st.rollbackMutation(orderMutationId)
|
||||
toast.error('Volgorde opslaan mislukt')
|
||||
}
|
||||
})
|
||||
|
|
@ -284,7 +304,7 @@ export function StoryPanel({ productId, isDemo }: StoryPanelProps) {
|
|||
key={story.id}
|
||||
story={story}
|
||||
isSelected={selectedStoryId === story.id}
|
||||
onSelect={() => selectStory(story.id)}
|
||||
onSelect={() => useProductWorkspaceStore.getState().setActiveStory(story.id)}
|
||||
onEdit={() => setStoryDialogState({ mode: 'edit', story, productId })}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,13 @@ import { Badge } from '@/components/ui/badge'
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { PanelNavBar } from '@/components/shared/panel-nav-bar'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { useBacklogStore, type BacklogTask } from '@/stores/backlog-store'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import { selectTasksForActiveStory } from '@/stores/product-workspace/selectors'
|
||||
import type {
|
||||
BacklogTask,
|
||||
TaskDetail,
|
||||
} from '@/stores/product-workspace/types'
|
||||
import { reorderTasksAction } from '@/actions/tasks'
|
||||
import { BacklogCard } from './backlog-card'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
|
@ -52,7 +57,7 @@ function SortableTaskCard({
|
|||
isDemo,
|
||||
onClick,
|
||||
}: {
|
||||
task: BacklogTask
|
||||
task: BacklogTask | TaskDetail
|
||||
isDemo: boolean
|
||||
onClick: () => void
|
||||
}) {
|
||||
|
|
@ -94,22 +99,20 @@ interface TaskPanelProps {
|
|||
closePath: string
|
||||
}
|
||||
|
||||
// PBI-74 / T-851: leest tasks voor active story via selectTasksForActiveStory
|
||||
// (useShallow). DnD via applyOptimisticMutation('task-order'). Detail-view
|
||||
// (ensureTaskLoaded + isDetail()) zit in de task-dialog, niet in deze lijst.
|
||||
export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
|
||||
const router = useRouter()
|
||||
const [, startTransition] = useTransition()
|
||||
const selectedStoryId = useSelectionStore((s) => s.selectedStoryId)
|
||||
const tasksByStory = useBacklogStore((s) => s.tasksByStory)
|
||||
const selectedStoryId = useProductWorkspaceStore((s) => s.context.activeStoryId)
|
||||
const rawTasks = useProductWorkspaceStore(useShallow(selectTasksForActiveStory)) as
|
||||
| (BacklogTask | TaskDetail)[]
|
||||
const [activeDragId, setActiveDragId] = useState<string | null>(null)
|
||||
const [localOrder, setLocalOrder] = useState<string[] | null>(null)
|
||||
|
||||
const rawTasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : null
|
||||
|
||||
// Merge local order with rawTasks for optimistic reorder
|
||||
const tasks: BacklogTask[] | null = rawTasks === null
|
||||
? null
|
||||
: localOrder
|
||||
? localOrder.map((id) => rawTasks.find((t) => t.id === id)).filter(Boolean) as BacklogTask[]
|
||||
: rawTasks
|
||||
const tasks: (BacklogTask | TaskDetail)[] | null = selectedStoryId
|
||||
? rawTasks
|
||||
: null
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
||||
|
|
@ -126,19 +129,30 @@ export function TaskPanel({ isDemo, closePath }: TaskPanelProps) {
|
|||
const { active, over } = event
|
||||
if (!over || active.id === over.id) return
|
||||
|
||||
const ids = tasks.map((t) => t.id)
|
||||
const oldIndex = ids.indexOf(active.id as string)
|
||||
const newIndex = ids.indexOf(over.id as string)
|
||||
const store = useProductWorkspaceStore.getState()
|
||||
const prevOrder = [...(store.relations.taskIdsByStory[selectedStoryId] ?? [])]
|
||||
const oldIndex = prevOrder.indexOf(active.id as string)
|
||||
const newIndex = prevOrder.indexOf(over.id as string)
|
||||
if (oldIndex === -1 || newIndex === -1) return
|
||||
const newOrder = arrayMove([...prevOrder], oldIndex, newIndex)
|
||||
|
||||
const newOrder = arrayMove(ids, oldIndex, newIndex)
|
||||
setLocalOrder(newOrder)
|
||||
const orderMutationId = store.applyOptimisticMutation({
|
||||
kind: 'task-order',
|
||||
storyId: selectedStoryId,
|
||||
prevTaskIds: prevOrder,
|
||||
})
|
||||
useProductWorkspaceStore.setState((s) => {
|
||||
s.relations.taskIdsByStory[selectedStoryId] = newOrder
|
||||
})
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await reorderTasksAction(selectedStoryId, newOrder)
|
||||
const st = useProductWorkspaceStore.getState()
|
||||
if (result?.error) {
|
||||
setLocalOrder(null)
|
||||
st.rollbackMutation(orderMutationId)
|
||||
toast.error(result.error)
|
||||
} else {
|
||||
st.settleMutation(orderMutationId)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
32
components/backlog/url-task-sync.tsx
Normal file
32
components/backlog/url-task-sync.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
'use client'
|
||||
|
||||
// PBI-74 / T-859: URL-prioriteit boven restore-hint.
|
||||
//
|
||||
// Als de route `?editTask=<id>` draagt, wint dat boven de localStorage-hint
|
||||
// die de restore-flow normaal zou toepassen. We schrijven de URL-id direct
|
||||
// naar de task-hint en roepen setActiveTask aan; de restore-flow leest de
|
||||
// task-hint pas na drie ensure*Loaded-awaits, dus onze schrijfactie wint
|
||||
// in de praktijk altijd.
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import { writeTaskHint } from '@/stores/product-workspace/restore'
|
||||
|
||||
export function UrlTaskSync() {
|
||||
const searchParams = useSearchParams()
|
||||
const editTask = searchParams.get('editTask')
|
||||
|
||||
useEffect(() => {
|
||||
if (!editTask) return
|
||||
const productId = useProductWorkspaceStore.getState().context.activeProduct?.id
|
||||
if (productId) {
|
||||
// Hint overschrijven zodat restore-flow's setActiveTask op deze id eindigt
|
||||
// (mocht hij na onze directe call komen).
|
||||
writeTaskHint(productId, editTask)
|
||||
}
|
||||
useProductWorkspaceStore.getState().setActiveTask(editTask)
|
||||
}, [editTask])
|
||||
|
||||
return null
|
||||
}
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useProductStore } from '@/stores/product-store'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import { debugProps } from '@/lib/debug'
|
||||
|
||||
// PBI-74 / T-853: workspace-store is nu enige bron voor active product.
|
||||
// De voorganger (stores/product-store.ts) wordt in Story 8 (T-876) verwijderd.
|
||||
export function SetCurrentProduct({ id, name }: { id: string; name: string }) {
|
||||
const { setCurrentProduct, clearCurrentProduct } = useProductStore()
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentProduct(id, name)
|
||||
return () => clearCurrentProduct()
|
||||
}, [id, name, setCurrentProduct, clearCurrentProduct])
|
||||
useProductWorkspaceStore.getState().setActiveProduct({ id, name })
|
||||
return () => {
|
||||
useProductWorkspaceStore.getState().setActiveProduct(null)
|
||||
}
|
||||
}, [id, name])
|
||||
|
||||
return <span {...debugProps('set-current-product')} hidden />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ export interface SprintStory {
|
|||
sprint_id: string | null
|
||||
created_at: Date
|
||||
priority: number
|
||||
sort_order: number
|
||||
status: string
|
||||
taskCount: number
|
||||
doneCount: number
|
||||
|
|
|
|||
|
|
@ -21,8 +21,12 @@ import {
|
|||
entityDialogHeaderClasses,
|
||||
} from '@/components/shared/entity-dialog-layout'
|
||||
import { createSprintAction } from '@/actions/sprints'
|
||||
import { useSelectionStore } from '@/stores/selection-store'
|
||||
import { useBacklogStore } from '@/stores/backlog-store'
|
||||
import { useProductWorkspaceStore } from '@/stores/product-workspace/store'
|
||||
import {
|
||||
selectActivePbi,
|
||||
selectStoriesForActivePbi,
|
||||
} from '@/stores/product-workspace/selectors'
|
||||
import { useShallow } from 'zustand/react/shallow'
|
||||
|
||||
interface StartSprintButtonProps {
|
||||
productId: string
|
||||
|
|
@ -46,14 +50,11 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
|
|||
const [dirty, setDirty] = useState(false)
|
||||
const formRef = useRef<HTMLFormElement>(null)
|
||||
const router = useRouter()
|
||||
const selectedPbiId = useSelectionStore((s) => s.selectedPbiId)
|
||||
const selectedPbi = useBacklogStore((s) =>
|
||||
selectedPbiId ? s.pbis.find((p) => p.id === selectedPbiId) ?? null : null,
|
||||
)
|
||||
const freeStoryCount = useBacklogStore((s) => {
|
||||
if (!selectedPbiId) return 0
|
||||
return (s.storiesByPbi[selectedPbiId] ?? []).filter((story) => story.sprint_id === null).length
|
||||
})
|
||||
// PBI-74 / T-852: actief PBI + free-story count via workspace-store selectors.
|
||||
const selectedPbiId = useProductWorkspaceStore((s) => s.context.activePbiId)
|
||||
const selectedPbi = useProductWorkspaceStore(selectActivePbi)
|
||||
const stories = useProductWorkspaceStore(useShallow(selectStoriesForActivePbi))
|
||||
const freeStoryCount = stories.filter((story) => story.sprint_id === null).length
|
||||
|
||||
const [state, formAction, pending] = useActionState<ActionResult | undefined, FormData>(
|
||||
async (_prev, fd) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue