feat: active PB indicator, Maak actief button and new product link in settings
This commit is contained in:
parent
89c6896f5a
commit
7887c2c24f
3 changed files with 79 additions and 37 deletions
|
|
@ -69,7 +69,7 @@ export default async function ProductBacklogPage({ params }: Props) {
|
|||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{user?.active_product_id !== id && (
|
||||
<ActivateProductButton productId={id} isDemo={isDemo} />
|
||||
<ActivateProductButton productId={id} isDemo={isDemo} redirectTo={`/products/${id}`} />
|
||||
)}
|
||||
{activeSprint ? (
|
||||
<Link href={`/products/${id}/sprint`} className="text-xs text-primary hover:underline font-medium">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { prisma } from '@/lib/prisma'
|
|||
import { RoleManager } from '@/components/settings/role-manager'
|
||||
import { LeaveProductButton } from '@/components/settings/leave-product-button'
|
||||
import { ProfileEditor } from '@/components/settings/profile-editor'
|
||||
import { ActivateProductButton } from '@/components/shared/activate-product-button'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default async function SettingsPage() {
|
||||
|
|
@ -13,7 +14,7 @@ export default async function SettingsPage() {
|
|||
const [user, userRoles, ownedProducts, memberships] = await Promise.all([
|
||||
prisma.user.findUnique({
|
||||
where: { id: session.userId },
|
||||
select: { username: true, email: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true },
|
||||
select: { username: true, email: true, bio: true, bio_detail: true, avatar_data: true, updated_at: true, active_product_id: true },
|
||||
}),
|
||||
prisma.userRole.findMany({ where: { user_id: session.userId } }),
|
||||
prisma.product.findMany({
|
||||
|
|
@ -33,7 +34,9 @@ export default async function SettingsPage() {
|
|||
| { kind: 'owner'; id: string; name: string }
|
||||
| { kind: 'member'; id: string; name: string; ownerUsername: string }
|
||||
|
||||
const productBacklogs: PbEntry[] = [
|
||||
const activeProductId = user?.active_product_id ?? null
|
||||
|
||||
const allBacklogs: PbEntry[] = [
|
||||
...ownedProducts.map(p => ({ kind: 'owner' as const, id: p.id, name: p.name })),
|
||||
...memberships.map(m => ({
|
||||
kind: 'member' as const,
|
||||
|
|
@ -43,6 +46,12 @@ export default async function SettingsPage() {
|
|||
})),
|
||||
]
|
||||
|
||||
// Active product floats to the top
|
||||
const productBacklogs = [
|
||||
...allBacklogs.filter(pb => pb.id === activeProductId),
|
||||
...allBacklogs.filter(pb => pb.id !== activeProductId),
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-2xl mx-auto w-full space-y-6">
|
||||
<h1 className="text-xl font-medium text-foreground">Instellingen</h1>
|
||||
|
|
@ -78,11 +87,21 @@ export default async function SettingsPage() {
|
|||
<RoleManager currentRoles={currentRoles} isDemo={session.isDemo ?? false} />
|
||||
|
||||
<div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-medium text-foreground">Product Backlogs</h2>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Alle product backlogs waarbij je betrokken bent.
|
||||
</p>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-sm font-medium text-foreground">Product Backlogs</h2>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Alle product backlogs waarbij je betrokken bent.
|
||||
</p>
|
||||
</div>
|
||||
{!session.isDemo && (
|
||||
<Link
|
||||
href="/products/new"
|
||||
className="shrink-0 text-xs text-primary hover:underline font-medium"
|
||||
>
|
||||
+ Nieuw product
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
{productBacklogs.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
|
|
@ -91,33 +110,52 @@ export default async function SettingsPage() {
|
|||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{productBacklogs.map(pb => (
|
||||
<li key={`${pb.kind}-${pb.id}`} className="flex items-center justify-between gap-3 rounded-lg bg-surface-container px-3 py-2.5">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href={`/products/${pb.id}`}
|
||||
className="text-sm font-medium text-foreground hover:text-primary hover:underline truncate"
|
||||
>
|
||||
{pb.name}
|
||||
</Link>
|
||||
<span className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-medium ${
|
||||
pb.kind === 'owner'
|
||||
? 'bg-primary-container text-primary-container-foreground'
|
||||
: 'bg-secondary-container text-secondary-container-foreground'
|
||||
}`}>
|
||||
{pb.kind === 'owner' ? 'Eigenaar' : 'Developer'}
|
||||
</span>
|
||||
{productBacklogs.map(pb => {
|
||||
const isActive = pb.id === activeProductId
|
||||
return (
|
||||
<li key={`${pb.kind}-${pb.id}`} className={`flex items-center justify-between gap-3 rounded-lg px-3 py-2.5 ${
|
||||
isActive ? 'bg-primary-container/30 border border-primary/20' : 'bg-surface-container'
|
||||
}`}>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Link
|
||||
href={`/products/${pb.id}`}
|
||||
className="text-sm font-medium text-foreground hover:text-primary hover:underline truncate"
|
||||
>
|
||||
{pb.name}
|
||||
</Link>
|
||||
<span className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-medium ${
|
||||
pb.kind === 'owner'
|
||||
? 'bg-primary-container text-primary-container-foreground'
|
||||
: 'bg-secondary-container text-secondary-container-foreground'
|
||||
}`}>
|
||||
{pb.kind === 'owner' ? 'Eigenaar' : 'Developer'}
|
||||
</span>
|
||||
{isActive && (
|
||||
<span className="shrink-0 text-xs px-1.5 py-0.5 rounded font-medium bg-primary text-primary-foreground">
|
||||
Actief
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{pb.kind === 'member' && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
|
||||
)}
|
||||
</div>
|
||||
{pb.kind === 'member' && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Eigenaar: {pb.ownerUsername}</p>
|
||||
)}
|
||||
</div>
|
||||
{pb.kind === 'member' && !session.isDemo && (
|
||||
<LeaveProductButton productId={pb.id} />
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{!isActive && (
|
||||
<ActivateProductButton
|
||||
productId={pb.id}
|
||||
isDemo={session.isDemo ?? false}
|
||||
label="Maak actief"
|
||||
/>
|
||||
)}
|
||||
{pb.kind === 'member' && !session.isDemo && (
|
||||
<LeaveProductButton productId={pb.id} />
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@ import { setActiveProductAction } from '@/actions/active-product'
|
|||
interface Props {
|
||||
productId: string
|
||||
isDemo: boolean
|
||||
/** Navigate here after activation. Omit to refresh the current page in place. */
|
||||
redirectTo?: string
|
||||
label?: string
|
||||
}
|
||||
|
||||
export function ActivateProductButton({ productId, isDemo }: Props) {
|
||||
export function ActivateProductButton({ productId, isDemo, redirectTo, label = 'Activeer' }: Props) {
|
||||
const router = useRouter()
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
|
|
@ -19,7 +22,8 @@ export function ActivateProductButton({ productId, isDemo }: Props) {
|
|||
startTransition(async () => {
|
||||
const result = await setActiveProductAction(productId)
|
||||
if (result?.error) toast.error(typeof result.error === 'string' ? result.error : 'Activeren mislukt')
|
||||
else router.push(`/products/${productId}`)
|
||||
else if (redirectTo) router.push(redirectTo)
|
||||
else router.refresh()
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +33,7 @@ export function ActivateProductButton({ productId, isDemo }: Props) {
|
|||
disabled={isPending}
|
||||
className="text-xs text-primary hover:underline font-medium disabled:opacity-50"
|
||||
>
|
||||
Activeer
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue