feat: Implement tournament schedule tab and fix E2E tests #27
@@ -0,0 +1,219 @@
|
||||
import { prisma } from "@/lib/prisma"
|
||||
export const dynamic = "force-dynamic";
|
||||
import Navigation from "@/components/Navigation"
|
||||
import Link from "next/link"
|
||||
import { notFound, redirect } from "next/navigation"
|
||||
import { canManageTournament } from "@/lib/permissions"
|
||||
import { ScheduleGenerator } from "@/components/ScheduleGenerator"
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
id: string
|
||||
}
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: "bg-gray-100 text-gray-700",
|
||||
in_progress: "bg-yellow-100 text-yellow-800",
|
||||
completed: "bg-green-100 text-green-800",
|
||||
}
|
||||
|
||||
export default async function TournamentSchedulePage({ params }: PageProps) {
|
||||
const { id } = await params
|
||||
const tournamentId = parseInt(id, 10)
|
||||
|
||||
if (isNaN(tournamentId)) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const permission = await canManageTournament(tournamentId)
|
||||
if (!permission.allowed) {
|
||||
redirect("/auth/login")
|
||||
}
|
||||
|
||||
const tournament = await prisma.event.findUnique({
|
||||
where: { id: tournamentId },
|
||||
include: {
|
||||
teams: {
|
||||
include: {
|
||||
player1: true,
|
||||
player2: true,
|
||||
},
|
||||
},
|
||||
rounds: {
|
||||
orderBy: { roundNumber: "asc" },
|
||||
include: {
|
||||
bracketMatchups: {
|
||||
include: {
|
||||
team1: {
|
||||
include: { player1: true, player2: true },
|
||||
},
|
||||
team2: {
|
||||
include: { player1: true, player2: true },
|
||||
},
|
||||
match: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
if (!tournament) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const hasSchedule = tournament.rounds.length > 0
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<Navigation />
|
||||
|
||||
<main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div className="px-4 py-6 sm:px-0">
|
||||
{/* Breadcrumb */}
|
||||
<nav className="mb-4">
|
||||
<ol className="flex items-center space-x-2">
|
||||
<li>
|
||||
<Link href="/admin/tournaments" className="text-green-600 hover:text-green-900">
|
||||
Tournaments
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-gray-400">/</li>
|
||||
<li>
|
||||
<Link href={`/admin/tournaments/${tournament.id}`} className="text-green-600 hover:text-green-900">
|
||||
{tournament.name}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="text-gray-400">/</li>
|
||||
<li className="text-gray-600">Schedule</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{/* Page Header */}
|
||||
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">Tournament Schedule</h1>
|
||||
<p className="text-gray-500 mt-1">
|
||||
{tournament.name} — {tournament.teams.length} teams
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Schedule Generator (when no schedule exists) */}
|
||||
{!hasSchedule && (
|
||||
<div className="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
||||
No Schedule Generated
|
||||
</h2>
|
||||
<ScheduleGenerator
|
||||
tournamentId={tournamentId}
|
||||
teamCount={tournament.teams.length}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Schedule Rounds */}
|
||||
{hasSchedule && tournament.rounds.map((round) => (
|
||||
<div key={round.id} className="bg-white shadow rounded-lg p-6 mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-medium text-gray-900">
|
||||
Round {round.roundNumber}
|
||||
</h2>
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${statusColors[round.status] || statusColors.pending}`}>
|
||||
{round.status.replace("_", " ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{round.bracketMatchups.length === 0 ? (
|
||||
<p className="text-gray-500">No matchups in this round.</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{round.bracketMatchups.map((matchup) => {
|
||||
const team1Name = matchup.team1
|
||||
? `${matchup.team1.player1.name} + ${matchup.team1.player2.name}`
|
||||
: "TBD"
|
||||
const team2Name = matchup.team2
|
||||
? `${matchup.team2.player1.name} + ${matchup.team2.player2.name}`
|
||||
: "TBD"
|
||||
|
||||
return (
|
||||
<div
|
||||
key={matchup.id}
|
||||
className="border border-gray-200 rounded p-3"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
{matchup.tableNumber && (
|
||||
<span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
|
||||
Table {matchup.tableNumber}
|
||||
</span>
|
||||
)}
|
||||
<span className={`px-2 py-0.5 text-xs font-medium rounded-full ${statusColors[matchup.status] || statusColors.pending}`}>
|
||||
{matchup.status.replace("_", " ")}
|
||||
</span>
|
||||
</div>
|
||||
<p className="font-medium mt-1">
|
||||
{team1Name} <span className="text-gray-400">vs</span> {team2Name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
{matchup.match ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className={`font-bold ${
|
||||
matchup.match.team1Score > matchup.match.team2Score
|
||||
? 'text-green-600'
|
||||
: 'text-gray-900'
|
||||
}`}>
|
||||
{matchup.match.team1Score}
|
||||
</span>
|
||||
<span className="text-gray-400">-</span>
|
||||
<span className={`font-bold ${
|
||||
matchup.match.team2Score > matchup.match.team1Score
|
||||
? 'text-green-600'
|
||||
: 'text-gray-900'
|
||||
}`}>
|
||||
{matchup.match.team2Score}
|
||||
</span>
|
||||
<Link
|
||||
href={`/matches/${matchup.match.id}`}
|
||||
className="text-green-600 hover:text-green-900 text-sm"
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
href={`/admin/tournaments/${tournament.id}/results`}
|
||||
className="px-3 py-1 border border-green-300 rounded text-sm font-medium text-green-700 hover:bg-green-50"
|
||||
>
|
||||
Enter Result
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Actions when schedule exists */}
|
||||
{hasSchedule && (
|
||||
<div className="bg-white shadow rounded-lg p-6">
|
||||
<h2 className="text-lg font-medium text-gray-900 mb-4">
|
||||
Schedule Actions
|
||||
</h2>
|
||||
<ScheduleGenerator
|
||||
tournamentId={tournamentId}
|
||||
teamCount={tournament.teams.length}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
|
||||
interface ScheduleGeneratorProps {
|
||||
tournamentId: number
|
||||
teamCount: number
|
||||
}
|
||||
|
||||
export function ScheduleGenerator({ tournamentId, teamCount }: ScheduleGeneratorProps) {
|
||||
const [isGenerating, setIsGenerating] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
const [result, setResult] = useState<{
|
||||
roundsCreated: number
|
||||
matchupsCreated: number
|
||||
} | null>(null)
|
||||
|
||||
const handleGenerate = async () => {
|
||||
setError("")
|
||||
setResult(null)
|
||||
setIsGenerating(true)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}/schedule`, {
|
||||
method: "POST",
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
setError(data.error || "Failed to generate schedule")
|
||||
setIsGenerating(false)
|
||||
return
|
||||
}
|
||||
|
||||
setResult({
|
||||
roundsCreated: data.roundsCreated,
|
||||
matchupsCreated: data.matchupsCreated,
|
||||
})
|
||||
setIsGenerating(false)
|
||||
|
||||
// Reload to show the schedule
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
}, 1500)
|
||||
} catch {
|
||||
setError("An error occurred. Please try again.")
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
setError("")
|
||||
setIsGenerating(true)
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/tournaments/${tournamentId}/schedule`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
setError(data.error || "Failed to delete schedule")
|
||||
setIsGenerating(false)
|
||||
return
|
||||
}
|
||||
|
||||
window.location.reload()
|
||||
} catch {
|
||||
setError("An error occurred. Please try again.")
|
||||
setIsGenerating(false)
|
||||
}
|
||||
}
|
||||
|
||||
const expectedRounds = teamCount % 2 === 0 ? teamCount - 1 : teamCount
|
||||
const expectedMatchups = (teamCount * (teamCount - 1)) / 2
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-50 p-4">
|
||||
<div className="text-sm text-red-700">{error}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="rounded-md bg-green-50 p-4">
|
||||
<div className="text-sm text-green-700">
|
||||
Generated {result.roundsCreated} rounds with {result.matchupsCreated} matchups!
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-4">
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
Generate a round-robin schedule for <strong>{teamCount} teams</strong>.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
This will create {expectedRounds} rounds with {expectedMatchups} total matchups.
|
||||
Each team plays every other team exactly once.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleGenerate}
|
||||
disabled={isGenerating || teamCount < 2}
|
||||
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
{isGenerating ? "Generating..." : "Generate Schedule"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={isGenerating}
|
||||
className="px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50 disabled:opacity-50"
|
||||
>
|
||||
Delete Schedule
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user