Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

07 — Component Library (Results Module)

Module-specific components. Shared components (AppTextField, AppSelect, AppSnackbar, AppOfflineBanner, AppEmptyState, AppErrorState, AppSkeleton, AppBanner, StatusChip, ProgressIndicator, FilterChip) are referenced from 03_Component_Library.md — not reproduced here.

R-DataTable (virtualised results grid)

  • Purpose: marks-entry grid for S1; report-card subject table for S4.
  • Props: columns, rows, editableCell, onCellChanged, rowStates (dirty/saving/saved/error/published), maxMarks.
  • Behaviour: virtualised (only visible rows built — see 15_Flutter §Table); per-row editing; numeric keyboard; tabular numerals (02_Design_Tokens.md §2).
  • States: loading (skeleton), clean, dirty, row-save spinner, row-error (errorContainer fill + errorText), published-locked.
  • A11y: header Semantics; row label "Student {name}, marks {v} of {max}".
  • Tokens: surfaceContainerHigh header, outlineVariant gridlines, mono numerals.

R-GradeChip

  • Purpose: grade badge (A+/A/B+/B/C/D/F or client-supplied string).
  • Props: grade, size.
  • Behaviour: colour by band (result.service.ts:130-138): A+/A success, B+/B primary, C/D tertiary, F error; unknown string → surfaceVariant + neutral text.
  • A11y: announced as letters, never symbols ("grade A plus").
  • Tokens: role-colour container + on*Container text, labelMedium.

R-MarksField

  • Purpose: numeric marks input bound to a student row.
  • Props: studentId, value, maximumMarks, passingMarks, readOnly, onCommit.
  • Behaviour: local text state until commit; validation client-side value ≤ maximumMarks mirrors server rule (examination.service.ts:145-146); over-max shows inline error without a round trip.
  • Tokens: AppTextField tokens; error error/errorContainer.

R-CoverageBar

  • Purpose: marks-entry completeness (S2, S5).
  • Props: entered, total.
  • Behaviour: 100 % → success; partial → primary; 0 → surfaceVariant; label "n of m".
  • A11y: Semantics(value: "entered n of m").

R-GradeDistributionChart

  • Purpose: S5 per-grade bars.
  • Props: counts: Record<grade, number>, total.
  • Behaviour: horizontal bars per band incl. ungraded bucket; pure Flutter Row/FractionallySizedBox — no chart dependency (see 15_Flutter §Charts).
  • A11y: each bar = Semantics(label: "Grade {g}, {n} students ({p}%)"); counts always rendered as text.
  • Tokens: band colours per R-GradeChip.

R-PublishPanel

  • Purpose: S5 publish action with confirmation.
  • Props: examId, status, coverage, onPublish.
  • Behaviour: disabled unless coverage 100 % (advisory — server accepts regardless, examination.service.ts:203-220); confirm dialog warns "cannot be reverted — no unpublish endpoint"; on success banner success "Results published", fires POST /api/v1/examinations/:id/publish (examination.controller.ts:54-56).
  • Tokens: success container / primary FAB.