376 lines
12 KiB
TypeScript
376 lines
12 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useState } from 'react'
|
||
|
|
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 { Badge } from '@/components/ui/badge'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from '@/components/ui/card'
|
||
|
|
import {
|
||
|
|
Dialog,
|
||
|
|
DialogContent,
|
||
|
|
DialogDescription,
|
||
|
|
DialogFooter,
|
||
|
|
DialogHeader,
|
||
|
|
DialogTitle,
|
||
|
|
} from '@/components/ui/dialog'
|
||
|
|
import { toast } from 'sonner'
|
||
|
|
import {
|
||
|
|
Plus,
|
||
|
|
Pencil,
|
||
|
|
Trash2,
|
||
|
|
GripVertical,
|
||
|
|
ArrowUp,
|
||
|
|
ArrowDown,
|
||
|
|
FileText,
|
||
|
|
Loader2,
|
||
|
|
} from 'lucide-react'
|
||
|
|
|
||
|
|
const MIME_TYPE_PRESETS = [
|
||
|
|
{ label: 'PDF', value: 'application/pdf' },
|
||
|
|
{ label: 'Images', value: 'image/*' },
|
||
|
|
{ label: 'Video', value: 'video/*' },
|
||
|
|
{ label: 'Word Documents', value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
|
||
|
|
{ label: 'Excel', value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
|
||
|
|
{ label: 'PowerPoint', value: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
|
||
|
|
]
|
||
|
|
|
||
|
|
function getMimeLabel(mime: string): string {
|
||
|
|
const preset = MIME_TYPE_PRESETS.find((p) => p.value === mime)
|
||
|
|
if (preset) return preset.label
|
||
|
|
if (mime.endsWith('/*')) return mime.replace('/*', '')
|
||
|
|
return mime
|
||
|
|
}
|
||
|
|
|
||
|
|
interface FileRequirementsEditorProps {
|
||
|
|
roundId: string
|
||
|
|
}
|
||
|
|
|
||
|
|
interface RequirementFormData {
|
||
|
|
name: string
|
||
|
|
description: string
|
||
|
|
acceptedMimeTypes: string[]
|
||
|
|
maxSizeMB: string
|
||
|
|
isRequired: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const emptyForm: RequirementFormData = {
|
||
|
|
name: '',
|
||
|
|
description: '',
|
||
|
|
acceptedMimeTypes: [],
|
||
|
|
maxSizeMB: '',
|
||
|
|
isRequired: true,
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps) {
|
||
|
|
const utils = trpc.useUtils()
|
||
|
|
|
||
|
|
const { data: requirements = [], isLoading } = trpc.file.listRequirements.useQuery({ roundId })
|
||
|
|
const createMutation = trpc.file.createRequirement.useMutation({
|
||
|
|
onSuccess: () => {
|
||
|
|
utils.file.listRequirements.invalidate({ roundId })
|
||
|
|
toast.success('Requirement created')
|
||
|
|
},
|
||
|
|
onError: (err) => toast.error(err.message),
|
||
|
|
})
|
||
|
|
const updateMutation = trpc.file.updateRequirement.useMutation({
|
||
|
|
onSuccess: () => {
|
||
|
|
utils.file.listRequirements.invalidate({ roundId })
|
||
|
|
toast.success('Requirement updated')
|
||
|
|
},
|
||
|
|
onError: (err) => toast.error(err.message),
|
||
|
|
})
|
||
|
|
const deleteMutation = trpc.file.deleteRequirement.useMutation({
|
||
|
|
onSuccess: () => {
|
||
|
|
utils.file.listRequirements.invalidate({ roundId })
|
||
|
|
toast.success('Requirement deleted')
|
||
|
|
},
|
||
|
|
onError: (err) => toast.error(err.message),
|
||
|
|
})
|
||
|
|
const reorderMutation = trpc.file.reorderRequirements.useMutation({
|
||
|
|
onSuccess: () => utils.file.listRequirements.invalidate({ roundId }),
|
||
|
|
onError: (err) => toast.error(err.message),
|
||
|
|
})
|
||
|
|
|
||
|
|
const [dialogOpen, setDialogOpen] = useState(false)
|
||
|
|
const [editingId, setEditingId] = useState<string | null>(null)
|
||
|
|
const [form, setForm] = useState<RequirementFormData>(emptyForm)
|
||
|
|
|
||
|
|
const openCreate = () => {
|
||
|
|
setEditingId(null)
|
||
|
|
setForm(emptyForm)
|
||
|
|
setDialogOpen(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
const openEdit = (req: typeof requirements[number]) => {
|
||
|
|
setEditingId(req.id)
|
||
|
|
setForm({
|
||
|
|
name: req.name,
|
||
|
|
description: req.description || '',
|
||
|
|
acceptedMimeTypes: req.acceptedMimeTypes,
|
||
|
|
maxSizeMB: req.maxSizeMB?.toString() || '',
|
||
|
|
isRequired: req.isRequired,
|
||
|
|
})
|
||
|
|
setDialogOpen(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleSave = async () => {
|
||
|
|
if (!form.name.trim()) {
|
||
|
|
toast.error('Name is required')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const maxSizeMB = form.maxSizeMB ? parseInt(form.maxSizeMB) : undefined
|
||
|
|
|
||
|
|
if (editingId) {
|
||
|
|
await updateMutation.mutateAsync({
|
||
|
|
id: editingId,
|
||
|
|
name: form.name.trim(),
|
||
|
|
description: form.description.trim() || null,
|
||
|
|
acceptedMimeTypes: form.acceptedMimeTypes,
|
||
|
|
maxSizeMB: maxSizeMB || null,
|
||
|
|
isRequired: form.isRequired,
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
await createMutation.mutateAsync({
|
||
|
|
roundId,
|
||
|
|
name: form.name.trim(),
|
||
|
|
description: form.description.trim() || undefined,
|
||
|
|
acceptedMimeTypes: form.acceptedMimeTypes,
|
||
|
|
maxSizeMB,
|
||
|
|
isRequired: form.isRequired,
|
||
|
|
sortOrder: requirements.length,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
setDialogOpen(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDelete = async (id: string) => {
|
||
|
|
await deleteMutation.mutateAsync({ id })
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleMove = async (index: number, direction: 'up' | 'down') => {
|
||
|
|
const newOrder = [...requirements]
|
||
|
|
const swapIndex = direction === 'up' ? index - 1 : index + 1
|
||
|
|
if (swapIndex < 0 || swapIndex >= newOrder.length) return
|
||
|
|
;[newOrder[index], newOrder[swapIndex]] = [newOrder[swapIndex], newOrder[index]]
|
||
|
|
await reorderMutation.mutateAsync({
|
||
|
|
roundId,
|
||
|
|
orderedIds: newOrder.map((r) => r.id),
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const toggleMimeType = (mime: string) => {
|
||
|
|
setForm((prev) => ({
|
||
|
|
...prev,
|
||
|
|
acceptedMimeTypes: prev.acceptedMimeTypes.includes(mime)
|
||
|
|
? prev.acceptedMimeTypes.filter((m) => m !== mime)
|
||
|
|
: [...prev.acceptedMimeTypes, mime],
|
||
|
|
}))
|
||
|
|
}
|
||
|
|
|
||
|
|
const isSaving = createMutation.isPending || updateMutation.isPending
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<CardTitle className="flex items-center gap-2">
|
||
|
|
<FileText className="h-5 w-5" />
|
||
|
|
File Requirements
|
||
|
|
</CardTitle>
|
||
|
|
<CardDescription>
|
||
|
|
Define required files applicants must upload for this round
|
||
|
|
</CardDescription>
|
||
|
|
</div>
|
||
|
|
<Button onClick={openCreate} size="sm">
|
||
|
|
<Plus className="mr-1 h-4 w-4" />
|
||
|
|
Add Requirement
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="flex items-center justify-center py-8">
|
||
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
) : requirements.length === 0 ? (
|
||
|
|
<div className="text-center py-8 text-muted-foreground">
|
||
|
|
No file requirements defined. Applicants can still upload files freely.
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-2">
|
||
|
|
{requirements.map((req, index) => (
|
||
|
|
<div
|
||
|
|
key={req.id}
|
||
|
|
className="flex items-center gap-3 rounded-lg border p-3 bg-background"
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-0.5">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-6 w-6"
|
||
|
|
onClick={() => handleMove(index, 'up')}
|
||
|
|
disabled={index === 0}
|
||
|
|
>
|
||
|
|
<ArrowUp className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-6 w-6"
|
||
|
|
onClick={() => handleMove(index, 'down')}
|
||
|
|
disabled={index === requirements.length - 1}
|
||
|
|
>
|
||
|
|
<ArrowDown className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<GripVertical className="h-4 w-4 text-muted-foreground shrink-0" />
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-center gap-2 mb-1">
|
||
|
|
<span className="font-medium truncate">{req.name}</span>
|
||
|
|
<Badge variant={req.isRequired ? 'destructive' : 'secondary'} className="text-xs shrink-0">
|
||
|
|
{req.isRequired ? 'Required' : 'Optional'}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
{req.description && (
|
||
|
|
<p className="text-sm text-muted-foreground line-clamp-1">{req.description}</p>
|
||
|
|
)}
|
||
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
||
|
|
{req.acceptedMimeTypes.map((mime) => (
|
||
|
|
<Badge key={mime} variant="outline" className="text-xs">
|
||
|
|
{getMimeLabel(mime)}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
{req.maxSizeMB && (
|
||
|
|
<Badge variant="outline" className="text-xs">
|
||
|
|
Max {req.maxSizeMB}MB
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1 shrink-0">
|
||
|
|
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(req)}>
|
||
|
|
<Pencil className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8 text-destructive hover:text-destructive"
|
||
|
|
onClick={() => handleDelete(req.id)}
|
||
|
|
disabled={deleteMutation.isPending}
|
||
|
|
>
|
||
|
|
<Trash2 className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</CardContent>
|
||
|
|
|
||
|
|
{/* Create/Edit Dialog */}
|
||
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||
|
|
<DialogContent className="max-w-md">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle>{editingId ? 'Edit' : 'Add'} File Requirement</DialogTitle>
|
||
|
|
<DialogDescription>
|
||
|
|
Define what file applicants need to upload for this round.
|
||
|
|
</DialogDescription>
|
||
|
|
</DialogHeader>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="req-name">Name *</Label>
|
||
|
|
<Input
|
||
|
|
id="req-name"
|
||
|
|
value={form.name}
|
||
|
|
onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
|
||
|
|
placeholder="e.g., Executive Summary"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="req-desc">Description</Label>
|
||
|
|
<Textarea
|
||
|
|
id="req-desc"
|
||
|
|
value={form.description}
|
||
|
|
onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
|
||
|
|
placeholder="Describe what this file should contain..."
|
||
|
|
rows={3}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label>Accepted File Types</Label>
|
||
|
|
<div className="flex flex-wrap gap-2">
|
||
|
|
{MIME_TYPE_PRESETS.map((preset) => (
|
||
|
|
<Badge
|
||
|
|
key={preset.value}
|
||
|
|
variant={form.acceptedMimeTypes.includes(preset.value) ? 'default' : 'outline'}
|
||
|
|
className="cursor-pointer"
|
||
|
|
onClick={() => toggleMimeType(preset.value)}
|
||
|
|
>
|
||
|
|
{preset.label}
|
||
|
|
</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
Leave empty to accept any file type
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="req-size">Max File Size (MB)</Label>
|
||
|
|
<Input
|
||
|
|
id="req-size"
|
||
|
|
type="number"
|
||
|
|
value={form.maxSizeMB}
|
||
|
|
onChange={(e) => setForm((p) => ({ ...p, maxSizeMB: e.target.value }))}
|
||
|
|
placeholder="No limit"
|
||
|
|
min={1}
|
||
|
|
max={5000}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="req-required">Required</Label>
|
||
|
|
<p className="text-xs text-muted-foreground">
|
||
|
|
Applicants must upload this file
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<Switch
|
||
|
|
id="req-required"
|
||
|
|
checked={form.isRequired}
|
||
|
|
onCheckedChange={(checked) => setForm((p) => ({ ...p, isRequired: checked }))}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<DialogFooter>
|
||
|
|
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button onClick={handleSave} disabled={isSaving}>
|
||
|
|
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
|
|
{editingId ? 'Update' : 'Create'}
|
||
|
|
</Button>
|
||
|
|
</DialogFooter>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|