Enable users to download photos attached to sales records easily

Implement photo download functionality in SaleDetailsModal.tsx using a downloadPhoto function and the Download icon.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: dec54137-d5a2-4406-8ad4-5f2f9fb110bf
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/3a1a5de6-d311-4504-a90c-e46ce001fd4a.jpg
This commit is contained in:
michaelschal committed 2025-07-11 15:40:31 +00:00
1 parent 8639adf4be
commit a589c8b770
1 file changed
+35 -3
+35 -3
View File
@@ -1,7 +1,7 @@
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { X } from 'lucide-react';
import { X, Download } from 'lucide-react';
import { Sale } from '@/types/sale';
import { formatDate, formatDateTime } from '@/lib/export';
@@ -14,6 +14,16 @@ interface SaleDetailsModalProps {
export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsModalProps) {
if (!sale) return null;
// Fonction pour télécharger une photo
const downloadPhoto = (photoData: string, fileName: string) => {
const link = document.createElement('a');
link.href = photoData;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
return (
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="mobile-modal-content max-w-4xl max-h-[90vh] overflow-y-auto slide-in-up">
@@ -83,7 +93,18 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
<div>
<span className="text-sm font-medium">Photo Recto:</span>
{sale.photoRecto ? (
<img src={sale.photoRecto} alt="Photo recto" className="mt-2 w-32 h-auto rounded border" />
<div className="mt-2 space-y-2">
<img src={sale.photoRecto} alt="Photo recto" className="w-32 h-auto rounded border" />
<Button
variant="outline"
size="sm"
onClick={() => downloadPhoto(sale.photoRecto!, `vente-${sale.id}-recto.jpg`)}
className="w-full"
>
<Download className="h-4 w-4 mr-2" />
Télécharger Recto
</Button>
</div>
) : (
<p className="text-sm text-gray-500 mt-2">Aucune photo</p>
)}
@@ -91,7 +112,18 @@ export default function SaleDetailsModal({ isOpen, sale, onClose }: SaleDetailsM
<div>
<span className="text-sm font-medium">Photo Verso:</span>
{sale.photoVerso ? (
<img src={sale.photoVerso} alt="Photo verso" className="mt-2 w-32 h-auto rounded border" />
<div className="mt-2 space-y-2">
<img src={sale.photoVerso} alt="Photo verso" className="w-32 h-auto rounded border" />
<Button
variant="outline"
size="sm"
onClick={() => downloadPhoto(sale.photoVerso!, `vente-${sale.id}-verso.jpg`)}
className="w-full"
>
<Download className="h-4 w-4 mr-2" />
Télécharger Verso
</Button>
</div>
) : (
<p className="text-sm text-gray-500 mt-2">Aucune photo</p>
)}