feat: ProductMember — team management for product backlogs
- Add ProductMember model (many-to-many User ↔ Product) - Add productAccessFilter helper (owner OR member OR clause) - Replace all ownership checks across actions and API routes - Add addProductMemberAction / removeProductMemberAction / leaveProductAction - Add TeamManager component in product settings (owner adds/removes Developers) - Add LeaveProductButton in user settings (member leaves a product team) - Regenerate Prisma Client after schema migration Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
fc12e3cc64
commit
357b1e32e8
18 changed files with 370 additions and 82 deletions
75
components/products/team-manager.tsx
Normal file
75
components/products/team-manager.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
'use client'
|
||||
|
||||
import { useActionState, useState, useTransition } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { addProductMemberAction, removeProductMemberAction } from '@/actions/products'
|
||||
|
||||
interface Member {
|
||||
id: string
|
||||
username: string
|
||||
}
|
||||
|
||||
interface TeamManagerProps {
|
||||
productId: string
|
||||
members: Member[]
|
||||
}
|
||||
|
||||
export function TeamManager({ productId, members }: TeamManagerProps) {
|
||||
const [state, formAction, isPending] = useActionState(addProductMemberAction, null)
|
||||
const [removingId, setRemovingId] = useState<string | null>(null)
|
||||
const [, startTransition] = useTransition()
|
||||
|
||||
function handleRemove(memberId: string) {
|
||||
setRemovingId(memberId)
|
||||
startTransition(async () => {
|
||||
await removeProductMemberAction(productId, memberId)
|
||||
setRemovingId(null)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{members.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Nog geen teamleden toegevoegd.</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{members.map(m => (
|
||||
<li key={m.id} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2">
|
||||
<span className="text-sm font-medium text-foreground">{m.username}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-error hover:bg-error/10 h-7 px-2 text-xs"
|
||||
disabled={removingId === m.id}
|
||||
onClick={() => handleRemove(m.id)}
|
||||
>
|
||||
{removingId === m.id ? 'Verwijderen…' : 'Verwijder'}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
<form action={formAction} className="flex gap-2">
|
||||
<input type="hidden" name="productId" value={productId} />
|
||||
<Input
|
||||
name="username"
|
||||
placeholder="Gebruikersnaam van Developer"
|
||||
className="flex-1"
|
||||
disabled={isPending}
|
||||
/>
|
||||
<Button type="submit" size="sm" disabled={isPending}>
|
||||
{isPending ? 'Toevoegen…' : 'Toevoegen'}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{state && 'error' in state && typeof state.error === 'string' && (
|
||||
<p className="text-xs text-error">{state.error}</p>
|
||||
)}
|
||||
{state && 'success' in state && (
|
||||
<p className="text-xs text-success">Teamlid toegevoegd.</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue