feat: add read-only admin schedule view #168

Merged

forgejo_admin merged 1 commit from 166-admin-schedule-view into main

2026-03-29 03:26:09 +00:00

forgejo_admin commented

2026-03-28 23:30:08 +00:00

Contributor

Summary

Adds a read-only /admin/schedule page that fetches practices and events from GET /admin/schedule and displays them with division filtering, matching existing admin page patterns exactly.

Changes

src/routes/(app)/admin/schedule/+page.svelte — NEW. Admin schedule view with:
- onMount() + apiFetch('/admin/schedule') data loading (no +page.js)
- Practices grouped by label (e.g. "Travel Teams", "17U Local Kings"), showing day name, formatted time, location, notes
- Events sorted by start_date ascending, showing title, date range, location, event_type badge
- Kings/Queens/All division filter toggle (maps boys→Kings, girls→Queens)
- Loading spinner and error fallback states
- Stat cards showing practice and event counts
- Responsive card grid (1-col mobile, 2-col tablet, 3-col desktop)
- Scoped <style> block using CSS design tokens from app.css
- Svelte 5 runes: $state, $derived

Test Plan

Navigate to /admin/schedule while authenticated as admin
Verify practices display grouped by label with day, time, location
Verify events display sorted by date with type badges
Toggle Kings/Queens filter and confirm both sections filter correctly
Verify empty state messages when no data matches filter
Verify error state displays if API is unreachable
Check mobile viewport (390px) and desktop (1280px)

Review Checklist

No unrelated changes
Follows existing admin page patterns (onMount, apiFetch, $state/$derived)
Pure CSS vars, no Tailwind
Build passes (npm run build)
Read-only only, no CRUD forms

None

Closes #166
Parent: forgejo_admin/basketball-api#230
Backend: forgejo_admin/basketball-api#232 (models), #233 (API) — both merged

## Summary Adds a read-only `/admin/schedule` page that fetches practices and events from `GET /admin/schedule` and displays them with division filtering, matching existing admin page patterns exactly. ## Changes - `src/routes/(app)/admin/schedule/+page.svelte` — NEW. Admin schedule view with: - `onMount()` + `apiFetch('/admin/schedule')` data loading (no +page.js) - Practices grouped by label (e.g. "Travel Teams", "17U Local Kings"), showing day name, formatted time, location, notes - Events sorted by start_date ascending, showing title, date range, location, event_type badge - Kings/Queens/All division filter toggle (maps boys→Kings, girls→Queens) - Loading spinner and error fallback states - Stat cards showing practice and event counts - Responsive card grid (1-col mobile, 2-col tablet, 3-col desktop) - Scoped `<style>` block using CSS design tokens from app.css - Svelte 5 runes: `$state`, `$derived` ## Test Plan - [ ] Navigate to `/admin/schedule` while authenticated as admin - [ ] Verify practices display grouped by label with day, time, location - [ ] Verify events display sorted by date with type badges - [ ] Toggle Kings/Queens filter and confirm both sections filter correctly - [ ] Verify empty state messages when no data matches filter - [ ] Verify error state displays if API is unreachable - [ ] Check mobile viewport (390px) and desktop (1280px) ## Review Checklist - [x] No unrelated changes - [x] Follows existing admin page patterns (onMount, apiFetch, $state/$derived) - [x] Pure CSS vars, no Tailwind - [x] Build passes (`npm run build`) - [x] Read-only only, no CRUD forms ## Related Notes - None ## Related - Closes #166 - Parent: `forgejo_admin/basketball-api#230` - Backend: `forgejo_admin/basketball-api#232` (models), `#233` (API) — both merged

forgejo_admin added 1 commit

2026-03-28 23:30:08 +00:00

feat: add read-only admin schedule view for practices and events

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

f8ff3d7575

Adds /admin/schedule route that fetches from GET /admin/schedule and
displays practices (grouped by label) and events (sorted by date) with
Kings/Queens division filter, loading/error states, and responsive card
grid matching existing admin page patterns.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-28 23:31:23 +00:00

Author

Contributor

QA Review -- PR #168

Pattern Compliance

Data loading: onMount() + apiFetch('/admin/schedule') -- matches admin dashboard and teams pages exactly.
Reactivity: $state for loading/error/divisionFilter, $derived for filtered/sorted data -- correct Svelte 5 rune usage.
Error handling: try/catch with fallback data ({ practices: [], events: [] }) and user-facing error message -- matches admin dashboard pattern.
No +page.js: Correct, client-side only.
CSS: Pure CSS vars from design system, scoped <style> block, no Tailwind. All tokens reference existing app.css variables.

Acceptance Criteria Check

/admin/schedule route loads and displays data from GET /admin/schedule
Practices grouped by label with day, time, location, notes
Events sorted by start_date ascending with title, dates, location, event_type badge
Division filter: All/Kings/Queens toggle filters both sections
Loading state shown while API call is in flight
Error state shown if API call fails
Matches existing admin page styling (section, section-title, stat-card, placeholder-body)

Code Quality

JSDoc annotations on all helper functions
Null-safe checks throughout (optional chaining, fallback defaults)
Time formatting handles 24h-to-12h conversion correctly (midnight=12AM, noon stays 12PM)
Date formatting appends T00:00:00 to avoid timezone-shift bugs with new Date()
Event type badge mapping reuses existing badge classes from app.css
Responsive grid: 1-col mobile, 2-col at 640px, 3-col at 1024px

Nits (non-blocking)

None identified. Single file, clean scope, read-only as specified.

Build Verification

npm run build passes with zero warnings from this file.
Only 1 file changed, 430 additions, 0 deletions.

VERDICT: APPROVED

## QA Review -- PR #168 ### Pattern Compliance - **Data loading**: `onMount()` + `apiFetch('/admin/schedule')` -- matches admin dashboard and teams pages exactly. - **Reactivity**: `$state` for loading/error/divisionFilter, `$derived` for filtered/sorted data -- correct Svelte 5 rune usage. - **Error handling**: try/catch with fallback data (`{ practices: [], events: [] }`) and user-facing error message -- matches admin dashboard pattern. - **No +page.js**: Correct, client-side only. - **CSS**: Pure CSS vars from design system, scoped `<style>` block, no Tailwind. All tokens reference existing `app.css` variables. ### Acceptance Criteria Check - [x] `/admin/schedule` route loads and displays data from `GET /admin/schedule` - [x] Practices grouped by label with day, time, location, notes - [x] Events sorted by start_date ascending with title, dates, location, event_type badge - [x] Division filter: All/Kings/Queens toggle filters both sections - [x] Loading state shown while API call is in flight - [x] Error state shown if API call fails - [x] Matches existing admin page styling (section, section-title, stat-card, placeholder-body) ### Code Quality - JSDoc annotations on all helper functions - Null-safe checks throughout (optional chaining, fallback defaults) - Time formatting handles 24h-to-12h conversion correctly (midnight=12AM, noon stays 12PM) - Date formatting appends `T00:00:00` to avoid timezone-shift bugs with `new Date()` - Event type badge mapping reuses existing badge classes from `app.css` - Responsive grid: 1-col mobile, 2-col at 640px, 3-col at 1024px ### Nits (non-blocking) - None identified. Single file, clean scope, read-only as specified. ### Build Verification - `npm run build` passes with zero warnings from this file. - Only 1 file changed, 430 additions, 0 deletions. **VERDICT: APPROVED**