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

feat(PBI-82): vervang inline checkboxlijst door Popover in idea-detail-layout

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scrum4Me Agent 2026-05-13 15:16:42 +02:00
parent 2b4b5bf719
commit fdde95654d
1 changed files with 38 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

57
components/ideas/idea-detail-layout.tsx
View file

@ -16,6 +16,7 @@ import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { getIdeaStatusBadge } from '@/lib/idea-status-colors'
import type { IdeaStatusApi } from '@/lib/idea-status'
import { isIdeaEditable } from '@/lib/idea-status'
@ -363,25 +364,43 @@ function IdeaFormSection({ idea, products, isDemo, pending, secondaryProducts }:
{products.filter((p) => p.id !== productId).length > 0 && (
<div className="space-y-1">
<label className="text-xs font-medium text-muted-foreground">Extra producten</label>
<div className="space-y-1">
{products
.filter((p) => p.id !== productId)
.map((p) => (
<label key={p.id} className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={selectedSecondary.includes(p.id)}
onChange={(e) =>
setSelectedSecondary((prev) =>
e.target.checked ? [...prev, p.id] : prev.filter((id) => id !== p.id),
)
}
disabled={!editable || pending || submitting}
/>
{p.name}
</label>
))}
</div>
<Popover>
<PopoverTrigger
render={
<Button
type="button"
variant="outline"
size="sm"
disabled={!editable || pending || submitting}
>
{selectedSecondary.length > 0
? `Extra producten (${selectedSecondary.length})`
: 'Extra producten'}
</Button>
}
/>
<PopoverContent align="start" className="w-64 space-y-1">
{products
.filter((p) => p.id !== productId)
.map((p) => (
<label key={p.id} className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={selectedSecondary.includes(p.id)}
onChange={(e) =>
setSelectedSecondary((prev) =>
e.target.checked
? [...prev, p.id]
: prev.filter((id) => id !== p.id),
)
}
disabled={!editable || pending || submitting}
/>
{p.name}
</label>
))}
</PopoverContent>
</Popover>
</div>
)}