feat(dashboard,nav): edit-knop op productlijst + zichtbare product-switch
- nav-bar: vervang `router.push(/products/{id})` door `router.refresh()` na
setActiveProductAction; voeg success-toast toe. Maakt de actieve-product
switch zichtbaar zonder context-switch naar de detail-page; client-cache
wordt nu correct geinvalideerd.
- product-list (dashboard): integreer EditProductButton naast Activeer/Actief.
Owner én members kunnen editten (per productAccessFilter); demo-modus
rendert disabled+tooltip.
- edit-product-button: optionele isDemo + size + variant props; wraps
DemoTooltip; e.stopPropagation om card-click te voorkomen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e390e7cdef
commit
7716b379e5
3 changed files with 40 additions and 19 deletions
|
|
@ -10,6 +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'
|
||||
|
||||
interface Product {
|
||||
id: string
|
||||
|
|
@ -17,6 +18,8 @@ interface Product {
|
|||
code: string | null
|
||||
description: string | null
|
||||
repo_url: string | null
|
||||
definition_of_done: string | null
|
||||
auto_pr: boolean
|
||||
}
|
||||
|
||||
interface ProductListProps {
|
||||
|
|
@ -100,19 +103,23 @@ export function ProductList({ products, isDemo, showArchived = false, activeProd
|
|||
</a>
|
||||
)}
|
||||
{!showArchived && (
|
||||
product.id === activeProductId
|
||||
? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
|
||||
: (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
|
||||
className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
|
||||
disabled={isDemo}
|
||||
>
|
||||
Activeer
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
)
|
||||
<>
|
||||
<EditProductButton product={product} isDemo={isDemo} />
|
||||
{product.id === activeProductId
|
||||
? <Badge className="bg-primary-container text-primary-container-foreground text-xs px-2 py-0">Actief</Badge>
|
||||
: (
|
||||
<DemoTooltip show={isDemo}>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); if (!isDemo) handleActivate(product.id) }}
|
||||
className="text-xs text-primary hover:underline disabled:opacity-40 disabled:cursor-not-allowed disabled:no-underline"
|
||||
disabled={isDemo}
|
||||
>
|
||||
Activeer
|
||||
</button>
|
||||
</DemoTooltip>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
{showArchived && (
|
||||
<DemoTooltip show={isDemo}>
|
||||
|
|
|
|||
|
|
@ -2,25 +2,37 @@
|
|||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { DemoTooltip } from '@/components/shared/demo-tooltip'
|
||||
import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
|
||||
|
||||
interface Props {
|
||||
product: ProductDialogProduct
|
||||
isDemo?: boolean
|
||||
size?: 'sm' | 'default'
|
||||
variant?: 'outline' | 'ghost'
|
||||
}
|
||||
|
||||
export function EditProductButton({ product }: Props) {
|
||||
export function EditProductButton({ product, isDemo = false, size = 'sm', variant = 'outline' }: Props) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" onClick={() => setOpen(true)}>
|
||||
Bewerken
|
||||
</Button>
|
||||
<DemoTooltip show={isDemo}>
|
||||
<Button
|
||||
variant={variant}
|
||||
size={size}
|
||||
onClick={(e) => { e.stopPropagation(); if (!isDemo) setOpen(true) }}
|
||||
disabled={isDemo}
|
||||
>
|
||||
Bewerken
|
||||
</Button>
|
||||
</DemoTooltip>
|
||||
<ProductDialog
|
||||
mode="edit"
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
product={product}
|
||||
isDemo={isDemo}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -51,9 +51,11 @@ export function NavBar({
|
|||
const result = await setActiveProductAction(productId)
|
||||
if (result?.error) {
|
||||
toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
|
||||
} else {
|
||||
router.push(`/products/${productId}`)
|
||||
return
|
||||
}
|
||||
const next = products.find(p => p.id === productId)
|
||||
toast.success(`Actief product: ${next?.name ?? 'gewijzigd'}`)
|
||||
router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue