janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(dashboard): klik in productdialog redirect niet meer naar productpagina

Browse source 
ProductDialog werd per kaart gerenderd binnen de klikbare card-div.
Hoewel Base UI de dialog portaalt naar document.body, bubblen React
events via de component-tree, niet de DOM-tree — clicks in de dialog
liepen door naar router.push op de kaart.

Fix: dialog-state opheffen naar ProductList; eén ProductDialog buiten
de map() en EditProductButton vervangen door een inline knop met
e.stopPropagation. EditProductButton blijft beschikbaar voor de
product-detailpagina.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-05-04 07:03:03 +02:00
parent 2aa3bc463f
commit 4abe2fa0b3
1 changed files with 22 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

25
components/dashboard/product-list.tsx
View file

@ -2,7 +2,7 @@
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useTransition } from 'react'
import { useState, useTransition } from 'react'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
@ -10,7 +10,7 @@ import { CodeBadge } from '@/components/shared/code-badge'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import { restoreProductAction } from '@/actions/products'
import { setActiveProductAction } from '@/actions/active-product'
import { EditProductButton } from '@/components/products/edit-product-button'
import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
interface Product {
id: string
@ -32,6 +32,7 @@ interface ProductListProps {
export function ProductList({ products, isDemo, showArchived = false, activeProductId }: ProductListProps) {
const router = useRouter()
const [, startTransition] = useTransition()
const [editingProduct, setEditingProduct] = useState<ProductDialogProduct | null>(null)
function handleRestore(id: string) {
startTransition(async () => {
@ -104,7 +105,16 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
)}
{!showArchived && (
<>
<EditProductButton product={product} isDemo={isDemo} />
<DemoTooltip show={isDemo}>
<Button
variant="outline"
size="sm"
onClick={(e) => { e.stopPropagation(); if (!isDemo) setEditingProduct(product) }}
disabled={isDemo}
>
Bewerken
</Button>
</DemoTooltip>
{product.id === activeProductId
? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
: (
@ -136,6 +146,15 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
</div>
</div>
))}
{editingProduct && (
<ProductDialog
mode="edit"
open={!!editingProduct}
onOpenChange={(v) => { if (!v) setEditingProduct(null) }}
product={editingProduct}
isDemo={isDemo}
/>
)}
</div>
)
}