matthias.lotz
4b9feec887
- Created new modular components: * ConsentManager: Manages workshop + social media consents with individual save * GroupMetadataEditor: Manages group metadata (title, description, name, year) with save * ImageDescriptionManager: Manages image descriptions with batch save * DeleteGroupButton: Standalone group deletion component - Refactored ManagementPortalPage to use modular components: * Each component in Paper box with heading inside (not outside) * HTML buttons with CSS classes (btn btn-success, btn btn-secondary) * Inline feedback with Material-UI Alert instead of SweetAlert2 popups * Icons: 💾 save, ↩ discard, 🗑️ delete * Individual save/discard functionality per component - Enhanced ConsentCheckboxes component: * Added children prop for flexible composition * Conditional heading for manage mode inside Paper box - Fixed DescriptionInput: * Removed duplicate heading (now only in parent component) - React state management improvements: * Deep copy pattern for nested objects/arrays * Sorted array comparison for order-insensitive change detection * Set-based comparison for detecting removed items * Initialization guard to prevent useEffect overwrites - Bug fixes: * Fixed image reordering using existing /api/groups/:groupId/reorder route * Fixed edit mode toggle with unsaved changes warning * Fixed consent state updates with proper object references * Fixed uploadImageBatch signature to use object destructuring * Removed unnecessary /api/manage/:token/reorder route from backend Next: Apply same modular pattern to MultiUploadPage and ModerationGroupImagesPage
103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button } from '@mui/material';
|
|
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
|
|
import Swal from 'sweetalert2';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
/**
|
|
* Delete group button with confirmation dialog
|
|
* Standalone component for group deletion
|
|
*/
|
|
function DeleteGroupButton({ token, groupName = 'diese Gruppe' }) {
|
|
const [deleting, setDeleting] = useState(false);
|
|
const navigate = useNavigate();
|
|
|
|
const handleDelete = async () => {
|
|
const result = await Swal.fire({
|
|
title: 'Gruppe komplett löschen?',
|
|
html: `<strong>Achtung:</strong> Diese Aktion kann nicht rückgängig gemacht werden!<br><br>
|
|
Alle Bilder und Daten von "${groupName}" werden unwiderruflich gelöscht.`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonText: 'Ja, alles löschen',
|
|
cancelButtonText: 'Abbrechen',
|
|
input: 'checkbox',
|
|
inputPlaceholder: 'Ich verstehe, dass diese Aktion unwiderruflich ist'
|
|
});
|
|
|
|
if (!result.isConfirmed || !result.value) {
|
|
if (result.isConfirmed && !result.value) {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'Bestätigung erforderlich',
|
|
text: 'Bitte bestätigen Sie das Kontrollkästchen, um fortzufahren.'
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setDeleting(true);
|
|
|
|
const res = await fetch(`/api/manage/${token}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const body = await res.json().catch(() => ({}));
|
|
throw new Error(body.error || 'Fehler beim Löschen');
|
|
}
|
|
|
|
await Swal.fire({
|
|
icon: 'success',
|
|
title: 'Gruppe gelöscht',
|
|
text: 'Die Gruppe und alle Bilder wurden erfolgreich gelöscht.',
|
|
timer: 2000,
|
|
showConfirmButton: false
|
|
});
|
|
|
|
navigate('/');
|
|
|
|
} catch (error) {
|
|
console.error('Error deleting group:', error);
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Fehler',
|
|
text: error.message || 'Gruppe konnte nicht gelöscht werden'
|
|
});
|
|
setDeleting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
sx={{
|
|
borderRadius: '25px',
|
|
px: '30px',
|
|
py: '12px',
|
|
fontSize: '16px',
|
|
fontWeight: 500,
|
|
textTransform: 'none',
|
|
border: '2px solid #f44336',
|
|
color: '#f44336',
|
|
backgroundColor: 'transparent',
|
|
'&:hover': {
|
|
backgroundColor: '#f44336',
|
|
color: 'white',
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: '0 4px 12px rgba(244, 67, 54, 0.3)'
|
|
}
|
|
}}
|
|
onClick={handleDelete}
|
|
disabled={deleting}
|
|
size="large"
|
|
>
|
|
<DeleteForeverIcon sx={{ mr: 1 }} /> Gruppe löschen
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default DeleteGroupButton;
|