feat(exam): Assessment dashboard + /exam-marker route; remove old CCExamMarker (S4-8)
- New examRepository (R2.1 seam): the only module talking to /api/exam (Supabase JWT → Bearer, axios to API_BASE). list/get/create/archive templates. - ExamDashboardPage (/exam-marker): lists institute templates, create dialog, archive; cards link to setup (S4-9). Wrapped in ErrorBoundary (R6.4). - exam.types.ts mirrors the API contract. - Dashboard 'Exam Marker' quick action (top-level discovery, R1.3/R6.1). Note: the in-canvas TeacherNavigation is unsuitable for a nav section (it's the worker prev/next tab bar) — flagged; used the dashboard entry instead. - R1.1 removal: deleted src/pages/tldraw/CCExamMarker/ (old 3-PDF viewer) and the now-dead CCExamMarkerPanel + its wiring in CCPanel/BasePanel (examMarkerProps was only ever passed by the deleted page). - Fixed pre-existing broken AppRoutes test (missing TimetableListPage mock export). Build green (vite); AppRoutes route tests pass; typecheck clean for new files. Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
CC Worker
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
434643596e
commit
29554ebdbd
@@ -0,0 +1,209 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Alert,
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Container,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Grid,
|
||||
IconButton,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import ArchiveIcon from '@mui/icons-material/Archive';
|
||||
import AssignmentIcon from '@mui/icons-material/Assignment';
|
||||
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { examRepository } from '../../services/exam/examRepository';
|
||||
import type { ExamTemplate } from '../../types/exam.types';
|
||||
import { logger } from '../../debugConfig';
|
||||
|
||||
const STATUS_COLOR: Record<string, 'default' | 'info' | 'success' | 'warning'> = {
|
||||
draft: 'warning',
|
||||
ready: 'success',
|
||||
archived: 'default',
|
||||
};
|
||||
|
||||
const ExamDashboardPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { bootstrapData } = useAuth();
|
||||
const instituteId = bootstrapData?.active_institute?.id ?? undefined;
|
||||
|
||||
const [templates, setTemplates] = useState<ExamTemplate[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [title, setTitle] = useState('');
|
||||
const [subject, setSubject] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
setTemplates(await examRepository.listTemplates());
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.warn('cc-exam-marker', 'Failed to load templates', { message: msg });
|
||||
setError(msg);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load, instituteId]);
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!title.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const created = await examRepository.createTemplate({
|
||||
title: title.trim(),
|
||||
subject: subject.trim() || undefined,
|
||||
institute_id: instituteId,
|
||||
});
|
||||
setCreateOpen(false);
|
||||
setTitle('');
|
||||
setSubject('');
|
||||
navigate(`/exam-marker/${created.id}/setup`);
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.error('cc-exam-marker', 'Create template failed', { message: msg });
|
||||
setError(msg);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleArchive = async (id: string, ev: React.MouseEvent) => {
|
||||
ev.stopPropagation();
|
||||
try {
|
||||
await examRepository.archiveTemplate(id);
|
||||
setTemplates((prev) => prev.filter((t) => t.id !== id));
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : String(e);
|
||||
logger.error('cc-exam-marker', 'Archive failed', { message: msg });
|
||||
setError(msg);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="lg" sx={{ py: 6 }}>
|
||||
<Stack spacing={4}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 2 }}>
|
||||
<Box>
|
||||
<Typography variant="h3" component="h1" gutterBottom>
|
||||
Exam Marker
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary" sx={{ maxWidth: 560 }}>
|
||||
Build a template for an exam paper, then run marking batches against your classes.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Button variant="contained" startIcon={<AddIcon />} onClick={() => setCreateOpen(true)}>
|
||||
New template
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" onClose={() => setError(null)}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : templates.length === 0 ? (
|
||||
<Paper variant="outlined" sx={{ p: 6, textAlign: 'center' }}>
|
||||
<AssignmentIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 1 }} />
|
||||
<Typography variant="h6" gutterBottom>No exam templates yet</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
Create your first template to start mapping an exam paper.
|
||||
</Typography>
|
||||
<Button variant="outlined" startIcon={<AddIcon />} onClick={() => setCreateOpen(true)}>
|
||||
New template
|
||||
</Button>
|
||||
</Paper>
|
||||
) : (
|
||||
<Grid container spacing={3}>
|
||||
{templates.map((t) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={t.id}>
|
||||
<Paper
|
||||
elevation={2}
|
||||
sx={{ p: 3, height: '100%', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 1,
|
||||
transition: 'box-shadow 120ms', '&:hover': { boxShadow: 6 } }}
|
||||
onClick={() => navigate(`/exam-marker/${t.id}/setup`)}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
||||
<Typography variant="h6" sx={{ pr: 1 }}>{t.title}</Typography>
|
||||
<Tooltip title="Archive">
|
||||
<IconButton size="small" onClick={(e) => handleArchive(t.id, e)} aria-label="archive template">
|
||||
<ArchiveIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
{t.subject && (
|
||||
<Typography variant="body2" color="text.secondary">{t.subject}</Typography>
|
||||
)}
|
||||
{t.exam_code && (
|
||||
<Typography variant="caption" color="text.secondary">{t.exam_code}</Typography>
|
||||
)}
|
||||
<Box sx={{ mt: 'auto', pt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Chip size="small" label={t.status} color={STATUS_COLOR[t.status] ?? 'default'} variant="outlined" />
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{new Date(t.updated_at).toLocaleDateString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
<Dialog open={createOpen} onClose={() => (saving ? null : setCreateOpen(false))} fullWidth maxWidth="sm">
|
||||
<DialogTitle>New exam template</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} sx={{ mt: 1 }}>
|
||||
<TextField
|
||||
label="Title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
fullWidth
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Subject"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
fullWidth
|
||||
/>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => setCreateOpen(false)} disabled={saving}>Cancel</Button>
|
||||
<Button variant="contained" onClick={handleCreate} disabled={saving || !title.trim()}>
|
||||
{saving ? 'Creating…' : 'Create'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExamDashboardPage;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as ExamDashboardPage } from './ExamDashboardPage';
|
||||
@@ -1,92 +0,0 @@
|
||||
import { TLShapeId } from '@tldraw/tldraw';
|
||||
|
||||
export interface AnnotationData {
|
||||
studentIndex?: number; // undefined for exam/markscheme annotations
|
||||
pageIndex: number;
|
||||
shapeId: TLShapeId;
|
||||
bounds: {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
}
|
||||
|
||||
export class AnnotationManager {
|
||||
private examAnnotations: Set<TLShapeId> = new Set();
|
||||
private markSchemeAnnotations: Set<TLShapeId> = new Set();
|
||||
private studentAnnotations: Map<number, Set<TLShapeId>> = new Map();
|
||||
private annotationData: Map<TLShapeId, AnnotationData> = new Map();
|
||||
|
||||
addAnnotation(shapeId: TLShapeId, data: AnnotationData) {
|
||||
this.annotationData.set(shapeId, data);
|
||||
|
||||
if (data.studentIndex !== undefined) {
|
||||
// Student response annotation
|
||||
let studentSet = this.studentAnnotations.get(data.studentIndex);
|
||||
if (!studentSet) {
|
||||
studentSet = new Set();
|
||||
this.studentAnnotations.set(data.studentIndex, studentSet);
|
||||
}
|
||||
studentSet.add(shapeId);
|
||||
} else {
|
||||
// Exam or mark scheme annotation
|
||||
if (data.pageIndex < 0) {
|
||||
this.examAnnotations.add(shapeId);
|
||||
} else {
|
||||
this.markSchemeAnnotations.add(shapeId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
removeAnnotation(shapeId: TLShapeId) {
|
||||
const data = this.annotationData.get(shapeId);
|
||||
if (!data) return;
|
||||
|
||||
if (data.studentIndex !== undefined) {
|
||||
const studentSet = this.studentAnnotations.get(data.studentIndex);
|
||||
studentSet?.delete(shapeId);
|
||||
} else {
|
||||
if (data.pageIndex < 0) {
|
||||
this.examAnnotations.delete(shapeId);
|
||||
} else {
|
||||
this.markSchemeAnnotations.delete(shapeId);
|
||||
}
|
||||
}
|
||||
this.annotationData.delete(shapeId);
|
||||
}
|
||||
|
||||
getAnnotationsForStudent(studentIndex: number): TLShapeId[] {
|
||||
return Array.from(this.studentAnnotations.get(studentIndex) || []);
|
||||
}
|
||||
|
||||
getAnnotationsForExam(): TLShapeId[] {
|
||||
return Array.from(this.examAnnotations);
|
||||
}
|
||||
|
||||
getAnnotationsForMarkScheme(): TLShapeId[] {
|
||||
return Array.from(this.markSchemeAnnotations);
|
||||
}
|
||||
|
||||
getAnnotationData(shapeId: TLShapeId): AnnotationData | undefined {
|
||||
return this.annotationData.get(shapeId);
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.examAnnotations.clear();
|
||||
this.markSchemeAnnotations.clear();
|
||||
this.studentAnnotations.clear();
|
||||
this.annotationData.clear();
|
||||
}
|
||||
|
||||
// Future transcription support
|
||||
addTranscriptionToAnnotation(shapeId: TLShapeId) {
|
||||
const data = this.annotationData.get(shapeId);
|
||||
if (data) {
|
||||
this.annotationData.set(shapeId, {
|
||||
...data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
import 'tldraw/tldraw.css';
|
||||
import { CCPdfEditor } from './CCPdfEditor';
|
||||
import { CCPdfPicker } from './CCPdfPicker';
|
||||
import { ExamPdfState } from './types';
|
||||
import './cc-exam-marker.css';
|
||||
import { HEADER_HEIGHT } from '../../Layout';
|
||||
import { CCPanel } from '../../../utils/tldraw/ui-overrides/components/CCPanel';
|
||||
|
||||
export const CCExamMarker = () => {
|
||||
const [state, setState] = useState<ExamPdfState>({ phase: 'pick' });
|
||||
const [view, setView] = useState<'exam-and-markscheme' | 'student-responses'>('exam-and-markscheme');
|
||||
const [currentStudentIndex, setCurrentStudentIndex] = useState(0);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [isPinned, setIsPinned] = useState(false);
|
||||
|
||||
const handleViewChange = (newView: 'exam-and-markscheme' | 'student-responses') => {
|
||||
setView(newView);
|
||||
};
|
||||
|
||||
const handleNextStudent = () => {
|
||||
if (state.phase === 'edit' && 'studentResponses' in state && 'examPaper' in state) {
|
||||
const totalStudents = Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length);
|
||||
if (currentStudentIndex < totalStudents - 1) {
|
||||
setCurrentStudentIndex(prev => prev + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviousStudent = () => {
|
||||
if (currentStudentIndex > 0) {
|
||||
setCurrentStudentIndex(prev => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
top: `${HEADER_HEIGHT}px`,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: 'background.default',
|
||||
color: 'text.primary',
|
||||
}}>
|
||||
{state.phase === 'pick' ? (
|
||||
<CCPdfPicker
|
||||
onOpenPdfs={(pdfs) =>
|
||||
setState({
|
||||
phase: 'edit',
|
||||
examPaper: pdfs.examPaper,
|
||||
markScheme: pdfs.markScheme,
|
||||
studentResponses: pdfs.studentResponses,
|
||||
})
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Box sx={{ flex: 1, position: 'relative' }}>
|
||||
<Box sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
bgcolor: 'background.paper',
|
||||
}}>
|
||||
<CCPdfEditor
|
||||
examPaper={state.examPaper}
|
||||
markScheme={state.markScheme}
|
||||
studentResponses={state.studentResponses}
|
||||
currentView={view}
|
||||
currentStudentIndex={currentStudentIndex}
|
||||
onEditorMount={(editor) => {
|
||||
if (!editor) return null;
|
||||
const examMarkerProps = {
|
||||
editor,
|
||||
currentView: view,
|
||||
onViewChange: handleViewChange,
|
||||
currentStudentIndex,
|
||||
totalStudents: Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length),
|
||||
onPreviousStudent: handlePreviousStudent,
|
||||
onNextStudent: handleNextStudent,
|
||||
getCurrentPdf: () => {
|
||||
if (!editor) return null;
|
||||
const currentPageId = editor.getCurrentPageId();
|
||||
if (currentPageId.includes('exam-page')) {
|
||||
return state.examPaper;
|
||||
} else if (currentPageId.includes('mark-scheme-page')) {
|
||||
return state.markScheme;
|
||||
} else if (currentPageId.includes('student-response')) {
|
||||
return state.studentResponses;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
};
|
||||
return <CCPanel
|
||||
examMarkerProps={examMarkerProps}
|
||||
isExpanded={isExpanded}
|
||||
isPinned={isPinned}
|
||||
onExpandedChange={setIsExpanded}
|
||||
onPinnedChange={setIsPinned}
|
||||
/>;
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -1,114 +0,0 @@
|
||||
import { PDFDocument } from 'pdf-lib';
|
||||
import { useState } from 'react';
|
||||
import { Editor, exportToBlob } from '@tldraw/tldraw';
|
||||
import { Button } from '@mui/material';
|
||||
import { Pdf } from './types';
|
||||
|
||||
interface CCExportPdfButtonProps {
|
||||
editor: Editor;
|
||||
pdf: Pdf;
|
||||
}
|
||||
|
||||
export function CCExportPdfButton({ editor, pdf }: CCExportPdfButtonProps) {
|
||||
const [exportProgress, setExportProgress] = useState<number | null>(null);
|
||||
|
||||
const exportPdf = async (
|
||||
editor: Editor,
|
||||
{ name, source, pages }: Pdf,
|
||||
onProgress: (progress: number) => void
|
||||
) => {
|
||||
const totalThings = pages.length * 2 + 2;
|
||||
let progressCount = 0;
|
||||
const tickProgress = () => {
|
||||
progressCount++;
|
||||
onProgress(progressCount / totalThings);
|
||||
};
|
||||
|
||||
const pdf = await PDFDocument.load(source);
|
||||
tickProgress();
|
||||
const pdfPages = pdf.getPages();
|
||||
|
||||
if (pdfPages.length !== pages.length) {
|
||||
throw new Error('PDF page count mismatch');
|
||||
}
|
||||
|
||||
const pageShapeIds = new Set(pages.map((page) => page.shapeId));
|
||||
const allIds = Array.from(editor.getCurrentPageShapeIds()).filter(
|
||||
(id) => !pageShapeIds.has(id)
|
||||
);
|
||||
|
||||
for (let i = 0; i < pages.length; i++) {
|
||||
const page = pages[i];
|
||||
const pdfPage = pdfPages[i];
|
||||
const {bounds} = page;
|
||||
|
||||
const shapesInBounds = allIds.filter((id) => {
|
||||
const shapePageBounds = editor.getShapePageBounds(id);
|
||||
if (!shapePageBounds) return false;
|
||||
return shapePageBounds.collides(bounds);
|
||||
});
|
||||
|
||||
if (shapesInBounds.length === 0) {
|
||||
tickProgress();
|
||||
tickProgress();
|
||||
continue;
|
||||
}
|
||||
|
||||
const exportedPng = await exportToBlob({
|
||||
editor,
|
||||
ids: allIds,
|
||||
format: 'png',
|
||||
opts: { background: false, bounds: page.bounds, padding: 0, scale: 1 },
|
||||
});
|
||||
|
||||
tickProgress();
|
||||
|
||||
pdfPage.drawImage(await pdf.embedPng(await exportedPng.arrayBuffer()), {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pdfPage.getWidth(),
|
||||
height: pdfPage.getHeight(),
|
||||
});
|
||||
|
||||
tickProgress();
|
||||
}
|
||||
|
||||
const pdfBytes = await pdf.save();
|
||||
const url = URL.createObjectURL(
|
||||
new Blob([pdfBytes.buffer as ArrayBuffer], { type: 'application/pdf' })
|
||||
);
|
||||
tickProgress();
|
||||
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = name;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
className="CCExportPdfButton"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={async () => {
|
||||
setExportProgress(0);
|
||||
try {
|
||||
await exportPdf(editor, pdf, setExportProgress);
|
||||
} finally {
|
||||
setExportProgress(null);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 16,
|
||||
right: 16,
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
{exportProgress
|
||||
? `Exporting... ${Math.round(exportProgress * 100)}%`
|
||||
: 'Export PDF'}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,385 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
import { Editor, TLPageId, Box as TLBox } from '@tldraw/editor';
|
||||
import { Tldraw } from '@tldraw/tldraw';
|
||||
import { useCallback, useEffect, useState, useRef } from 'react';
|
||||
import { ExamPdfs } from './types';
|
||||
import { AnnotationManager, AnnotationData } from './AnnotationManager';
|
||||
import { logger } from '../../../debugConfig';
|
||||
|
||||
const PAGE_SPACING = 32; // Same spacing as the example
|
||||
|
||||
interface CCPdfEditorProps extends ExamPdfs {
|
||||
currentView: 'exam-and-markscheme' | 'student-responses';
|
||||
currentStudentIndex: number;
|
||||
onEditorMount: (editor: Editor) => React.ReactNode;
|
||||
}
|
||||
|
||||
export function CCPdfEditor({
|
||||
examPaper,
|
||||
markScheme,
|
||||
studentResponses,
|
||||
currentView,
|
||||
currentStudentIndex,
|
||||
onEditorMount,
|
||||
}: CCPdfEditorProps) {
|
||||
const [editor, setEditor] = useState<Editor | null>(null);
|
||||
const [pagesInitialized, setPagesInitialized] = useState(false);
|
||||
const annotationManager = useRef(new AnnotationManager());
|
||||
|
||||
const handleMount = useCallback((editor: Editor) => {
|
||||
setEditor(editor);
|
||||
onEditorMount(editor);
|
||||
|
||||
// Subscribe to shape changes
|
||||
editor.on('change', () => {
|
||||
const shapes = editor.getCurrentPageShapeIds();
|
||||
logger.debug('cc-exam-marker', '🔄 Shape change detected', {
|
||||
totalShapes: shapes.size,
|
||||
currentPage: editor.getCurrentPageId()
|
||||
});
|
||||
|
||||
shapes.forEach(shapeId => {
|
||||
const shape = editor.getShape(shapeId);
|
||||
if (shape && !shape.isLocked) { // Only track non-locked shapes (annotations)
|
||||
const bounds = editor.getShapePageBounds(shapeId);
|
||||
if (bounds) {
|
||||
const currentPageId = editor.getCurrentPageId();
|
||||
let annotationData: AnnotationData;
|
||||
|
||||
if (currentPageId.includes('student-response')) {
|
||||
const studentIndex = parseInt(currentPageId.split('-').pop() || '0', 10);
|
||||
|
||||
// Find which page this annotation belongs to by checking collision with page bounds
|
||||
const pageShapes = Array.from(shapes).filter(id => {
|
||||
const s = editor.getShape(id);
|
||||
return s?.isLocked; // Locked shapes are our PDF pages
|
||||
});
|
||||
|
||||
let pageIndex = -1; // Default to -1 if no collision found
|
||||
for (let i = 0; i < pageShapes.length; i++) {
|
||||
const pageShape = editor.getShape(pageShapes[i]);
|
||||
if (!pageShape) continue;
|
||||
|
||||
const pageBounds = editor.getShapePageBounds(pageShapes[i]);
|
||||
if (!pageBounds) continue;
|
||||
|
||||
// Check if the annotation's center point is within the page bounds
|
||||
const annotationCenter = {
|
||||
x: bounds.x + bounds.width / 2,
|
||||
y: bounds.y + bounds.height / 2
|
||||
};
|
||||
|
||||
if (annotationCenter.x >= pageBounds.x &&
|
||||
annotationCenter.x <= pageBounds.x + pageBounds.width &&
|
||||
annotationCenter.y >= pageBounds.y &&
|
||||
annotationCenter.y <= pageBounds.y + pageBounds.height) {
|
||||
pageIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
logger.debug('cc-exam-marker', '📏 Calculated page index', {
|
||||
shapeId,
|
||||
shapeBounds: bounds,
|
||||
pageIndex,
|
||||
studentIndex
|
||||
});
|
||||
|
||||
annotationData = {
|
||||
studentIndex,
|
||||
pageIndex,
|
||||
shapeId,
|
||||
bounds: {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: bounds.width,
|
||||
height: bounds.height,
|
||||
}
|
||||
};
|
||||
} else {
|
||||
// For exam/mark scheme, use current page type as index
|
||||
const pageIndex = currentPageId.includes('exam') ? -1 : 1;
|
||||
annotationData = {
|
||||
pageIndex,
|
||||
shapeId,
|
||||
bounds: {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: bounds.width,
|
||||
height: bounds.height,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
logger.debug('cc-exam-marker', '📝 Adding/updating annotation', {
|
||||
shapeId,
|
||||
annotationData,
|
||||
currentPage: currentPageId
|
||||
});
|
||||
|
||||
annotationManager.current.addAnnotation(shapeId, annotationData);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}, [onEditorMount]);
|
||||
|
||||
// Initial setup effect - runs only once when editor is mounted
|
||||
useEffect(() => {
|
||||
if (!editor || pagesInitialized) return;
|
||||
|
||||
const setupExamAndMarkScheme = async () => {
|
||||
const examPageId = 'page:exam-page' as TLPageId;
|
||||
const markSchemePageId = 'page:mark-scheme-page' as TLPageId;
|
||||
|
||||
// Calculate vertical layout for exam pages
|
||||
let top = 0;
|
||||
let widest = 0;
|
||||
const examPages = examPaper.pages.map(page => {
|
||||
const width = page.bounds.width;
|
||||
const height = page.bounds.height;
|
||||
const currentTop = top;
|
||||
top += height + PAGE_SPACING;
|
||||
widest = Math.max(widest, width);
|
||||
return { ...page, top: currentTop, width, height };
|
||||
});
|
||||
|
||||
// Center pages horizontally
|
||||
examPages.forEach(page => {
|
||||
page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
|
||||
});
|
||||
|
||||
// Create exam paper page
|
||||
editor.createPage({
|
||||
id: examPageId,
|
||||
name: 'Exam Paper',
|
||||
});
|
||||
editor.setCurrentPage(examPageId);
|
||||
|
||||
// Create assets and shapes for exam pages
|
||||
examPages.forEach((page) => {
|
||||
editor.createAssets([{
|
||||
id: page.assetId,
|
||||
typeName: 'asset',
|
||||
type: 'image',
|
||||
props: {
|
||||
w: page.bounds.width,
|
||||
h: page.bounds.height,
|
||||
name: 'PDF Page',
|
||||
src: page.src,
|
||||
isAnimated: false,
|
||||
mimeType: 'image/png',
|
||||
},
|
||||
meta: {},
|
||||
}]);
|
||||
|
||||
editor.createShape({
|
||||
id: page.shapeId,
|
||||
type: 'image',
|
||||
x: page.bounds.x,
|
||||
y: page.bounds.y,
|
||||
props: {
|
||||
w: page.bounds.width,
|
||||
h: page.bounds.height,
|
||||
assetId: page.assetId,
|
||||
},
|
||||
isLocked: true,
|
||||
});
|
||||
});
|
||||
|
||||
// Similar process for mark scheme pages
|
||||
let markSchemeTop = 0;
|
||||
const markSchemePages = markScheme.pages.map(page => {
|
||||
const width = page.bounds.width;
|
||||
const height = page.bounds.height;
|
||||
const currentTop = markSchemeTop;
|
||||
markSchemeTop += height + PAGE_SPACING;
|
||||
return {
|
||||
...page,
|
||||
bounds: new TLBox((widest - width) / 2, currentTop, width, height)
|
||||
};
|
||||
});
|
||||
|
||||
// Create mark scheme page
|
||||
editor.createPage({
|
||||
id: markSchemePageId,
|
||||
name: 'Mark Scheme',
|
||||
});
|
||||
editor.setCurrentPage(markSchemePageId);
|
||||
|
||||
// Create assets and shapes for mark scheme pages
|
||||
markSchemePages.forEach((page) => {
|
||||
editor.createAssets([{
|
||||
id: page.assetId,
|
||||
typeName: 'asset',
|
||||
type: 'image',
|
||||
props: {
|
||||
w: page.bounds.width,
|
||||
h: page.bounds.height,
|
||||
name: 'PDF Page',
|
||||
src: page.src,
|
||||
isAnimated: false,
|
||||
mimeType: 'image/png',
|
||||
},
|
||||
meta: {},
|
||||
}]);
|
||||
|
||||
editor.createShape({
|
||||
id: page.shapeId,
|
||||
type: 'image',
|
||||
x: page.bounds.x,
|
||||
y: page.bounds.y,
|
||||
props: {
|
||||
w: page.bounds.width,
|
||||
h: page.bounds.height,
|
||||
assetId: page.assetId,
|
||||
},
|
||||
isLocked: true,
|
||||
});
|
||||
});
|
||||
|
||||
// Go back to exam page
|
||||
editor.setCurrentPage(examPageId);
|
||||
};
|
||||
|
||||
const setupStudentResponses = async () => {
|
||||
const pagesPerStudent = examPaper.pages.length;
|
||||
const totalStudents = Math.floor(studentResponses.pages.length / pagesPerStudent);
|
||||
|
||||
for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
|
||||
const startPage = studentIndex * pagesPerStudent;
|
||||
const endPage = startPage + pagesPerStudent;
|
||||
const studentPageId = `page:student-response-${studentIndex}` as TLPageId;
|
||||
|
||||
// Calculate vertical layout
|
||||
let top = 0;
|
||||
let widest = 0;
|
||||
const studentPages = studentResponses.pages
|
||||
.slice(startPage, endPage)
|
||||
.map(page => {
|
||||
const width = page.bounds.width;
|
||||
const height = page.bounds.height;
|
||||
const currentTop = top;
|
||||
top += height + PAGE_SPACING;
|
||||
widest = Math.max(widest, width);
|
||||
return { ...page, top: currentTop, width, height };
|
||||
});
|
||||
|
||||
// Center pages horizontally
|
||||
studentPages.forEach(page => {
|
||||
page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
|
||||
});
|
||||
|
||||
// Create page for this student
|
||||
editor.createPage({
|
||||
id: studentPageId,
|
||||
name: `Student ${studentIndex + 1}`,
|
||||
});
|
||||
editor.setCurrentPage(studentPageId);
|
||||
|
||||
// Create assets and shapes
|
||||
studentPages.forEach((page) => {
|
||||
editor.createAssets([{
|
||||
id: page.assetId,
|
||||
typeName: 'asset',
|
||||
type: 'image',
|
||||
props: {
|
||||
w: page.bounds.width,
|
||||
h: page.bounds.height,
|
||||
name: 'PDF Page',
|
||||
src: page.src,
|
||||
isAnimated: false,
|
||||
mimeType: 'image/png',
|
||||
},
|
||||
meta: {},
|
||||
}]);
|
||||
|
||||
editor.createShape({
|
||||
id: page.shapeId,
|
||||
type: 'image',
|
||||
x: page.bounds.x,
|
||||
y: page.bounds.y,
|
||||
props: {
|
||||
w: page.bounds.width,
|
||||
h: page.bounds.height,
|
||||
assetId: page.assetId,
|
||||
},
|
||||
isLocked: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Initial setup of all pages
|
||||
const setup = async () => {
|
||||
await setupExamAndMarkScheme();
|
||||
await setupStudentResponses();
|
||||
setPagesInitialized(true);
|
||||
};
|
||||
|
||||
setup();
|
||||
}, [editor, pagesInitialized, examPaper, markScheme, studentResponses]);
|
||||
|
||||
// Effect to handle view changes and navigation
|
||||
useEffect(() => {
|
||||
if (!editor || !pagesInitialized) return;
|
||||
|
||||
// Switch to appropriate page based on current view
|
||||
const targetPageId = currentView === 'exam-and-markscheme'
|
||||
? ('page:exam-page' as TLPageId)
|
||||
: (`page:student-response-${currentStudentIndex}` as TLPageId);
|
||||
|
||||
logger.debug('cc-exam-marker', '🔄 Switching view', {
|
||||
currentView,
|
||||
currentStudentIndex,
|
||||
targetPageId
|
||||
});
|
||||
|
||||
editor.setCurrentPage(targetPageId);
|
||||
|
||||
// Update camera constraints for current page
|
||||
const currentPageBounds = Array.from(editor.getCurrentPageShapeIds()).reduce(
|
||||
(acc: TLBox | null, shapeId) => {
|
||||
const bounds = editor.getShapePageBounds(shapeId);
|
||||
return bounds ? (acc ? acc.union(bounds) : bounds) : acc;
|
||||
},
|
||||
null as TLBox | null
|
||||
);
|
||||
|
||||
if (currentPageBounds) {
|
||||
const isMobile = editor.getViewportScreenBounds().width < 840;
|
||||
editor.setCameraOptions({
|
||||
constraints: {
|
||||
bounds: currentPageBounds,
|
||||
padding: { x: isMobile ? 16 : 164, y: 64 },
|
||||
origin: { x: 0.5, y: 0 },
|
||||
initialZoom: 'fit-x-100',
|
||||
baseZoom: 'default',
|
||||
behavior: 'contain',
|
||||
},
|
||||
});
|
||||
editor.setCamera(editor.getCamera(), { reset: true });
|
||||
}
|
||||
}, [editor, pagesInitialized, currentView, currentStudentIndex]);
|
||||
|
||||
// Expose annotationManager to parent through onEditorMount
|
||||
useEffect(() => {
|
||||
if (editor) {
|
||||
onEditorMount(editor);
|
||||
// @ts-expect-error - Adding custom property to editor for CCExamMarkerPanel access
|
||||
editor.annotationManager = annotationManager.current;
|
||||
}
|
||||
}, [editor, onEditorMount]);
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%', height: '100%', position: 'relative' }}>
|
||||
<Tldraw
|
||||
onMount={handleMount}
|
||||
components={{
|
||||
InFrontOfTheCanvas: () => onEditorMount(editor!)
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,210 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { Box, Button, Stack, Typography } from '@mui/material';
|
||||
import { AssetRecordType, Box as TLBox, createShapeId } from '@tldraw/editor';
|
||||
import { ExamPdfs, Pdf, PdfPage } from './types';
|
||||
|
||||
interface CCPdfPickerProps {
|
||||
onOpenPdfs: (pdfs: ExamPdfs) => void;
|
||||
}
|
||||
|
||||
const pageSpacing = 32;
|
||||
|
||||
export function CCPdfPicker({ onOpenPdfs }: CCPdfPickerProps) {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [selectedPdfs, setSelectedPdfs] = useState<Partial<ExamPdfs>>({});
|
||||
|
||||
async function loadPdf(name: string, source: ArrayBuffer): Promise<Pdf> {
|
||||
const PdfJS = await import('pdfjs-dist');
|
||||
PdfJS.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString();
|
||||
|
||||
const pdf = await PdfJS.getDocument(source.slice()).promise;
|
||||
const pages: PdfPage[] = [];
|
||||
const canvas = window.document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context) throw new Error('Failed to create canvas context');
|
||||
|
||||
const visualScale = 1.5;
|
||||
const scale = window.devicePixelRatio;
|
||||
let top = 0;
|
||||
let widest = 0;
|
||||
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
const page = await pdf.getPage(i);
|
||||
const viewport = page.getViewport({ scale: scale * visualScale });
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport,
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
const width = viewport.width / scale;
|
||||
const height = viewport.height / scale;
|
||||
|
||||
pages.push({
|
||||
src: canvas.toDataURL(),
|
||||
bounds: new TLBox(0, top, width, height),
|
||||
assetId: AssetRecordType.createId(),
|
||||
shapeId: createShapeId(),
|
||||
});
|
||||
|
||||
top += height + pageSpacing;
|
||||
widest = Math.max(widest, width);
|
||||
}
|
||||
|
||||
canvas.width = 0;
|
||||
canvas.height = 0;
|
||||
|
||||
for (const page of pages) {
|
||||
page.bounds.x = (widest - page.bounds.width) / 2;
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
pages,
|
||||
source,
|
||||
};
|
||||
}
|
||||
|
||||
const handleFileSelect = async (type: keyof ExamPdfs, file: File) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const pdf = await loadPdf(file.name, await file.arrayBuffer());
|
||||
|
||||
// Validate student responses page count
|
||||
if (type === 'studentResponses' && selectedPdfs.examPaper) {
|
||||
const examPageCount = selectedPdfs.examPaper.pages.length;
|
||||
if (pdf.pages.length % examPageCount !== 0) {
|
||||
alert(`Student responses PDF must have a number of pages that is a multiple of the exam paper's ${examPageCount} pages.\n\nStudent responses PDF has ${pdf.pages.length} pages, which is not a multiple of ${examPageCount}.`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setSelectedPdfs((prev) => ({ ...prev, [type]: pdf }));
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF:', error);
|
||||
alert('Error loading PDF (mismatch between responses and exam paper). Please try again.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const createFileInput = (type: keyof ExamPdfs) => {
|
||||
const input = window.document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'application/pdf';
|
||||
input.addEventListener('change', async (e) => {
|
||||
const fileList = (e.target as HTMLInputElement).files;
|
||||
if (!fileList || fileList.length === 0) return;
|
||||
await handleFileSelect(type, fileList[0]);
|
||||
});
|
||||
input.click();
|
||||
};
|
||||
|
||||
const allPdfsSelected = () => {
|
||||
return (
|
||||
selectedPdfs.examPaper &&
|
||||
selectedPdfs.markScheme &&
|
||||
selectedPdfs.studentResponses
|
||||
);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Box className="CCPdfPicker" sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}}>
|
||||
<Typography>Loading...</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box className="CCPdfPicker" sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}}>
|
||||
<Stack
|
||||
spacing={4}
|
||||
alignItems="center"
|
||||
sx={{
|
||||
maxWidth: '800px',
|
||||
width: '100%',
|
||||
p: 3
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5">Select PDF Files</Typography>
|
||||
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
width: '100%',
|
||||
justifyContent: 'center',
|
||||
gap: 4 // Using MUI's spacing unit (1 unit = 8px, so 4 = 32px)
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant={selectedPdfs.examPaper ? 'contained' : 'outlined'}
|
||||
onClick={() => createFileInput('examPaper')}
|
||||
sx={{
|
||||
minWidth: '180px',
|
||||
height: '48px'
|
||||
}}
|
||||
>
|
||||
{selectedPdfs.examPaper ? '✓ Exam Paper' : 'Select Exam Paper'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={selectedPdfs.markScheme ? 'contained' : 'outlined'}
|
||||
onClick={() => createFileInput('markScheme')}
|
||||
sx={{
|
||||
minWidth: '180px',
|
||||
height: '48px'
|
||||
}}
|
||||
>
|
||||
{selectedPdfs.markScheme ? '✓ Mark Scheme' : 'Select Mark Scheme'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={selectedPdfs.studentResponses ? 'contained' : 'outlined'}
|
||||
onClick={() => createFileInput('studentResponses')}
|
||||
sx={{
|
||||
minWidth: '180px',
|
||||
height: '48px'
|
||||
}}
|
||||
>
|
||||
{selectedPdfs.studentResponses ? '✓ Student Responses' : 'Select Student Responses'}
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
{allPdfsSelected() && (
|
||||
<Box sx={{ mt: 4, width: '100%', display: 'flex', justifyContent: 'center' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => onOpenPdfs(selectedPdfs as ExamPdfs)}
|
||||
sx={{
|
||||
minWidth: '180px',
|
||||
height: '48px'
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
.CCExamMarker {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.CCExamMarker .CCPdfPicker {
|
||||
position: absolute;
|
||||
inset: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.CCExamMarker .CCPdfBgRenderer {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.CCExamMarker .CCPdfBgRenderer img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.CCExamMarker .PageOverlayScreen-screen {
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
fill: var(--color-background);
|
||||
fill-opacity: 0.8;
|
||||
stroke: none;
|
||||
}
|
||||
|
||||
.CCExamMarker .PageOverlayScreen-outline {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
|
||||
.CCExamMarker .CCExportPdfButton {
|
||||
font: inherit;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
color: var(--color-selected-contrast);
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
margin: 6px;
|
||||
margin-bottom: 0;
|
||||
pointer-events: all;
|
||||
z-index: var(--layer-panels);
|
||||
border: 2px solid var(--color-background);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.CCExamMarker .CCExportPdfButton:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { Box, TLAssetId, TLShapeId } from '@tldraw/tldraw';
|
||||
|
||||
export interface PdfPage {
|
||||
src: string;
|
||||
bounds: Box;
|
||||
assetId: TLAssetId;
|
||||
shapeId: TLShapeId;
|
||||
}
|
||||
|
||||
export interface Pdf {
|
||||
name: string;
|
||||
pages: PdfPage[];
|
||||
source: string | ArrayBuffer;
|
||||
}
|
||||
|
||||
export interface ExamPdfs {
|
||||
examPaper: Pdf;
|
||||
markScheme: Pdf;
|
||||
studentResponses: Pdf;
|
||||
}
|
||||
|
||||
export type ExamPdfState =
|
||||
| {
|
||||
phase: 'pick';
|
||||
}
|
||||
| {
|
||||
phase: 'edit';
|
||||
examPaper: Pdf;
|
||||
markScheme: Pdf;
|
||||
studentResponses: Pdf;
|
||||
};
|
||||
|
||||
export interface StudentResponse {
|
||||
studentId: string;
|
||||
pageStart: number;
|
||||
pageEnd: number;
|
||||
}
|
||||
|
||||
export interface ExamMetadata {
|
||||
totalPages: number;
|
||||
pagesPerStudent: number;
|
||||
totalStudents: number;
|
||||
studentResponses: StudentResponse[];
|
||||
}
|
||||
@@ -85,6 +85,12 @@ const DashboardPage: React.FC = () => {
|
||||
>
|
||||
Open workspace
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/exam-marker')}
|
||||
>
|
||||
Exam Marker
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => navigate('/calendar')}
|
||||
|
||||
Reference in New Issue
Block a user