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

10 - Interaction Specification (Transport Module)

Precise interaction rules per screen flow. Motion tokens per 00-shared/08 (m-fast = 150 ms, m-base = 250 ms, m-slow = 400 ms).


1. Navigation

FromToTriggerTransition
Overview tilelist screenstapm-base slide
List rowdetailtapm-base slide (hero: row to detail header)
Detailedit formFAB/actionm-base slide
Listcreate formFABsheet: m-base bottom sheet slide
Route detailassign sheet"Assign students"sheet slide
Student assignmentsassign sheet"Assign"sheet slide, studentId prefilled

Back always pops; unsaved form guard dialog (discard / keep editing).

2. List interactions

  • Row tap -> detail; long-press on desktop opens AppMenu directly.
  • Pull-to-refresh: re-fires current page; skeleton preserved, content swap when response arrives; error keeps stale data + banner.
  • Pagination footer: Previous/Next + page number + "of N" from meta (buildPaginationMeta - transport.service.ts:75); disabled states at bounds (hasNext/hasPrevious).
  • Menu actions: Edit (.update), Delete (.delete) - shown per permission (permissions.constants.ts:62-74).

3. Delete flow (all three entities + assignment)

  1. Menu -> Delete.
  2. AppDialog confirm: "Remove <plateNumber / name>? This is reversible for admins." (soft delete, base.repository.ts:68-74).
  3. Optimistic: row removed + AppSnackbar "Removed".
  4. Rollback on error:
    • 404 -> refetch list (transport.service.ts:101, 173, 248, 290).
    • 409 -> restore row + DependencyGuardDialog (blocking dependency message, transport.service.ts:94-99, 168-171, 241-246) with "View" action.
  5. Events fire server-side (VehicleDeleted, transport.service.ts:102-109).

4. Form interactions

  • Validation timing: on-field-blur for required/format; live for conflicts after a submitted 409 (08 §5).
  • Submit: button loading spinner; disable double-submit; success -> pop with snackbar; 409 -> ConflictFieldError + focus first invalid (07 §8; transport.service.ts:38-45, 113-116, 177-190, 252-258).
  • Optional dates (insuranceExpiry, licenseExpiry, joinedAt): date picker; empty sends absent field (PartialType semantics, update-*.dto.ts:4); server re-parses only when present (transport.service.ts:159-161, 228-234).

5. RouteStopEditor interactions

  • Add stop: trailing field + add button -> appended with next order; row animates in m-fast.
  • Reorder: drag (mobile) or up/down buttons (a11y) -> m-base reorder animation; order values re-sequenced 1..N on every change (route.schema.ts:23-24).
  • Delete stop: row swipe (mobile) or menu; confirm not needed (undo snackbar 4 s).
  • Persistence: route update PATCHes whole stops array (create-route.dto.ts:34-39).

6. Resource pickers (vehicle/driver/route)

  • Open: cached list first (GET /transport/vehicles|drivers|routes page 1, transport.controller.ts:36-40, 96-100, 66-70), fetch-on-focus.
  • Filter: local case-insensitive match on plateNumber/name/firstName; single-flight; empty result -> "No match - check list scope".
  • Select: chip + clear affordance; clearing omits the field on submit (create-route.dto.ts:41-49).

7. Assignment interactions

  • Shift change after selection: allowed (new assignment only; editing an existing assignment = remove + re-assign - no PATCH endpoint for assignments, transport.controller.ts:120-136).
  • stopName auto-suggest: from selected route's stops (route.schema.ts:23-24).
  • 409 duplicate: warning + "View existing assignment" -> student assignment screen (transport.service.ts:252-258).
  • Capacity pre-check (client heuristic, 06 §11): warn "route appears full" before submit; server does not enforce - QA 14 §3.

8. Offline behaviour

  • Lists: cached render + AppOfflineBanner; mutations blocked with banner (00-shared/10 §2, §3.3).
  • Detail screens: cache-keyed by id; stale allowed with "updated x ago".

9. Motion summary

InteractionToken
Screen transitionsm-base slide
Bottom sheets / dialogsm-base (sheet), m-fast (dialog)
Row reorder / add-stopm-base / m-fast
Delete rollback (409)shake m-fast + dialog
Error focus jumpm-fast

10. Keyboard & platform

  • Forms: resizeToAvoidBottomInset + scroll; phone portrait-first.
  • Desktop: hover row highlight, long-press menu = context menu.
  • a11y per 00-shared/09: live-region on snackbars, semantics on badges, explicit focus order in dialogs.