Skip to content

Improve tournament schedule editor UX - #2911

Open
idowolf wants to merge 5 commits into
TabbycatDebate:developfrom
idowolf:feature/schedule-editor-ux
Open

Improve tournament schedule editor UX#2911
idowolf wants to merge 5 commits into
TabbycatDebate:developfrom
idowolf:feature/schedule-editor-ux

Conversation

@idowolf

@idowolf idowolf commented Aug 15, 2026

Copy link
Copy Markdown
Contributor
image

Summary

This PR replaces the dense schedule formset with a day-grouped, responsive editor while preserving the existing ScheduleEvent and Django formset workflow.

Problem: The current page repeats every field label and help text for every event, includes fixed blank forms, and makes schedule-wide editing difficult to scan. Native datetime controls also obscure the time at common admin widths.

Solution: Events are presented as compact rows grouped by local date, with time-only editing synchronized to the underlying datetime form fields. Administrators can add days and events dynamically, duplicate or delete rows, move events between dates, preview the public schedule, and drag events between time slots. Reordering deliberately moves the event into the destination time slot so persisted and public ordering remain chronological.

Changes

Schedule editing flow

  • Groups bound schedule forms by their local start date in the view and exposes an empty form template for client-side additions.
  • Uses an explicit browser-compatible datetime format so existing values populate correctly.
  • Retains Django's formset validation, CSRF token, edit permissions, and normal POST/save behavior.

Editor interaction

  • Adds day and event controls without a fixed limit of blank forms.
  • Supports drag-and-drop reordering within a day using the existing allocation UI's handle and drag-state conventions.
  • Supports keyboard reordering with the arrow keys from the focused drag handle.
  • Synchronizes compact 24-hour controls with the submitted datetime values and provides a calendar action for moving an event to another day.
  • Adds duration feedback, duplication, deletion, event-type highlighting, unsaved-change feedback, and a participant-facing preview.

Automatic titles

  • Makes the custom title optional. A blank title resolves to the selected round followed by the event type (or just the event type when there is no round).
  • Shows the exact automatic title in the editor and updates it live as either dropdown changes.
  • Keeps blank as the stored automatic state, so a later event-type or round change cannot leave a stale generated title behind.
  • Uses the resolved title consistently in the public schedule and admin display, and exposes it as display_title in the API without changing the writable title field's meaning.

Presentation

  • Splits the editor into schedule, day, and event-row templates with page-specific JavaScript and SCSS.
  • Adds responsive layouts for desktop and mobile, including a sticky save action and accessible labels for icon controls.

Tests

  • Adds view coverage for local-date grouping, browser-compatible datetime values, and dynamically created formset events.
  • Covers automatic titles with and without rounds, custom-title overrides, blank-title form submission, and API representation.

Testing

  • python tabbycat/manage.py test tournaments.tests.test_lookup tournaments.tests.test_round_checks tournaments.tests.test_schedule
  • python tabbycat/manage.py test tournaments.tests.test_schedule
  • python tabbycat/manage.py check
  • python tabbycat/manage.py makemigrations tournaments --check --dry-run
  • npm run build-vue
  • Sass compilation
  • ESLint, Stylelint, and Flake8 on the changed source
  • Browser checks at desktop and mobile widths for drag-and-drop, keyboard reorder, add-day behavior, synchronized time slots, automatic-title updates, public preview, field alignment, and horizontal overflow

Comment thread tabbycat/tournaments/templates/schedule_editor.js Outdated
Comment thread tabbycat/tournaments/templates/tournament_schedule_edit.html Outdated
@tienne-B

Copy link
Copy Markdown
Member

A few smaller things that you might want to consider too:

  • Try using input fields with type="time" rather than type="text" with RegEx
  • Do we need all those colours in the select fields, and the "AUTO" indication/style for titles?
  • Make sure everything, including date/time/duration formats are localizable

@idowolf

idowolf commented Aug 20, 2026

Copy link
Copy Markdown
Contributor Author

Addressed the remaining review feedback in d13ffaf:

  • Replaced the vanilla schedule editor with structured Vue 3 components while retaining one Django formset POST.
  • Switched the visible controls to native type="time" inputs and widened them so localized 12-hour suffixes are not clipped.
  • Removed event-type colours, the AUTO badge and dashed automatic-title styling. The live “Leave blank to show …” explanation remains.
  • Routed editor strings through useDjangoI18n; day/time presentation uses locale-aware formatting, and the public tables use Django localized date/time formats.
  • Reused TablesContainer for the preview and separated the public schedule into one table per local day.
  • Preserved invalid values/errors, read-only mode, stable form indices, hidden deletion forms, CSRF, and server-side validation.
  • Escaped user-entered titles before passing them to the table renderer.

Desktop editor:

Desktop schedule editor

Mobile editor:

Mobile schedule editor

Validation completed:

  • 24 Django tournament tests pass.
  • Vue production build and Sass build pass.
  • ESLint, Stylelint, Flake8, manage.py check, and makemigrations tournaments --check --dry-run pass.
  • Browser-tested add/save/delete/reload, mouse drag, keyboard reorder, desktop/mobile layouts, preview/public rendering, native localized times, and the hidden DELETE=on formset protocol.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants