lib-invoice-print/src/invoice.ts

import {
  CanvasElement,
  Content,
  TDocumentDefinitions
} from 'pdfmake/interfaces'
import { useEffect, useState } from 'react'
import pdfMake from 'pdfmake/build/pdfmake'

export interface DataToPrint {
  configs: {
    title?: string
    logoUrl?: string
    headline?: string
    columnsHeader: Array<Content>
  }
  data: {
    header: any
    items: any[]
    summary: any
    footer?: Array<Content>
  }
}

const isInvoiceMasterRow = (i: number) => {
  return i % 2 === 0 && i === 0
}
pdfMake.fonts = {
  Khmer: {
    normal: 'kh-battambang.ttf',
    bold: 'kh-battambang.ttf',
    italics: 'kh-battambang.ttf',
    bolditalics: 'kh-battambang.ttf'
  },
  Roboto: {
    normal:
      'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
    bold:
      '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 = {
  invoiceMasterReport: {
    paddingTop: function (i: number) {
      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
  },

  invoiceNestedDetailReport: {
    paddingLeft: function () {
      return 1
    },
    paddingRight: function () {
      return 0
    },
    paddingBottom: function () {
      return 5
    },
    defaultBorder: false
  },
  invoiceLayout: {
    paddingLeft: function () {
      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: {
    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) => {
  return {
    type: 'line',
    x1: 0,
    y1: 0,
    x2: length,
    y2: 0,
    lineWidth: 0.2
  }
}

export const useDoc = (mockData: DataToPrint) => {
  const [columns, setColumns] = useState<Array<any>>([])
  const [body, setBody] = useState<Array<any>>([])
  const [title, setTitle] = useState<Array<any>>([])
  const [summary, setSummary] = useState<Array<any>>([])

  useEffect(() => {
    setColumns(mockData.configs.columnsHeader)
  }, [])

  useEffect(() => {
    let temp: Array<any> = []
    // eslint-disable-next-line array-callback-return
    mockData.data.items.map((it: any) => {
      let current: Array<any> = []
      // eslint-disable-next-line array-callback-return
      Object.values(it).map(function (key, index) {
        const data = {
          text: key,
          fontSize: 9,
          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'
      }
    }
  }

  return pdfMake.createPdf(data)
}