JPGs → PDF: neuer Button überall bei PDF-Upload
- Neue Komponente JpgToPdfModal (jsPDF clientseitig, kein Backend-Roundtrip). - Bilder hinzufügen per Klick, Drag&Drop oder Strg+V (Clipboard). - Reihenfolge per Drag&Drop sortierbar; pro Bild 90°/180°-Drehung + horizontal/vertikal-Spiegelung. - Jedes Bild = eine A4-Seite, Orientation automatisch nach Bild, JPEG-Qualität 100%. - FileUpload-Komponente zeigt den Sekundär-Button automatisch, sobald accept PDF einschließt (Datenschutz, Vollmacht, Bankkarten, Ausweise, Gewerbeanmeldung, Handelsregister, Kündigungsschreiben/-bestätigung + jeweilige Optionen). - Direktinputs ebenfalls erweitert: Vertragsdokumente (ContractDetail), Vollmacht-Tab (CustomerDetail), Rechnungen (InvoicesSection). - PdfTemplates bewusst ausgenommen – braucht AcroForm-Felder.
This commit is contained in:
@@ -0,0 +1,443 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { jsPDF } from 'jspdf';
|
||||
import {
|
||||
Upload,
|
||||
RotateCcw,
|
||||
RotateCw,
|
||||
FlipHorizontal,
|
||||
FlipVertical,
|
||||
Trash2,
|
||||
FileText,
|
||||
Repeat,
|
||||
} from 'lucide-react';
|
||||
import Modal from './Modal';
|
||||
import Button from './Button';
|
||||
|
||||
interface ImageItem {
|
||||
id: string;
|
||||
dataUrl: string;
|
||||
naturalWidth: number;
|
||||
naturalHeight: number;
|
||||
rotation: 0 | 90 | 180 | 270;
|
||||
flipH: boolean;
|
||||
flipV: boolean;
|
||||
fileName: string;
|
||||
}
|
||||
|
||||
interface JpgToPdfModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onComplete: (pdfFile: File) => void;
|
||||
fileNameHint?: string;
|
||||
}
|
||||
|
||||
function makeId() {
|
||||
return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
|
||||
}
|
||||
|
||||
function readFileAsDataUrl(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = () => reject(reader.error);
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
function loadImage(dataUrl: string): Promise<HTMLImageElement> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = () => reject(new Error('Bild-Decode fehlgeschlagen'));
|
||||
img.src = dataUrl;
|
||||
});
|
||||
}
|
||||
|
||||
function renderImageToCanvas(image: HTMLImageElement, item: ImageItem): HTMLCanvasElement {
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) throw new Error('Canvas-Kontext konnte nicht erstellt werden');
|
||||
|
||||
const w = image.naturalWidth;
|
||||
const h = image.naturalHeight;
|
||||
const rotated = item.rotation === 90 || item.rotation === 270;
|
||||
|
||||
canvas.width = rotated ? h : w;
|
||||
canvas.height = rotated ? w : h;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(canvas.width / 2, canvas.height / 2);
|
||||
ctx.rotate((item.rotation * Math.PI) / 180);
|
||||
ctx.scale(item.flipH ? -1 : 1, item.flipV ? -1 : 1);
|
||||
ctx.drawImage(image, -w / 2, -h / 2);
|
||||
ctx.restore();
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
export default function JpgToPdfModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
onComplete,
|
||||
fileNameHint,
|
||||
}: JpgToPdfModalProps) {
|
||||
const [images, setImages] = useState<ImageItem[]>([]);
|
||||
const [dragSrcIdx, setDragSrcIdx] = useState<number | null>(null);
|
||||
const [isOverModal, setIsOverModal] = useState(false);
|
||||
const [isBuilding, setIsBuilding] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
setImages([]);
|
||||
setDragSrcIdx(null);
|
||||
setIsOverModal(false);
|
||||
setIsBuilding(false);
|
||||
setError(null);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
const addFiles = useCallback(async (files: FileList | File[]) => {
|
||||
const list = Array.from(files).filter((f) => f.type.startsWith('image/'));
|
||||
if (list.length === 0) {
|
||||
setError('Nur Bilddateien erlaubt (JPG/PNG).');
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
const added: ImageItem[] = [];
|
||||
for (const file of list) {
|
||||
try {
|
||||
const dataUrl = await readFileAsDataUrl(file);
|
||||
const img = await loadImage(dataUrl);
|
||||
added.push({
|
||||
id: makeId(),
|
||||
dataUrl,
|
||||
naturalWidth: img.naturalWidth,
|
||||
naturalHeight: img.naturalHeight,
|
||||
rotation: 0,
|
||||
flipH: false,
|
||||
flipV: false,
|
||||
fileName: file.name || 'clipboard.png',
|
||||
});
|
||||
} catch {
|
||||
setError(`Bild konnte nicht geladen werden: ${file.name || 'unbenannt'}`);
|
||||
}
|
||||
}
|
||||
if (added.length > 0) {
|
||||
setImages((prev) => [...prev, ...added]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const handler = (e: ClipboardEvent) => {
|
||||
const items = e.clipboardData?.items;
|
||||
if (!items) return;
|
||||
const files: File[] = [];
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const it = items[i];
|
||||
if (it.kind === 'file' && it.type.startsWith('image/')) {
|
||||
const f = it.getAsFile();
|
||||
if (f) files.push(f);
|
||||
}
|
||||
}
|
||||
if (files.length > 0) {
|
||||
e.preventDefault();
|
||||
addFiles(files);
|
||||
}
|
||||
};
|
||||
document.addEventListener('paste', handler);
|
||||
return () => document.removeEventListener('paste', handler);
|
||||
}, [isOpen, addFiles]);
|
||||
|
||||
const rotate = (id: string, delta: 90 | -90 | 180) => {
|
||||
setImages((prev) =>
|
||||
prev.map((it) =>
|
||||
it.id === id
|
||||
? {
|
||||
...it,
|
||||
rotation: ((((it.rotation + delta) % 360) + 360) % 360) as ImageItem['rotation'],
|
||||
}
|
||||
: it
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const flip = (id: string, axis: 'h' | 'v') => {
|
||||
setImages((prev) =>
|
||||
prev.map((it) =>
|
||||
it.id === id
|
||||
? { ...it, ...(axis === 'h' ? { flipH: !it.flipH } : { flipV: !it.flipV }) }
|
||||
: it
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const remove = (id: string) => {
|
||||
setImages((prev) => prev.filter((it) => it.id !== id));
|
||||
};
|
||||
|
||||
const handleDragStart = (idx: number) => (e: React.DragEvent) => {
|
||||
setDragSrcIdx(idx);
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', String(idx));
|
||||
};
|
||||
|
||||
const handleItemDragOver = (e: React.DragEvent) => {
|
||||
if (dragSrcIdx === null) return;
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
};
|
||||
|
||||
const handleDropOnItem = (idx: number) => (e: React.DragEvent) => {
|
||||
if (dragSrcIdx === null) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (dragSrcIdx === idx) {
|
||||
setDragSrcIdx(null);
|
||||
return;
|
||||
}
|
||||
setImages((prev) => {
|
||||
const next = [...prev];
|
||||
const [moved] = next.splice(dragSrcIdx, 1);
|
||||
next.splice(idx, 0, moved);
|
||||
return next;
|
||||
});
|
||||
setDragSrcIdx(null);
|
||||
};
|
||||
|
||||
const handleModalDragOver = (e: React.DragEvent) => {
|
||||
if (e.dataTransfer.types.includes('Files')) {
|
||||
e.preventDefault();
|
||||
setIsOverModal(true);
|
||||
}
|
||||
};
|
||||
const handleModalDragLeave = (e: React.DragEvent) => {
|
||||
if (e.target === e.currentTarget) setIsOverModal(false);
|
||||
};
|
||||
const handleModalDrop = (e: React.DragEvent) => {
|
||||
if (e.dataTransfer.files.length > 0) {
|
||||
e.preventDefault();
|
||||
setIsOverModal(false);
|
||||
addFiles(e.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const buildPdf = async () => {
|
||||
if (images.length === 0) return;
|
||||
setIsBuilding(true);
|
||||
setError(null);
|
||||
try {
|
||||
const a4w = 210;
|
||||
const a4h = 297;
|
||||
let pdf: jsPDF | null = null;
|
||||
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
const item = images[i];
|
||||
const img = await loadImage(item.dataUrl);
|
||||
const canvas = renderImageToCanvas(img, item);
|
||||
const jpegDataUrl = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
const orientation: 'portrait' | 'landscape' =
|
||||
canvas.width > canvas.height ? 'landscape' : 'portrait';
|
||||
const pageW = orientation === 'landscape' ? a4h : a4w;
|
||||
const pageH = orientation === 'landscape' ? a4w : a4h;
|
||||
|
||||
if (!pdf) {
|
||||
pdf = new jsPDF({ orientation, unit: 'mm', format: 'a4' });
|
||||
} else {
|
||||
pdf.addPage('a4', orientation);
|
||||
}
|
||||
|
||||
const margin = 5;
|
||||
const maxW = pageW - 2 * margin;
|
||||
const maxH = pageH - 2 * margin;
|
||||
const ratio = Math.min(maxW / canvas.width, maxH / canvas.height);
|
||||
const w = canvas.width * ratio;
|
||||
const h = canvas.height * ratio;
|
||||
const x = (pageW - w) / 2;
|
||||
const y = (pageH - h) / 2;
|
||||
|
||||
pdf.addImage(jpegDataUrl, 'JPEG', x, y, w, h, undefined, 'SLOW');
|
||||
}
|
||||
|
||||
const blob = pdf!.output('blob');
|
||||
const base = (fileNameHint || 'bilder').replace(/[^\w.-]+/g, '_').slice(0, 80) || 'bilder';
|
||||
const file = new File([blob], `${base}.pdf`, { type: 'application/pdf' });
|
||||
onComplete(file);
|
||||
onClose();
|
||||
} catch (e) {
|
||||
console.error('PDF-Erstellung fehlgeschlagen:', e);
|
||||
setError('PDF konnte nicht erstellt werden.');
|
||||
} finally {
|
||||
setIsBuilding(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title="JPGs zu PDF" size="xl">
|
||||
<div
|
||||
onDragOver={handleModalDragOver}
|
||||
onDragLeave={handleModalDragLeave}
|
||||
onDrop={handleModalDrop}
|
||||
className={`space-y-4 ${isOverModal ? 'ring-2 ring-blue-400 rounded-lg' : ''}`}
|
||||
>
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<p className="text-sm text-gray-600">
|
||||
Bilder per Klick wählen, hier reinziehen, oder mit{' '}
|
||||
<kbd className="px-1.5 py-0.5 border rounded text-xs">Strg</kbd>+
|
||||
<kbd className="px-1.5 py-0.5 border rounded text-xs">V</kbd> aus der Zwischenablage
|
||||
einfügen.
|
||||
</p>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isBuilding}
|
||||
>
|
||||
<Upload className="w-4 h-4 mr-1" /> Bilder hinzufügen
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) addFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="text-sm text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{images.length === 0 ? (
|
||||
<div
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="border-2 border-dashed rounded-lg p-12 text-center cursor-pointer border-gray-300 hover:border-gray-400 hover:bg-gray-50"
|
||||
>
|
||||
<Upload className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
||||
<p className="text-sm text-gray-600">
|
||||
Bilder hier hineinziehen oder zum Auswählen klicken
|
||||
</p>
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
JPG / PNG · Reihenfolge per Drag & Drop, einzeln drehen/spiegeln
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-xs text-gray-500">
|
||||
{images.length} {images.length === 1 ? 'Bild' : 'Bilder'} · Reihenfolge per
|
||||
Drag&Drop, einzeln drehen/spiegeln. Jedes Bild = eine Seite.
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 max-h-[60vh] overflow-y-auto p-1">
|
||||
{images.map((item, idx) => {
|
||||
const transforms = [
|
||||
`rotate(${item.rotation}deg)`,
|
||||
`scaleX(${item.flipH ? -1 : 1})`,
|
||||
`scaleY(${item.flipV ? -1 : 1})`,
|
||||
].join(' ');
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
draggable
|
||||
onDragStart={handleDragStart(idx)}
|
||||
onDragOver={handleItemDragOver}
|
||||
onDrop={handleDropOnItem(idx)}
|
||||
className={`border rounded-lg p-2 bg-white shadow-sm cursor-move ${
|
||||
dragSrcIdx === idx ? 'opacity-40' : ''
|
||||
}`}
|
||||
title="Zum Sortieren ziehen"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1.5 text-xs">
|
||||
<span className="font-semibold text-gray-700">#{idx + 1}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(item.id)}
|
||||
className="text-red-500 hover:text-red-700"
|
||||
title="Entfernen"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="aspect-square bg-gray-100 rounded flex items-center justify-center overflow-hidden">
|
||||
<img
|
||||
src={item.dataUrl}
|
||||
alt={item.fileName}
|
||||
style={{ transform: transforms }}
|
||||
className="max-w-full max-h-full object-contain transition-transform"
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-1.5 flex justify-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => rotate(item.id, -90)}
|
||||
className="p-1 hover:bg-gray-100 rounded"
|
||||
title="90° gegen Uhrzeigersinn"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => rotate(item.id, 90)}
|
||||
className="p-1 hover:bg-gray-100 rounded"
|
||||
title="90° im Uhrzeigersinn"
|
||||
>
|
||||
<RotateCw className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => rotate(item.id, 180)}
|
||||
className="p-1 hover:bg-gray-100 rounded"
|
||||
title="180° drehen"
|
||||
>
|
||||
<Repeat className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => flip(item.id, 'h')}
|
||||
className={`p-1 rounded ${
|
||||
item.flipH ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100'
|
||||
}`}
|
||||
title="Horizontal spiegeln"
|
||||
>
|
||||
<FlipHorizontal className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => flip(item.id, 'v')}
|
||||
className={`p-1 rounded ${
|
||||
item.flipV ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100'
|
||||
}`}
|
||||
title="Vertikal spiegeln"
|
||||
>
|
||||
<FlipVertical className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2 border-t">
|
||||
<Button variant="ghost" onClick={onClose} disabled={isBuilding}>
|
||||
Abbrechen
|
||||
</Button>
|
||||
<Button onClick={buildPdf} disabled={images.length === 0 || isBuilding}>
|
||||
<FileText className="w-4 h-4 mr-1" />
|
||||
{isBuilding ? 'Erstelle PDF...' : 'PDF erstellen & hochladen'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user