325 lines
11 KiB
TypeScript
325 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { 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 { toast } from 'sonner'
|
|
import { ArrowLeft, Save, Loader2, FileText, Video, Link as LinkIcon, File } 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 NewLearningResourcePage() {
|
|
const router = useRouter()
|
|
|
|
// 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)
|
|
|
|
// API
|
|
const { data: programs } = trpc.program.list.useQuery({ status: 'ACTIVE' })
|
|
const [programId, setProgramId] = useState<string | null>(null)
|
|
|
|
const createResource = trpc.learningResource.create.useMutation()
|
|
const getUploadUrl = trpc.learningResource.getUploadUrl.useMutation()
|
|
|
|
// 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,
|
|
})
|
|
|
|
// Upload to MinIO
|
|
await fetch(url, {
|
|
method: 'PUT',
|
|
body: file,
|
|
headers: {
|
|
'Content-Type': file.type,
|
|
},
|
|
})
|
|
|
|
// Return the MinIO URL
|
|
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 createResource.mutateAsync({
|
|
programId,
|
|
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 || undefined,
|
|
isPublished,
|
|
})
|
|
|
|
toast.success('Resource created successfully')
|
|
router.push('/admin/learning')
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : 'Failed to create resource')
|
|
}
|
|
}
|
|
|
|
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>
|
|
<h1 className="text-2xl font-semibold tracking-tight">Add Resource</h1>
|
|
<p className="text-muted-foreground">
|
|
Create a new learning resource for jury members
|
|
</p>
|
|
</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
|
|
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.name} {program.year}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Actions */}
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex flex-col gap-2">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={createResource.isPending || !title.trim()}
|
|
className="w-full"
|
|
>
|
|
{createResource.isPending ? (
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
) : (
|
|
<Save className="mr-2 h-4 w-4" />
|
|
)}
|
|
Create Resource
|
|
</Button>
|
|
<Button variant="outline" asChild className="w-full">
|
|
<Link href="/admin/learning">Cancel</Link>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|