feat: add recipe editing, image upload management, and UI improvements
Some checks failed
CI Pipeline / Test Shared Package (pull_request) Has been cancelled
CI Pipeline / Build All Packages (pull_request) Has been cancelled
CI Pipeline / Generate Coverage Report (pull_request) Has been cancelled
CI Pipeline / Lint Code (pull_request) Has been cancelled
CI Pipeline / Test API Package (pull_request) Has been cancelled
CI Pipeline / Test Web Package (pull_request) Has been cancelled
Docker Build & Deploy / Build Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Push Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Staging (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Production (pull_request) Has been cancelled
E2E Tests / End-to-End Tests (pull_request) Has been cancelled
E2E Tests / E2E Tests (Mobile) (pull_request) Has been cancelled
Security Scanning / NPM Audit (pull_request) Has been cancelled
Security Scanning / Dependency License Check (pull_request) Has been cancelled
Security Scanning / Code Quality Scan (pull_request) Has been cancelled
Security Scanning / Docker Image Security (pull_request) Has been cancelled
Security Scanning / Security Summary (pull_request) Has been cancelled

Added comprehensive recipe editing functionality with improved image handling
and better UX for large file uploads.

**Features:**
- Recipe editing: Full CRUD support for recipes with edit page
- Image management: Upload, replace, and delete recipe images
- Upload feedback: Processing and uploading states for better UX
- File size increase: Raised limit from 10MB to 20MB for images
- Nginx configuration: Added client_max_body_size for large uploads

**Changes:**
- Created EditRecipe.tsx page for editing existing recipes
- Created NewRecipe.tsx page wrapper for recipe creation
- Created RecipeForm.tsx comprehensive form component with:
  - Simple and multi-section recipe modes
  - Image upload with confirmation dialogs
  - Processing state feedback during file handling
  - Smaller, button-style upload controls
- Updated recipes.routes.ts:
  - Increased multer fileSize limit to 20MB
  - Added file validation for image types
  - Image upload now updates Recipe.imageUrl field
  - Added DELETE /recipes/:id/image endpoint
  - Automatic cleanup of old images when uploading new ones
- Updated nginx.conf: Added client_max_body_size 20M for API proxy
- Updated App.css: Improved upload button styling (smaller, more compact)
- Updated RecipeForm.tsx: Better file processing feedback with setTimeout
- Updated help text to reflect 20MB limit and WEBP support

**Technical Details:**
- Fixed static file serving path in index.ts
- Added detailed logging for upload debugging
- Improved TypeScript type safety in upload handlers
- Better error handling and user feedback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-10-30 05:31:12 +00:00
parent 5797dade02
commit 33eadde671
15 changed files with 9614 additions and 92 deletions

View File

@@ -7,6 +7,8 @@ services:
POSTGRES_USER: basil
POSTGRES_PASSWORD: basil
POSTGRES_DB: basil
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
networks: