refactor: Extract ConsentFilter and StatsDisplay components from ModerationGroupsPage
- Created ConsentFilter component with proper styling - Created StatsDisplay component for statistics display - Added ModerationGroupsPage.css to remove inline styles - Removed 83 lines of inline CSS from ModerationGroupsPage - Components now reusable across admin pages - Added container wrappers and titles to both components - Improved code maintainability and separation of concerns
This commit is contained in:
parent
e4a76a6b3d
commit
e4712f9e7e
|
|
@ -0,0 +1,54 @@
|
|||
.consent-filter-container {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.consent-filter-title {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.consent-filter {
|
||||
min-width: 250px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.consent-filter-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.consent-filter-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.consent-filter-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.consent-filter-label:hover {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.consent-filter-checkbox {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import React from 'react';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import './ConsentFilter.css';
|
||||
|
||||
/**
|
||||
* ConsentFilter Component
|
||||
* Displays checkboxes for filtering groups by consent type
|
||||
*
|
||||
* @param {Object} filters - Current filter state { workshop, facebook, instagram, tiktok }
|
||||
* @param {Function} onChange - Callback when filter changes
|
||||
* @param {Array} platforms - Available social media platforms from API
|
||||
*/
|
||||
const ConsentFilter = ({ filters, onChange, platforms = [] }) => {
|
||||
const handleCheckboxChange = (filterName, checked) => {
|
||||
onChange({
|
||||
...filters,
|
||||
[filterName]: checked
|
||||
});
|
||||
};
|
||||
|
||||
// Platform mapping for display names
|
||||
const platformLabels = {
|
||||
workshop: 'Werkstatt',
|
||||
facebook: 'Facebook',
|
||||
instagram: 'Instagram',
|
||||
tiktok: 'TikTok'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="consent-filter-container">
|
||||
<h2 className="consent-filter-title">Filter</h2>
|
||||
<fieldset className="consent-filter">
|
||||
<legend className="consent-filter-legend">
|
||||
<FilterListIcon className="filter-icon" />
|
||||
Consent-Filter
|
||||
</legend>
|
||||
<div className="consent-filter-options">
|
||||
<label className="consent-filter-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.workshop}
|
||||
onChange={(e) => handleCheckboxChange('workshop', e.target.checked)}
|
||||
className="consent-filter-checkbox"
|
||||
/>
|
||||
{platformLabels.workshop}
|
||||
</label>
|
||||
<label className="consent-filter-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.facebook}
|
||||
onChange={(e) => handleCheckboxChange('facebook', e.target.checked)}
|
||||
className="consent-filter-checkbox"
|
||||
/>
|
||||
{platformLabels.facebook}
|
||||
</label>
|
||||
<label className="consent-filter-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.instagram}
|
||||
onChange={(e) => handleCheckboxChange('instagram', e.target.checked)}
|
||||
className="consent-filter-checkbox"
|
||||
/>
|
||||
{platformLabels.instagram}
|
||||
</label>
|
||||
<label className="consent-filter-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filters.tiktok}
|
||||
onChange={(e) => handleCheckboxChange('tiktok', e.target.checked)}
|
||||
className="consent-filter-checkbox"
|
||||
/>
|
||||
{platformLabels.tiktok}
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ConsentFilter;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.stats-display-container {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stats-display {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
color: white;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react';
|
||||
import './StatsDisplay.css';
|
||||
|
||||
/**
|
||||
* StatsDisplay Component
|
||||
* Displays statistics in a grid layout
|
||||
*
|
||||
* @param {Array} stats - Array of stat objects { number, label }
|
||||
*/
|
||||
const StatsDisplay = ({ stats }) => {
|
||||
return (
|
||||
<div className="stats-display-container">
|
||||
<h2 className="stats-title">Statistiken</h2>
|
||||
<div className="stats-display">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="stat-item">
|
||||
<span className="stat-number">{stat.number}</span>
|
||||
<span className="stat-label">{stat.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatsDisplay;
|
||||
179
frontend/src/Components/Pages/Css/ModerationGroupsPage.css
Normal file
179
frontend/src/Components/Pages/Css/ModerationGroupsPage.css
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/* Moderation Page Layout */
|
||||
.moderation-content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.moderation-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.moderation-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.moderation-username {
|
||||
color: #666666;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Filter Controls Area */
|
||||
.moderation-controls {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.moderation-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
.moderation-loading,
|
||||
.moderation-error {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.moderation-error {
|
||||
color: #d32f2f;
|
||||
background-color: #ffebee;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Image Modal */
|
||||
.image-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.image-modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.group-details {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.group-details p {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.images-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.image-item {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.image-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-actions {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.image-name {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.moderation-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.images-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
|
||||
.image-modal {
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import Swal from 'sweetalert2/dist/sweetalert2.js';
|
||||
|
||||
// Services
|
||||
|
|
@ -16,8 +15,14 @@ import Navbar from '../ComponentUtils/Headers/Navbar';
|
|||
import Footer from '../ComponentUtils/Footer';
|
||||
import ImageGallery from '../ComponentUtils/ImageGallery';
|
||||
import DeletionLogSection from '../ComponentUtils/DeletionLogSection';
|
||||
import ConsentFilter from '../ComponentUtils/ConsentFilter/ConsentFilter';
|
||||
import StatsDisplay from '../ComponentUtils/StatsDisplay/StatsDisplay';
|
||||
import { getImageSrc } from '../../Utils/imageUtils';
|
||||
|
||||
// Styles
|
||||
import './Css/ModerationGroupsPage.css';
|
||||
import '../../App.css';
|
||||
|
||||
const ModerationGroupsPage = () => {
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -267,15 +272,17 @@ const ModerationGroupsPage = () => {
|
|||
<meta name="description" content="Interne Moderationsseite - Nicht öffentlich zugänglich" />
|
||||
</Helmet>
|
||||
|
||||
<div className="container moderation-content" style={{ paddingTop: '20px' }}>
|
||||
<div className="flex-center" style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px', marginBottom: '24px' }}>
|
||||
<div className="container moderation-content">
|
||||
<div className="moderation-header">
|
||||
<h1>Moderation</h1>
|
||||
<div className="flex-center" style={{ gap: '16px' }}>
|
||||
<div className="moderation-user-info">
|
||||
<button className="btn btn-success" onClick={exportConsentData}> Consent-Daten exportieren </button>
|
||||
{user?.username && (
|
||||
<p className="text-small" style={{ color: '#666666', margin: 0 }}>
|
||||
<p className="moderation-username">
|
||||
Eingeloggt als <strong>{user.username}</strong>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary"
|
||||
|
|
@ -285,78 +292,30 @@ const ModerationGroupsPage = () => {
|
|||
>
|
||||
{logoutPending ? 'Wird abgemeldet…' : 'Logout'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="moderation-stats">
|
||||
<div className="stat-item">
|
||||
<span className="stat-number">{pendingGroups.length}</span>
|
||||
<span className="stat-label">Wartend</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className="stat-number">{approvedGroups.length}</span>
|
||||
<span className="stat-label">Freigegeben</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className="stat-number">{groups.length}</span>
|
||||
<span className="stat-label">Gesamt</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Lösch-Historie */}
|
||||
<section className="moderation-section">
|
||||
<DeletionLogSection />
|
||||
</section>
|
||||
<StatsDisplay
|
||||
stats={[
|
||||
{ number: pendingGroups.length, label: 'Wartend' },
|
||||
{ number: approvedGroups.length, label: 'Freigegeben' },
|
||||
{ number: groups.length, label: 'Gesamt' }
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Filter und Export Controls */}
|
||||
<div style={{ display: 'flex', gap: '16px', marginBottom: '24px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
|
||||
<fieldset style={{ minWidth: '250px', border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
|
||||
<legend style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', fontSize: '14px', fontWeight: 600 }}>
|
||||
<FilterListIcon style={{ marginRight: '4px', fontSize: '18px' }} />
|
||||
Consent-Filter
|
||||
</legend>
|
||||
<div>
|
||||
<label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={consentFilters.workshop}
|
||||
onChange={(e) => setConsentFilters({...consentFilters, workshop: e.target.checked})}
|
||||
style={{ marginRight: '8px' }}
|
||||
<ConsentFilter
|
||||
filters={consentFilters}
|
||||
onChange={setConsentFilters}
|
||||
platforms={platforms}
|
||||
/>
|
||||
Werkstatt
|
||||
</label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={consentFilters.facebook}
|
||||
onChange={(e) => setConsentFilters({...consentFilters, facebook: e.target.checked})}
|
||||
style={{ marginRight: '8px' }}
|
||||
/>
|
||||
Facebook
|
||||
</label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={consentFilters.instagram}
|
||||
onChange={(e) => setConsentFilters({...consentFilters, instagram: e.target.checked})}
|
||||
style={{ marginRight: '8px' }}
|
||||
/>
|
||||
Instagram
|
||||
</label>
|
||||
<label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={consentFilters.tiktok}
|
||||
onChange={(e) => setConsentFilters({...consentFilters, tiktok: e.target.checked})}
|
||||
style={{ marginRight: '8px' }}
|
||||
/>
|
||||
TikTok
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<button
|
||||
className="btn btn-success"
|
||||
onClick={exportConsentData}
|
||||
>
|
||||
Consent-Daten exportieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Wartende Gruppen */}
|
||||
<section className="moderation-section">
|
||||
|
|
@ -386,10 +345,7 @@ const ModerationGroupsPage = () => {
|
|||
/>
|
||||
</section>
|
||||
|
||||
{/* Lösch-Historie */}
|
||||
<section className="moderation-section">
|
||||
<DeletionLogSection />
|
||||
</section>
|
||||
|
||||
|
||||
{/* Bilder-Modal */}
|
||||
{showImages && selectedGroup && (
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user