Initial commit

src/pages/tldraw/CCExamMarker/CCExamMarker.tsx

@@ -0,0 +1,108 @@
+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>
+  );
+};