- Neuer Lightbox-Viewer für Bilder in der Anhänge-Liste
- Pinch-to-Zoom (Touch) und Mausrad-Zoom (Desktop)
- Doppelklick/Doppeltap für Zoom-Toggle (1x ↔ 2.5x)
- Swipe links/rechts für Navigation zwischen Bildern
- Tastatur: ← → Esc + - 0
- Bilder pro Gruppe navigierbar
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Vorheriger Fix '.bericht-attachments button { width:100% }' hat auch
die kleinen Icons in den Anhang-Items (Mülleimer zum Löschen, Buttons
in Listen-Items) erwischt und auf volle Breite gepumpt. Dadurch wurde
der Dateiname nicht mehr sichtbar.
Fix: Selector auf .bericht-add-selected + .bericht-upload beschränken
(die beiden Action-Blöcke am Ende der Spalte). Die Item-Buttons
innerhalb der Liste behalten ihr Default-Styling.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Anhänge-Spalte:
- Buttons und Labels waren unterschiedlich breit → Scrollbalken querte
die Box. Fix: alle Controls (.butAction, button, select) in
.bericht-attachments auf display:block + width:100% + box-sizing
border-box, einheitliches Padding, ellipsis bei Überlänge.
- overflow-x: hidden verhindert horizontale Scrollbar im Container.
- min-width: 0 damit grid-Container nicht überlaufen.
Zeichen-Tools:
- Problem: Beim Malen wurden die Bilder (fabric.Image) mitbewegt
weil sie immer selectable/evented waren.
- Fix: applyTool() setzt auf ALLEN Canvas-Objekten selectable=false
und evented=false sobald ein Zeichen-Tool aktiv ist. Nur bei
'select' werden sie wieder aktiviert.
- discardActiveObject() nach Tool-Wechsel damit keine Selektion
aktiv bleibt.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Fabric.js wickelt #fabric-canvas in einen .canvas-container ein. Meine
bisherige CSS-Regel '#fabric-canvas.fabric-overlay position:absolute'
wirkte nur auf das innere Canvas, nicht auf den Container. Dadurch saß
der Container im normalen Flex-Flow neben dem pdfCanvas und verdrängte
es nach links — der rechte Bereich wurde vom Container als weiße Fläche
überlagert und verdeckte Bild-Inhalte.
Fix: neue CSS-Regel '.bericht-canvas-wrap .canvas-container position:
absolute !important' damit der Container wie vorgesehen absolut
positioniert wird und den pdfCanvas nicht aus dem Flow drückt.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Paradigmen-Wechsel: Editor rendert bei jedem Save sein Fabric-Canvas
als PNG und lädt es hoch. PDF nutzt dieses PNG 1:1 statt die Shapes
serverseitig nachzuzeichnen.
Damit ist garantiert: was du im Editor siehst, ist EXAKT das was im PDF
landet. Alle Pfeil/Text/Shape-Rendering-Bugs zwischen Fabric-JSON und
PHP-Nachzeichnung sind Geschichte.
Kernänderungen:
1. DB: Neue Spalte bericht_page.composite_path (Migration im init())
2. ajax/save_annotations.php: nimmt multipart file 'composite' entgegen,
speichert es unter bericht/work/<fkb>/composite_<pid>.png
3. lib/bericht.lib.php: bericht_render_page_to_pdf prüft composite_path
zuerst — wenn vorhanden, wird eine Seite mit genau diesem PNG als
volles Bild gerendert, fertig. Fallback auf alte Logik bei alten
Berichten ohne Composite.
4. editor.js renderImage: Quellbild wird NICHT mehr auf pdfCanvas
gezeichnet, sondern als fabric.Image ins Fabric-Canvas geladen —
ZIEHBAR, SKALIERBAR, ROTIERBAR wie jedes andere Objekt.
Mehrere Bilder auf einer Seite kein Problem mehr.
5. editor.js savePageAnnotations: nach Shape-State wird toDataURL
mit multiplier:2 aufgerufen, PNG-Blob hochgeladen zusammen mit
fabric_json (für spätere Edits) und note.
6. editor.js loadPage: wenn fabric_json existiert, wird dieses
clientseitig wieder eingeladen (inkl. eingebettete Bilder) — das
Quell-Bild wird nicht mehr neu aus der Quelle geholt. Bei leerer
Seite läuft der alte Render-Flow.
Phase 6 Bonus — Text mit Hintergrund:
- Neuer color-picker 'BG:' in der Toolbar + 'Ø'-Button (kein BG)
- Fabric IText bekommt textBackgroundColor + padding:6
- Bei selektiertem Text-Objekt wird BG live angewendet
- Dataset-Flag 'active' toggelt zwischen ein/aus
Dark-Input-Fix:
- Textarea in .bericht-page-note nutzte --inputbackgroundcolor
(existiert in awl-dark nicht → Fallback #fff = weiße Fläche mit
schwarzer Schrift auf Dark-Theme)
- Jetzt: --colorbackbody + --colortext + --colorboxbordertitle1
- Generischer Input-Style für alle Text-Eingaben in .bericht-editor
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Wenn noch keine Seite geladen ist, wirkte der Editor mit dem winzigen
1x1-Canvas sehr abgebastelt. Jetzt zeigt der Canvas-Wrap im leeren
Zustand eine echte A4-Hochformat-Fläche (max 900px, aspect-ratio 1:1.414)
mit Hinweistext 'Seite wählen oder Fotos hinzufügen'.
- .bericht-canvas-wrap.empty setzt aspect-ratio auf A4
- ::after Pseudo-Element als Hinweistext
- init() markiert den Wrap als 'empty'
- loadPage() entfernt die Klasse sobald ein Bild geladen wird
- min-height 400px damit auch ohne Content Platz da ist
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Desktop-Editor Polish:
- Aktives Seiten-Thumbnail deutlich markiert (scale + shadow + blauer
Label-Hintergrund)
- Titel-Feld pro Seite in der DB (llx_bericht_page.title)
Phase 5.2 Vorher/Nachher-Layout:
- Neuer layout-Typ 'before_after' in bericht_render_page_to_pdf
- Zwei Bilder nebeneinander, Labels 'Vorher' / 'Nachher', Titel oben
- 'VN'-Button in der Anhänge-Grid-Leiste
- create_grid_page akzeptiert before_after
- Layout-Dropdown hat before_after + title_only Option
Phase 5.2b Title-Only Seiten:
- Reine Titel/Zwischentitel-Seiten ohne Bild
- 32pt Titel zentriert, optional Notiz darunter
- bericht_render_page_to_pdf behandelt title_only separat
Phase 5.3 Bericht-Versionierung:
- Neue Spalten version + fk_bericht_parent in llx_bericht
- Bericht::duplicateAsNewVersion() kopiert alles inkl. Seiten
- '🔀 Neue Version'-Button im Editor-Footer
- Versions-Links in der Meta-Zeile (v1, v2, v3 …) mit Sprungmöglichkeit
- Alte Versionen bleiben unverändert erhalten
Phase 5.6 Batch-Modus:
- Neue Seite bericht_batch.php mit Filter (Datum von/bis, Suche)
- Checkbox-Liste aller finalisierten Berichte
- 'Ausgewählte als Sammel-PDF herunterladen' → FPDI merged alle
final_pdf_path in ein neues PDF mit Inhaltsverzeichnis-Seite
- Link im Admin-Setup
api/pages.php:
- POST-Update akzeptiert jetzt auch title und layout zusätzlich zu
note und rotation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
ajax/verify_signature.php:
- Liest Metadaten aus .meta.json neben einer Unterschrift-Seite
- Rechnet SHA256 über die zum Signaturzeitpunkt existierenden Seiten
(erste N laut meta.page_count_at_signing)
- Vergleicht mit dem gespeicherten Hash → verified true/false
- Liefert reason bei Fehlschlag (Seitenanzahl oder Inhalt geändert)
bericht_card.php:
- Seiten mit .meta.json kriegen 🔒-Badge + grünen Rand
- 🔍-Button neben dem Löschen-Button öffnet Verifikations-Modal
editor.js:
- showSignatureVerifyResult-Modal zeigt alle Metadaten,
beide Hashes, GPS als OpenStreetMap-Link, IP, User, Zeit
- Grün/Rot je nach Verifikationsergebnis
api/pages.php:
- Neuer Action reorder: POST mit {order:[ids]} schreibt neue
page_order-Werte als Transaktion
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Phase 2.1 Token-System:
- Neue Tabelle llx_bericht_upload_token (token, fk_bericht, expires_at,
uploads_count, max_uploads)
- BerichtUploadToken-Klasse mit create/fetchValid/incrementCount/cleanupExpired
- Cronjob 'Bericht: Expired Upload-Tokens bereinigen' täglich
- 64-Hex random_bytes-Tokens, 1h Lifetime, 100 Uploads max
Phase 2.2 QR-Upload Lite:
- mobile_upload.php — Mobile-optimierte Page ohne Dolibarr-Login,
Auth nur über Token in URL/Form
- 📷 Foto aufnehmen (capture=environment) und 📂 Galerie
- Clientseitiges Resize auf max 2000px (Canvas, JPEG q=0.85)
- Upload-Status mit Toast-Notifications
- Liste der hochgeladenen Bilder live in der Page
- ajax/create_upload_token.php — generiert Token für aktiven Bericht
- ajax/list_pages.php — Polling-Endpoint für Editor
- 📱 Mobil hochladen-Button im Editor → QR-Modal mit qrcodejs
- Polling alle 5s nach neuen Pages, auto-reload bei Änderung
- QR-Modal styled für Dark-Theme
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Phase 1.6 Verknüpfte Sicht Auftrag↔Rechnung:
- Bericht::fetchLinkedForElement liest llx_element_element-Verknüpfungen
- linkToElement/unlinkFromElement n:m-API
- Bericht-Übersicht zeigt drei Sektionen: direkt zugeordnet,
zusätzlich verknüpft, aus verknüpften Aufträgen (read-only)
- 'Übernehmen'-Button erstellt llx_element_element-Eintrag
- 'Lösen'-Button entfernt Verknüpfung
- generate_pdf legt das fertige PDF auch unter den verknüpften
Elementen ab + ECM-Eintrag
Phase 1.1 Live-PDF-Vorschau:
- Neuer Endpoint ajax/preview_pdf.php — wie generate_pdf, aber:
schreibt nicht in ECM, ändert nicht den Status, streamt direkt
- 👁️ Vorschau-Button im Editor öffnet Modal mit iframe (PDF.js
Viewer des Browsers)
- bericht_burn_annotations und bericht_render_cover_internal in
lib/bericht.lib.php verschoben (gemeinsam genutzt)
- ESC-Key + Backdrop-Click schließen das Modal
Phase 1.2 Anhänge löschen:
- Neuer Endpoint ajax/delete_attachment.php mit Path-Whitelist
(nur facture/, commande/, propal/), löscht Datei + thumbs +
llx_ecm_files-Eintrag
- 🗑️-Button in jeder Anhang-Zeile, Confirm-Dialog mit
Quell-Auftrag/Rechnung im Text
- Inline-Remove ohne Page-Reload
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
- Jeder Thumb hat jetzt einen mini canvas, der das Bild oder die erste
PDF-Seite gerendert anzeigt (max 200px)
- Papier-Look: A4 aspect-ratio (1:1.414), weißer Hintergrund per Default
- 🌓-Button im Pages-Header schaltet zwischen paper-light und paper-dark
- Toolbar-Inputs (select/number/checkbox): heller Text auf dunklem
Hintergrund für Dark-Theme
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
- Toolbar: Schriftart (Helvetica/Arial/Times/Courier/Verdana/Georgia),
Größe (8-120), Bold/Italic Checkboxen — wirken auf neues Text-Tool
und auf selektierte Texte (Sync via selection:created/updated)
- Zoom-Buttons (-/+/Reset) mit Anzeige in %, skaliert getTargetCanvasWidth
- Pfeil-Tool: Drag-to-Draw mit echter Pfeilspitze als Group (Linie +
Triangle), drehbar/skalierbar/verschiebbar wie alle anderen Shapes
- Rect/Ellipse: ebenfalls Drag-to-Draw statt fester Größe
- ResizeObserver auf canvas-wrap re-rendert die Seite wenn sich die
Container-Breite ändert (z.B. DevTools öffnen)
- Toolbar-Inputs/Selects nutzen Dolibarr CSS-Variablen für Dark-Theme
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
- canvas-area: min-height 80vh entfernt (nahm immer 80% Bildschirmhöhe
ein, auch wenn der Inhalt kleiner war)
- canvas-wrap: overflow:auto und flex:1 entfernt — kein eigener
Scrollbalken in der Mitte mehr, der Body scrollt natürlich
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Auf Wide-Screens (>1200px mittlere Spalte) blieb rechts vom Bild ein
großer leerer Streifen, weil getTargetCanvasWidth auf 1200px gedeckelt
war. Jetzt nimmt der Canvas immer die volle Container-Breite ein.
Bei Browser-Resize wird die aktuelle Seite neu gerendert.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
- renderImage skaliert auch hoch wenn img kleiner als Container (vorher
blieb rechts leerer Platz bei kleinen Querformat-Handyfotos)
- max-width auf pdf-canvas entfernt (drawing-buffer != display size hat
das Fabric-Overlay verrutschen lassen)
- resizeFabricToCanvas nutzt getBoundingClientRect für pixelgenaue
Positionierung über requestAnimationFrame
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
- editor.js: PDF/Bild-Render nutzt jetzt die tatsächliche Breite des
.bericht-canvas-wrap Containers (max 1200), damit die mittlere Spalte
nicht überquillt und die Seiten-Sidebar sichtbar bleibt
- CSS: grid-template-columns nutzt minmax(0, 1fr) um Überlauf zu
verhindern, #pdf-canvas hat max-width:100%
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
Dolibarr-Modul für Arbeitsberichte aus Rechnungs-Anhängen mit Browser-PDF-Editor.
- Reiter "Bericht" auf Rechnungen, Aufträgen und Angeboten
- Anhänge-Browser inkl. verknüpfter Objekte (Auftrag → Rechnung)
- PDF.js + Fabric.js Browser-Editor: Pfeile, Kreise, Rechtecke, Freihand, Text
- SortableJS Seiten-Verwaltung mit Drag&Drop
- ODT-Deckblatt mit Platzhaltern, Templates im Admin verwaltbar
- TCPDF + FPDI Finalisierung mit eingebrannten Annotationen
- ECM-Verknüpfung: PDF erscheint unter Verknüpfte Dokumente
- Auftragsnummer aus existierendem Extrafield options_auftragsnummer
- Mehrere Berichte pro Dokument
- Beim Aktivieren werden vorhandene Extrafields nicht überschrieben
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
