Deck szerkesztese
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import React, { useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import {
|
||||
FaUser,
|
||||
FaLock,
|
||||
@@ -12,11 +13,13 @@ import {
|
||||
} from "react-icons/fa"
|
||||
|
||||
export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (!deck) return null
|
||||
|
||||
// Debug: Log the deck structure to see what we're working with
|
||||
console.log('Deck in popup:', deck)
|
||||
console.log('Cards:', deck.cards)
|
||||
console.log('Raw deck data:', deck.raw)
|
||||
|
||||
// Scroll blokkolás amikor a popup nyitva van
|
||||
useEffect(() => {
|
||||
@@ -29,50 +32,98 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
}
|
||||
}, [])
|
||||
|
||||
const deckTypes = {
|
||||
"Luck": { label: "Szerencse", color: "var(--color-luck)" },
|
||||
"Question": { label: "Kérdés", color: "var(--color-question)" },
|
||||
"Fun": { label: "Joker", color: "var(--color-fun)" }
|
||||
// Backend enum mapping
|
||||
const deckTypeMapping = {
|
||||
0: { label: "Szerencse", color: "var(--color-luck)" }, // LUCK
|
||||
1: { label: "Joker", color: "var(--color-fun)" }, // JOKER
|
||||
2: { label: "Kérdés", color: "var(--color-question)" } // QUESTION
|
||||
}
|
||||
|
||||
const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
|
||||
const ctypeMapping = {
|
||||
0: "Publikus", // PUBLIC
|
||||
1: "Privát", // PRIVATE
|
||||
2: "Vállalati" // ORGANIZATION
|
||||
}
|
||||
|
||||
// Use real deck data with safe fallbacks
|
||||
const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
|
||||
const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"
|
||||
const stateMapping = {
|
||||
0: "Aktív", // ACTIVE
|
||||
1: "Törölt" // SOFT_DELETE
|
||||
}
|
||||
|
||||
// Get data from raw if available
|
||||
// Get data from raw (backend data)
|
||||
const rawData = deck.raw || deck
|
||||
|
||||
// Use played number from raw data for answers count
|
||||
const questionsCount = rawData.cardCount || 0
|
||||
const answersCount = rawData.playedNumber || 0
|
||||
// Type info
|
||||
const deckTypeInfo = deckTypeMapping[rawData.type] || { label: "Ismeretlen", color: "var(--color-success)" }
|
||||
|
||||
// Privacy/CType
|
||||
const privacy = ctypeMapping[rawData.ctype] || "Ismeretlen"
|
||||
|
||||
// State
|
||||
const state = stateMapping[rawData.state] || "Ismeretlen"
|
||||
|
||||
// Creator
|
||||
const creator = rawData.user?.name || rawData.creatorName || rawData.creator || "Ismeretlen"
|
||||
|
||||
// Card count
|
||||
const cardCount = rawData.cardCount || 0
|
||||
|
||||
// Played count
|
||||
const playedNumber = rawData.playedNumber || 0
|
||||
|
||||
console.log('Calculated counts:', { questionsCount, answersCount, rawData })
|
||||
console.log('Mapped data:', {
|
||||
type: rawData.type,
|
||||
deckTypeInfo,
|
||||
ctype: rawData.ctype,
|
||||
privacy,
|
||||
state,
|
||||
cardCount,
|
||||
playedNumber
|
||||
})
|
||||
|
||||
const mockData = {
|
||||
...deck,
|
||||
name: rawData.name || deck.name || "Névtelen pakli",
|
||||
creator,
|
||||
privacy,
|
||||
questionsCount,
|
||||
answersCount
|
||||
state,
|
||||
questionsCount: cardCount,
|
||||
answersCount: playedNumber,
|
||||
created: rawData.creationdate || rawData.created || deck.created || new Date().toISOString(),
|
||||
description: rawData.description || ""
|
||||
}
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('hu-HU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
try {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('hu-HU', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
} catch (e) {
|
||||
return dateString
|
||||
}
|
||||
}
|
||||
|
||||
const handleOpenDeck = () => {
|
||||
// TODO: Megnyitás funkció - később implementálható
|
||||
alert("⚠️ A pakli megnyitás funkció még fejlesztés alatt áll!")
|
||||
}
|
||||
|
||||
const handleEditDeck = () => {
|
||||
alert("⚠️ A pakli szerkesztés funkció még fejlesztés alatt áll!")
|
||||
// Get the deck ID from raw data
|
||||
const deckId = rawData.id || deck.id
|
||||
|
||||
if (!deckId) {
|
||||
alert("⚠️ Hiba: A pakli azonosítója nem található!")
|
||||
return
|
||||
}
|
||||
|
||||
// Navigate to deck creator with the deck ID
|
||||
navigate(`/deck-creator/${deckId}`)
|
||||
|
||||
// Close the popup
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -86,7 +137,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
{/* Header with deck type color */}
|
||||
<div
|
||||
className="h-2 w-full"
|
||||
style={{ backgroundColor: currentDeckType.color }}
|
||||
style={{ backgroundColor: deckTypeInfo.color }}
|
||||
></div>
|
||||
|
||||
{/* Close button */}
|
||||
@@ -108,13 +159,18 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
<span
|
||||
className="inline-block px-3 py-1 rounded-full text-xs font-bold"
|
||||
style={{
|
||||
background: currentDeckType.color,
|
||||
background: deckTypeInfo.color,
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
{currentDeckType.label}
|
||||
{deckTypeInfo.label}
|
||||
</span>
|
||||
</div>
|
||||
{mockData.description && (
|
||||
<p className="text-[color:var(--color-text-muted)] text-sm">
|
||||
{mockData.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Data grid */}
|
||||
@@ -149,13 +205,13 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
<div className="flex items-center gap-3 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div
|
||||
className="flex items-center justify-center w-8 h-8 rounded-full"
|
||||
style={{ backgroundColor: `${currentDeckType.color}20` }}
|
||||
style={{ backgroundColor: `${deckTypeInfo.color}20` }}
|
||||
>
|
||||
<FaTags style={{ color: currentDeckType.color }} className="text-sm" />
|
||||
<FaTags style={{ color: deckTypeInfo.color }} className="text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Típus</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{currentDeckType.label}</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold text-sm">{deckTypeInfo.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -172,25 +228,25 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
|
||||
{/* Questions and Answers in one row */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{/* Questions */}
|
||||
{/* Card Count (Kártyák) */}
|
||||
<div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-question)]/20">
|
||||
<FaQuestionCircle className="text-[color:var(--color-question)] text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Kérdések</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Kártyák</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.questionsCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Answers */}
|
||||
{/* Played Count (Játszva) */}
|
||||
<div className="flex items-center gap-2 p-3 bg-[color:var(--color-background)]/50 rounded-xl">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-[color:var(--color-fun)]/20">
|
||||
<FaComment className="text-[color:var(--color-fun)] text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Válaszok</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.answersCount}</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-xs font-medium">Játszva</div>
|
||||
<div className="text-[color:var(--color-text)] font-semibold">{mockData.answersCount}×</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user