// Surface — Content mapping // // Split out of the old combined Roles surface (see §25.14). This page owns // ONLY the binding matrix: rows are the bindable content (modules + pre/post // question groups & questions), columns are the roles (grouped by their // organisation, read-only here). The author's whole job is to tick / untick // cells. Roles and organisations are CREATED and EDITED on the // "Organisations & roles" surface — never here. No inline role inspector, // no add/delete role, no organisation editing. function SurfaceContentMapping({ roles: rolesIn, course, assessments, onNavigate }) { const selectBrand = !!course.selectBrand; const brands = course.brands || []; const roles = rolesIn || []; // ── Bindings · per-role membership in modules + pre/post groups + qs ────── const seed = React.useCallback(() => { const out = {}; roles.forEach(r => { out[r.code] = { modules: new Set(r.modules || []), pre: { groups: new Set(assessments.pre.groups .filter(g => g.roles.includes(r.code)).map(g => g.id)), questions: new Set(assessments.pre.groups .flatMap(g => g.questions || []) .filter(q => (q.roles || []).includes(r.code)).map(q => q.id)), }, post: { groups: new Set(assessments.post.groups .filter(g => g.roles.includes(r.code)).map(g => g.id)), questions: new Set(assessments.post.groups .flatMap(g => g.questions || []) .filter(q => (q.roles || []).includes(r.code)).map(q => q.id)), }, }; }); return out; }, [roles, assessments]); const [bindings, setBindings] = React.useState(seed); const [openGroups, setOpenGroups] = React.useState(new Set()); const toggle = (roleCode, kind, id) => { setBindings(b => { const next = { ...b }; const role = { ...next[roleCode] }; const [bucket, sub] = kind.includes('.') ? kind.split('.') : [kind, null]; if (sub) { role[bucket] = { ...role[bucket], [sub]: new Set(role[bucket][sub]) }; const s = role[bucket][sub]; if (s.has(id)) s.delete(id); else s.add(id); } else { role[bucket] = new Set(role[bucket]); if (role[bucket].has(id)) role[bucket].delete(id); else role[bucket].add(id); } next[roleCode] = role; return next; }); }; // ── Column order: roles clustered by organisation band ─────────────────── const orderedRoles = React.useMemo(() => { if (!selectBrand) return roles; const out = []; brands.forEach(b => out.push(...roles.filter(r => r.brand === b.id))); out.push(...roles.filter(r => !brands.some(x => x.id === r.brand))); return out; }, [roles, brands, selectBrand]); const brandBands = React.useMemo(() => { if (!selectBrand) return null; const counts = brands.map(b => ({ brand: b, count: orderedRoles.filter(r => r.brand === b.id).length, })); const unbranded = orderedRoles.filter(r => !brands.some(x => x.id === r.brand)).length; if (unbranded > 0) { counts.push({ brand: { id: '__none', label: 'No organisation', color: 'var(--surface-inset)', textColor: 'var(--text-muted)' }, count: unbranded, }); } return counts.filter(c => c.count > 0); }, [orderedRoles, brands, selectBrand]); // ── Rows: chapters · pre · post ─────────────────────────────────────────── const moduleSections = (course.moduleGroups || [{ id: '_', title: 'Modules' }]) .map(g => ({ kind: 'section', label: locText(g.title), rows: course.modules .filter(m => (m.group || '_') === g.id) .map(m => ({ kind: 'module', id: m.id, code: `M${m.n}`, label: locText(m.title), meta: { duration: m.duration, mandatory: m.mandatory }, bindKind: 'modules', })), })); const assessmentSection = (key, label) => ({ kind: 'section', label, rows: (assessments[key].groups || []).flatMap(g => { const out = [{ kind: 'group', section: key, id: g.id, code: g.id.toUpperCase(), label: g.label, meta: { mod: g.mod, count: g.questions?.length || 0 }, bindKind: `${key}.groups`, }]; if (openGroups.has(g.id)) { (g.questions || []).forEach((q, qi) => { out.push({ kind: 'question', section: key, groupId: g.id, id: q.id, code: `Q${qi + 1}`, label: q.prompt, bindKind: `${key}.questions`, }); }); } return out; }), }); const allSections = [ ...moduleSections, assessmentSection('pre', 'Pre-assessment · question groups'), assessmentSection('post', 'Post-assessment · question groups'), ]; const COL_W = 130; const FIRST_W = 440; const ROLE_GRID = `${FIRST_W}px repeat(${orderedRoles.length}, ${COL_W}px)`; const BRAND_GRID = brandBands && brandBands.length > 0 ? `${FIRST_W}px ${brandBands.map(b => `${b.count * COL_W}px`).join(' ')}` : ROLE_GRID; return (

Content mapping

Decide who sees what — tick a cell to include a module or question for a role. Add or rename roles in Organisations & roles.

{orderedRoles.length === 0 ? ( ) : (
{/* Sticky header bundle */}
{/* Organisation super-header */} {brandBands && brandBands.length > 0 && (
{brandBands.map(({ brand }) => (
{brand.label}
))}
)} {/* Role-name row (read-only) */}
Chapter / module / question group
{orderedRoles.map(r => ( b.id === r.brand)} /> ))}
{/* Body — section rows */} {allSections.map((section, sIdx) => (
{section.label}
{section.rows.map(row => ( { if (row.kind !== 'group') return; setOpenGroups(s => { const n = new Set(s); n.has(row.id) ? n.delete(row.id) : n.add(row.id); return n; }); }} /> ))} ))}
)}
); } // ── ContentMappingEmpty · no roles to map yet ──────────────────────────────── function ContentMappingEmpty({ onNavigate }) { return (

No roles to map yet

Content mapping ties modules and assessment questions to roles. Create your roles first, then come back to tick what each one sees.

{onNavigate && ( )}
); } // ── RoleColumnHeader · read-only name + organisation-tinted accent ─────────── function RoleColumnHeader({ role, brand }) { return (
{role.label}
); } // ── MatrixRow ───────────────────────────────────────────────────────────────── function MatrixRow({ row, grid, roles, bindings, onToggle, expanded, onToggleExpand }) { return (
{roles.map(r => { const b = bindings[r.code]; let checked = false; if (row.bindKind === 'modules') checked = b.modules.has(row.id); else if (row.bindKind.endsWith('.groups')) { const [sec] = row.bindKind.split('.'); checked = b[sec].groups.has(row.id); } else if (row.bindKind.endsWith('.questions')) { const [sec] = row.bindKind.split('.'); checked = b[sec].questions.has(row.id); } let inherited = false; if (row.kind === 'question') { const [sec] = row.bindKind.split('.'); inherited = !b[sec].groups.has(row.groupId); } return ( onToggle(r.code, row.bindKind, row.id)} /> ); })}
); } function RowLabel({ row, expanded, onToggleExpand }) { if (row.kind === 'module') { return (
{row.code} {row.label}
{row.meta.mandatory && } {row.meta.duration}
); } if (row.kind === 'group') { return ( ); } if (row.kind === 'question') { return ; } return (
{row.code} {row.label}
); } // ── QuestionRowLabel · single-line truncated prompt + full-text popover ────── // Question prompts often share an opening sentence, so the visible line is // truncated with an ellipsis and an "expand" affordance opens the FULL prompt // in a portal popover (rendered to document.body so the matrix's overflow:auto // never clips it). function QuestionRowLabel({ code, prompt }) { const [open, setOpen] = React.useState(false); const [rect, setRect] = React.useState(null); const btnRef = React.useRef(null); const show = () => { if (btnRef.current) setRect(btnRef.current.getBoundingClientRect()); setOpen(true); }; return (
{code} {prompt} {open && rect && ReactDOM.createPortal( <>
setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 999 }} />
{code} Full question
{prompt}
, document.body )}
); } function KCode({ children }) { return ( {children} ); } function MatrixCell({ checked, inherited, onChange }) { return ( ); } Object.assign(window, { SurfaceContentMapping });