design.estate/dees-document
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): Enhanced document generation features and added translation capabilities

Browse Source
This commit is contained in:
Philipp Kunz 2024-11-30 20:54:15 +01:00
parent e6cd135920
commit af77fcbe0e
18 changed files with 483 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@ -1,5 +1,13 @@
# Changelog # Changelog
## 2024-11-30 - 1.1.0 - feat(core)
Enhanced document generation features and added translation capabilities
- Updated document rendering with advanced modular architecture.
- Introduced translation mechanism for document content.
- Improved PDF generation with dynamic settings support.
- Enhanced test cases for PDF generation with complex document structures.
## 2024-11-27 - 1.0.103 - fix(DeDocument) ## 2024-11-27 - 1.0.103 - fix(DeDocument)
Fix rendering of documents by properly moving new pages back to the document container Fix rendering of documents by properly moving new pages back to the document container

21
npmextra.json
View File

@ -5,7 +5,7 @@
"githost": "code.foss.global", "githost": "code.foss.global",
"gitscope": "designestate/private", "gitscope": "designestate/private",
"gitrepo": "dedocument-catalog", "gitrepo": "dedocument-catalog",
"description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.", "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
"npmPackagename": "@designestate_private/dedocument-catalog", "npmPackagename": "@designestate_private/dedocument-catalog",
"license": "MIT", "license": "MIT",
"projectDomain": "design.estate", "projectDomain": "design.estate",
@ -14,19 +14,20 @@
"document generation", "document generation",
"invoices", "invoices",
"PDF creation", "PDF creation",
"typescript", "TypeScript",
"web components", "web components",
"custom elements",
"QR code",
"smart contracts",
"templating", "templating",
"dynamic rendering", "dynamic rendering",
"responsive design", "responsive design",
"modular development", "business documentation",
"lightweight", "automated workflows",
"efficient", "modular architecture",
"finance", "smart contracts",
"business" "javascript",
"QR code",
"custom elements",
"nodejs",
"data-driven"
] ]
} }
}, },

23
package.json
View File

@ -2,7 +2,7 @@
"name": "@design.estate/dees-document", "name": "@design.estate/dees-document",
"version": "1.0.103", "version": "1.0.103",
"private": false, "private": false,
"description": "A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.", "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
"main": "dist_ts_web/index.js", "main": "dist_ts_web/index.js",
"typings": "dist_ts_web/index.d.ts", "typings": "dist_ts_web/index.d.ts",
"exports": { "exports": {
@ -25,7 +25,7 @@
"@push.rocks/smartfile": "^11.0.21", "@push.rocks/smartfile": "^11.0.21",
"@push.rocks/smartjson": "^5.0.20", "@push.rocks/smartjson": "^5.0.20",
"@push.rocks/smartpath": "^5.0.18", "@push.rocks/smartpath": "^5.0.18",
"@push.rocks/smartpdf": "^3.1.7", "@push.rocks/smartpdf": "^3.1.8",
"@push.rocks/smarttime": "^4.0.8", "@push.rocks/smarttime": "^4.0.8",
"@tsclass/tsclass": "^4.1.2", "@tsclass/tsclass": "^4.1.2",
"@types/qrcode": "^1.5.5", "@types/qrcode": "^1.5.5",
@ -67,18 +67,19 @@
"document generation", "document generation",
"invoices", "invoices",
"PDF creation", "PDF creation",
"typescript", "TypeScript",
"web components", "web components",
"custom elements",
"QR code",
"smart contracts",
"templating", "templating",
"dynamic rendering", "dynamic rendering",
"responsive design", "responsive design",
"modular development", "business documentation",
"lightweight", "automated workflows",
"efficient", "modular architecture",
"finance", "smart contracts",
"business" "javascript",
"QR code",
"custom elements",
"nodejs",
"data-driven"
] ]
} }

133
pnpm-lock.yaml generated
View File

@ -30,8 +30,8 @@ importers:
specifier: ^5.0.18 specifier: ^5.0.18
version: 5.0.18 version: 5.0.18
'@push.rocks/smartpdf': '@push.rocks/smartpdf':
specifier: ^3.1.7 specifier: ^3.1.8
version: 3.1.7 version: 3.1.8
'@push.rocks/smarttime': '@push.rocks/smarttime':
specifier: ^4.0.8 specifier: ^4.0.8
version: 4.0.8 version: 4.0.8
@ -268,8 +268,8 @@ packages:
resolution: {integrity: sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==} resolution: {integrity: sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
'@cloudflare/workers-types@4.20241112.0': '@cloudflare/workers-types@4.20241127.0':
resolution: {integrity: sha512-Q4p9bAWZrX14bSCKY9to19xl0KMU7nsO5sJ2cTVspHoypsjPUMeQCsjHjmsO2C4Myo8/LPeDvmqFmkyNAPPYZw==} resolution: {integrity: sha512-UqlvtqV8eI0CdPR7nxlbVlE52+lcjHvGdbYXEPwisy23+39RsFV7OOy0da0moJAhqnL2OhDmWTOaKdsVcPHiJQ==}
'@colors/colors@1.6.0': '@colors/colors@1.6.0':
resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==} resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
@ -611,8 +611,8 @@ packages:
'@hapi/bourne@3.0.0': '@hapi/bourne@3.0.0':
resolution: {integrity: sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==} resolution: {integrity: sha512-Waj1cwPXJDucOib4a3bAISsKJVb15MKi9IvmTI/7ssVEm6sywXGjVJDhl6/umt1pK1ZS7PacXU3A1PmFKHEZ2w==}
'@happy-dom/global-registrator@15.11.6': '@happy-dom/global-registrator@15.11.7':
resolution: {integrity: sha512-TGE7tUM3+0h47wfj2zS+madL53jVq3f2/YvJqrA/clwv3wz5Mm2jHhTpbLZSSydNvDwBc9l5uNt5qylWClj6uQ==} resolution: {integrity: sha512-mfOoUlIw8VBiJYPrl5RZfMzkXC/z7gbSpi2ecycrj/gRWLq2CMV+Q+0G+JPjeOmuNFgg0skEIzkVFzVYFP6URw==}
engines: {node: '>=18.0.0'} engines: {node: '>=18.0.0'}
'@isaacs/cliui@8.0.2': '@isaacs/cliui@8.0.2':
@ -835,8 +835,8 @@ packages:
'@push.rocks/smartpath@5.0.18': '@push.rocks/smartpath@5.0.18':
resolution: {integrity: sha512-kIyRTlOoeEth5b4Qp8KPUxNOGNdvhb2aD0hbHfF3oGTQ0xnDdgB1l03/4bIoapHG48OrTgh4uQ5tUorykgdOzw==} resolution: {integrity: sha512-kIyRTlOoeEth5b4Qp8KPUxNOGNdvhb2aD0hbHfF3oGTQ0xnDdgB1l03/4bIoapHG48OrTgh4uQ5tUorykgdOzw==}
'@push.rocks/smartpdf@3.1.7': '@push.rocks/smartpdf@3.1.8':
resolution: {integrity: sha512-Qtyz4CnrxEcNSe09r4wpOdTwfu1pihBLYiPFkb9iwF3SrOK0rkH4qKXnsnYAVCumOoGdQdr3NhNjwpe9vqjoIw==} resolution: {integrity: sha512-9fxshJAp6VCkrAFWXAFS7X7QzZLFSWM/JzDtllYW7gaWzRKxsMCdfaNy1vKsGq5uK5L91Lrd+A9Olp1mx4xs1w==}
'@push.rocks/smartpromise@4.0.4': '@push.rocks/smartpromise@4.0.4':
resolution: {integrity: sha512-Mbh+DnX4+rVPEZgYU7LtTJI/AYoNn7+h27AycEFpPJW41DCfjTiXiI0+ecNdyO1AfbcL0Q02RQjoEauEWx5FQg==} resolution: {integrity: sha512-Mbh+DnX4+rVPEZgYU7LtTJI/AYoNn7+h27AycEFpPJW41DCfjTiXiI0+ecNdyO1AfbcL0Q02RQjoEauEWx5FQg==}
@ -1409,8 +1409,8 @@ packages:
'@types/node-forge@1.3.11': '@types/node-forge@1.3.11':
resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==} resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
'@types/node@22.10.0': '@types/node@22.10.1':
resolution: {integrity: sha512-XC70cRZVElFHfIUB40FgZOBbgJYFKKMa5nb9lxcwYstFG/Mi+/Y0bGS+rs6Dmhmkpq4pnNiLiuZAbc02YCOnmA==} resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==}
'@types/parse5@6.0.3': '@types/parse5@6.0.3':
resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@ -2356,8 +2356,9 @@ packages:
resolution: {integrity: sha512-4kKdWXTtgQ4biIo7hZA396HT062nDVVHPjQcurNZ3o/voYN+o5FUC5kOwuORbpExp3XbTJ3SU7iRipiIhQtovw==} resolution: {integrity: sha512-4kKdWXTtgQ4biIo7hZA396HT062nDVVHPjQcurNZ3o/voYN+o5FUC5kOwuORbpExp3XbTJ3SU7iRipiIhQtovw==}
engines: {node: '>=14'} engines: {node: '>=14'}
gopd@1.0.1: gopd@1.1.0:
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} resolution: {integrity: sha512-FQoVQnqcdk4hVM4JN1eromaun4iuS34oStkdlLENLdpULsuQcTyXj8w7ayhuUfPwEYZ1ZOooOTT6fdA9Vmx/RA==}
engines: {node: '>= 0.4'}
got@12.6.1: got@12.6.1:
resolution: {integrity: sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==} resolution: {integrity: sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==}
@ -2373,8 +2374,8 @@ packages:
resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==} resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==}
hasBin: true hasBin: true
happy-dom@15.11.6: happy-dom@15.11.7:
resolution: {integrity: sha512-elX7iUTu+5+3b2+NGQc0L3eWyq9jKhuJJ4GpOMxxT/c2pg9O3L5H3ty2VECX0XXZgRmmRqXyOK8brA2hDI6LsQ==} resolution: {integrity: sha512-KyrFvnl+J9US63TEzwoiJOQzZBJY7KgBushJA8X61DMbNsH+2ONkDuLDnCnwUiPTF42tLoEmrPyoqbenVA5zrg==}
engines: {node: '>=18.0.0'} engines: {node: '>=18.0.0'}
has-flag@3.0.0: has-flag@3.0.0:
@ -3287,8 +3288,8 @@ packages:
pdf-lib@1.17.1: pdf-lib@1.17.1:
resolution: {integrity: sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==} resolution: {integrity: sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==}
pdf2json@3.0.5: pdf2json@3.1.4:
resolution: {integrity: sha512-Un1yLbSlk/zfwrltgguskExIioXZlFSFwsyXU0cnBorLywbTbcdzmJJEebh+U2cFCtR7y8nDs5lPHAe7ldxjZg==} resolution: {integrity: sha512-rS+VapXpXZr+5lUpHmRh3ugXdFXp24p1RyG24yP1DMpqP4t0mrYNGpLtpSbWD42PnQ59GIXofxF+yWb7M+3THg==}
engines: {node: '>=18.12.1', npm: '>=8.19.2'} engines: {node: '>=18.12.1', npm: '>=8.19.2'}
hasBin: true hasBin: true
bundledDependencies: bundledDependencies:
@ -3442,8 +3443,8 @@ packages:
regenerator-runtime@0.14.1: regenerator-runtime@0.14.1:
resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
registry-auth-token@5.0.2: registry-auth-token@5.0.3:
resolution: {integrity: sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==} resolution: {integrity: sha512-1bpc9IyC+e+CNFRaWyn77tk4xGG4PPUyfakSmA6F6cvUDjrm58dfyJ3II+9yb10EDkHoy1LaPSmHaWLOH3m6HA==}
engines: {node: '>=14'} engines: {node: '>=14'}
registry-url@6.0.1: registry-url@6.0.1:
@ -4121,7 +4122,7 @@ snapshots:
'@api.global/typedrequest': 3.1.10 '@api.global/typedrequest': 3.1.10
'@api.global/typedrequest-interfaces': 3.0.19 '@api.global/typedrequest-interfaces': 3.0.19
'@api.global/typedsocket': 3.0.1 '@api.global/typedsocket': 3.0.1
'@cloudflare/workers-types': 4.20241112.0 '@cloudflare/workers-types': 4.20241127.0
'@design.estate/dees-comms': 1.0.27 '@design.estate/dees-comms': 1.0.27
'@push.rocks/lik': 6.1.0 '@push.rocks/lik': 6.1.0
'@push.rocks/smartchok': 1.0.34 '@push.rocks/smartchok': 1.0.34
@ -4776,7 +4777,7 @@ snapshots:
dependencies: dependencies:
regenerator-runtime: 0.14.1 regenerator-runtime: 0.14.1
'@cloudflare/workers-types@4.20241112.0': {} '@cloudflare/workers-types@4.20241127.0': {}
'@colors/colors@1.6.0': {} '@colors/colors@1.6.0': {}
@ -5085,9 +5086,9 @@ snapshots:
'@hapi/bourne@3.0.0': {} '@hapi/bourne@3.0.0': {}
'@happy-dom/global-registrator@15.11.6': '@happy-dom/global-registrator@15.11.7':
dependencies: dependencies:
happy-dom: 15.11.6 happy-dom: 15.11.7
'@isaacs/cliui@8.0.2': '@isaacs/cliui@8.0.2':
dependencies: dependencies:
@ -5111,7 +5112,7 @@ snapshots:
'@jest/schemas': 29.6.3 '@jest/schemas': 29.6.3
'@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-lib-coverage': 2.0.6
'@types/istanbul-reports': 3.0.4 '@types/istanbul-reports': 3.0.4
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/yargs': 17.0.33 '@types/yargs': 17.0.33
chalk: 4.1.2 chalk: 4.1.2
@ -5300,7 +5301,7 @@ snapshots:
'@push.rocks/smartbrowser@2.0.6': '@push.rocks/smartbrowser@2.0.6':
dependencies: dependencies:
'@push.rocks/smartdelay': 3.0.5 '@push.rocks/smartdelay': 3.0.5
'@push.rocks/smartpdf': 3.1.7 '@push.rocks/smartpdf': 3.1.8
'@push.rocks/smartpuppeteer': 2.0.2 '@push.rocks/smartpuppeteer': 2.0.2
'@push.rocks/smartunique': 3.0.9 '@push.rocks/smartunique': 3.0.9
transitivePeerDependencies: transitivePeerDependencies:
@ -5568,7 +5569,7 @@ snapshots:
'@push.rocks/smartntml@2.0.8': '@push.rocks/smartntml@2.0.8':
dependencies: dependencies:
'@design.estate/dees-element': 2.0.39 '@design.estate/dees-element': 2.0.39
'@happy-dom/global-registrator': 15.11.6 '@happy-dom/global-registrator': 15.11.7
'@push.rocks/smartpromise': 4.0.4 '@push.rocks/smartpromise': 4.0.4
fake-indexeddb: 6.0.0 fake-indexeddb: 6.0.0
transitivePeerDependencies: transitivePeerDependencies:
@ -5585,7 +5586,7 @@ snapshots:
'@push.rocks/smartpath@5.0.18': {} '@push.rocks/smartpath@5.0.18': {}
'@push.rocks/smartpdf@3.1.7': '@push.rocks/smartpdf@3.1.8':
dependencies: dependencies:
'@push.rocks/smartbuffer': 3.0.4 '@push.rocks/smartbuffer': 3.0.4
'@push.rocks/smartdelay': 3.0.5 '@push.rocks/smartdelay': 3.0.5
@ -5596,10 +5597,10 @@ snapshots:
'@push.rocks/smartpuppeteer': 2.0.2 '@push.rocks/smartpuppeteer': 2.0.2
'@push.rocks/smartunique': 3.0.9 '@push.rocks/smartunique': 3.0.9
'@tsclass/tsclass': 4.1.2 '@tsclass/tsclass': 4.1.2
'@types/express': 4.17.21 '@types/express': 5.0.0
express: 4.21.1 express: 4.21.1
pdf-lib: 1.17.1 pdf-lib: 1.17.1
pdf2json: 3.0.5 pdf2json: 3.1.4
pdf2pic: 3.1.3 pdf2pic: 3.1.3
transitivePeerDependencies: transitivePeerDependencies:
- bufferutil - bufferutil
@ -6393,14 +6394,14 @@ snapshots:
'@types/accepts@1.3.7': '@types/accepts@1.3.7':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/babel__code-frame@7.0.6': {} '@types/babel__code-frame@7.0.6': {}
'@types/body-parser@1.19.5': '@types/body-parser@1.19.5':
dependencies: dependencies:
'@types/connect': 3.4.38 '@types/connect': 3.4.38
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/buffer-json@2.0.3': {} '@types/buffer-json@2.0.3': {}
@ -6416,17 +6417,17 @@ snapshots:
'@types/clean-css@4.2.11': '@types/clean-css@4.2.11':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
source-map: 0.6.1 source-map: 0.6.1
'@types/co-body@6.1.3': '@types/co-body@6.1.3':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/qs': 6.9.17 '@types/qs': 6.9.17
'@types/connect@3.4.38': '@types/connect@3.4.38':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/content-disposition@0.5.8': {} '@types/content-disposition@0.5.8': {}
@ -6439,11 +6440,11 @@ snapshots:
'@types/connect': 3.4.38 '@types/connect': 3.4.38
'@types/express': 5.0.0 '@types/express': 5.0.0
'@types/keygrip': 1.0.6 '@types/keygrip': 1.0.6
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/cors@2.8.17': '@types/cors@2.8.17':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/debounce@1.2.4': {} '@types/debounce@1.2.4': {}
@ -6457,14 +6458,14 @@ snapshots:
'@types/express-serve-static-core@4.19.6': '@types/express-serve-static-core@4.19.6':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/qs': 6.9.17 '@types/qs': 6.9.17
'@types/range-parser': 1.2.7 '@types/range-parser': 1.2.7
'@types/send': 0.17.4 '@types/send': 0.17.4
'@types/express-serve-static-core@5.0.2': '@types/express-serve-static-core@5.0.2':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/qs': 6.9.17 '@types/qs': 6.9.17
'@types/range-parser': 1.2.7 '@types/range-parser': 1.2.7
'@types/send': 0.17.4 '@types/send': 0.17.4
@ -6489,30 +6490,30 @@ snapshots:
'@types/from2@2.3.5': '@types/from2@2.3.5':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/fs-extra@11.0.4': '@types/fs-extra@11.0.4':
dependencies: dependencies:
'@types/jsonfile': 6.1.4 '@types/jsonfile': 6.1.4
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/fs-extra@9.0.13': '@types/fs-extra@9.0.13':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/glob@7.2.0': '@types/glob@7.2.0':
dependencies: dependencies:
'@types/minimatch': 5.1.2 '@types/minimatch': 5.1.2
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/glob@8.1.0': '@types/glob@8.1.0':
dependencies: dependencies:
'@types/minimatch': 5.1.2 '@types/minimatch': 5.1.2
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/gunzip-maybe@1.4.2': '@types/gunzip-maybe@1.4.2':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/hast@3.0.4': '@types/hast@3.0.4':
dependencies: dependencies:
@ -6546,7 +6547,7 @@ snapshots:
'@types/jsonfile@6.1.4': '@types/jsonfile@6.1.4':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/keygrip@1.0.6': {} '@types/keygrip@1.0.6': {}
@ -6563,7 +6564,7 @@ snapshots:
'@types/http-errors': 2.0.4 '@types/http-errors': 2.0.4
'@types/keygrip': 1.0.6 '@types/keygrip': 1.0.6
'@types/koa-compose': 3.2.8 '@types/koa-compose': 3.2.8
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/mdast@4.0.4': '@types/mdast@4.0.4':
dependencies: dependencies:
@ -6581,9 +6582,9 @@ snapshots:
'@types/node-forge@1.3.11': '@types/node-forge@1.3.11':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/node@22.10.0': '@types/node@22.10.1':
dependencies: dependencies:
undici-types: 6.20.0 undici-types: 6.20.0
@ -6593,7 +6594,7 @@ snapshots:
'@types/qrcode@1.5.5': '@types/qrcode@1.5.5':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/qs@6.9.17': {} '@types/qs@6.9.17': {}
@ -6605,19 +6606,19 @@ snapshots:
'@types/s3rver@3.7.4': '@types/s3rver@3.7.4':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/semver@7.5.8': {} '@types/semver@7.5.8': {}
'@types/send@0.17.4': '@types/send@0.17.4':
dependencies: dependencies:
'@types/mime': 1.3.5 '@types/mime': 1.3.5
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/serve-static@1.15.7': '@types/serve-static@1.15.7':
dependencies: dependencies:
'@types/http-errors': 2.0.4 '@types/http-errors': 2.0.4
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/send': 0.17.4 '@types/send': 0.17.4
'@types/sinon-chai@3.2.12': '@types/sinon-chai@3.2.12':
@ -6637,11 +6638,11 @@ snapshots:
'@types/tar-stream@2.2.3': '@types/tar-stream@2.2.3':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/through2@2.0.41': '@types/through2@2.0.41':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/triple-beam@1.3.5': {} '@types/triple-beam@1.3.5': {}
@ -6665,7 +6666,7 @@ snapshots:
'@types/whatwg-url@8.2.2': '@types/whatwg-url@8.2.2':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/webidl-conversions': 7.0.3 '@types/webidl-conversions': 7.0.3
'@types/which@2.0.2': {} '@types/which@2.0.2': {}
@ -6674,11 +6675,11 @@ snapshots:
'@types/ws@7.4.7': '@types/ws@7.4.7':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/ws@8.5.13': '@types/ws@8.5.13':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
'@types/yargs-parser@21.0.3': {} '@types/yargs-parser@21.0.3': {}
@ -6688,7 +6689,7 @@ snapshots:
'@types/yauzl@2.10.3': '@types/yauzl@2.10.3':
dependencies: dependencies:
'@types/node': 22.10.0 '@types/node': 22.10.1
optional: true optional: true
'@ungap/structured-clone@1.2.0': {} '@ungap/structured-clone@1.2.0': {}
@ -7171,7 +7172,7 @@ snapshots:
dependencies: dependencies:
es-define-property: 1.0.0 es-define-property: 1.0.0
es-errors: 1.3.0 es-errors: 1.3.0
gopd: 1.0.1 gopd: 1.1.0
define-lazy-prop@2.0.0: {} define-lazy-prop@2.0.0: {}
@ -7264,7 +7265,7 @@ snapshots:
dependencies: dependencies:
'@types/cookie': 0.4.1 '@types/cookie': 0.4.1
'@types/cors': 2.8.17 '@types/cors': 2.8.17
'@types/node': 22.10.0 '@types/node': 22.10.1
accepts: 1.3.8 accepts: 1.3.8
base64id: 2.0.0 base64id: 2.0.0
cookie: 0.4.2 cookie: 0.4.2
@ -7654,7 +7655,7 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
gopd@1.0.1: gopd@1.1.0:
dependencies: dependencies:
get-intrinsic: 1.2.4 get-intrinsic: 1.2.4
@ -7685,7 +7686,7 @@ snapshots:
pumpify: 1.5.1 pumpify: 1.5.1
through2: 2.0.5 through2: 2.0.5
happy-dom@15.11.6: happy-dom@15.11.7:
dependencies: dependencies:
entities: 4.5.0 entities: 4.5.0
webidl-conversions: 7.0.0 webidl-conversions: 7.0.0
@ -7955,7 +7956,7 @@ snapshots:
jest-util@29.7.0: jest-util@29.7.0:
dependencies: dependencies:
'@jest/types': 29.6.3 '@jest/types': 29.6.3
'@types/node': 22.10.0 '@types/node': 22.10.1
chalk: 4.1.2 chalk: 4.1.2
ci-info: 3.9.0 ci-info: 3.9.0
graceful-fs: 4.2.11 graceful-fs: 4.2.11
@ -8734,7 +8735,7 @@ snapshots:
package-json@8.1.1: package-json@8.1.1:
dependencies: dependencies:
got: 12.6.1 got: 12.6.1
registry-auth-token: 5.0.2 registry-auth-token: 5.0.3
registry-url: 6.0.1 registry-url: 6.0.1
semver: 7.6.3 semver: 7.6.3
@ -8782,7 +8783,7 @@ snapshots:
pako: 1.0.11 pako: 1.0.11
tslib: 1.14.1 tslib: 1.14.1
pdf2json@3.0.5: {} pdf2json@3.1.4: {}
pdf2pic@3.1.3: pdf2pic@3.1.3:
dependencies: dependencies:
@ -8954,7 +8955,7 @@ snapshots:
regenerator-runtime@0.14.1: {} regenerator-runtime@0.14.1: {}
registry-auth-token@5.0.2: registry-auth-token@5.0.3:
dependencies: dependencies:
'@pnpm/npm-conf': 2.3.1 '@pnpm/npm-conf': 2.3.1
@ -9115,7 +9116,7 @@ snapshots:
es-errors: 1.3.0 es-errors: 1.3.0
function-bind: 1.1.2 function-bind: 1.1.2
get-intrinsic: 1.2.4 get-intrinsic: 1.2.4
gopd: 1.0.1 gopd: 1.1.0
has-property-descriptors: 1.0.2 has-property-descriptors: 1.0.2
setprototypeof@1.1.0: {} setprototypeof@1.1.0: {}

89
readme.md
View File

@ -1,26 +1,31 @@
# @design.estate/dees-document # @design.estate/dees-document
a catalog for creating documents like invoices
A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.
## Install ## Install
To install `@design.estate/dees-document`, run the following command in your project directory:
To add `@design.estate/dees-document` to your project, run the following command in your terminal:
```shell ```shell
npm install @design.estate/dees-document --save npm install @design.estate/dees-document --save
``` ```
This will add `@design.estate/dees-document` to your project's dependencies and ensure it's installed into your `node_modules` folder. This will install the package and add it to your project's dependencies, ensuring all required modules are available in your `node_modules` directory.
## Usage ## Usage
The `@design.estate/dees-document` package is a comprehensive toolkit for creating various types of documents, such as invoices, with ease. It leverages modern ECMAScript (ES) modules and TypeScript for a type-safe, developer-friendly experience. Below, you'll find detailed examples covering how to utilize the package to its full potential.
### Setting Up the Document Service The `@design.estate/dees-document` package provides a robust framework for creating documents including invoices, contracts, and various other business-related documents. It is built on modern web technologies including TypeScript and ES modules to ensure a type-safe and easy-to-integrate experience. Below, we will guide you through the comprehensive usage of this package, from setting up your environment to generating PDF documents.
Before diving into creating documents, you first need to set up the document service. This involves importing the necessary modules and initializing the service instance.
### Getting Started
Before creating documents, initialize the document service which is central to this package. This is typically done at the beginning of your application.
```typescript ```typescript
import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document'; import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
async function setupPdfService() { async function setupPdfService() {
const options: IPdfServiceConstructorOptions = { const options: IPdfServiceConstructorOptions = {
// Configuration options here // Add necessary configuration here
}; };
const pdfService = await PdfService.createAndStart(options); const pdfService = await PdfService.createAndStart(options);
@ -29,13 +34,15 @@ async function setupPdfService() {
} }
``` ```
In the example above, we import `PdfService` from the package and use its `createAndStart` method to initialize it with optional configuration settings. Replace `// Configuration options here` with any specific options your project may require. This script initializes `PdfService`. Modify the options to tailor the service to your needs.
### Creating a Simple Invoice ### Creating Documents
After setting up the document service, you can proceed to create documents such as invoices. Here, we'll demonstrate how to create a basic invoice.
#### Define the Invoice Data Structure With the PDF service ready, you can proceed to generate documents. The following section provides a detailed example of creating an invoice. This example is applicable to various document types with necessary adjustments.
First, define the basic structure of your invoice. This involves specifying details like the sender, recipient, items, and more.
#### Step-by-Step: Create an Invoice
1. **Define the Data Structure**: Describe the invoice details. This includes sender and recipient information, the items being invoiced, and more.
```typescript ```typescript
import { ILetter } from '@design.estate/dees-document'; import { ILetter } from '@design.estate/dees-document';
@ -88,24 +95,22 @@ const invoiceData: ILetter = {
}; };
``` ```
In this structure, `invoiceData` outlines essential details for an invoice document, using the `ILetter` interface. It includes information about both the sender (`from`) and the recipient (`to`), as well as the invoiced items under `content.invoiceData.items`. Here, `ILetter` interface details all components of an invoice including sender (`from`) and recipient (`to`) information, as well as the invoiced items.
#### Generate the Invoice PDF 2. **Generate the PDF**: Transform the invoice details into a PDF.
With the invoice data ready, you can now generate the PDF using the `PdfService` instance.
```typescript ```typescript
async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) { async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData); const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
console.log('Invoice PDF generated successfully.'); console.log('Invoice PDF generated successfully.');
// Here, you can save the PDF to a file, send it over a network, etc. // Save the PDF, send it via email, etc.
} }
``` ```
The method `createPdfFromLetterObject` receives the invoice data and returns a `Buffer` containing the PDF. You can then save this PDF to the filesystem, send it over email, or perform any other required actions. The function `createPdfFromLetterObject` returns a `Buffer` containing the generated PDF. From here, you can save this PDF to a file, send it to clients, or archive it.
#### Complete Example Integration 3. **Integrate It All**: Here's how everything ties together into a complete script for generating an invoice:
Combining everything, your complete script to set up the service, define invoice data, and generate a PDF invoice might look something like this:
```typescript ```typescript
async function main() { async function main() {
@ -116,13 +121,49 @@ async function main() {
main().then(() => console.log('Invoice generation process completed.')); main().then(() => console.log('Invoice generation process completed.'));
``` ```
### Beyond Invoices This script initiates the PDF service and generates the invoice PDF with the provided information.
The `@design.estate/dees-document` package is not limited to invoices alone. It's designed to handle a wide range of document types. The modular architecture allows for the customizable construction of documents, enabling you to tailor the output to meet precise requirements.
For instance, you can create contracts, reports, and other document types using a similar approach—by defining the content structure and utilizing the PDF service to generate the document. The package's flexibility and extensibility make it an invaluable tool in any document generation workflow. ### Advanced Document Features
### Advanced Usage The package is designed to create not only invoices but a wide range of document types. Leverage its modular architecture to build and customize documents to fit specific needs.
For more advanced scenarios, such as custom styling, embedding images, and handling more complex document structures, refer to the package's documentation. It provides comprehensive details and examples to help you fully leverage the capabilities of `@design.estate/dees-document`.
#### Advanced Scenarios
1. **Custom Styling**: Customize the appearance of elements within your documents, such as headers, footers, and more.
```typescript
import { DeDocumentViewer } from '@design.estate/dees-element';
const customStyledViewer = new DeDocumentViewer();
customStyledViewer.style.setProperty('--main-bg-color', 'lightblue');
document.body.appendChild(customStyledViewer);
```
Customize via CSS or dynamically through TypeScript where necessary.
2. **Interactive Document Elements**: Incorporate UI components like buttons, input fields, or visualizations tailored for your document needs.
3. **Multi-page Document Generation**: Handle overflow of content and automatic page generation while maintaining headers and footers.
```typescript
pdfService.adjustDePageScaling();
```
Toggle between print and digital formats and handle scaling.
4. **Embedding Images and Logos**: Add company logos, graphics, or auxiliary content to enhance document presentation.
### Additional Capabilities
Beyond these examples, delve deeper into advanced functionalities such as:
- **Document Management**: Manage multiple document templates, manage versions, and add annotations or notes.
- **Dynamic Rendering**: Use templating for dynamic content rendering based on variable inputs.
- **Responsive Design for Digital Documents**: Ensure documents are displayed correctly across devices.
### Concluding Remarks
The `@design.estate/dees-document` package is an essential tool in the modern document generation ecosystem. Its expansive capabilities, from basic invoices to complex document templates, make it a versatile solution for businesses of all scales. Implementing this service broadly simplifies document management workflows and enhances document presentation precision and quality. For further depth, consult the package's documentation or explore the examples included in the module.
## License and Legal Information ## License and Legal Information

70
test/test.ts
View File

@ -1,5 +1,6 @@
import * as plugins from './plugins.js'; import * as plugins from './plugins.js';
import * as paths from './paths.js'; import * as paths from './paths.js';
import * as interfaces from '../ts/interfaces/index.js';
import { expect, tap } from '@push.rocks/tapbundle'; import { expect, tap } from '@push.rocks/tapbundle';
import * as deesDocumentServer from '../ts/index.js'; import * as deesDocumentServer from '../ts/index.js';
@ -16,6 +17,9 @@ const testLetterData: plugins.tsclass.business.ILetter = {
id: 'XX-CLIENT-48765', id: 'XX-CLIENT-48765',
reverseCharge: true, reverseCharge: true,
dueInDays: 30, dueInDays: 30,
currency: 'EUR',
notes: [],
type: 'debitnote',
billedBy: { billedBy: {
address: null, address: null,
description: null, description: null,
@ -102,26 +106,38 @@ tap.test('should create a document from an invoice', async () => {
tap.test('should create an invoice', async () => { tap.test('should create an invoice', async () => {
let counter = 0; let counter = 0;
const saveResult = async (letterDataArg: plugins.tsclass.business.ILetter) => { const saveResult = async (optionsArg: {
const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(letterDataArg); letterData: plugins.tsclass.business.ILetter;
await plugins.smartfile.memory.toFs(Buffer.from(pdfResult.buffer), plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)); documentSettings: interfaces.IDocumentSettings;
} }) => {
await saveResult(testLetterData); const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
await plugins.smartfile.memory.toFs(
Buffer.from(pdfResult.buffer),
plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
);
};
await saveResult({ await saveResult({
letterData: testLetterData,
documentSettings: {},
});
await saveResult({
letterData: {
...testLetterData, ...testLetterData,
versionInfo: { versionInfo: {
type: 'draft', type: 'draft',
version: '1.0.0', version: '1.0.0',
} },
},
documentSettings: {},
}); });
testLetterData.content.invoiceData.items = [ (testLetterData.content.invoiceData.items = [
{ {
name: 'Website Creation', name: 'Website Creation',
unitQuantity: 1, unitQuantity: 1,
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 0, vatPercentage: 0,
currency: 'EUR', position: 1,
}, },
{ {
name: 'Hosting', name: 'Hosting',
@ -129,7 +145,7 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 19, vatPercentage: 19,
currency: 'EUR', position: 2,
}, },
{ {
name: 'Overnight Shipping', name: 'Overnight Shipping',
@ -137,14 +153,15 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 24, vatPercentage: 24,
currency: 'EUR', position: 3,
},{ },
{
name: 'Website Creation', name: 'Website Creation',
unitQuantity: 1, unitQuantity: 1,
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 0, vatPercentage: 0,
currency: 'EUR', position: 4,
}, },
{ {
name: 'Hosting', name: 'Hosting',
@ -152,7 +169,7 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 19, vatPercentage: 19,
currency: 'EUR', position: 5,
}, },
{ {
name: 'Overnight Shipping', name: 'Overnight Shipping',
@ -160,14 +177,15 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 24, vatPercentage: 24,
currency: 'EUR', position: 6,
},{ },
{
name: 'Website Creation', name: 'Website Creation',
unitQuantity: 1, unitQuantity: 1,
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 0, vatPercentage: 0,
currency: 'EUR', position: 7,
}, },
{ {
name: 'Hosting', name: 'Hosting',
@ -175,7 +193,7 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 19, vatPercentage: 19,
currency: 'EUR', position: 8,
}, },
{ {
name: 'Overnight Shipping', name: 'Overnight Shipping',
@ -183,14 +201,15 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 24, vatPercentage: 24,
currency: 'EUR', position: 9,
},{ },
{
name: 'Website Creation', name: 'Website Creation',
unitQuantity: 1, unitQuantity: 1,
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 0, vatPercentage: 0,
currency: 'EUR', position: 10,
}, },
{ {
name: 'Hosting', name: 'Hosting',
@ -198,7 +217,7 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 19, vatPercentage: 19,
currency: 'EUR', position: 11,
}, },
{ {
name: 'Overnight Shipping', name: 'Overnight Shipping',
@ -206,12 +225,13 @@ tap.test('should create an invoice', async () => {
unitNetPrice: 1200, unitNetPrice: 1200,
unitType: 'item', unitType: 'item',
vatPercentage: 24, vatPercentage: 24,
currency: 'EUR', position: 12,
}, },
], ]),
await saveResult({ await saveResult({
...testLetterData, letterData: testLetterData,
}) documentSettings: {},
});
}); });
tap.test('should stop the service', async () => { tap.test('should stop the service', async () => {

4
ts/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-document', name: '@design.estate/dees-document',
version: '1.0.103', version: '1.1.0',
description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.' description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
} }

8
ts/classes.pdfservice.ts
View File

@ -1,6 +1,7 @@
import * as plugins from './plugins.js'; import * as plugins from './plugins.js';
import * as paths from './paths.js'; import * as paths from './paths.js';
import * as helpers from './helpers.js'; import * as helpers from './helpers.js';
import * as interfaces from '../ts/interfaces/index.js';
export interface IPdfServiceConstructorOptions { export interface IPdfServiceConstructorOptions {
@ -44,12 +45,15 @@ export class PdfService {
/** /**
* creates an letter * creates an letter
*/ */
public async createPdfFromLetterObject(letterDataArg: plugins.tsclass.business.ILetter) { public async createPdfFromLetterObject(optionsArg: {
letterData: plugins.tsclass.business.ILetter,
documentSettings: interfaces.IDocumentSettings
}) {
const html = ` const html = `
<script type="module"> <script type="module">
${await helpers.getBundleAsString()} ${await helpers.getBundleAsString()}
</script> </script>
<dedocument-dedocument printMode letterData="${plugins.smartjson.stringifyBase64(letterDataArg)}"></dedocument-dedocument> <dedocument-dedocument printMode documentSettings="${plugins.smartjson.stringifyBase64(optionsArg.documentSettings)}" letterData="${plugins.smartjson.stringifyBase64(optionsArg.letterData)}"></dedocument-dedocument>
`; `;
// console.log(html); // console.log(html);
const pdfResult = await this.smartpdfInstance.getA4PdfResultForHtmlString(html); const pdfResult = await this.smartpdfInstance.getA4PdfResultForHtmlString(html);

5
ts/interfaces/document.ts Normal file
View File

@ -0,0 +1,5 @@
export interface IDocumentSettings {
enableTopDraftText?: boolean;
enableDefaultHeader?: boolean;
enableDefaultFooter?: boolean;
}

2
ts/interfaces/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './document.js';
export * from './translation.js';

4
ts/interfaces/translation.ts Normal file
View File

@ -0,0 +1,4 @@
export interface IDeDocumentTranslations {
"invoice": string;
"quantity": string;
}

4
ts_web/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-document', name: '@design.estate/dees-document',
version: '1.0.103', version: '1.1.0',
description: 'A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.' description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
} }

9
ts_web/elements/contentinvoice.ts
View File

@ -12,14 +12,13 @@ import {
cssManager, cssManager,
unsafeCSS, unsafeCSS,
render, render,
domtools,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as plugins from '../plugins.js'; import * as plugins from '../plugins.js';
import * as shared from './shared/index.js'; import * as shared from './shared/index.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'dedocument-contentinvoice': DeContentInvoice; 'dedocument-contentinvoice': DeContentInvoice;
@ -277,8 +276,8 @@ export class DeContentInvoice extends DeesElement {
<div>We hereby invoice products and services provided to you by Lossless GmbH:</div> <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
<div class="grid topLine dataHeader"> <div class="grid topLine dataHeader">
<div class="lineItem">Item Pos.</div> <div class="lineItem">Item Pos.</div>
<div class="lineItem">Description</div> <div class="lineItem">${shared.translation.translate('DE', 'description', 'Description')}</div>
<div class="lineItem">Quantity</div> <div class="lineItem">${shared.translation.translate('DE', 'quantity', 'Quantity')}</div>
<div class="lineItem">Unit Type</div> <div class="lineItem">Unit Type</div>
<div class="lineItem">Unit Net Price</div> <div class="lineItem">Unit Net Price</div>
<div class="lineItem">Total Net Price</div> <div class="lineItem">Total Net Price</div>

24
ts_web/elements/document.ts
View File

@ -11,8 +11,15 @@ import {
domtools, domtools,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import * as interfaces from '../../ts/interfaces/index.js';
import * as plugins from '../plugins.js'; import * as plugins from '../plugins.js';
export const defaultDocumentSettings: interfaces.IDocumentSettings = {
enableTopDraftText: true,
enableDefaultHeader: true,
enableDefaultFooter: true,
};
import { DePage } from './page.js'; import { DePage } from './page.js';
import { DeContentInvoice } from './contentinvoice.js'; import { DeContentInvoice } from './contentinvoice.js';
@ -68,9 +75,17 @@ export class DeDocument extends DeesElement {
public letterData: plugins.tsclass.business.ILetter; public letterData: plugins.tsclass.business.ILetter;
@property({ @property({
type: String, type: Object,
reflect: true,
converter: (valueArg) => {
if (typeof valueArg === 'string') {
return plugins.smartjson.parseBase64(valueArg)
} else {
return valueArg;
}
},
}) })
public letterDataUrl: string; public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
constructor() { constructor() {
super(); super();
@ -112,11 +127,6 @@ export class DeDocument extends DeesElement {
this.registerGarbageFunction(() => { this.registerGarbageFunction(() => {
resizeObserver.disconnect(); resizeObserver.disconnect();
}) })
if (this.letterDataUrl) {
const response = await fetch(this.letterDataUrl);
this.letterData = await response.json();
}
} }
public latestRenderedLetterData: plugins.tsclass.business.ILetter = null; public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;

39
ts_web/elements/page.ts
View File

@ -8,8 +8,12 @@ import {
css, css,
cssManager, cssManager,
unsafeCSS, unsafeCSS,
domtools,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import * as interfaces from '../../ts/interfaces/index.js';
import { defaultDocumentSettings } from './document.js';
import * as shared from './shared/index.js'; import * as shared from './shared/index.js';
@ -23,10 +27,14 @@ declare global {
export class DePage extends DeesElement { export class DePage extends DeesElement {
public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `; public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
@property() @property({
type: Number,
})
viewWidth: number = null; viewWidth: number = null;
@property() @property({
type: Number,
})
viewHeight: number = null; viewHeight: number = null;
@property({ @property({
@ -55,6 +63,12 @@ export class DePage extends DeesElement {
}) })
printMode = false; printMode = false;
@property({
type: Object,
reflect: true,
})
public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
constructor() { constructor() {
super(); super();
domtools.DomTools.setupDomTools(); domtools.DomTools.setupDomTools();
@ -108,12 +122,16 @@ export class DePage extends DeesElement {
<div id="scaleWrapper"> <div id="scaleWrapper">
<dedocument-pagecontainer .printMode=${this.printMode}> <dedocument-pagecontainer .printMode=${this.printMode}>
${this.letterData ${this.letterData
? html`
${this.documentSettings.enableDefaultHeader
? html` ? html`
<dedocument-pageheader <dedocument-pageheader
.letterData=${this.letterData} .letterData=${this.letterData}
.pageNumber="${this.pageNumber}" .pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}" .pageTotalNumber="${this.pageTotalNumber}"
></dedocument-pageheader> ></dedocument-pageheader>
`
: ``}
${this.pageNumber === 1 ${this.pageNumber === 1
? html` ? html`
<dedocument-letterheader <dedocument-letterheader
@ -129,26 +147,33 @@ export class DePage extends DeesElement {
.letterData=${this.letterData} .letterData=${this.letterData}
><slot></slot ><slot></slot
></dedocument-pagecontent> ></dedocument-pagecontent>
${this.documentSettings.enableDefaultFooter
? html`
<dedocument-pagefooter <dedocument-pagefooter
.letterData=${this.letterData} .letterData=${this.letterData}
.pageNumber="${this.pageNumber}" .pageNumber="${this.pageNumber}"
.pageTotalNumber="${this.pageTotalNumber}" .pageTotalNumber="${this.pageTotalNumber}"
></dedocument-pagefooter> ></dedocument-pagefooter>
`
: ``}
<div class="versionOverlay"> <div class="versionOverlay">
${this.letterData.versionInfo.type === 'draft' ${this.letterData.versionInfo.type === 'draft'
? html`
${this.documentSettings.enableTopDraftText
? html` ? html`
<div class="topInfo"> <div class="topInfo">
Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM THIS.<br /> Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
THIS.<br />
-> Revision/Document version: ${this.letterData.versionInfo.version} -> Revision/Document version: ${this.letterData.versionInfo.version}
</div> </div>
`
: ``}
<div class="bigDraftText">DRAFT</div> <div class="bigDraftText">DRAFT</div>
` `
: html``} : html``}
</div> </div>
` `
: html` : html` <slot></slot> `}
<slot></slot>
`}
</dedocument-pagecontainer> </dedocument-pagecontainer>
</div> </div>
`; `;

12
ts_web/elements/pageheader.ts
View File

@ -74,13 +74,17 @@ export class DePageHeader extends DeesElement {
color: #333; color: #333;
font-size: 10px; font-size: 10px;
} }
.topstripe img { .topstripe .logo {
filter: invert(1);
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
height: 25px; height: 25px;
left: auto; left: auto;
right: ${unsafeCSS(shared.rightMargin + 'px')}; right: ${unsafeCSS(shared.rightMargin + 'px')};
font-family: 'Courier New', Courier, monospace;
}
.topstripe .logo img {
position: relative;
height: 25px;
} }
`, `,
]; ];
@ -88,7 +92,9 @@ export class DePageHeader extends DeesElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div class="topstripe"> <div class="topstripe">
<img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" /> <div class="logo">
No logo set!
</div>
</div> </div>
<div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div> <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
`; `;

3
ts_web/elements/shared/index.ts
View File

@ -3,4 +3,7 @@ export const a4Width = 794;
export const rightMargin = 70; export const rightMargin = 70;
export const leftMargin = 90; export const leftMargin = 90;
import * as translation from './translation.js';
export { translation };
export * from './demoletter.js'; export * from './demoletter.js';

31
ts_web/elements/shared/translation.ts Normal file
View File

@ -0,0 +1,31 @@
import * as interfaces from '../../../ts/interfaces/index.js';
type TTranslationImplementation = {
[key in keyof interfaces.IDeDocumentTranslations]: string;
}
export const EN_translations: TTranslationImplementation = {
invoice: 'Invoice',
quantity: 'Quantity',
};
export const DE_translations: TTranslationImplementation = {
invoice: 'Rechnung',
quantity: 'Anzahl',
};
export const languageCodeMap = {
'DE': DE_translations,
'EN': EN_translations,
};
export type TLanguageCode = keyof typeof languageCodeMap;
export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
const translations = languageCodeMap[languageCode] || EN_translations;
if (translations && translations[key]) {
return translations[key];
} else {
return defaultValue;
}
};