ryan/lunarfront-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make photos and documents clickable, show PDFs with file icon

Browse Source 
Photos open in new tab on click. PDFs display as a file icon with
filename instead of broken image. Both images and PDFs are clickable
to view full size in a new browser tab.
This commit is contained in:
Ryan Moon
2026-03-29 10:55:16 -05:00
parent ee8d6f7aad
commit 77e56b7837
1 changed files with 38 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/admin/src/components/repairs/ticket-photos.tsx
View File

@@ -4,7 +4,7 @@ import { queryOptions } from '@tanstack/react-query'
import { api } from '@/lib/api-client' import { api } from '@/lib/api-client'
import { useAuthStore } from '@/stores/auth.store' import { useAuthStore } from '@/stores/auth.store'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { ImageIcon, Plus, Trash2 } from 'lucide-react' import { FileText, ImageIcon, Plus, Trash2 } from 'lucide-react'
import { toast } from 'sonner' import { toast } from 'sonner'
interface FileRecord { interface FileRecord {
@@ -140,22 +140,43 @@ function PhotoSection({
<p className="text-xs text-muted-foreground py-2">No photos</p> <p className="text-xs text-muted-foreground py-2">No photos</p>
) : ( ) : (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{photos.map((photo) => ( {photos.map((photo) => {
<div key={photo.id} className="relative group"> const isPdf = photo.filename?.endsWith('.pdf') || photo.path?.endsWith('.pdf')
<img return (
src={`/v1/files/serve/${photo.path}`} <div key={photo.id} className="relative group">
alt={photo.filename} {isPdf ? (
className="h-20 w-20 object-cover rounded-md border" <a
/> href={`/v1/files/serve/${photo.path}`}
<button target="_blank"
type="button" rel="noopener noreferrer"
className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity" className="h-20 w-20 rounded-md border flex flex-col items-center justify-center bg-muted hover:bg-muted/80 transition-colors"
onClick={() => deleteMutation.mutate(photo.id)} >
> <FileText className="h-6 w-6 text-muted-foreground" />
<Trash2 className="h-3 w-3" /> <span className="text-[9px] text-muted-foreground mt-1 px-1 truncate max-w-full">{photo.filename}</span>
</button> </a>
</div> ) : (
))} <a
href={`/v1/files/serve/${photo.path}`}
target="_blank"
rel="noopener noreferrer"
>
<img
src={`/v1/files/serve/${photo.path}`}
alt={photo.filename}
className="h-20 w-20 object-cover rounded-md border cursor-pointer hover:opacity-80 transition-opacity"
/>
</a>
)}
<button
type="button"
className="absolute -top-1.5 -right-1.5 h-5 w-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
onClick={() => deleteMutation.mutate(photo.id)}
>
<Trash2 className="h-3 w-3" />
</button>
</div>
)
})}
</div> </div>
)} )}