feat(ST-abeu63oz): /admin/products pagina met CRUD-dialogen en ledenbeheer-link
- app/(app)/admin/_components/ProductFormDialog.tsx: gedeeld create/edit-formulier (naam, description, repo_url, definition_of_done, auto_pr, eigenaar-dropdown bij create) - app/(app)/admin/products/page.tsx: server component, query products+user+_count, tabel met naam-link naar /admin/products/[id], eigenaar, leden/PBI-count, archived-badge - app/(app)/admin/products/_components/ProductActions.tsx: client Bewerken/Archiveer/Verwijder
This commit is contained in:
Scrum4Me Agent
parent
b9e6e725b6
commit
222c702fda
3 changed files with 291 additions and 0 deletions
122
app/(app)/admin/_components/ProductFormDialog.tsx
Normal file
122
app/(app)/admin/_components/ProductFormDialog.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useTransition } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from '@/components/ui/dialog'
|
||||
import { adminCreateProductAction, adminUpdateProductAction } from '@/actions/admin/products'
|
||||
|
||||
type User = { id: string; username: string }
|
||||
|
||||
type ProductData = {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
repo_url: string | null
|
||||
definition_of_done: string
|
||||
auto_pr: boolean
|
||||
user_id: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
mode: 'create' | 'edit'
|
||||
product?: ProductData
|
||||
allUsers: User[]
|
||||
trigger: React.ReactNode
|
||||
}
|
||||
|
||||
export function ProductFormDialog({ mode, product, allUsers, trigger }: Props) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [pending, startTransition] = useTransition()
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault()
|
||||
const fd = new FormData(e.currentTarget)
|
||||
const data = {
|
||||
name: fd.get('name') as string,
|
||||
description: fd.get('description') as string || undefined,
|
||||
repo_url: fd.get('repo_url') as string || undefined,
|
||||
definition_of_done: fd.get('definition_of_done') as string,
|
||||
auto_pr: fd.get('auto_pr') === 'on',
|
||||
owner_user_id: fd.get('owner_user_id') as string,
|
||||
}
|
||||
|
||||
setError(null)
|
||||
startTransition(async () => {
|
||||
try {
|
||||
if (mode === 'create') {
|
||||
await adminCreateProductAction(data)
|
||||
} else {
|
||||
await adminUpdateProductAction(product!.id, data)
|
||||
}
|
||||
setOpen(false)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Onbekende fout')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger render={<span />}>{trigger}</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{mode === 'create' ? 'Nieuw product' : 'Product bewerken'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="name" className="text-sm font-medium">Naam</label>
|
||||
<Input id="name" name="name" required maxLength={100} defaultValue={product?.name} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="description" className="text-sm font-medium">Omschrijving</label>
|
||||
<Input id="description" name="description" defaultValue={product?.description ?? ''} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="repo_url" className="text-sm font-medium">Repo URL</label>
|
||||
<Input id="repo_url" name="repo_url" type="url" defaultValue={product?.repo_url ?? ''} placeholder="https://github.com/..." />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="definition_of_done" className="text-sm font-medium">Definition of Done</label>
|
||||
<Input id="definition_of_done" name="definition_of_done" required defaultValue={product?.definition_of_done} />
|
||||
</div>
|
||||
{mode === 'create' && (
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="owner_user_id" className="text-sm font-medium">Eigenaar</label>
|
||||
<select id="owner_user_id" name="owner_user_id" required className="w-full border border-border rounded-md px-2 py-1 text-sm bg-background text-foreground">
|
||||
{allUsers.map(u => (
|
||||
<option key={u.id} value={u.id}>{u.username}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
{mode === 'edit' && (
|
||||
<input type="hidden" name="owner_user_id" value={product?.user_id} />
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<input id="auto_pr" name="auto_pr" type="checkbox" defaultChecked={product?.auto_pr} className="rounded border-border" />
|
||||
<label htmlFor="auto_pr" className="text-sm">Auto PR</label>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="text-sm text-destructive bg-destructive/10 rounded px-3 py-2">{error}</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" type="button" />}>Annuleer</DialogClose>
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? 'Opslaan…' : mode === 'create' ? 'Aanmaken' : 'Opslaan'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
76
app/(app)/admin/products/_components/ProductActions.tsx
Normal file
76
app/(app)/admin/products/_components/ProductActions.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
'use client'
|
||||
|
||||
import { useTransition, useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
} from '@/components/ui/dialog'
|
||||
import { adminArchiveProductAction, adminDeleteProductAction } from '@/actions/admin/products'
|
||||
import { ProductFormDialog } from '../../_components/ProductFormDialog'
|
||||
|
||||
type User = { id: string; username: string }
|
||||
type Product = {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
repo_url: string | null
|
||||
definition_of_done: string
|
||||
auto_pr: boolean
|
||||
archived: boolean
|
||||
user_id: string
|
||||
}
|
||||
|
||||
export function ProductActions({ product, allUsers }: { product: Product; allUsers: User[] }) {
|
||||
const [deleteOpen, setDeleteOpen] = useState(false)
|
||||
const [pending, startTransition] = useTransition()
|
||||
|
||||
function handleArchive() {
|
||||
startTransition(async () => {
|
||||
await adminArchiveProductAction(product.id, !product.archived)
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
startTransition(async () => {
|
||||
await adminDeleteProductAction(product.id)
|
||||
setDeleteOpen(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 justify-end">
|
||||
<ProductFormDialog
|
||||
mode="edit"
|
||||
product={product}
|
||||
allUsers={allUsers}
|
||||
trigger={<Button variant="outline" size="sm">Bewerken</Button>}
|
||||
/>
|
||||
<Button variant="outline" size="sm" onClick={handleArchive} disabled={pending}>
|
||||
{product.archived ? 'Herstel' : 'Archiveer'}
|
||||
</Button>
|
||||
<Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||
<DialogTrigger render={<Button variant="destructive" size="sm" />}>Verwijder</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Product verwijderen</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Weet je zeker dat je <strong>{product.name}</strong> wilt verwijderen? Alle PBIs, stories en taken worden ook verwijderd.
|
||||
</p>
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button variant="outline" />}>Annuleer</DialogClose>
|
||||
<Button variant="destructive" onClick={handleDelete} disabled={pending}>
|
||||
{pending ? 'Verwijderen…' : 'Verwijderen'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
93
app/(app)/admin/products/page.tsx
Normal file
93
app/(app)/admin/products/page.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import Link from 'next/link'
|
||||
import { requireAdmin } from '@/lib/auth-guard'
|
||||
import { prisma } from '@/lib/prisma'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { ProductFormDialog } from '../_components/ProductFormDialog'
|
||||
import { ProductActions } from './_components/ProductActions'
|
||||
|
||||
export default async function AdminProductsPage() {
|
||||
await requireAdmin()
|
||||
|
||||
const [products, allUsers] = await Promise.all([
|
||||
prisma.product.findMany({
|
||||
include: {
|
||||
user: { select: { username: true } },
|
||||
_count: { select: { members: true, pbis: true } },
|
||||
},
|
||||
orderBy: { created_at: 'desc' },
|
||||
}),
|
||||
prisma.user.findMany({
|
||||
select: { id: true, username: true },
|
||||
orderBy: { username: 'asc' },
|
||||
}),
|
||||
])
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-xl font-semibold text-foreground">Producten</h1>
|
||||
<ProductFormDialog
|
||||
mode="create"
|
||||
allUsers={allUsers}
|
||||
trigger={<Button size="sm">Nieuw product</Button>}
|
||||
/>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Naam</TableHead>
|
||||
<TableHead>Eigenaar</TableHead>
|
||||
<TableHead>Leden</TableHead>
|
||||
<TableHead>PBIs</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Aangemaakt</TableHead>
|
||||
<TableHead className="text-right">Acties</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{products.map(p => (
|
||||
<TableRow key={p.id}>
|
||||
<TableCell>
|
||||
<Link href={`/admin/products/${p.id}`} className="font-medium text-primary hover:underline">
|
||||
{p.name}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{p.user.username}</TableCell>
|
||||
<TableCell>{p._count.members}</TableCell>
|
||||
<TableCell>{p._count.pbis}</TableCell>
|
||||
<TableCell>
|
||||
{p.archived ? (
|
||||
<Badge variant="outline">Gearchiveerd</Badge>
|
||||
) : (
|
||||
<Badge className="bg-status-done/15 text-status-done border-status-done/30">Actief</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
{new Date(p.created_at).toLocaleDateString('nl-NL')}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<ProductActions product={p} allUsers={allUsers} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{products.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center text-muted-foreground py-8">
|
||||
Geen producten gevonden.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue