chanthasuon/ lib-invoice-print
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

fixed version and build the import

This commit is contained in:
Sambo Chea 2020-10-16 11:30:59 +07:00
parent 1b66b6eb2a
commit 65489ccf4e
3 changed files with 282 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -1,11 +1,12 @@
{ {
"name": "@cubetiq/invoice-print", "name": "@cubetiq/invoice-print",
"version": "1.0.1", "version": "1.0.2",
"description": "Invoice Print80m", "description": "Invoice Print80m",
"author": "Chantha Suon", "author": "Chantha Suon",
"license": "MIT", "license": "MIT",
"repository": "https://git.cubetiqs.com/chanthasuon/lib-invoice-print.git", "repository": "https://git.cubetiqs.com/chanthasuon/lib-invoice-print.git",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts",
"module": "dist/index.modern.js", "module": "dist/index.modern.js",
"source": "src/index.tsx", "source": "src/index.tsx",
"private": false, "private": false,

1
src/index.tsx
View File

@ -11,3 +11,4 @@ export const ExampleComponent = ({ text }: Props) => {
export * from 'pdfmake/interfaces' export * from 'pdfmake/interfaces'
export * from 'pdfmake/build/pdfmake' export * from 'pdfmake/build/pdfmake'
export * from './invoice'

573
src/invoice.ts
View File

@ -1,319 +1,304 @@
import {CanvasElement, Content, TDocumentDefinitions} from "pdfmake/interfaces"; import {
import {useEffect, useState} from "react"; CanvasElement,
import pdfMake from "pdfmake/build/pdfmake"; Content,
TDocumentDefinitions
} from 'pdfmake/interfaces'
import { useEffect, useState } from 'react'
import pdfMake from 'pdfmake/build/pdfmake'
export interface DataToPrint { export interface DataToPrint {
configs: { configs: {
title?: string, title?: string
logoUrl?: string, logoUrl?: string
headline?: string, headline?: string
columnsHeader: Array<Content>, columnsHeader: Array<Content>
} }
data: { data: {
header: any, header: any
items: any[], items: any[]
summary: any, summary: any
footer?: Array<Content> footer?: Array<Content>
} }
} }
const isInvoiceMasterRow = (i: number) => { const isInvoiceMasterRow = (i: number) => {
return i % 2 === 0 && i === 0 return i % 2 === 0 && i === 0
} }
pdfMake.fonts = { pdfMake.fonts = {
"Khmer": { Khmer: {
normal: 'kh-battambang.ttf', normal: 'kh-battambang.ttf',
bold: 'kh-battambang.ttf', bold: 'kh-battambang.ttf',
italics: 'kh-battambang.ttf', italics: 'kh-battambang.ttf',
bolditalics: 'kh-battambang.ttf', bolditalics: 'kh-battambang.ttf'
}, },
Roboto: { Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf', normal:
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf', bold:
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf' 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
}, italics:
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
bolditalics:
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
}
} }
pdfMake.tableLayouts = { pdfMake.tableLayouts = {
invoiceMasterReport: { invoiceMasterReport: {
paddingTop: function (i: number) { paddingTop: function (i: number) {
return isInvoiceMasterRow(i) ? 1 : 0 return isInvoiceMasterRow(i) ? 1 : 0
},
paddingBottom: function (i: number) {
return isInvoiceMasterRow(i) ? 5 : 0
},
paddingLeft: function () {
return 2
},
paddingRight: function () {
return 2
},
fillColor: function (i: number) {
return i === 1 ? 'black' : '#e4e4e4'
},
vLineWidth: function () {
return 1
},
defaultBorder: false
}, },
paddingBottom: function (i: number) {
return isInvoiceMasterRow(i) ? 5 : 0
},
paddingLeft: function () {
return 2
},
paddingRight: function () {
return 2
},
fillColor: function (i: number) {
return i === 1 ? 'black' : '#e4e4e4'
},
vLineWidth: function () {
return 1
},
defaultBorder: false
},
invoiceNestedDetailReport: {
invoiceNestedDetailReport: { paddingLeft: function () {
paddingLeft: function () { return 1
return 1
},
paddingRight: function () {
return 0
},
paddingBottom: function () {
return 5
},
defaultBorder: false
}, },
invoiceLayout: { paddingRight: function () {
paddingLeft: function () { return 0
return 0
},
paddingRight: function () {
return 0
},
paddingTop: function () {
return 0.5
},
paddingBottom: function () {
return 0.5
},
hLineWidth: function (i: number, node: any) {
return i === 1 || i === node.table.body.length ? 0.2 : 0
},
vLineWidth: function () {
return 0
},
}, },
summaryInvoice: { paddingBottom: function () {
paddingLeft: function () { return 5
return 0 },
}, defaultBorder: false
paddingRight: function () { },
return 0 invoiceLayout: {
}, paddingLeft: function () {
paddingTop: function () { return 0
return 5 },
}, paddingRight: function () {
paddingBottom: function () { return 0
return 5 },
}, paddingTop: function () {
hLineColor: function (i) { return 0.5
return i === 1 ? 'black' : '#e4e4e4'; },
}, paddingBottom: function () {
vLineWidth: function () { return 0.5
return 1 },
}, hLineWidth: function (i: number, node: any) {
defaultBorder: false return i === 1 || i === node.table.body.length ? 0.2 : 0
},
vLineWidth: function () {
return 0
} }
},
summaryInvoice: {
paddingLeft: function () {
return 0
},
paddingRight: function () {
return 0
},
paddingTop: function () {
return 5
},
paddingBottom: function () {
return 5
},
hLineColor: function (i) {
return i === 1 ? 'black' : '#e4e4e4'
},
vLineWidth: function () {
return 1
},
defaultBorder: false
}
} }
const drawLine: (length?: number) => CanvasElement = (length = 292.26) => { const drawLine: (length?: number) => CanvasElement = (length = 292.26) => {
return { return {
type: 'line', type: 'line',
x1: 0, x1: 0,
y1: 0, y1: 0,
x2: length, x2: length,
y2: 0, y2: 0,
lineWidth: 0.2, lineWidth: 0.2
} }
} }
export const useDoc = (mockData: DataToPrint) => { export const useDoc = (mockData: DataToPrint) => {
const [columns, setColumns] = useState<Array<any>>([]) const [columns, setColumns] = useState<Array<any>>([])
const [body, setBody] = useState<Array<any>>([]) const [body, setBody] = useState<Array<any>>([])
const [title, setTitle] = useState<Array<any>>([]) const [title, setTitle] = useState<Array<any>>([])
const [summary, setSummary] = useState<Array<any>>([]) const [summary, setSummary] = useState<Array<any>>([])
useEffect(() => { useEffect(() => {
setColumns(mockData.configs.columnsHeader) setColumns(mockData.configs.columnsHeader)
}, []) }, [])
useEffect(() => { useEffect(() => {
let temp: Array<any> = [] let temp: Array<any> = []
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
mockData.data.items.map((it: any) => { mockData.data.items.map((it: any) => {
let current: Array<any> = [] let current: Array<any> = []
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
Object.values(it).map(function (key, index) { Object.values(it).map(function (key, index) {
const data = { const data = {
text: key, text: key,
fontSize: 9, fontSize: 9,
alignment: columns[index]?.alignment alignment: columns[index]?.alignment
}
current.push(data)
})
temp.push(current)
})
setBody([...temp])
}, [columns])
useEffect(() => {
let temp: Array<any> = []
// eslint-disable-next-line array-callback-return
Object.keys(mockData.data.header).map(function (key) {
const keyLabel = {
text: key + " :",
fontSize: 9,
alignment: "left"
}
const value = {
// @ts-ignore
text: mockData.data?.header[key],
fontSize: 9,
alignment: "right"
}
temp.push([keyLabel, value])
})
setTitle([...temp])
}, [])
useEffect(() => {
const data = mockData.data.items.map((it: any) => {
return {
columns: [
Object.values(it).map(function (value, index) {
return {
text: value,
fontSize: 9,
width: "*",
alignment: columns[index]?.alignment,
}
})
]
}
})
setBody([...data])
}, [])
useEffect(() => {
let temp: Array<any> = []
// eslint-disable-next-line array-callback-return
Object.keys(mockData.data.summary).map(function (key) {
const keyLabel = {
text: key + " :",
fontSize: 9,
alignment: "right"
}
const value = {
// @ts-ignore
text: mockData.data?.summary[key],
fontSize: 9,
alignment: "center"
}
temp.push([keyLabel, value])
})
setSummary([...temp])
}, [])
const data: TDocumentDefinitions | any = {
'content': [
mockData.configs.logoUrl &&
{
alignment: 'center',
image: mockData.configs.logoUrl,
width: 100,
height: 75,
style: 'header',
fontSize: 23,
bold: true,
margin: [0, 10],
},
mockData.configs.title &&
{
alignment: 'center',
text: mockData.configs.title,
style: 'header',
fontSize: 8,
bold: true,
margin: [0, 10],
},
mockData.configs.headline &&
{
alignment: 'center',
text: mockData.configs.headline,
fontSize: 18,
bold: true,
},
{
layout: "noBorders",
fontSize: 9,
table: {
widths: "*",
body: [
...title
]
}
},
{
layout: "invoiceMasterReport",
table: {
widths: '*',
body: [
mockData.configs.columnsHeader
]
}
},
{
layout: "invoiceNestedDetailReport",
table: {
widths: '*',
body: [
...body,
]
}
},
{
columns: [
{
canvas: [drawLine()]
}
]
},
{
layout: "summaryInvoice",
table: {
widths: ['*', '*'],
body: [
...summary,
]
}
},
{
columns: [
{
canvas: [drawLine()]
}
]
},
mockData.data.footer?.map(it => {
return it
})
],
pageSize: {width: 302.26, height: "auto"},
pageOrientation: "portrait",
pageMargins: [5, 5, 5, 5],
styles: {
header: {
color: "#2ac4e6"
}
} }
current.push(data)
})
temp.push(current)
})
setBody([...temp])
}, [columns])
useEffect(() => {
let temp: Array<any> = []
// eslint-disable-next-line array-callback-return
Object.keys(mockData.data.header).map(function (key) {
const keyLabel = {
text: key + ' :',
fontSize: 9,
alignment: 'left'
}
const value = {
// @ts-ignore
text: mockData.data?.header[key],
fontSize: 9,
alignment: 'right'
}
temp.push([keyLabel, value])
})
setTitle([...temp])
}, [])
useEffect(() => {
const data = mockData.data.items.map((it: any) => {
return {
columns: [
Object.values(it).map(function (value, index) {
return {
text: value,
fontSize: 9,
width: '*',
alignment: columns[index]?.alignment
}
})
]
}
})
setBody([...data])
}, [])
useEffect(() => {
let temp: Array<any> = []
// eslint-disable-next-line array-callback-return
Object.keys(mockData.data.summary).map(function (key) {
const keyLabel = {
text: key + ' :',
fontSize: 9,
alignment: 'right'
}
const value = {
// @ts-ignore
text: mockData.data?.summary[key],
fontSize: 9,
alignment: 'center'
}
temp.push([keyLabel, value])
})
setSummary([...temp])
}, [])
const data: TDocumentDefinitions | any = {
content: [
mockData.configs.logoUrl && {
alignment: 'center',
image: mockData.configs.logoUrl,
width: 100,
height: 75,
style: 'header',
fontSize: 23,
bold: true,
margin: [0, 10]
},
mockData.configs.title && {
alignment: 'center',
text: mockData.configs.title,
style: 'header',
fontSize: 8,
bold: true,
margin: [0, 10]
},
mockData.configs.headline && {
alignment: 'center',
text: mockData.configs.headline,
fontSize: 18,
bold: true
},
{
layout: 'noBorders',
fontSize: 9,
table: {
widths: '*',
body: [...title]
}
},
{
layout: 'invoiceMasterReport',
table: {
widths: '*',
body: [mockData.configs.columnsHeader]
}
},
{
layout: 'invoiceNestedDetailReport',
table: {
widths: '*',
body: [...body]
}
},
{
columns: [
{
canvas: [drawLine()]
}
]
},
{
layout: 'summaryInvoice',
table: {
widths: ['*', '*'],
body: [...summary]
}
},
{
columns: [
{
canvas: [drawLine()]
}
]
},
mockData.data.footer?.map((it) => {
return it
})
],
pageSize: { width: 302.26, height: 'auto' },
pageOrientation: 'portrait',
pageMargins: [5, 5, 5, 5],
styles: {
header: {
color: '#2ac4e6'
}
} }
}
return pdfMake.createPdf(data) return pdfMake.createPdf(data)
} }