Add download photo button to custom request detail page
- Create DownloadPhotoButton component for downloading customer photos - Add download button before 'Start a design for this' button - Allows admin to save photo locally for editing in design software before approval Addresses user request: admin should be able to download photo from request for editing before uploading final design to the approval flow. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
d134d3a93c
commit
8646b42438
@@ -3,6 +3,7 @@ import { notFound } from 'next/navigation';
|
|||||||
import { prisma } from '@/lib/prisma';
|
import { prisma } from '@/lib/prisma';
|
||||||
import AdminNav from '@/components/AdminNav';
|
import AdminNav from '@/components/AdminNav';
|
||||||
import ShareButtons from '@/components/ShareButtons';
|
import ShareButtons from '@/components/ShareButtons';
|
||||||
|
import DownloadPhotoButton from '@/components/DownloadPhotoButton';
|
||||||
import { deleteRequest, markRequestDone, markRequestNew } from '../actions';
|
import { deleteRequest, markRequestDone, markRequestNew } from '../actions';
|
||||||
|
|
||||||
export default async function CustomRequestDetailPage({ params }: { params: { id: string } }) {
|
export default async function CustomRequestDetailPage({ params }: { params: { id: string } }) {
|
||||||
@@ -59,6 +60,8 @@ export default async function CustomRequestDetailPage({ params }: { params: { id
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-8 flex flex-wrap gap-3">
|
<div className="mt-8 flex flex-wrap gap-3">
|
||||||
|
<DownloadPhotoButton photoUrl={request.imageDataUrl} customerName={request.customerName} />
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
href={`/admin/proofs/new?${newProofParams.toString()}`}
|
href={`/admin/proofs/new?${newProofParams.toString()}`}
|
||||||
className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
|
className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark"
|
||||||
|
|||||||
@@ -0,0 +1,27 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
interface DownloadPhotoButtonProps {
|
||||||
|
photoUrl: string;
|
||||||
|
customerName: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DownloadPhotoButton({ photoUrl, customerName }: DownloadPhotoButtonProps) {
|
||||||
|
const handleDownload = () => {
|
||||||
|
// Create a link element and trigger download
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = photoUrl;
|
||||||
|
link.download = `photo-from-${customerName.toLowerCase().replace(/\s+/g, '-')}.png`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={handleDownload}
|
||||||
|
className="border border-ink px-6 py-3 text-sm hover:border-clay hover:bg-clay hover:text-paper"
|
||||||
|
>
|
||||||
|
Download photo
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user