javitasok-plusz #81
@@ -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 {
|
export default {
|
||||||
createDeck,
|
createDeck,
|
||||||
getDeckById,
|
getDeckById,
|
||||||
updateDeck
|
updateDeck,
|
||||||
|
deleteDeck
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
// Deck alapadatok szerkesztése és mentés
|
// Deck alapadatok szerkesztése és mentés
|
||||||
|
|
||||||
import React, { useState, useRef, useEffect } from "react"
|
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 = [
|
const deckTypes = [
|
||||||
{ value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
|
{ value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
|
||||||
@@ -15,7 +15,7 @@ const privacyOptions = [
|
|||||||
{ value: "public", label: "Publikus", icon: FaGlobe }
|
{ 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 [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
|
||||||
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
|
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
|
||||||
const typeDropdownRef = useRef(null);
|
const typeDropdownRef = useRef(null);
|
||||||
@@ -64,6 +64,17 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{deck.id && (
|
||||||
|
<button
|
||||||
|
onClick={onDelete}
|
||||||
|
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
|
||||||
|
>
|
||||||
|
<FaTrash />
|
||||||
|
Törlés
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={onSave}
|
onClick={onSave}
|
||||||
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
|
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
|
||||||
@@ -72,6 +83,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
|||||||
Mentés
|
Mentés
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Main Content Row */}
|
{/* Main Content Row */}
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
|
|||||||
@@ -150,20 +150,23 @@ export default function LuckCardEditor({ card, onChange }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Consequence Value - csak ha előre/hátra lépés */}
|
{/* Consequence Value - csak kör kihagyás és extra kör */}
|
||||||
{(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
|
{(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||||
Mezők száma
|
{cardData.consequence?.type === 2 ? 'Körök kihagyása' : 'Extra körök száma'}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
min="1"
|
min="1"
|
||||||
max="10"
|
max="5"
|
||||||
value={cardData.consequence?.value ?? 1}
|
value={cardData.consequence?.value ?? 1}
|
||||||
onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
|
onChange={(e) => 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"
|
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"
|
||||||
/>
|
/>
|
||||||
|
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
|
||||||
|
Érték: 1-5 között
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
|
|||||||
import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
|
import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
|
||||||
import CardsList from "../../components/DeckCreator/CardsList.jsx"
|
import CardsList from "../../components/DeckCreator/CardsList.jsx"
|
||||||
import CardEditor from "../../components/DeckCreator/CardEditor.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"
|
import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
|
||||||
|
|
||||||
export default function DeckCreator() {
|
export default function DeckCreator() {
|
||||||
@@ -29,6 +29,7 @@ export default function DeckCreator() {
|
|||||||
const [isCreatingCard, setIsCreatingCard] = useState(false)
|
const [isCreatingCard, setIsCreatingCard] = useState(false)
|
||||||
const [newCardType, setNewCardType] = useState(null)
|
const [newCardType, setNewCardType] = useState(null)
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||||
|
|
||||||
// Betöltés API-ból
|
// Betöltés API-ból
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -239,6 +240,36 @@ export default function DeckCreator() {
|
|||||||
navigate("/decks")
|
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) => {
|
const handleCreateCard = (cardType) => {
|
||||||
setNewCardType(cardType)
|
setNewCardType(cardType)
|
||||||
setIsCreatingCard(true)
|
setIsCreatingCard(true)
|
||||||
@@ -351,6 +382,7 @@ export default function DeckCreator() {
|
|||||||
onUpdate={handleDeckUpdate}
|
onUpdate={handleDeckUpdate}
|
||||||
onSave={handleSaveDeck}
|
onSave={handleSaveDeck}
|
||||||
onBack={handleBack}
|
onBack={handleBack}
|
||||||
|
onDelete={handleDeleteDeck}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
@@ -386,6 +418,35 @@ export default function DeckCreator() {
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Delete Confirmation Modal */}
|
||||||
|
{showDeleteModal && (
|
||||||
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
||||||
|
<div className="bg-[color:var(--color-surface)] rounded-xl shadow-xl p-6 w-96 text-center animate-fadeIn">
|
||||||
|
<div className="text-4xl mb-4">🗑️</div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4 text-[color:var(--color-text)]">
|
||||||
|
Biztosan törölni szeretnéd a(z) "{deck.name}" paklit?
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[color:var(--color-text-muted)] mb-6">
|
||||||
|
Ez a művelet nem visszavonható!
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
<button
|
||||||
|
onClick={handleConfirmDelete}
|
||||||
|
className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition font-semibold"
|
||||||
|
>
|
||||||
|
Igen, törlöm
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={handleCancelDelete}
|
||||||
|
className="bg-[color:var(--color-background)] text-[color:var(--color-text)] px-6 py-2 rounded-lg hover:bg-[color:var(--color-surface-selected)] transition"
|
||||||
|
>
|
||||||
|
Mégse
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user