Changed ImageGalleryCard to pass itemId (image.id) instead of index
when deleting images in preview mode. This fixes 'Image not found' error
when attempting to delete individual images in ManagementPortalPage
and ModerationGroupImagesPage.
The index was being passed to the API, but the API expects the actual
database image ID.
- 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
- Task 17: Management-Link im Upload-Erfolg angezeigt mit Copy-Button
- Widerruf-Dialoge überarbeitet: Klarstellung zu Scope & Kontakt für Social Media Posts
- Rate-Limiter für Dev-Umgebung erhöht (100/h statt 10/h)
- Mailto-Link Verhalten noch nicht final getestet (Browser vs. Mail-Client)
ACHTUNG: Noch nicht vollständig getestet! Mailto-Funktionalität muss in verschiedenen Browsern validiert werden.
- Reduce success block complexity to match original styling level
- Keep same information (group ID, next steps, GDPR contact)
- Maintain consistent Material-UI sx usage with rest of app
- Move ConsentCheckboxes below DescriptionInput for better flow
- Replace success dialog with inline success display
- Add copy-to-clipboard button for group ID
- Show detailed next steps and GDPR contact info inline
- Add ConsentCheckboxes component with workshop and social media consents
- Add UploadSuccessDialog with group ID display and copy functionality
- Integrate consent validation into MultiUploadPage
- Extend batchUpload utility to send consent data
- Add GDPR compliance notices and contact information
- Block uploads without required workshop consent
- Lottie-react Bibliothek durch native CSS 3D Transforms ersetzt
- Hobbyhimmel Logo (Hammer & Wolke) als animiertes Loading-Icon
- Wolke rotiert um Y-Achse (4s)
- Hammer rotiert um Y-Achse UND eigene Diagonalachse (3s)
- 15° X-Neigung für dynamischeren 3D-Effekt
- Nested Transform-Hierarchie mit transform-box: fill-box
- Upload-Erfolgsmeldung als grünes Banner unter Animation
- Nutzer muss Upload-Bestätigung mit Button bestätigen
- Loading-Animation bleibt während Erfolgsmeldung sichtbar
- Display app version dynamically from window._env_.APP_VERSION
- Credit original author (vallezw) with link to original repo
- Credit extended version (lotzm) with link to Gitea repo
- Update package.json version to 1.1.0
Footer styling:
- Position fixed at bottom-right corner of viewport
- Unobtrusive design with small font size (11px)
- Semi-transparent background with subtle shadow
- Stays visible while scrolling
- Hover effect on links for better UX
Changes:
- frontend/package.json: version 0.1.0 → 1.1.0
- Footer.js: Dynamic version display, attribution links
- Footer.css: Fixed positioning, responsive styling
- Create DeletionLogSection component
- Integrate deletion log at bottom of moderation page
- Remove standalone DeletionLogPage and route
- Remove admin nav link (log now in moderation)
- Keep /api/admin routes for backend API access
- Update nginx configs (remove /admin frontend route)
- Create DeletionLogPage with statistics cards and deletion history table
- Add admin navigation link to Navbar
- Configure nginx for /admin and /api/admin routes (dev+prod)
- Add password protection for admin routes
- Support toggle between last 10 and all deletions
Features:
- Add image description field (max 200 chars) for individual images
- Replace 'Sort' button with 'Edit' button in image gallery cards
- Enable edit mode with text fields for each image in moderation
- Display descriptions in slideshow and public views
- Integrate description saving with main save button
Frontend changes:
- ImageGalleryCard: Add edit mode UI with textarea and character counter
- ModerationGroupImagesPage: Integrate description editing into main save flow
- Fix keyboard event propagation in textarea (spacebar issue)
- Remove separate 'Save Descriptions' button
- Add ESLint fixes for useCallback dependencies
Backend changes:
- Fix route order: batch-description route must come before :imageId route
- Ensure batch description update API works correctly
Build optimizations:
- Add .dockerignore to exclude development data (182MB reduction)
- Fix Dockerfile: Remove non-existent frontend/conf directory
- Reduce backend image size from 437MB to 247MB
Fixes:
- Fix route matching issue with batch-description endpoint
- Prevent keyboard events from triggering drag-and-drop
- Clean up unused functions and ESLint warnings
- Enable image reordering in MultiUploadPage before upload
- Add handleReorder callback to update local state
- Users can now sort preview images via drag-and-drop
- Upload order follows the sorted preview order
- No API call needed (pure local state management)
- Neue Docker-Struktur: docker/{dev,prod}/ für klare Trennung
- Entfernt: docker-compose.override.yml (problematisch)
- Hinzugefügt: ./dev.sh und ./prod.sh Scripts für einfache Bedienung
- Container-spezifische Konfigurationen in docker/{dev,prod}/*/config/
- Aktualisierte READMEs für neue Struktur
- Backend-Daten in .gitignore hinzugefügt
- Bereinigt: Veraltete Dockerfiles und Konfigurationsdateien
Jetzt: Wartungsfreundlich, keine Verwirrung zwischen Umgebungen
- Problem: getImageSrc() konnte nicht mit Blob-URLs von ausgewählten Upload-Dateien umgehen
- Lösung: Direkte Behandlung von Blob-URLs in ImageGalleryCard für Upload-Preview
- Erweitert: imageUtils.js um Blob-URL Unterstützung
- Hinzugefügt: Eindeutige IDs für Preview-Objekte in MultiUploadPage
Fixes #upload-preview-missing
🔧 Problem identified and fixed:
- nginx proxy was routing /api/groups to /groups (removing /api prefix)
- Backend route was registered under /api/groups instead of /groups
- Changed backend route registration from '/api/groups' to '/groups'
- Tested API endpoint: curl to /api/groups/qion_-lT1/reorder now works
- Removed debug console.log statements for cleaner production code
✅ Drag-and-drop reordering now functional in ModerationGroupImagesPage
✅ API requests properly routed through nginx proxy to backend
✅ Error 'Reihenfolge konnte nicht geändert werden' resolved
- Add imageUtils.js helper with getImageSrc() and getGroupPreviewSrc()
- Update ImageGalleryCard to use preview images for galleries
- Update ModerationGroupsPage to show preview images in modal
- Update ModerationGroupImagesPage to use preview images
- Update PublicGroupImagesPage to pass all image fields
- SlideshowPage continues using original images (full quality)
- Update nginx.dev.conf with /api/previews and /api/download routes
- Update start-dev.sh to generate correct nginx config
- Fix GroupRepository.getAllGroupsWithModerationInfo() to return full image data
- Remove obsolete version from docker-compose.override.yml
- Update TODO.md: mark frontend cleanup as completed
Performance: Gallery load times reduced by ~96% (100KB vs 3MB per image)
- Add comprehensive CHANGELOG.md with all upgrade phases and results
- Update TODO.md to mark framework upgrades as completed
- Update UPGRADE_PLAN with actual timelines and detailed phase results
- Finalize docker-compose.override.yml and Dockerfile.dev for dev workflow
- Update package-lock.json after dependency changes
All 4 phases completed successfully:
- Backend: Node 14 → 24
- Frontend: React 17 → 18.3.1, Router v5 → v6, MUI v4 → v5
- Dev environment with HMR fully functional
- Integration smoke tests passed
- Update package.json: react/react-dom ^17→^18.3.1, react-scripts 4→5.0.1
- Migrate to React 18 Root API in src/index.js (createRoot)
- Add --legacy-peer-deps to Dockerfile for MUI v4 compatibility
- Regenerate package-lock.json with legacy peer deps flag
✅ Tested: Production build 253.28 KB gzip, containers running
✅ Manual test: Upload, Moderation, Public View, Slideshow - all working
Phase 2 complete: Frontend on React 18 with concurrent rendering.
Major Frontend Refactoring:
- Replace ImagePreviewGallery with unified ImageGallery/ImageGalleryCard components
- Support 4 display modes: group, moderation, preview, single-image
- Add hidePreview prop to conditionally hide group preview images
- Unified grid layout with responsive 3/2/1 column design
- Remove 15+ legacy files and components
- Delete UploadedImagePage, SocialMedia components, old upload components
- Remove unused CSS files (GroupCard.css, Image.css/scss)
- Clean up /upload/:image_url route from App.js
- Fix image preview functionality in MultiUploadPage
- Convert File objects to blob URLs with URL.createObjectURL()
- Add proper memory cleanup with URL.revokeObjectURL()
- Improve page navigation and layout
- Fix GroupsOverviewPage to route to /groups/:groupId detail page
- Adjust PublicGroupImagesPage spacing and layout
- Fix ModerationGroupsPage duplicate stats section
CSS Refactoring:
- Rename GroupCard.css → ImageGallery.css with updated class names
- Maintain backward compatibility with legacy class names
- Fix grid stretching with fixed 3-column layout
Development Environment:
- Add docker-compose.override.yml for local development
- Create Dockerfile.dev with hot-reload support
- Add start-dev.sh and nginx.dev.conf
- Update README.dev.md with development setup instructions
Production Build:
- Fix frontend/Dockerfile multi-stage build (as → AS)
- Update prod.sh to explicitly use docker-compose.yml (ignore override)
- Resolve node:18-alpine image corruption issue
- Backend Dockerfile improvements for Node 14 compatibility
Documentation:
- Update TODO.md marking completed frontend tasks
- Clean up docs/images directory
- Update README.md with current project status
All changes tested and verified in both development and production environments.
