feat(phase-c): lesson plans library — browse, create, and edit lesson plans
Adds LessonPlansPage (card grid with search/filter, create dialog) and LessonPlanDetailPage (structured editor with objectives, activities, Bloom taxonomy tags, per-field AI suggest via ✨ button, and auto-save). Routes: /lesson-plans and /lesson-plans/:planId wired into AppRoutes. Nav: Lesson Plans item added to Header menu under Timetable & Classes. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
This commit is contained in:
Claude Sonnet 4.6
@@ -0,0 +1,328 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box, Typography, Button, CircularProgress, Alert, Chip, Card,
|
||||
CardContent, CardActions, IconButton, Tooltip, TextField,
|
||||
InputAdornment, MenuItem, Select, FormControl, InputLabel,
|
||||
Dialog, DialogTitle, DialogContent, DialogActions,
|
||||
} from '@mui/material';
|
||||
import { Add, Search, LibraryBooks, Edit, Delete, FilterList } from '@mui/icons-material';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
|
||||
const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8000';
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
|
||||
interface PlanSummary {
|
||||
id: string;
|
||||
title: string;
|
||||
subject: string | null;
|
||||
year_group: string | null;
|
||||
duration_minutes: number | null;
|
||||
objectives: { id: string; text: string; bloom_level?: string }[];
|
||||
activities: { id: string; section: string; title: string }[];
|
||||
is_public: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
creator_name?: string;
|
||||
}
|
||||
|
||||
// ─── Create plan dialog ───────────────────────────────────────────────────────
|
||||
|
||||
interface CreateDialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onCreate: (data: { title: string; subject?: string; year_group?: string }) => Promise<void>;
|
||||
}
|
||||
|
||||
function CreatePlanDialog({ open, onClose, onCreate }: CreateDialogProps) {
|
||||
const [title, setTitle] = useState('');
|
||||
const [subject, setSubject] = useState('');
|
||||
const [yearGroup, setYearGroup] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const reset = () => { setTitle(''); setSubject(''); setYearGroup(''); };
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!title.trim()) return;
|
||||
setSaving(true);
|
||||
await onCreate({ title: title.trim(), subject: subject || undefined, year_group: yearGroup || undefined });
|
||||
setSaving(false);
|
||||
reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleClose = () => { reset(); onClose(); };
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
|
||||
<DialogTitle>New Lesson Plan</DialogTitle>
|
||||
<DialogContent sx={{ pt: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 0.5 }}>
|
||||
<TextField
|
||||
label="Title"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
autoFocus
|
||||
required
|
||||
placeholder="e.g. Introduction to Photosynthesis"
|
||||
/>
|
||||
<Box sx={{ display: 'flex', gap: 1.5 }}>
|
||||
<TextField
|
||||
label="Subject"
|
||||
value={subject}
|
||||
onChange={e => setSubject(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
placeholder="e.g. Biology"
|
||||
/>
|
||||
<TextField
|
||||
label="Year group"
|
||||
value={yearGroup}
|
||||
onChange={e => setYearGroup(e.target.value)}
|
||||
size="small"
|
||||
sx={{ width: 140 }}
|
||||
placeholder="e.g. 9"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||||
<Button onClick={handleClose} disabled={saving}>Cancel</Button>
|
||||
<Button
|
||||
onClick={handleCreate}
|
||||
variant="contained"
|
||||
disabled={!title.trim() || saving}
|
||||
startIcon={saving ? <CircularProgress size={16} /> : <Add />}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Plan card ────────────────────────────────────────────────────────────────
|
||||
|
||||
function PlanCard({ plan, onOpen, onDelete }: {
|
||||
plan: PlanSummary;
|
||||
onOpen: (id: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}) {
|
||||
const objCount = plan.objectives?.length ?? 0;
|
||||
const actCount = plan.activities?.length ?? 0;
|
||||
|
||||
return (
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
display: 'flex', flexDirection: 'column', cursor: 'pointer',
|
||||
'&:hover': { borderColor: 'primary.main', boxShadow: 1 },
|
||||
transition: 'border-color 0.15s, box-shadow 0.15s',
|
||||
}}
|
||||
onClick={() => onOpen(plan.id)}
|
||||
>
|
||||
<CardContent sx={{ flex: 1, pb: 1 }}>
|
||||
<Typography variant="body1" fontWeight={700} sx={{ mb: 0.5, lineHeight: 1.3 }}>
|
||||
{plan.title}
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 0.75, flexWrap: 'wrap', mb: 1 }}>
|
||||
{plan.subject && (
|
||||
<Chip label={plan.subject} size="small" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
{plan.year_group && (
|
||||
<Chip label={`Y${plan.year_group}`} size="small" variant="outlined" sx={{ height: 20, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
{plan.duration_minutes && (
|
||||
<Chip label={`${plan.duration_minutes}min`} size="small" sx={{ height: 20, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
{plan.is_public && (
|
||||
<Chip label="Public" size="small" color="info" sx={{ height: 20, fontSize: '0.7rem' }} />
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{objCount} objective{objCount !== 1 ? 's' : ''} · {actCount} activit{actCount !== 1 ? 'ies' : 'y'}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions sx={{ pt: 0, px: 1.5, pb: 1.5, justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
|
||||
<Tooltip title="Edit plan">
|
||||
<IconButton size="small" onClick={() => onOpen(plan.id)}>
|
||||
<Edit fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delete plan">
|
||||
<IconButton size="small" color="error" onClick={() => onDelete(plan.id)}>
|
||||
<Delete fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main page ────────────────────────────────────────────────────────────────
|
||||
|
||||
const LessonPlansPage: React.FC = () => {
|
||||
const { accessToken } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [plans, setPlans] = useState<PlanSummary[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const [filterSubject, setFilterSubject] = useState('');
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!accessToken) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/lessons/plans`, {
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
const data = await res.json();
|
||||
if (Array.isArray(data)) setPlans(data);
|
||||
else setError(data.detail || 'Failed to load plans');
|
||||
} catch (e: any) {
|
||||
setError(e.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [accessToken]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleCreate = async (body: { title: string; subject?: string; year_group?: string }) => {
|
||||
const res = await fetch(`${API_BASE}/lessons/plans`, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.id) {
|
||||
navigate(`/lesson-plans/${data.id}`);
|
||||
} else {
|
||||
load();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!window.confirm('Delete this lesson plan?')) return;
|
||||
await fetch(`${API_BASE}/lessons/plans/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: `Bearer ${accessToken}` },
|
||||
});
|
||||
setPlans(prev => prev.filter(p => p.id !== id));
|
||||
};
|
||||
|
||||
const subjects = Array.from(new Set(plans.map(p => p.subject).filter(Boolean) as string[])).sort();
|
||||
|
||||
const filtered = plans.filter(p => {
|
||||
const matchSearch = !search || p.title.toLowerCase().includes(search.toLowerCase())
|
||||
|| (p.subject || '').toLowerCase().includes(search.toLowerCase());
|
||||
const matchSubject = !filterSubject || p.subject === filterSubject;
|
||||
return matchSearch && matchSubject;
|
||||
});
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 3, maxWidth: 1100, mx: 'auto' }}>
|
||||
{/* Header */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 3 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<LibraryBooks sx={{ color: 'primary.main', fontSize: 32 }} />
|
||||
<Box>
|
||||
<Typography variant="h5" fontWeight={700}>Lesson Plans</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{plans.length} plan{plans.length !== 1 ? 's' : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Button
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
onClick={() => setCreateOpen(true)}
|
||||
>
|
||||
New Plan
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Filters */}
|
||||
<Box sx={{ display: 'flex', gap: 1.5, mb: 3, alignItems: 'center' }}>
|
||||
<TextField
|
||||
size="small"
|
||||
placeholder="Search plans…"
|
||||
value={search}
|
||||
onChange={e => setSearch(e.target.value)}
|
||||
InputProps={{
|
||||
startAdornment: <InputAdornment position="start"><Search fontSize="small" /></InputAdornment>,
|
||||
}}
|
||||
sx={{ width: 280 }}
|
||||
/>
|
||||
{subjects.length > 0 && (
|
||||
<FormControl size="small" sx={{ minWidth: 160 }}>
|
||||
<InputLabel>Subject</InputLabel>
|
||||
<Select
|
||||
label="Subject"
|
||||
value={filterSubject}
|
||||
onChange={e => setFilterSubject(e.target.value)}
|
||||
>
|
||||
<MenuItem value="">All subjects</MenuItem>
|
||||
{subjects.map(s => <MenuItem key={s} value={s}>{s}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
{(search || filterSubject) && (
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<FilterList />}
|
||||
onClick={() => { setSearch(''); setFilterSubject(''); }}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
) : filtered.length === 0 ? (
|
||||
<Box sx={{ textAlign: 'center', py: 8, color: 'text.secondary' }}>
|
||||
<LibraryBooks sx={{ fontSize: 56, opacity: 0.2, mb: 1 }} />
|
||||
<Typography variant="body1">
|
||||
{plans.length === 0 ? 'No lesson plans yet.' : 'No plans match your filters.'}
|
||||
</Typography>
|
||||
{plans.length === 0 && (
|
||||
<Button sx={{ mt: 2 }} variant="outlined" startIcon={<Add />} onClick={() => setCreateOpen(true)}>
|
||||
Create your first plan
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 2 }}>
|
||||
{filtered.map(plan => (
|
||||
<PlanCard
|
||||
key={plan.id}
|
||||
plan={plan}
|
||||
onOpen={id => navigate(`/lesson-plans/${id}`)}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<CreatePlanDialog
|
||||
open={createOpen}
|
||||
onClose={() => setCreateOpen(false)}
|
||||
onCreate={handleCreate}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default LessonPlansPage;
|
||||
Reference in New Issue
Block a user