diff --git a/SerpentRace_Frontend/src/api/deckApi.js b/SerpentRace_Frontend/src/api/deckApi.js index 77dbf91e..1a9460a7 100644 --- a/SerpentRace_Frontend/src/api/deckApi.js +++ b/SerpentRace_Frontend/src/api/deckApi.js @@ -40,8 +40,19 @@ export const updateDeck = async (deckId, deck) => { } } +// Delete a deck (soft delete) (authenticated) +export const deleteDeck = async (deckId) => { + try { + const response = await apiClient.delete(`/decks/${deckId}`) + return response.data + } catch (err) { + throw err + } +} + export default { createDeck, getDeckById, - updateDeck + updateDeck, + deleteDeck } diff --git a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx index b285dd5e..83f7dbd4 100644 --- a/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx +++ b/SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx @@ -2,7 +2,7 @@ // Deck alapadatok szerkesztése és mentés import React, { useState, useRef, useEffect } from "react" -import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa" +import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash } from "react-icons/fa" const deckTypes = [ { value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" }, @@ -15,7 +15,7 @@ const privacyOptions = [ { value: "public", label: "Publikus", icon: FaGlobe } ] -export default function DeckHeader({ deck, onUpdate, onSave, onBack }) { +export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) { const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false); const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false); const typeDropdownRef = useRef(null); @@ -64,13 +64,25 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) { - +
+ {deck.id && ( + + )} + + +
{/* Main Content Row */} diff --git a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx index f59fcb76..e035aa79 100644 --- a/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx +++ b/SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx @@ -150,20 +150,23 @@ export default function LuckCardEditor({ card, onChange }) { - {/* Consequence Value - csak ha előre/hátra lépés */} - {(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && ( + {/* Consequence Value - csak kör kihagyás és extra kör */} + {(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
updateConsequence('value', parseInt(e.target.value) || 1)} className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200" /> +
+ Érték: 1-5 között +
)} diff --git a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx index 44ddc641..2f155388 100644 --- a/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx +++ b/SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx @@ -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, getDeckById, updateDeck } from '../../api/deckApi' +import { createDeck, getDeckById, updateDeck, deleteDeck } from '../../api/deckApi' import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices" export default function DeckCreator() { @@ -29,6 +29,7 @@ export default function DeckCreator() { const [isCreatingCard, setIsCreatingCard] = useState(false) const [newCardType, setNewCardType] = useState(null) const [isLoading, setIsLoading] = useState(false) + const [showDeleteModal, setShowDeleteModal] = useState(false) // Betöltés API-ból useEffect(() => { @@ -239,6 +240,36 @@ export default function DeckCreator() { navigate("/decks") } + const handleDeleteDeck = () => { + if (!deck.id) { + notifyWarning('Nincs mit törölni - a pakli még nincs elmentve!') + return + } + + setShowDeleteModal(true) + } + + const handleConfirmDelete = async () => { + try { + await deleteDeck(deck.id) + setShowDeleteModal(false) + notifySuccess('Pakli sikeresen törölve!') + navigate('/decks') + } catch (error) { + console.error('Pakli törlési hiba:', error) + const errorMessage = error?.response?.data?.error + || error?.response?.data?.message + || error?.message + || 'Ismeretlen hiba történt' + notifyError('Hiba történt a törlés során: ' + errorMessage) + setShowDeleteModal(false) + } + } + + const handleCancelDelete = () => { + setShowDeleteModal(false) + } + const handleCreateCard = (cardType) => { setNewCardType(cardType) setIsCreatingCard(true) @@ -351,6 +382,7 @@ export default function DeckCreator() { onUpdate={handleDeckUpdate} onSave={handleSaveDeck} onBack={handleBack} + onDelete={handleDeleteDeck} /> {/* Main Content */} @@ -386,6 +418,35 @@ export default function DeckCreator() { )} + + {/* Delete Confirmation Modal */} + {showDeleteModal && ( +
+
+
🗑️
+

+ Biztosan törölni szeretnéd a(z) "{deck.name}" paklit? +

+

+ Ez a művelet nem visszavonható! +

+
+ + +
+
+
+ )} ) }