feat: create export detail in anomali gangguan petugas

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue

@@ -950,7 +950,10 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import {
   exportToPDF,
   exportToXLSX,
-  exportToDOCX
+  exportToDOCX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportDetailToDOCX
 } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1115,7 +1118,15 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const onExportingDetail = (e: any) => {}
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
+    exportDetailToDOCX(reportMeta.value, dataSub.value)
+  }
+}
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]

src/report/Anomali/Gangguan/Anomali_LAPPGP_LPP.ts

@@ -3,12 +3,14 @@ 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'
-import { exportToWord } from './doc/Anomali_LAPPGP_LPP'
+import { exportToWord, exportDetailToWord } from './doc/Anomali_LAPPGP_LPP'
 
 const reportName = 'Anomali Penanganan Pengaduan Gangguan Petugas'
 const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
@@ -242,6 +244,210 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
+const createDetailTableField = (reportMeta: any, rawData: any) => {
+  const field = ['No', 'UIW/D', 'UP3', 'Rayon', 'Nama Petugas']
+
+  if (reportMeta.jenisLaporan.name === 'Laporan Berulang Unit') {
+    field.push(
+      ...[
+        'No Laporan',
+        'No Laporan Lapor Ulang',
+        'No Laporan Referensi',
+        'Status Induk',
+        'Referensi Marking Induk'
+      ]
+    )
+  }
+
+  if (reportMeta.jenisLaporan.name === 'Laporan Rating Negatif') {
+    field.push(...['Rating', 'Feedback', 'Ulasan'])
+  }
+
+  field.push(
+    ...[
+      'Tgl/Jam Lapor',
+      'Tgl/Jam Datang',
+      'Tgl/Jam Nyala',
+      'Durasi Response Time',
+      'Durasi Recovery Time',
+      'Durasi Penugasan Regu',
+      'Durasi Perjalanan Regu',
+      'Jarak Closing',
+      'Dispacth Oleh',
+      'IDPEL/NO METER',
+      'Nama Pelapor',
+      'Alamat Pelapor',
+      'No Telp Pelapor',
+      'Keterangan Pelapor',
+      'Sumber Lapor',
+      'Diselesaikan Oleh',
+      'Status',
+      'Referensi Marking',
+      'Kode Gangguan',
+      'Jenis Gangguan',
+      'Penyebab',
+      'Tindakan'
+    ]
+  )
+
+  const rows = rawData.map((item: any, i: any) => {
+    const data = [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.nama_uid,
+      item.nama_up3,
+      item.nama_ulp,
+      item.nama_petugas
+    ]
+
+    if (reportMeta.jenisLaporan.name === 'Laporan Berulang Unit') {
+      data.push(
+        ...[
+          item.no_laporan,
+          item.no_laporan_laporulang,
+          item.no_laporan,
+          item.status_induk,
+          item.referensi_marking_induk
+        ]
+      )
+    }
+
+    if (reportMeta.jenisLaporan.name === 'Laporan Rating Negatif') {
+      data.push(...[item.rating, item.feedback, item.ulasan])
+    }
+
+    data.push(
+      ...[
+        item.waktu_lapor,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+        item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+        item.durasi_dispatch_time ? formatWaktu(item.durasi_dispatch_time) : '-',
+        item.durasi_perjalanan ? formatWaktu(item.durasi_perjalanan) : '-',
+        item.distance,
+        item.dispatch_by,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.diselesaikan_oleh,
+        item.status_akhir,
+        item.marking,
+        item.kode_gangguan,
+        item.jenis_gangguan,
+        item.penyebab,
+        item.tindakan
+      ]
+    )
+
+    return data
+  })
+
+  return { field, rows }
+}
+
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+  const date = new Date().getDate()
+  const month = new Date().toLocaleString('id-ID', { month: 'long' })
+  const year = new Date().getFullYear()
+  const meta = formatMetaData(reportMeta)
+  const { field, rows } = createDetailTableField(reportMeta, rawData)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [field],
+    body: rows,
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      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: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${day}, ${date}-${month}-${year}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
 const exportToXLSX = (reportMeta: any, e: any) => {
   const meta = formatMetaData(reportMeta)
   const workbook = new Workbook()
@@ -314,9 +520,60 @@ const exportToXLSX = (reportMeta: any, e: any) => {
   e.cancel = true
 }
 
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:AC1')
+  worksheet.mergeCells('A3:AC3')
+  worksheet.mergeCells('A4:AC4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
 const exportToDOCX = (reportMeta: any, rawData: any) => {
   const meta = formatMetaData(reportMeta)
   exportToWord(reportMeta, meta, formatData(rawData), reportName)
 }
 
-export { exportToPDF, exportToXLSX, exportToDOCX }
+const exportDetailToDOCX = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  exportDetailToWord(meta, createDetailTableField(reportMeta, rawData), reportName)
+}
+
+export {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX,
+  exportDetailToPDF,
+  exportDetailToXLSX,
+  exportDetailToDOCX
+}

src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPP.ts

@@ -35,7 +35,7 @@ export const exportToWord = (
     tbody += column
   }
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>
@@ -178,3 +178,100 @@ export const exportToWord = (
   downloadLink.click()
   document.body.removeChild(downloadLink)
 }
+
+export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName: String) => {
+  const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
+  const date = new Date().getDate()
+  const month = new Date().toLocaleString('id-ID', { month: 'long' })
+  const year = new Date().getFullYear()
+  const filename = 'Laporan Detail ' + reportName + '.doc'
+
+  const preHtml = `
+    <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
+    <head>
+      <meta charset='utf-8'>
+      <title>Daftar Detail ${reportName}</title>
+      <style type="text/css" media="print">
+        @page Section1 {
+          size:841.95pt 21.0cm;
+          mso-page-orientation:landscape;
+          margin:1.0cm 1.0cm 1.0cm 1.0cm;
+          mso-header-margin:35.4pt;
+          mso-footer-margin:35.4pt;
+          mso-paper-source:0;
+        }
+    
+        div.Section1 {
+          page:Section1;
+        }
+
+        table.meta tr td {
+          text-align: left;
+        }
+
+        table.main {
+          border-collapse: collapse;
+          width: 100%;
+          text-transform: uppercase;
+          font-size: 5px;
+        }
+
+        table.main thead tr {
+          background-color: #c0c0c0;
+        }
+      </style>
+    </head>
+    <body>
+  `
+
+  const body = `
+    <div class=Section1>
+      <header>
+        <h6>PT. PLN(Persero)</h6>
+        <br>
+        <table width="100%">
+          <tr>
+            <th><h6>${'DAFTAR DETAIL ' + reportName.toUpperCase()}</h6></th>
+          </tr>
+          <tr>
+            <th><h6>${`PERIODE TANGGAL : ${formattedMeta.dateFromFormat} SD TGL ${formattedMeta.dateToFormat}`}</h6></th>
+          </tr>
+        </table>
+      </header>
+
+      <br>
+
+      <table border="1" class="main">
+        <thead>
+          <tr>
+            ${rawData.field.map((item: any) => `<th>${item}</th>`).join('')}
+          </tr>
+        </thead>
+        <tbody>
+          ${rawData.rows
+            .map((row: any) => {
+              return `<tr>${row.map((item: any) => `<td>${item.content || item}</td>`).join('')}</tr>`
+            })
+            .join('')}
+        </tbody>
+      </table>
+      <br>
+      <footer>
+        <p style="text-align: right; font-size: 10px;">${day}, ${date}-${month}-${year}</p>
+        <br>
+        <p style="text-align: right; font-size: 10px;">(.........................................)</p>
+      </footer>
+    </div>
+  `
+
+  const postHtml = '</body></html>'
+  const html = preHtml + body + postHtml
+  const url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html)
+  const downloadLink = document.createElement('a')
+
+  document.body.appendChild(downloadLink)
+  downloadLink.href = url
+  downloadLink.download = filename
+  downloadLink.click()
+  document.body.removeChild(downloadLink)
+}

src/report/Anomali/Gangguan/doc/Anomali_LAPPGP_LPT.ts

@@ -27,7 +27,7 @@ export const exportToWord = (
       }
 
       i === 0
-        ? (column += `<th ${styleTotal} ${colSpan} align="left">${content.content || content}</th>`)
+        ? (column += `<td ${styleTotal} ${colSpan ? `${colSpan} style="font-weight: bold;` : ''} align="left">${content.content || content}</td>`)
         : (column += `<td ${styleTotal}>${content}</td>`)
     }
 
@@ -35,7 +35,7 @@ export const exportToWord = (
     tbody += column
   }
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>

src/report/Anomali/Gangguan/doc/Anomali_LAPPGU_LPT.ts

@@ -37,7 +37,7 @@ export const exportToWord = (
     tbody += column
   }
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>
@@ -209,7 +209,7 @@ export const exportDetailToWord = (formattedMeta: any, rawData: any, reportName:
   const year = new Date().getFullYear()
   const filename = 'Laporan Detail ' + reportName + '.doc'
 
-  let preHtml = `
+  const preHtml = `
     <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
     <head>
       <meta charset='utf-8'>