admin
Some checks are pending
Deploy Admin Panel / Deploy Admin Panel (push) Waiting to run
Deploy Admin Panel / Admin Panel Verification (push) Blocked by required conditions
Deploy Mnemo Cards / Deploy Backend (push) Waiting to run
Deploy Mnemo Cards / Deploy Web App (push) Blocked by required conditions
Deploy Mnemo Cards / Final Verification (push) Blocked by required conditions
Some checks are pending
Deploy Admin Panel / Deploy Admin Panel (push) Waiting to run
Deploy Admin Panel / Admin Panel Verification (push) Blocked by required conditions
Deploy Mnemo Cards / Deploy Backend (push) Waiting to run
Deploy Mnemo Cards / Deploy Web App (push) Blocked by required conditions
Deploy Mnemo Cards / Final Verification (push) Blocked by required conditions
This commit is contained in:
parent
5a8c55c1ef
commit
2adffbf235
1 changed files with 167 additions and 41 deletions
|
|
@ -41,12 +41,15 @@ import { BulkCardUpload } from '@/components/BulkCardUpload'
|
|||
import { BulkCardEditor } from '@/components/BulkCardEditor'
|
||||
import { packsApi } from '@/api/packs'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||||
import { Plus, Search, Edit, Trash2, ChevronLeft, ChevronRight, Upload } from 'lucide-react'
|
||||
import { Plus, Search, Edit, Trash2, ChevronLeft, ChevronRight, Upload, List, Grid } from 'lucide-react'
|
||||
|
||||
type ViewMode = 'list' | 'grid'
|
||||
|
||||
export default function CardsPage() {
|
||||
const queryClient = useQueryClient()
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('list')
|
||||
const [selectedCard, setSelectedCard] = useState<GameCardDto | null>(null)
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
|
||||
|
|
@ -225,6 +228,25 @@ export default function CardsPage() {
|
|||
setPage(1) // Reset to first page when searching
|
||||
}
|
||||
|
||||
// Group cards by pack
|
||||
const groupedCards = data?.items.reduce((acc, card) => {
|
||||
const packId = card.packId || '__no_pack__'
|
||||
if (!acc[packId]) {
|
||||
acc[packId] = []
|
||||
}
|
||||
acc[packId].push(card)
|
||||
return acc
|
||||
}, {} as Record<string, GameCardDto[]>) || {}
|
||||
|
||||
// Get pack name by ID
|
||||
const getPackName = (packId: string): string => {
|
||||
if (packId === '__no_pack__') {
|
||||
return 'No Pack'
|
||||
}
|
||||
const pack = packsData?.items.find(p => p.id === packId)
|
||||
return pack?.title || packId
|
||||
}
|
||||
|
||||
if (error) {
|
||||
const errorMessage = isCardsApiError(error)
|
||||
? error.message
|
||||
|
|
@ -294,55 +316,159 @@ export default function CardsPage() {
|
|||
{/* Cards Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>All Cards ({data?.total || 0})</CardTitle>
|
||||
<CardDescription>
|
||||
Manage game cards in the system
|
||||
</CardDescription>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>All Cards ({data?.total || 0})</CardTitle>
|
||||
<CardDescription>
|
||||
Manage game cards in the system
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant={viewMode === 'list' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('list')}
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant={viewMode === 'grid' ? 'default' : 'outline'}
|
||||
size="sm"
|
||||
onClick={() => setViewMode('grid')}
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8">Loading cards...</div>
|
||||
) : (
|
||||
<>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Original</TableHead>
|
||||
<TableHead>Translation</TableHead>
|
||||
<TableHead>Mnemo</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data?.items.map((card) => (
|
||||
<TableRow key={card.id}>
|
||||
<TableCell>{card.id}</TableCell>
|
||||
<TableCell className="font-medium">{card.original}</TableCell>
|
||||
<TableCell>{card.translation}</TableCell>
|
||||
<TableCell className="max-w-xs truncate">{card.mnemo}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
{viewMode === 'list' ? (
|
||||
<>
|
||||
{Object.entries(groupedCards).map(([packId, cards]) => (
|
||||
<div key={packId} className="mb-8">
|
||||
<h3 className="text-lg font-semibold mb-4 pb-2 border-b">
|
||||
{getPackName(packId)} ({cards.length})
|
||||
</h3>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Original</TableHead>
|
||||
<TableHead>Translation</TableHead>
|
||||
<TableHead>Mnemo</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{cards.map((card) => (
|
||||
<TableRow key={card.id}>
|
||||
<TableCell>{card.id}</TableCell>
|
||||
<TableCell className="font-medium">{card.original}</TableCell>
|
||||
<TableCell>{card.translation}</TableCell>
|
||||
<TableCell className="max-w-xs truncate">{card.mnemo}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => openEditDialog(card)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(card)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{Object.entries(groupedCards).map(([packId, cards]) => (
|
||||
<div key={packId} className="mb-8">
|
||||
<h3 className="text-lg font-semibold mb-4 pb-2 border-b">
|
||||
{getPackName(packId)} ({cards.length})
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
|
||||
{cards.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="border rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer group"
|
||||
onClick={() => openEditDialog(card)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(card)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<div className="aspect-square bg-muted relative">
|
||||
{card.image ? (
|
||||
<img
|
||||
src={card.image}
|
||||
alt={card.original}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center text-muted-foreground">
|
||||
No Image
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="flex space-x-1">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
openEditDialog(card)
|
||||
}}
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
handleDelete(card)
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<p className="font-medium text-sm truncate" title={card.original}>
|
||||
{card.original}
|
||||
</p>
|
||||
{card.translation && (
|
||||
<p className="text-xs text-muted-foreground truncate" title={card.translation}>
|
||||
{card.translation}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{data && data.totalPages > 1 && (
|
||||
|
|
|
|||
Loading…
Reference in a new issue