feat: Display item translations in item detail pages (/cli and /web) (#404)
Commit: 563b8f428eee5d12921fa1ad374de51adfe9fe39
Date: 2025-10-17 11:11:46 +0000
Author: PascalHavelange
Commit Message
feat: Display item translations in item detail pages (/cli and /web) (#404)
* fix: Image display and authentication issues in /cli and /web
## Critical Issues Fixed
### 1. Image Display Fails with 302 Redirects in /cli
- **Problem**: Images in /cli item views resulted in 302 redirects to /web/login
- **Root Cause**: HTML `<img>` tags cannot send authentication headers (browser limitation)
- **Solution**: Fetch images as blobs using API client, create blob URLs for display
### 2. /cli Making Unauthorized Requests to /web Routes
- **Problem**: /cli app used window.location.origin for API URLs
- **Solution**: Created useApiBaseUrl composable to use VITE_API_BASE_URL configuration
### 3. Delete Confirmation Dialog Shows No Text
- **Problem**: Confirmation dialog appeared but displayed no title or message
- **Root Cause**: Store refs not properly unwrapped when passed to component props
- **Solution**: Used storeToRefs() to properly unwrap reactive refs
### 4. Alt Text Editing Causes Image List Reload
- **Problem**: Editing alt text triggered full image list reload with flickering
- **Solution**: Implemented optimistic updates without refetching
### 5. Error Handler Had Hardcoded /login Fallback
- **Problem**: window.location.href = '/login' breaks /cli SPA navigation
- **Solution**: Removed hardcoded fallback, use centralized error display
### 6. Backend: Wrong Disk Configuration for ItemImage
- **Problem**: ItemImage view/download used pictures.disk instead of available.images.disk
- **Root Cause**: Files aren't moved when attaching, but controller used wrong config
- **Solution**: Updated ItemImageController to use available.images.disk
### 7. Blade Views: Wrong Image URLs
- **Problem**: /web views used asset('storage/') instead of proper routes
- **Solution**: Changed to use route('available-images.view', $image)
## Changes Made
### Backend
- `app/Http/Controllers/ItemImageController.php`: Fixed disk configuration for view() and download()
- `resources/views/item-images/create.blade.php`: Fixed image URLs to use proper routes
### Frontend - Core Infrastructure
- `resources/js/composables/useApiBaseUrl.ts` (NEW): Composable for consistent API base URL
- `resources/js/utils/errorHandler.ts`: Removed hardcoded /login fallback
### Frontend - Stores
- `resources/js/stores/itemImage.ts`: Added blob URL fetching with getImageUrl()
- `resources/js/stores/availableImage.ts`: Updated to use useApiBaseUrl()
### Frontend - Components
- `resources/js/components/ItemImageManager.vue`:
- Implemented blob URL pattern for authenticated images
- Fixed delete confirmation with fallback names
- Optimized alt text updates (no reload)
- `resources/js/components/global/DeleteConfirmation.vue`: Fixed store refs unwrapping
### Documentation
- `.github/copilot-instructions.md`: Minor updates
### Cleanup
- Removed obsolete files: API_PERMISSION_IMPLEMENTATION.md, fix-phpdoc-shaped-arrays.ps1, keep-awake.ps1
## Architecture Principles Enforced
✅ /cli only communicates with /api through API client
✅ All authenticated requests use API client (sends auth headers)
✅ Images fetched as blobs, then blob URLs used in <img> tags
✅ Error handling uses centralized display, not hardcoded redirects
✅ No direct URL construction for authenticated endpoints
## Testing
### Backend
- Run tests: `php artisan test --parallel`
### Frontend
- Type check: `npm run type-check` ✅
- Lint: `npm run lint` ✅
- Build: `npm run build` ✅
### Manual Testing
1. Navigate to `/cli/items/{id}` with images
2. Verify images display correctly (no SVG placeholders)
3. Verify no 302 redirects in Network tab
4. Verify no requests to /web routes
5. Test delete confirmation shows proper text
6. Test alt text editing doesn't cause reload
Fixes #[issue-number-if-applicable]
* 5.7.1
* feat: Add item translations display to item detail pages in /cli and /web
* Fixing failing CI/CD tests
* Fix lint issue in ItemController
---------
Signed-off-by: PascalHavelange <havelangep@gmail.com>
Co-authored-by: Pascal HAVELANGE <havelangep@hotmail.com>
Files Changed
- 📝 Modified:
.github/copilot-instructions.md
- 📝 Modified:
app/Http/Controllers/Web/ItemController.php
- ✅ Added:
resources/js/components/ItemTranslationManager.vue
- 📝 Modified:
resources/js/views/ItemDetail.vue
- ✅ Added:
resources/views/items/_translations.blade.php
- 📝 Modified:
resources/views/items/show.blade.php
Links
This documentation was automatically generated from Git commit data.