feat: create export pdf in rekapitulasi gangguan rating per posko

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -1,7 +1,14 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type1 @update:filters="(value) => (filters = value)" :showPosko="false" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -633,6 +640,7 @@ import InputText from '@/components/InputText.vue'
 import vue3starRatings from 'vue3-star-ratings'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -647,6 +655,11 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  periode: ''
+})
 
 const getDetail = () => {
   loadingSubData.value = true
@@ -707,15 +720,7 @@ const closeDialog = () => {
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
+    exportToPDF(reportMeta.value, data.value)
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Employees')
@@ -790,6 +795,8 @@ const filterData = (params: any) => {
         }
       })
     }
+
+    reportMeta.value = filters.value
   })
   onError((error) => {
     console.log(error)

src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts

@@ -0,0 +1,268 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+
+const reportName = 'Rekapitulasi Rating Per Posko'
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_up3 } = item
+
+    if (!groupedData[nama_up3]) {
+      groupedData[nama_up3] = []
+    }
+
+    groupedData[nama_up3].push(item)
+  })
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  for (const nama_up3 in data) {
+    formattedData.push([{ content: nama_up3, colSpan: 8, styles: { fontStyle: 'bold' } }])
+
+    for (let i = 0; i < data[nama_up3].length; i++) {
+      formattedData.push([
+        { content: i + 1, styles: { halign: 'right' } },
+        data[nama_up3][i].id_posko,
+        data[nama_up3][i].nama_posko,
+        formatNumber(data[nama_up3][i].total),
+        formatNumber(data[nama_up3][i].total_inproses),
+        formatPercentage(data[nama_up3][i].persen_inproses),
+        formatNumber(data[nama_up3][i].total_selesai),
+        formatPercentage(data[nama_up3][i].persen_selesai),
+        formatNumber(data[nama_up3][i].total_rating),
+        formatNumber(data[nama_up3][i].nilai_rating1),
+        formatNumber(data[nama_up3][i].nilai_rating2),
+        formatNumber(data[nama_up3][i].nilai_rating3),
+        formatNumber(data[nama_up3][i].nilai_rating4),
+        formatNumber(data[nama_up3][i].nilai_rating5),
+        formatNumber(data[nama_up3][i].index_rating),
+        formatNumber(data[nama_up3][i].total_nonrating),
+        formatPercentage(data[nama_up3][i].persen_nonrating)
+      ])
+    }
+  }
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+  const fontSize = 5
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 3
+        },
+        {
+          content: 'Kode Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 3
+        },
+        {
+          content: 'Laporan',
+          colSpan: 5
+        },
+        {
+          content: 'Rating',
+          colSpan: 7
+        },
+        {
+          content: 'Non Rating',
+          colSpan: 2
+        }
+      ],
+      [
+        {
+          content: 'Total',
+          rowSpan: 2
+        },
+        {
+          content: 'Belum Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Sudah Selesai',
+          colSpan: 2
+        },
+        {
+          content: 'Bintang',
+          colSpan: 7
+        },
+        {
+          content: 'Jml',
+          rowSpan: 2
+        },
+        {
+          content: '%',
+          rowSpan: 2
+        }
+      ],
+      ['Jml', '%', 'Jml', '%', 'Jml', '1', '2', '3', '4', '5', 'Index']
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+export { exportToPDF }