hobbyhimmel/Project-Image-Uploader
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
84 Commits 7 Branches 17 Tags 6.1 MiB
f7ced61e4b
Commit Graph

5 Commits

Author SHA1 Message Date
matthias.lotz
15fc02235f feat(frontend): Add countdown and improve approval feedback 
Phase 4 Progress - Tasks 7 & 8 Complete

Countdown Display (Task 7):
- getDaysUntilDeletion() helper in ImageGalleryCard
- Countdown widget for unapproved groups
- Shows '⏰ Wird gelöscht in: X Tagen'
- Only visible for pending groups in moderation mode
- Yellow warning style with border accent
- CSS: .deletion-countdown with responsive design

Approval Button Improvements (Task 8):
- Upgraded from alert() to SweetAlert2
- Success message with auto-close (2s)
- Error handling with detailed messages
- Optimistic UI updates (groups move between sections)
- Different messages for approve/unapprove actions

Files modified:
- ImageGalleryCard.js: Countdown logic and display
- ImageGallery.css: Countdown styling
- ModerationGroupsPage.js: SweetAlert2 integration

Tasks completed: ✅ 4.7, ✅ 4.8
 2025-11-08 12:28:58 +01:00
matthias.lotz
292d25f5b4 feat: Implement image descriptions - Backend & Core Frontend 
- Database: Add image_description column to images table
- Repository: Add updateImageDescription & updateBatchImageDescriptions methods
- API: Add PATCH endpoints for single and batch description updates
- Upload: Support descriptions in batch upload
- Frontend: ImageGalleryCard with Edit mode and textarea
- Frontend: MultiUploadPage with description input
- Frontend: ModerationGroupImagesPage with description editing
- CSS: Styles for edit mode, textarea, and character counter

Phase 1-4 complete: Backend + Core Frontend + Upload + Moderation
 2025-11-07 18:34:16 +01:00
matthias.lotz
7564525c7e feat: implement drag-and-drop reordering infrastructure 
Phase 1 (Backend API):
✅ GroupRepository.updateImageOrder() with SQL transactions
✅ PUT /api/groups/:groupId/reorder API route with validation
✅ Manual testing: Reordering verified working (group qion_-lT1)
✅ Error handling: Invalid IDs, missing groups, empty arrays

Phase 2 (Frontend DnD):
✅ @dnd-kit/core packages installed
✅ ReorderService.js for API communication
✅ useReordering.js custom hook with optimistic updates
✅ ImageGalleryCard.js extended with drag handles & sortable
✅ ImageGallery.js with DndContext and SortableContext
✅ CSS styles for drag states, handles, touch-friendly mobile

Next: Integration with ModerationGroupImagesPage
 2025-11-03 21:06:39 +01:00
matthias.lotz
9406b725c1 removed old css in ImageGallery.css 2025-10-28 20:04:42 +01:00
matthias.lotz
a0d74f795a feat: Complete frontend refactoring and development environment setup 
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.
 2025-10-27 22:22:52 +01:00