Deck szerkesztese
This commit is contained in:
@@ -7,7 +7,7 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
|
||||
import CardsList from "../../components/DeckCreator/CardsList.jsx"
|
||||
import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
|
||||
import { createDeck } from '../../api/deckApi'
|
||||
import { createDeck, getDeckById, updateDeck } from '../../api/deckApi'
|
||||
import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
|
||||
|
||||
export default function DeckCreator() {
|
||||
@@ -28,6 +28,7 @@ export default function DeckCreator() {
|
||||
const [selectedCard, setSelectedCard] = useState(null)
|
||||
const [isCreatingCard, setIsCreatingCard] = useState(false)
|
||||
const [newCardType, setNewCardType] = useState(null)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
|
||||
// Betöltés API-ból
|
||||
useEffect(() => {
|
||||
@@ -46,16 +47,44 @@ export default function DeckCreator() {
|
||||
}, [deckId])
|
||||
|
||||
const loadDeck = async (id) => {
|
||||
// Mock adatok – később backendből jön majd
|
||||
const mockDeck = {
|
||||
id,
|
||||
name: "Demo Deck",
|
||||
type: "QUESTION",
|
||||
privacy: "public",
|
||||
description: "Ez egy teszt deck",
|
||||
cards: []
|
||||
setIsLoading(true)
|
||||
try {
|
||||
const deckData = await getDeckById(id)
|
||||
console.log('Loaded deck:', deckData)
|
||||
|
||||
// Type mapping from backend to frontend
|
||||
const typeMapping = {
|
||||
0: 'LUCK',
|
||||
1: 'JOKER',
|
||||
2: 'QUESTION'
|
||||
}
|
||||
|
||||
// CType mapping from backend to frontend
|
||||
const ctypeMapping = {
|
||||
0: 'public',
|
||||
1: 'private',
|
||||
2: 'organization'
|
||||
}
|
||||
|
||||
setDeck({
|
||||
id: deckData.id,
|
||||
name: deckData.name || "Névtelen pakli",
|
||||
type: typeMapping[deckData.type] || 'QUESTION',
|
||||
privacy: ctypeMapping[deckData.ctype] || 'private',
|
||||
description: deckData.description || "",
|
||||
cards: deckData.cards || [],
|
||||
creationdate: deckData.creationdate,
|
||||
updatedate: deckData.updatedate
|
||||
})
|
||||
|
||||
// Success notification removed - silent load for better UX
|
||||
} catch (error) {
|
||||
console.error('Pakli betöltési hiba:', error)
|
||||
notifyError('Hiba történt a pakli betöltése során: ' + (error?.response?.data?.error || error.message))
|
||||
navigate('/decks')
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
setDeck(mockDeck)
|
||||
}
|
||||
|
||||
const handleDeckUpdate = (updates) => {
|
||||
@@ -71,15 +100,42 @@ export default function DeckCreator() {
|
||||
'QUESTION': 2
|
||||
}
|
||||
|
||||
const ctypeMapping = {
|
||||
'public': 0,
|
||||
'private': 1,
|
||||
'organization': 2
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: deck.name?.trim() || "Névtelen pakli",
|
||||
type: typeMapping[deck.type] ?? 2,
|
||||
ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
|
||||
description: deck.description || "",
|
||||
ctype: ctypeMapping[deck.privacy] ?? 1,
|
||||
cards: deck.cards || []
|
||||
}
|
||||
|
||||
// Note: description field is not sent to backend as it's not supported yet
|
||||
|
||||
const saved = await createDeck(payload)
|
||||
console.log('=== DECK SAVE DEBUG ===')
|
||||
console.log('Deck ID:', deck.id)
|
||||
console.log('Deck object:', deck)
|
||||
console.log('Payload to send:', payload)
|
||||
console.log('Is Update?', !!deck.id)
|
||||
|
||||
let saved
|
||||
if (deck.id) {
|
||||
// Update existing deck
|
||||
console.log('Calling updateDeck with ID:', deck.id)
|
||||
saved = await updateDeck(deck.id, payload)
|
||||
console.log('Update response:', saved)
|
||||
notifySuccess('Pakli sikeresen frissítve!')
|
||||
} else {
|
||||
// Create new deck
|
||||
console.log('Calling createDeck')
|
||||
saved = await createDeck(payload)
|
||||
console.log('Create response:', saved)
|
||||
notifySuccess('Pakli sikeresen létrehozva!')
|
||||
}
|
||||
|
||||
setDeck(prev => ({
|
||||
...prev,
|
||||
id: saved.id ?? prev.id,
|
||||
@@ -88,10 +144,19 @@ export default function DeckCreator() {
|
||||
}))
|
||||
|
||||
console.log('Deck saved (backend):', saved)
|
||||
notifySuccess('Pakli sikeresen elmentve!')
|
||||
} catch (error) {
|
||||
console.error('Mentési hiba:', error)
|
||||
notifyError('Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message))
|
||||
console.error('=== DECK SAVE ERROR ===')
|
||||
console.error('Full error:', error)
|
||||
console.error('Error response:', error?.response)
|
||||
console.error('Error response data:', error?.response?.data)
|
||||
console.error('Error message:', error?.message)
|
||||
|
||||
const errorMessage = error?.response?.data?.error
|
||||
|| error?.response?.data?.message
|
||||
|| error?.message
|
||||
|| 'Ismeretlen hiba történt'
|
||||
|
||||
notifyError('Hiba történt a mentés során: ' + errorMessage)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -193,17 +258,30 @@ export default function DeckCreator() {
|
||||
<div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
|
||||
<Navbar />
|
||||
|
||||
<main className="flex-1 flex flex-col">
|
||||
{/* Deck Header */}
|
||||
<DeckHeader
|
||||
deck={deck}
|
||||
onUpdate={handleDeckUpdate}
|
||||
onSave={handleSaveDeck}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
{isLoading ? (
|
||||
<main className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">⏳</div>
|
||||
<div className="text-[color:var(--color-text)] text-xl font-semibold mb-2">
|
||||
Pakli betöltése...
|
||||
</div>
|
||||
<div className="text-[color:var(--color-text-muted)]">
|
||||
Kérlek várj, amíg betöltjük a pakli adatait.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
<main className="flex-1 flex flex-col">
|
||||
{/* Deck Header */}
|
||||
<DeckHeader
|
||||
deck={deck}
|
||||
onUpdate={handleDeckUpdate}
|
||||
onSave={handleSaveDeck}
|
||||
onBack={handleBack}
|
||||
/>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex">
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex">
|
||||
{/* Left Panel - Cards List */}
|
||||
<div className="w-80 bg-[color:var(--color-surface)] border-r border-[color:var(--color-surface-selected)] flex flex-col">
|
||||
<CardsList
|
||||
@@ -233,7 +311,8 @@ export default function DeckCreator() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</main>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user