532 lines
25 KiB
TypeScript
532 lines
25 KiB
TypeScript
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import {
|
|
Box, Typography, Button, CircularProgress, Alert, Chip, TextField,
|
|
IconButton, Tooltip, Divider, Paper, Select, MenuItem, FormControl,
|
|
InputLabel, Switch, FormControlLabel, Dialog, DialogTitle,
|
|
DialogContent, DialogActions,
|
|
} from '@mui/material';
|
|
import {
|
|
ArrowBack, Add, Delete, AutoAwesome, DragIndicator, Save,
|
|
LibraryBooks, LinkOff,
|
|
} from '@mui/icons-material';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
|
|
const API_BASE = import.meta.env.VITE_API_BASE || import.meta.env.VITE_API_URL || '/api';
|
|
|
|
// ─── Types ────────────────────────────────────────────────────────────────────
|
|
|
|
interface Objective {
|
|
id: string;
|
|
text: string;
|
|
bloom_level?: string;
|
|
order: number;
|
|
}
|
|
|
|
interface Activity {
|
|
id: string;
|
|
section: string;
|
|
title: string;
|
|
description: string;
|
|
duration_minutes?: number;
|
|
order: number;
|
|
}
|
|
|
|
interface LessonPlan {
|
|
id: string;
|
|
title: string;
|
|
subject: string | null;
|
|
year_group: string | null;
|
|
duration_minutes: number | null;
|
|
context_notes: string | null;
|
|
objectives: Objective[];
|
|
activities: Activity[];
|
|
is_public: boolean;
|
|
creator_id: string;
|
|
}
|
|
|
|
// ─── Constants ────────────────────────────────────────────────────────────────
|
|
|
|
const BLOOM_LEVELS = ['remember', 'understand', 'apply', 'analyse', 'evaluate', 'create'];
|
|
const SECTION_SUGGESTIONS = ['Starter', 'Main', 'Plenary', 'Extension', 'Assessment', 'Discussion'];
|
|
const BLOOM_COLORS: Record<string, string> = {
|
|
remember: '#90caf9', understand: '#a5d6a7', apply: '#fff176',
|
|
analyse: '#ffcc80', evaluate: '#ef9a9a', create: '#ce93d8',
|
|
};
|
|
|
|
// ─── AI Suggest button ────────────────────────────────────────────────────────
|
|
|
|
function SuggestButton({ onClick, loading }: { onClick: () => void; loading: boolean }) {
|
|
return (
|
|
<Tooltip title="AI suggest">
|
|
<span>
|
|
<IconButton size="small" onClick={onClick} disabled={loading} color="primary" sx={{ p: 0.5 }}>
|
|
{loading ? <CircularProgress size={16} /> : <AutoAwesome fontSize="small" />}
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
// ─── Main page ────────────────────────────────────────────────────────────────
|
|
|
|
const LessonPlanDetailPage: React.FC = () => {
|
|
const { planId } = useParams<{ planId: string }>();
|
|
const navigate = useNavigate();
|
|
const { accessToken } = useAuth();
|
|
|
|
const [plan, setPlan] = useState<LessonPlan | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [saving, setSaving] = useState(false);
|
|
const [saved, setSaved] = useState(false);
|
|
const [suggestingField, setSuggestingField] = useState<string | null>(null);
|
|
|
|
// Local editable state (mirrors plan)
|
|
const [title, setTitle] = useState('');
|
|
const [subject, setSubject] = useState('');
|
|
const [yearGroup, setYearGroup] = useState('');
|
|
const [duration, setDuration] = useState('');
|
|
const [contextNotes, setContextNotes] = useState('');
|
|
const [isPublic, setIsPublic] = useState(false);
|
|
const [objectives, setObjectives] = useState<Objective[]>([]);
|
|
const [activities, setActivities] = useState<Activity[]>([]);
|
|
|
|
const autoSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
const load = useCallback(async () => {
|
|
if (!accessToken || !planId) return;
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const res = await fetch(`${API_BASE}/lessons/plans/${planId}`, {
|
|
headers: { Authorization: `Bearer ${accessToken}` },
|
|
});
|
|
const data = await res.json();
|
|
if (data.id) {
|
|
setPlan(data);
|
|
setTitle(data.title || '');
|
|
setSubject(data.subject || '');
|
|
setYearGroup(data.year_group || '');
|
|
setDuration(data.duration_minutes?.toString() || '');
|
|
setContextNotes(data.context_notes || '');
|
|
setIsPublic(data.is_public || false);
|
|
setObjectives(data.objectives || []);
|
|
setActivities(data.activities || []);
|
|
} else {
|
|
setError(data.detail || 'Plan not found');
|
|
}
|
|
} catch (e: any) {
|
|
setError(e.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [accessToken, planId]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
// ── Save ──────────────────────────────────────────────────────────────────
|
|
|
|
const save = useCallback(async (
|
|
overrides?: Partial<{ title: string; subject: string; year_group: string; duration_minutes: number | null; context_notes: string; is_public: boolean; objectives: Objective[]; activities: Activity[] }>
|
|
) => {
|
|
if (!accessToken || !planId) return;
|
|
setSaving(true);
|
|
setSaved(false);
|
|
try {
|
|
await fetch(`${API_BASE}/lessons/plans/${planId}`, {
|
|
method: 'PATCH',
|
|
headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
title,
|
|
subject: subject || null,
|
|
year_group: yearGroup || null,
|
|
duration_minutes: duration ? parseInt(duration, 10) : null,
|
|
context_notes: contextNotes || null,
|
|
is_public: isPublic,
|
|
objectives,
|
|
activities,
|
|
...overrides,
|
|
}),
|
|
});
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 2000);
|
|
} catch (e: any) {
|
|
setError(e.message);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [accessToken, planId, title, subject, yearGroup, duration, contextNotes, isPublic, objectives, activities]);
|
|
|
|
const scheduleAutoSave = useCallback(() => {
|
|
if (autoSaveTimer.current) clearTimeout(autoSaveTimer.current);
|
|
autoSaveTimer.current = setTimeout(() => save(), 1500);
|
|
}, [save]);
|
|
|
|
// ── Objectives ────────────────────────────────────────────────────────────
|
|
|
|
const addObjective = () => {
|
|
const next: Objective = { id: crypto.randomUUID(), text: '', bloom_level: undefined, order: objectives.length };
|
|
setObjectives(prev => [...prev, next]);
|
|
};
|
|
|
|
const updateObjective = (id: string, patch: Partial<Objective>) => {
|
|
setObjectives(prev => prev.map(o => o.id === id ? { ...o, ...patch } : o));
|
|
scheduleAutoSave();
|
|
};
|
|
|
|
const removeObjective = (id: string) => {
|
|
setObjectives(prev => prev.filter(o => o.id !== id).map((o, i) => ({ ...o, order: i })));
|
|
scheduleAutoSave();
|
|
};
|
|
|
|
// ── Activities ────────────────────────────────────────────────────────────
|
|
|
|
const addActivity = () => {
|
|
const next: Activity = {
|
|
id: crypto.randomUUID(), section: 'Main', title: '', description: '', order: activities.length,
|
|
};
|
|
setActivities(prev => [...prev, next]);
|
|
};
|
|
|
|
const updateActivity = (id: string, patch: Partial<Activity>) => {
|
|
setActivities(prev => prev.map(a => a.id === id ? { ...a, ...patch } : a));
|
|
scheduleAutoSave();
|
|
};
|
|
|
|
const removeActivity = (id: string) => {
|
|
setActivities(prev => prev.filter(a => a.id !== id).map((a, i) => ({ ...a, order: i })));
|
|
scheduleAutoSave();
|
|
};
|
|
|
|
// ── AI Suggest ────────────────────────────────────────────────────────────
|
|
|
|
const suggest = async (field: string, targetId?: string) => {
|
|
if (!accessToken || !planId) return;
|
|
const key = targetId ? `${field}_${targetId}` : field;
|
|
setSuggestingField(key);
|
|
try {
|
|
const body: Record<string, any> = {
|
|
field,
|
|
context: contextNotes,
|
|
objective_texts: objectives.map(o => o.text).filter(Boolean),
|
|
};
|
|
if (field === 'activity_description' && targetId) {
|
|
const act = activities.find(a => a.id === targetId);
|
|
if (act) body.activity_section = act.section;
|
|
}
|
|
const res = await fetch(`${API_BASE}/lessons/plans/${planId}/suggest`, {
|
|
method: 'POST',
|
|
headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
});
|
|
const data = await res.json();
|
|
if (data.suggestion) {
|
|
if (field === 'objectives') {
|
|
addObjective();
|
|
setObjectives(prev => {
|
|
const updated = [...prev];
|
|
updated[updated.length - 1] = { ...updated[updated.length - 1], text: data.suggestion };
|
|
return updated;
|
|
});
|
|
} else if (field === 'activity_description' && targetId) {
|
|
updateActivity(targetId, { description: data.suggestion });
|
|
} else if (field === 'title') {
|
|
setTitle(data.suggestion);
|
|
scheduleAutoSave();
|
|
}
|
|
}
|
|
} catch (e: any) {
|
|
setError('AI suggest failed: ' + e.message);
|
|
} finally {
|
|
setSuggestingField(null);
|
|
}
|
|
};
|
|
|
|
// ── Render ────────────────────────────────────────────────────────────────
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error && !plan) {
|
|
return (
|
|
<Box sx={{ p: 3 }}>
|
|
<Alert severity="error">{error}</Alert>
|
|
<Button sx={{ mt: 2 }} startIcon={<ArrowBack />} onClick={() => navigate('/lesson-plans')}>
|
|
Back to Plans
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ p: 3, maxWidth: 860, mx: 'auto' }}>
|
|
{/* Header */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
|
|
<Button size="small" startIcon={<ArrowBack />} onClick={() => navigate('/lesson-plans')}>
|
|
Lesson Plans
|
|
</Button>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
{saved && <Typography variant="caption" color="success.main">Saved</Typography>}
|
|
<Button
|
|
variant="contained"
|
|
size="small"
|
|
startIcon={saving ? <CircularProgress size={14} /> : <Save />}
|
|
onClick={() => save()}
|
|
disabled={saving}
|
|
>
|
|
Save
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
{error && (
|
|
<Alert severity="error" onClose={() => setError(null)} sx={{ mb: 2 }}>{error}</Alert>
|
|
)}
|
|
|
|
{/* Title row */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2.5 }}>
|
|
<TextField
|
|
value={title}
|
|
onChange={e => { setTitle(e.target.value); scheduleAutoSave(); }}
|
|
variant="standard"
|
|
fullWidth
|
|
inputProps={{ style: { fontSize: '1.5rem', fontWeight: 700 } }}
|
|
placeholder="Lesson title…"
|
|
/>
|
|
<SuggestButton
|
|
onClick={() => suggest('title')}
|
|
loading={suggestingField === 'title'}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Metadata row */}
|
|
<Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap', mb: 3, alignItems: 'center' }}>
|
|
<TextField
|
|
label="Subject"
|
|
value={subject}
|
|
onChange={e => { setSubject(e.target.value); scheduleAutoSave(); }}
|
|
size="small"
|
|
sx={{ width: 200 }}
|
|
/>
|
|
<TextField
|
|
label="Year group"
|
|
value={yearGroup}
|
|
onChange={e => { setYearGroup(e.target.value); scheduleAutoSave(); }}
|
|
size="small"
|
|
sx={{ width: 120 }}
|
|
/>
|
|
<TextField
|
|
label="Duration (min)"
|
|
value={duration}
|
|
onChange={e => { setDuration(e.target.value); scheduleAutoSave(); }}
|
|
size="small"
|
|
type="number"
|
|
inputProps={{ min: 1, max: 300 }}
|
|
sx={{ width: 140 }}
|
|
/>
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
size="small"
|
|
checked={isPublic}
|
|
onChange={e => { setIsPublic(e.target.checked); scheduleAutoSave(); }}
|
|
/>
|
|
}
|
|
label={<Typography variant="caption">Public</Typography>}
|
|
sx={{ ml: 0.5 }}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Context notes */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<Typography variant="subtitle2" fontWeight={600} sx={{ mb: 0.75 }}>
|
|
Context / notes
|
|
</Typography>
|
|
<TextField
|
|
value={contextNotes}
|
|
onChange={e => { setContextNotes(e.target.value); scheduleAutoSave(); }}
|
|
multiline
|
|
minRows={2}
|
|
fullWidth
|
|
size="small"
|
|
placeholder="Class context, prior knowledge, SEN considerations, links to curriculum…"
|
|
/>
|
|
</Box>
|
|
|
|
<Divider sx={{ mb: 3 }} />
|
|
|
|
{/* Objectives */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.25 }}>
|
|
<Typography variant="subtitle1" fontWeight={700}>
|
|
Learning objectives
|
|
</Typography>
|
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
|
<SuggestButton
|
|
onClick={() => suggest('objectives')}
|
|
loading={suggestingField === 'objectives'}
|
|
/>
|
|
<Tooltip title="Add objective">
|
|
<IconButton size="small" onClick={addObjective}>
|
|
<Add fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
|
|
{objectives.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1.5, textAlign: 'center' }}>
|
|
No objectives yet — add one or use ✨ to suggest.
|
|
</Typography>
|
|
) : (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
|
{objectives.map((obj, idx) => (
|
|
<Paper key={obj.id} variant="outlined" sx={{ p: 1.25 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
|
|
<DragIndicator sx={{ color: 'text.disabled', mt: 0.5, flexShrink: 0 }} fontSize="small" />
|
|
<TextField
|
|
value={obj.text}
|
|
onChange={e => updateObjective(obj.id, { text: e.target.value })}
|
|
fullWidth
|
|
size="small"
|
|
multiline
|
|
placeholder={`Objective ${idx + 1}…`}
|
|
variant="standard"
|
|
/>
|
|
<FormControl size="small" sx={{ minWidth: 120, flexShrink: 0 }}>
|
|
<Select
|
|
value={obj.bloom_level || ''}
|
|
onChange={e => updateObjective(obj.id, { bloom_level: e.target.value || undefined })}
|
|
displayEmpty
|
|
variant="standard"
|
|
renderValue={v => v ? (
|
|
<Chip
|
|
label={v as string}
|
|
size="small"
|
|
sx={{ height: 18, fontSize: '0.65rem', bgcolor: BLOOM_COLORS[v as string] || 'grey.200' }}
|
|
/>
|
|
) : <Typography variant="caption" color="text.disabled">Bloom level</Typography>}
|
|
>
|
|
<MenuItem value=""><em>None</em></MenuItem>
|
|
{BLOOM_LEVELS.map(l => (
|
|
<MenuItem key={l} value={l}>
|
|
<Chip
|
|
label={l}
|
|
size="small"
|
|
sx={{ height: 18, fontSize: '0.65rem', bgcolor: BLOOM_COLORS[l] || 'grey.200' }}
|
|
/>
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
<Tooltip title="Remove">
|
|
<IconButton size="small" color="error" onClick={() => removeObjective(obj.id)} sx={{ flexShrink: 0, p: 0.25 }}>
|
|
<Delete fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Paper>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
<Divider sx={{ mb: 3 }} />
|
|
|
|
{/* Activities */}
|
|
<Box sx={{ mb: 4 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1.25 }}>
|
|
<Typography variant="subtitle1" fontWeight={700}>
|
|
Activities
|
|
</Typography>
|
|
<Tooltip title="Add activity">
|
|
<IconButton size="small" onClick={addActivity}>
|
|
<Add fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
|
|
{activities.length === 0 ? (
|
|
<Typography variant="body2" color="text.secondary" sx={{ py: 1.5, textAlign: 'center' }}>
|
|
No activities yet — add one to structure your lesson.
|
|
</Typography>
|
|
) : (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
|
|
{activities.map((act, idx) => (
|
|
<Paper key={act.id} variant="outlined" sx={{ p: 1.5 }}>
|
|
{/* Activity header */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}>
|
|
<DragIndicator sx={{ color: 'text.disabled', flexShrink: 0 }} fontSize="small" />
|
|
|
|
{/* Section selector */}
|
|
<TextField
|
|
value={act.section}
|
|
onChange={e => updateActivity(act.id, { section: e.target.value })}
|
|
size="small"
|
|
label="Section"
|
|
sx={{ width: 140, flexShrink: 0 }}
|
|
select={false}
|
|
inputProps={{ list: `section-suggestions-${act.id}` }}
|
|
placeholder="Starter / Main…"
|
|
/>
|
|
<datalist id={`section-suggestions-${act.id}`}>
|
|
{SECTION_SUGGESTIONS.map(s => <option key={s} value={s} />)}
|
|
</datalist>
|
|
|
|
<TextField
|
|
value={act.title}
|
|
onChange={e => updateActivity(act.id, { title: e.target.value })}
|
|
size="small"
|
|
label="Activity title"
|
|
fullWidth
|
|
placeholder={`Activity ${idx + 1}…`}
|
|
/>
|
|
<TextField
|
|
value={act.duration_minutes?.toString() || ''}
|
|
onChange={e => updateActivity(act.id, { duration_minutes: e.target.value ? parseInt(e.target.value, 10) : undefined })}
|
|
size="small"
|
|
label="Min"
|
|
type="number"
|
|
inputProps={{ min: 1 }}
|
|
sx={{ width: 72, flexShrink: 0 }}
|
|
/>
|
|
<Tooltip title="Remove">
|
|
<IconButton size="small" color="error" onClick={() => removeActivity(act.id)} sx={{ flexShrink: 0, p: 0.25 }}>
|
|
<Delete fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
|
|
{/* Description */}
|
|
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5, pl: 3.5 }}>
|
|
<TextField
|
|
value={act.description}
|
|
onChange={e => updateActivity(act.id, { description: e.target.value })}
|
|
size="small"
|
|
multiline
|
|
minRows={2}
|
|
fullWidth
|
|
placeholder="Describe what the teacher and pupils do…"
|
|
/>
|
|
<SuggestButton
|
|
onClick={() => suggest('activity_description', act.id)}
|
|
loading={suggestingField === `activity_description_${act.id}`}
|
|
/>
|
|
</Box>
|
|
</Paper>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LessonPlanDetailPage;
|