Commit Graph

3 Commits

Author SHA1 Message Date
25dda32c4e feat: Error handling system and animated error pages
- Add ErrorBoundary component for React error handling
- Create animated error pages (403, 404, 500, 502, 503)
- Implement ErrorAnimation component with seven-segment display
- Add apiClient (axios) and apiFetch (fetch) wrappers with automatic error page redirects
- Migrate critical API calls to use new error handling
- Update font from Roboto to Open Sans across all components
- Remove unused CLIENT_URL from docker-compose files
- Rename 404Page.css to ErrorPage.css for consistency
- Add comprehensive ERROR_HANDLING.md documentation
2025-11-26 22:42:55 +01:00
bd7bdac000 refactor: Complete UI refactoring with modular components
- Refactored ManagementPortalPage, MultiUploadPage, ModerationGroupImagesPage
- Created reusable modular components with mode support:
  * ImageDescriptionManager (manage/moderate modes)
  * GroupMetadataEditor (edit/upload/moderate modes)
  * ConsentManager (edit/upload modes)
- Replaced Material-UI Buttons with HTML buttons + CSS classes
- Fixed image descriptions upload (preview ID to filename mapping)
- Reduced ModerationGroupImagesPage from 281 to 107 lines
- Updated ModerationGroupsPage and GroupsOverviewPage button styles
- All pages now use consistent Paper boxes with headings
- Inline Material-UI Alerts instead of SweetAlert2 popups (except destructive actions)
- Icons: 💾 save, ↩ discard, 🗑️ delete consistently used
2025-11-15 18:17:14 +01:00
4b9feec887 Refactor: Create modular component architecture for ManagementPortalPage
- 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
2025-11-15 17:25:51 +01:00