matthias.lotz
a27a66f6ee
- Add ConsentBadges component with platform icons and tooltips - Add consent filter dropdown in moderation page (all/workshop-only/platforms) - Add export button for CSV download of consent data - Extend /moderation/groups endpoint with filter params and consent data - Display consent badges in ImageGalleryCard for moderation mode - Visual distinction: workshop (green), social media (blue outlined) - Export functionality with date-stamped CSV files Tasks completed: - Moderation visual consent indicators - Moderation consent filter - Moderation export functionality
83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { Box, Chip, Tooltip } from '@mui/material';
|
|
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
|
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
import InstagramIcon from '@mui/icons-material/Instagram';
|
|
import MusicNoteIcon from '@mui/icons-material/MusicNote';
|
|
import WorkIcon from '@mui/icons-material/Work';
|
|
|
|
const ICON_MAP = {
|
|
'Facebook': FacebookIcon,
|
|
'Instagram': InstagramIcon,
|
|
'MusicNote': MusicNoteIcon,
|
|
};
|
|
|
|
const ConsentBadges = ({ group }) => {
|
|
// Workshop consent badge (always show if consented)
|
|
const workshopBadge = group.display_in_workshop && (
|
|
<Tooltip
|
|
title={`Werkstatt-Anzeige zugestimmt am ${new Date(group.consent_timestamp).toLocaleString('de-DE')}`}
|
|
arrow
|
|
>
|
|
<Chip
|
|
icon={<WorkIcon />}
|
|
label="Werkstatt"
|
|
size="small"
|
|
sx={{
|
|
bgcolor: '#4CAF50',
|
|
color: 'white',
|
|
'& .MuiChip-icon': { color: 'white' }
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
|
|
// Social media consent badges
|
|
const socialMediaBadges = group.socialMediaConsents?.map(consent => {
|
|
const IconComponent = ICON_MAP[consent.icon_name] || CheckCircleIcon;
|
|
return (
|
|
<Tooltip
|
|
key={consent.platform_id}
|
|
title={`${consent.display_name} Consent am ${new Date(consent.consent_timestamp).toLocaleString('de-DE')}`}
|
|
arrow
|
|
>
|
|
<Chip
|
|
icon={<IconComponent />}
|
|
label={consent.display_name}
|
|
size="small"
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: '#2196F3',
|
|
color: '#2196F3',
|
|
'& .MuiChip-icon': { color: '#2196F3' }
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
);
|
|
});
|
|
|
|
// If no consents at all, show nothing or a neutral indicator
|
|
if (!group.display_in_workshop && (!group.socialMediaConsents || group.socialMediaConsents.length === 0)) {
|
|
return (
|
|
<Chip
|
|
label="Kein Consent"
|
|
size="small"
|
|
variant="outlined"
|
|
sx={{
|
|
borderColor: '#757575',
|
|
color: '#757575'
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ display: 'flex', gap: 0.5, flexWrap: 'wrap', alignItems: 'center' }}>
|
|
{workshopBadge}
|
|
{socialMediaBadges}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ConsentBadges;
|