482 lines
16 KiB
TypeScript
482 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { useParams, useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import dynamic from 'next/dynamic'
|
|
import { trpc } from '@/lib/trpc/client'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@/components/ui/alert-dialog'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
|
|
import { toast } from 'sonner'
|
|
import {
|
|
ArrowLeft,
|
|
Save,
|
|
Loader2,
|
|
FileText,
|
|
Video,
|
|
Link as LinkIcon,
|
|
File,
|
|
Trash2,
|
|
Eye,
|
|
AlertCircle,
|
|
} from 'lucide-react'
|
|
|
|
// Dynamically import BlockEditor to avoid SSR issues
|
|
const BlockEditor = dynamic(
|
|
() => import('@/components/shared/block-editor').then((mod) => mod.BlockEditor),
|
|
{
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="min-h-[300px] rounded-lg border bg-muted/20 animate-pulse" />
|
|
),
|
|
}
|
|
)
|
|
|
|
const resourceTypeOptions = [
|
|
{ value: 'DOCUMENT', label: 'Document', icon: FileText },
|
|
{ value: 'PDF', label: 'PDF', icon: FileText },
|
|
{ value: 'VIDEO', label: 'Video', icon: Video },
|
|
{ value: 'LINK', label: 'External Link', icon: LinkIcon },
|
|
{ value: 'OTHER', label: 'Other', icon: File },
|
|
]
|
|
|
|
const cohortOptions = [
|
|
{ value: 'ALL', label: 'All Members', description: 'Visible to everyone' },
|
|
{ value: 'SEMIFINALIST', label: 'Semi-finalists', description: 'Visible to semi-finalist evaluators' },
|
|
{ value: 'FINALIST', label: 'Finalists', description: 'Visible to finalist evaluators only' },
|
|
]
|
|
|
|
export default function EditLearningResourcePage() {
|
|
const params = useParams()
|
|
const router = useRouter()
|
|
const resourceId = params.id as string
|
|
|
|
// Fetch resource
|
|
const { data: resource, isLoading, error } = trpc.learningResource.get.useQuery({ id: resourceId })
|
|
const { data: stats } = trpc.learningResource.getStats.useQuery({ id: resourceId })
|
|
|
|
// Form state
|
|
const [title, setTitle] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [contentJson, setContentJson] = useState<string>('')
|
|
const [resourceType, setResourceType] = useState<string>('DOCUMENT')
|
|
const [cohortLevel, setCohortLevel] = useState<string>('ALL')
|
|
const [externalUrl, setExternalUrl] = useState('')
|
|
const [isPublished, setIsPublished] = useState(false)
|
|
const [programId, setProgramId] = useState<string | null>(null)
|
|
|
|
// API
|
|
const { data: programs } = trpc.program.list.useQuery({ status: 'ACTIVE' })
|
|
const utils = trpc.useUtils()
|
|
const updateResource = trpc.learningResource.update.useMutation({
|
|
onSuccess: () => {
|
|
utils.learningResource.get.invalidate({ id: resourceId })
|
|
utils.learningResource.list.invalidate()
|
|
},
|
|
})
|
|
const deleteResource = trpc.learningResource.delete.useMutation({
|
|
onSuccess: () => utils.learningResource.list.invalidate(),
|
|
})
|
|
const getUploadUrl = trpc.learningResource.getUploadUrl.useMutation()
|
|
|
|
// Populate form when resource loads
|
|
useEffect(() => {
|
|
if (resource) {
|
|
setTitle(resource.title)
|
|
setDescription(resource.description || '')
|
|
setContentJson(resource.contentJson ? JSON.stringify(resource.contentJson) : '')
|
|
setResourceType(resource.resourceType)
|
|
setCohortLevel(resource.cohortLevel)
|
|
setExternalUrl(resource.externalUrl || '')
|
|
setIsPublished(resource.isPublished)
|
|
setProgramId(resource.programId)
|
|
}
|
|
}, [resource])
|
|
|
|
// Handle file upload for BlockNote
|
|
const handleUploadFile = async (file: File): Promise<string> => {
|
|
try {
|
|
const { url, bucket, objectKey } = await getUploadUrl.mutateAsync({
|
|
fileName: file.name,
|
|
mimeType: file.type,
|
|
})
|
|
|
|
await fetch(url, {
|
|
method: 'PUT',
|
|
body: file,
|
|
headers: {
|
|
'Content-Type': file.type,
|
|
},
|
|
})
|
|
|
|
const minioEndpoint = process.env.NEXT_PUBLIC_MINIO_ENDPOINT || 'http://localhost:9000'
|
|
return `${minioEndpoint}/${bucket}/${objectKey}`
|
|
} catch (error) {
|
|
toast.error('Failed to upload file')
|
|
throw error
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
if (!title.trim()) {
|
|
toast.error('Please enter a title')
|
|
return
|
|
}
|
|
|
|
if (resourceType === 'LINK' && !externalUrl) {
|
|
toast.error('Please enter an external URL')
|
|
return
|
|
}
|
|
|
|
try {
|
|
await updateResource.mutateAsync({
|
|
id: resourceId,
|
|
title,
|
|
description: description || undefined,
|
|
contentJson: contentJson ? JSON.parse(contentJson) : undefined,
|
|
resourceType: resourceType as 'PDF' | 'VIDEO' | 'DOCUMENT' | 'LINK' | 'OTHER',
|
|
cohortLevel: cohortLevel as 'ALL' | 'SEMIFINALIST' | 'FINALIST',
|
|
externalUrl: externalUrl || null,
|
|
isPublished,
|
|
})
|
|
|
|
toast.success('Resource updated successfully')
|
|
router.push('/admin/learning')
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to update resource')
|
|
}
|
|
}
|
|
|
|
const handleDelete = async () => {
|
|
try {
|
|
await deleteResource.mutateAsync({ id: resourceId })
|
|
toast.success('Resource deleted successfully')
|
|
router.push('/admin/learning')
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to delete resource')
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Skeleton className="h-9 w-40" />
|
|
</div>
|
|
<Skeleton className="h-8 w-64" />
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<Skeleton className="h-64 w-full" />
|
|
<Skeleton className="h-96 w-full" />
|
|
</div>
|
|
<div className="space-y-6">
|
|
<Skeleton className="h-48 w-full" />
|
|
<Skeleton className="h-32 w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error || !resource) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertTitle>Resource not found</AlertTitle>
|
|
<AlertDescription>
|
|
The resource you're looking for does not exist.
|
|
</AlertDescription>
|
|
</Alert>
|
|
<Button asChild>
|
|
<Link href="/admin/learning">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Learning Hub
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-4">
|
|
<Button variant="ghost" asChild className="-ml-4">
|
|
<Link href="/admin/learning">
|
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
|
Back to Learning Hub
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight">Edit Resource</h1>
|
|
<p className="text-muted-foreground">
|
|
Update this learning resource
|
|
</p>
|
|
</div>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button variant="outline" className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Delete
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete Resource</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to delete "{resource.title}"? This action
|
|
cannot be undone.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleDelete}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
>
|
|
{deleteResource.isPending ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : null}
|
|
Delete
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{/* Main content */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
{/* Basic Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Resource Details</CardTitle>
|
|
<CardDescription>
|
|
Basic information about this resource
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title">Title *</Label>
|
|
<Input
|
|
id="title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="e.g., Ocean Conservation Best Practices"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Short Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Brief description of this resource"
|
|
rows={2}
|
|
maxLength={500}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="type">Resource Type</Label>
|
|
<Select value={resourceType} onValueChange={setResourceType}>
|
|
<SelectTrigger id="type">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{resourceTypeOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
<div className="flex items-center gap-2">
|
|
<option.icon className="h-4 w-4" />
|
|
{option.label}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cohort">Access Level</Label>
|
|
<Select value={cohortLevel} onValueChange={setCohortLevel}>
|
|
<SelectTrigger id="cohort">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{cohortOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{resourceType === 'LINK' && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="url">External URL *</Label>
|
|
<Input
|
|
id="url"
|
|
type="url"
|
|
value={externalUrl}
|
|
onChange={(e) => setExternalUrl(e.target.value)}
|
|
placeholder="https://example.com/resource"
|
|
/>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Content Editor */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Content</CardTitle>
|
|
<CardDescription>
|
|
Rich text content with images and videos. Type / for commands.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<BlockEditor
|
|
key={resourceId}
|
|
initialContent={contentJson || undefined}
|
|
onChange={setContentJson}
|
|
onUploadFile={handleUploadFile}
|
|
className="min-h-[300px]"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-6">
|
|
{/* Publish Settings */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Publish Settings</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label htmlFor="published">Published</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
Make this resource visible to jury members
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="published"
|
|
checked={isPublished}
|
|
onCheckedChange={setIsPublished}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="program">Program</Label>
|
|
<Select
|
|
value={programId || 'global'}
|
|
onValueChange={(v) => setProgramId(v === 'global' ? null : v)}
|
|
>
|
|
<SelectTrigger id="program">
|
|
<SelectValue placeholder="Select program" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="global">Global (All Programs)</SelectItem>
|
|
{programs?.map((program) => (
|
|
<SelectItem key={program.id} value={program.id}>
|
|
{program.year} Edition
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Statistics */}
|
|
{stats && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Eye className="h-5 w-5" />
|
|
Statistics
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p className="text-2xl font-semibold">{stats.totalViews}</p>
|
|
<p className="text-sm text-muted-foreground">Total views</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-semibold">{stats.uniqueUsers}</p>
|
|
<p className="text-sm text-muted-foreground">Unique users</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col gap-2">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={updateResource.isPending || !title.trim()}
|
|
className="w-full"
|
|
>
|
|
{updateResource.isPending ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="mr-2 h-4 w-4" />
|
|
)}
|
|
Save Changes
|
|
</Button>
|
|
<Button variant="outline" asChild className="w-full">
|
|
<Link href="/admin/learning">Cancel</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|