pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add click-to-edit pattern across all admin tables

Browse Source 
Replace Actions columns with clickable rows that open edit modals
directly. Delete is now an inline two-step confirm button in the
edit modal footer. Games modal links to routes/bosses detail,
route modal links to encounters, and boss modal has an Edit Team button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-08 13:44:38 +01:00
parent 76d69dfaf1
commit f09b8213fd
14 changed files with 145 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/pages/admin/AdminGameDetail.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import { useParams, Link } from 'react-router-dom'
import {
DndContext,
closestCenter,
@@ -17,7 +17,6 @@ import {
} from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { RouteFormModal } from '../../components/admin/RouteFormModal'
import { DeleteConfirmModal } from '../../components/admin/DeleteConfirmModal'
import { BossBattleFormModal } from '../../components/admin/BossBattleFormModal'
import { BossTeamEditor } from '../../components/admin/BossTeamEditor'
import { useGame } from '../../hooks/useGames'
@@ -39,13 +38,9 @@ import type { CreateBossBattleInput, UpdateBossBattleInput } from '../../types/a
function SortableRouteRow({
route,
onEdit,
onDelete,
onClick,
}: {
route: GameRoute
onEdit: (r: GameRoute) => void
onDelete: (r: GameRoute) => void
onClick: (r: GameRoute) => void
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
@@ -83,29 +78,12 @@ function SortableRouteRow({
</td>
<td className="px-4 py-3 text-sm whitespace-nowrap w-16">{route.order}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{route.name}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap w-32">
<div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
<button
onClick={() => onEdit(route)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => onDelete(route)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
</td>
</tr>
)
}
export function AdminGameDetail() {
const { gameId } = useParams<{ gameId: string }>()
const navigate = useNavigate()
const id = Number(gameId)
const { data: game, isLoading } = useGame(id)
@@ -121,10 +99,8 @@ export function AdminGameDetail() {
const [tab, setTab] = useState<'routes' | 'bosses'>('routes')
const [showCreate, setShowCreate] = useState(false)
const [editing, setEditing] = useState<GameRoute | null>(null)
const [deleting, setDeleting] = useState<GameRoute | null>(null)
const [showCreateBoss, setShowCreateBoss] = useState(false)
const [editingBoss, setEditingBoss] = useState<BossBattle | null>(null)
const [deletingBoss, setDeletingBoss] = useState<BossBattle | null>(null)
const [editingTeam, setEditingTeam] = useState<BossBattle | null>(null)
const sensors = useSensors(
@@ -235,9 +211,6 @@ export function AdminGameDetail() {
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-32">
Actions
</th>
</tr>
</thead>
<DndContext
@@ -254,9 +227,7 @@ export function AdminGameDetail() {
<SortableRouteRow
key={route.id}
route={route}
onEdit={setEditing}
onDelete={setDeleting}
onClick={(r) => navigate(`/admin/games/${id}/routes/${r.id}`)}
onClick={(r) => setEditing(r)}
/>
))}
</tbody>
@@ -291,20 +262,13 @@ export function AdminGameDetail() {
}
onClose={() => setEditing(null)}
isSubmitting={updateRoute.isPending}
/>
)}
{deleting && (
<DeleteConfirmModal
title={`Delete ${deleting.name}?`}
message="This will permanently delete the route. Routes with existing encounters cannot be deleted."
onConfirm={() =>
deleteRoute.mutate(deleting.id, {
onSuccess: () => setDeleting(null),
onDelete={() =>
deleteRoute.mutate(editing.id, {
onSuccess: () => setEditing(null),
})
}
onCancel={() => setDeleting(null)}
isDeleting={deleteRoute.isPending}
detailUrl={`/admin/games/${id}/routes/${editing.id}`}
/>
)}
</>
@@ -358,14 +322,15 @@ export function AdminGameDetail() {
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
Team
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-40">
Actions
</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
{bosses.map((boss) => (
<tr key={boss.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
<tr
key={boss.id}
className="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer"
onClick={() => setEditingBoss(boss)}
>
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.order}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap font-medium">{boss.name}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap capitalize">
@@ -374,28 +339,6 @@ export function AdminGameDetail() {
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.location}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.levelCap}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">{boss.pokemon.length}</td>
<td className="px-4 py-3 text-sm whitespace-nowrap">
<div className="flex gap-2">
<button
onClick={() => setEditingTeam(boss)}
className="text-green-600 hover:text-green-800 dark:text-green-400 text-sm"
>
Team
</button>
<button
onClick={() => setEditingBoss(boss)}
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm"
>
Edit
</button>
<button
onClick={() => setDeletingBoss(boss)}
className="text-red-600 hover:text-red-800 dark:text-red-400 text-sm"
>
Delete
</button>
</div>
</td>
</tr>
))}
</tbody>
@@ -434,20 +377,16 @@ export function AdminGameDetail() {
}
onClose={() => setEditingBoss(null)}
isSubmitting={updateBoss.isPending}
/>
)}
{deletingBoss && (
<DeleteConfirmModal
title={`Delete ${deletingBoss.name}?`}
message="This will permanently delete this boss battle and its pokemon team."
onConfirm={() =>
deleteBoss.mutate(deletingBoss.id, {
onSuccess: () => setDeletingBoss(null),
onDelete={() =>
deleteBoss.mutate(editingBoss.id, {
onSuccess: () => setEditingBoss(null),
})
}
onCancel={() => setDeletingBoss(null)}
isDeleting={deleteBoss.isPending}
onEditTeam={() => {
setEditingTeam(editingBoss)
setEditingBoss(null)
}}
/>
)}