MOPC/MOPC-Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix round assignment pool, create-page parity, and file settings UX

Browse Source
This commit is contained in:
root
2026-02-12 17:25:30 +01:00
parent 52cdca1b85
commit 8a328357e3
7 changed files with 2233 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/components/admin/file-requirements-editor.tsx
View File

@@ -1,20 +1,20 @@
'use client'
"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 { 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'
} from "@/components/ui/card";
import {
Dialog,
DialogContent,
@@ -22,8 +22,8 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { toast } from 'sonner'
} from "@/components/ui/dialog";
import { toast } from "sonner";
import {
Plus,
Pencil,
@@ -33,103 +33,117 @@ import {
ArrowDown,
FileText,
Loader2,
} from 'lucide-react'
} 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' },
]
{ 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
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
roundId: string;
}
interface RequirementFormData {
name: string
description: string
acceptedMimeTypes: string[]
maxSizeMB: string
isRequired: boolean
name: string;
description: string;
acceptedMimeTypes: string[];
maxSizeMB: string;
isRequired: boolean;
}
const emptyForm: RequirementFormData = {
name: '',
description: '',
name: "",
description: "",
acceptedMimeTypes: [],
maxSizeMB: '',
maxSizeMB: "",
isRequired: true,
}
};
export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps) {
const utils = trpc.useUtils()
export function FileRequirementsEditor({
roundId,
}: FileRequirementsEditorProps) {
const utils = trpc.useUtils();
const { data: requirements = [], isLoading } = trpc.file.listRequirements.useQuery({ roundId })
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')
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')
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')
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 [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)
}
setEditingId(null);
setForm(emptyForm);
setDialogOpen(true);
};
const openEdit = (req: typeof requirements[number]) => {
setEditingId(req.id)
const openEdit = (req: (typeof requirements)[number]) => {
setEditingId(req.id);
setForm({
name: req.name,
description: req.description || '',
description: req.description || "",
acceptedMimeTypes: req.acceptedMimeTypes,
maxSizeMB: req.maxSizeMB?.toString() || '',
maxSizeMB: req.maxSizeMB?.toString() || "",
isRequired: req.isRequired,
})
setDialogOpen(true)
}
});
setDialogOpen(true);
};
const handleSave = async () => {
if (!form.name.trim()) {
toast.error('Name is required')
return
toast.error("Name is required");
return;
}
const maxSizeMB = form.maxSizeMB ? parseInt(form.maxSizeMB) : undefined
const maxSizeMB = form.maxSizeMB ? parseInt(form.maxSizeMB) : undefined;
if (editingId) {
await updateMutation.mutateAsync({
@@ -139,7 +153,7 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
acceptedMimeTypes: form.acceptedMimeTypes,
maxSizeMB: maxSizeMB || null,
isRequired: form.isRequired,
})
});
} else {
await createMutation.mutateAsync({
roundId,
@@ -149,26 +163,29 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
maxSizeMB,
isRequired: form.isRequired,
sortOrder: requirements.length,
})
});
}
setDialogOpen(false)
}
setDialogOpen(false);
};
const handleDelete = async (id: string) => {
await deleteMutation.mutateAsync({ id })
}
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]]
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) => ({
@@ -176,10 +193,10 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
acceptedMimeTypes: prev.acceptedMimeTypes.includes(mime)
? prev.acceptedMimeTypes.filter((m) => m !== mime)
: [...prev.acceptedMimeTypes, mime],
}))
}
}));
};
const isSaving = createMutation.isPending || updateMutation.isPending
const isSaving = createMutation.isPending || updateMutation.isPending;
return (
<Card>
@@ -194,7 +211,7 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
Define required files applicants must upload for this round
</CardDescription>
</div>
<Button onClick={openCreate} size="sm">
<Button type="button" onClick={openCreate} size="sm">
<Plus className="mr-1 h-4 w-4" />
Add Requirement
</Button>
@@ -207,7 +224,8 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
</div>
) : requirements.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
No file requirements defined. Applicants can still upload files freely.
No file requirements defined. Applicants can still upload files
freely.
</div>
) : (
<div className="space-y-2">
@@ -218,19 +236,21 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
>
<div className="flex flex-col gap-0.5">
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleMove(index, 'up')}
onClick={() => handleMove(index, "up")}
disabled={index === 0}
>
<ArrowUp className="h-3 w-3" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleMove(index, 'down')}
onClick={() => handleMove(index, "down")}
disabled={index === requirements.length - 1}
>
<ArrowDown className="h-3 w-3" />
@@ -240,12 +260,17 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<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
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>
<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) => (
@@ -261,10 +286,17 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(req)}>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => openEdit(req)}
>
<Pencil className="h-4 w-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 text-destructive hover:text-destructive"
@@ -284,7 +316,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>{editingId ? 'Edit' : 'Add'} File Requirement</DialogTitle>
<DialogTitle>
{editingId ? "Edit" : "Add"} File Requirement
</DialogTitle>
<DialogDescription>
Define what file applicants need to upload for this round.
</DialogDescription>
@@ -296,7 +330,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Input
id="req-name"
value={form.name}
onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
onChange={(e) =>
setForm((p) => ({ ...p, name: e.target.value }))
}
placeholder="e.g., Executive Summary"
/>
</div>
@@ -306,7 +342,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Textarea
id="req-desc"
value={form.description}
onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
onChange={(e) =>
setForm((p) => ({ ...p, description: e.target.value }))
}
placeholder="Describe what this file should contain..."
rows={3}
/>
@@ -318,7 +356,11 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
{MIME_TYPE_PRESETS.map((preset) => (
<Badge
key={preset.value}
variant={form.acceptedMimeTypes.includes(preset.value) ? 'default' : 'outline'}
variant={
form.acceptedMimeTypes.includes(preset.value)
? "default"
: "outline"
}
className="cursor-pointer"
onClick={() => toggleMimeType(preset.value)}
>
@@ -337,7 +379,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
id="req-size"
type="number"
value={form.maxSizeMB}
onChange={(e) => setForm((p) => ({ ...p, maxSizeMB: e.target.value }))}
onChange={(e) =>
setForm((p) => ({ ...p, maxSizeMB: e.target.value }))
}
placeholder="No limit"
min={1}
max={5000}
@@ -354,22 +398,28 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Switch
id="req-required"
checked={form.isRequired}
onCheckedChange={(checked) => setForm((p) => ({ ...p, isRequired: checked }))}
onCheckedChange={(checked) =>
setForm((p) => ({ ...p, isRequired: checked }))
}
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDialogOpen(false)}>
<Button
type="button"
variant="outline"
onClick={() => setDialogOpen(false)}
>
Cancel
</Button>
<Button onClick={handleSave} disabled={isSaving}>
<Button type="button" onClick={handleSave} disabled={isSaving}>
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{editingId ? 'Update' : 'Create'}
{editingId ? "Update" : "Create"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</Card>
)
);
}