feat: add player name editing functionality in admin UI and fix site_admin access to admin dashboard

This commit is contained in:
2026-03-30 21:58:30 -07:00
parent 9201b2c437
commit db782ff504
4 changed files with 264 additions and 29 deletions
+1 -1
View File
@@ -37,7 +37,7 @@ export default async function AdminDashboard() {
} }
// Non-admin users should see a different dashboard // Non-admin users should see a different dashboard
if (user.role !== "club_admin") { if (user.role !== "club_admin" && user.role !== "site_admin") {
if (user.playerId) { if (user.playerId) {
redirect("/players/" + user.playerId + "/profile") redirect("/players/" + user.playerId + "/profile")
} else { } else {
+134 -21
View File
@@ -1,33 +1,82 @@
import { prisma } from "@/lib/prisma" "use client"
import { useState, useEffect } from "react"
import Navigation from "@/components/Navigation" import Navigation from "@/components/Navigation"
import Link from "next/link" import Link from "next/link"
import { redirect } from "next/navigation"
import { getSession } from "@/lib/auth-simple"
import { hasRole } from "@/lib/permissions"
export default async function AdminPlayersPage() { interface Player {
const session = await getSession() id: number
name: string
if (!session) { currentElo: number
redirect("/auth/login") gamesPlayed: number
wins: number
losses: number
user?: {
email: string
} | null
} }
// Only site_admin and club_admin can manage players export default function AdminPlayersPage() {
const permission = await hasRole('club_admin') const [players, setPlayers] = useState<Player[]>([])
if (!permission.allowed) { const [error, setError] = useState("")
redirect("/auth/login") const [editingPlayer, setEditingPlayer] = useState<Player | null>(null)
const [newName, setNewName] = useState("")
const [isSaving, setIsSaving] = useState(false)
useEffect(() => {
fetchPlayers()
}, [])
const fetchPlayers = async () => {
try {
const response = await fetch("/api/players")
if (!response.ok) {
throw new Error("Failed to fetch players")
}
const data = await response.json()
setPlayers(data)
} catch (err: unknown) {
setError(err instanceof Error ? err.message : "Unknown error")
}
} }
// Get all players with their user association const handleEditClick = (player: Player) => {
const players = await prisma.player.findMany({ setEditingPlayer(player)
include: { setNewName(player.name)
user: true, }
const handleSaveName = async () => {
if (!editingPlayer || !newName.trim()) return
setIsSaving(true)
try {
const response = await fetch(`/api/admin/players/${editingPlayer.id}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
}, },
orderBy: { name: "asc" }, body: JSON.stringify({ name: newName.trim() }),
}) })
// Get total count const data = await response.json()
const playerCount = await prisma.player.count()
if (data.success) {
setPlayers(players.map(p =>
p.id === editingPlayer.id ? { ...p, name: data.player.name } : p
))
setEditingPlayer(null)
setNewName("")
} else {
alert(`Error: ${data.error}`)
}
} catch (err: unknown) {
alert(`Error: ${err instanceof Error ? err.message : "Unknown error"}`)
} finally {
setIsSaving(false)
}
}
const playerCount = players.length
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
@@ -45,6 +94,12 @@ export default async function AdminPlayersPage() {
</div> </div>
</div> </div>
{error && (
<div className="mb-4 p-4 bg-red-100 text-red-700 rounded">
{error}
</div>
)}
{/* Player Table */} {/* Player Table */}
<div className="bg-white shadow rounded-lg overflow-hidden"> <div className="bg-white shadow rounded-lg overflow-hidden">
<table className="min-w-full divide-y divide-gray-200"> <table className="min-w-full divide-y divide-gray-200">
@@ -114,12 +169,20 @@ export default async function AdminPlayersPage() {
)} )}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<div className="flex space-x-2">
<Link <Link
href={`/players/${player.id}/profile`} href={`/players/${player.id}/profile`}
className="text-green-600 hover:text-green-900" className="text-green-600 hover:text-green-900"
> >
View Profile View
</Link> </Link>
<button
onClick={() => handleEditClick(player)}
className="text-blue-600 hover:text-blue-900"
>
Edit
</button>
</div>
</td> </td>
</tr> </tr>
))} ))}
@@ -128,6 +191,56 @@ export default async function AdminPlayersPage() {
</div> </div>
</div> </div>
</main> </main>
{/* Edit Player Modal */}
{editingPlayer && (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
<div className="bg-white rounded-lg shadow-xl p-6 m-4 max-w-md w-full">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
Edit Player Name
</h3>
<p className="text-sm text-gray-600 mb-4">
Current name: {editingPlayer.name}
</p>
<div className="mb-6">
<label htmlFor="playerName" className="block text-sm font-medium text-gray-700 mb-2">
New Name
</label>
<input
type="text"
id="playerName"
value={newName}
onChange={(e) => setNewName(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
placeholder="Enter new player name"
/>
</div>
<div className="flex justify-end space-x-3">
<button
type="button"
onClick={() => {
setEditingPlayer(null)
setNewName("")
}}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50"
>
Cancel
</button>
<button
type="button"
onClick={handleSaveName}
disabled={isSaving || !newName.trim()}
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"
>
{isSaving ? 'Saving...' : 'Save'}
</button>
</div>
</div>
</div>
)}
</div> </div>
) )
} }
+90
View File
@@ -0,0 +1,90 @@
import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { hasRole } from "@/lib/permissions";
/**
* PATCH /api/admin/players/[id]
*
* Update a player's name
* Requires: club_admin or site_admin role
*/
export async function PATCH(
request: Request,
{ params }: { params: { id: string } }
) {
try {
const playerId = parseInt(params.id);
// Validate player ID
if (isNaN(playerId)) {
return NextResponse.json(
{ error: "Invalid player ID" },
{ status: 400 }
);
}
// Check permissions - only club_admin and site_admin can edit players
const permission = await hasRole('club_admin');
if (!permission.allowed) {
return NextResponse.json(
{ error: permission.reason || "Not authorized to edit players" },
{ status: 403 }
);
}
// Verify player exists
const existingPlayer = await prisma.player.findUnique({
where: { id: playerId },
include: { user: true },
});
if (!existingPlayer) {
return NextResponse.json(
{ error: "Player not found" },
{ status: 404 }
);
}
const body = await request.json();
const { name } = body;
if (!name || typeof name !== 'string' || name.trim().length === 0) {
return NextResponse.json(
{ error: "Player name is required" },
{ status: 400 }
);
}
const trimmedName = name.trim();
const normalizedName = trimmedName.toLowerCase();
// Update the player
const updatedPlayer = await prisma.player.update({
where: { id: playerId },
data: {
name: trimmedName,
normalizedName,
},
});
// If the player has an associated user, update the user's name too
if (existingPlayer.user) {
await prisma.user.update({
where: { id: existingPlayer.user.id },
data: { name: trimmedName },
});
}
return NextResponse.json({
success: true,
player: updatedPlayer,
});
} catch (error: unknown) {
console.error("Error updating player:", error);
const message = error instanceof Error ? error.message : "Failed to update player";
return NextResponse.json(
{ error: message },
{ status: 500 }
);
}
}
+32
View File
@@ -0,0 +1,32 @@
import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
/**
* GET /api/players
*
* Get all players with their user associations
* This is a public endpoint (no authentication required)
*/
export async function GET() {
try {
const players = await prisma.player.findMany({
include: {
user: {
select: {
email: true,
},
},
},
orderBy: { name: "asc" },
});
return NextResponse.json(players);
} catch (error: unknown) {
console.error("Error fetching players:", error);
const message = error instanceof Error ? error.message : "Failed to fetch players";
return NextResponse.json(
{ error: message },
{ status: 500 }
);
}
}