feat: create docx export in daftar gangguan dialihkan ke posko lain

package-lock.json

@@ -25,6 +25,7 @@
         "axios": "^1.6.7",
         "devextreme": "23.2.4",
         "devextreme-vue": "23.2.4",
+        "docx": "^8.5.0",
         "dotenv": "^16.3.1",
         "encrypt-storage": "^2.12.22",
         "exceljs": "^4.4.0",
@@ -4032,6 +4033,46 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/docx": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/docx/-/docx-8.5.0.tgz",
+      "integrity": "sha512-4SbcbedPXTciySXiSnNNLuJXpvxFe5nqivbiEHXyL8P/w0wx2uW7YXNjnYgjW0e2e6vy+L/tMISU/oAiXCl57Q==",
+      "dependencies": {
+        "@types/node": "^20.3.1",
+        "jszip": "^3.10.1",
+        "nanoid": "^5.0.4",
+        "xml": "^1.0.1",
+        "xml-js": "^1.6.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/docx/node_modules/@types/node": {
+      "version": "20.11.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
+      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/docx/node_modules/nanoid": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+      "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -7414,6 +7455,11 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+    },
     "node_modules/saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -8098,8 +8144,7 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
-      "devOptional": true
     },
     "node_modules/universalify": {
       "version": "0.2.0",
@@ -9747,6 +9792,22 @@
         }
       }
     },
+    "node_modules/xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
+      "integrity": "sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw=="
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "axios": "^1.6.7",
     "devextreme": "23.2.4",
     "devextreme-vue": "23.2.4",
+    "docx": "^8.5.0",
     "dotenv": "^16.3.1",
     "encrypt-storage": "^2.12.22",
     "exceljs": "^4.4.0",

src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue

@@ -365,6 +365,20 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  TableBorders,
+  PageOrientation
+} from 'docx'
 
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
@@ -393,6 +407,65 @@ const setHeaderStyle = (
   }
 }
 
+const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
+    }
+
+    reportMeta.value = filters.value
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.daftar.dataDialihkanKePoskoLain,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+}
+const showData = () => (showDetail.value = true)
+
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
+
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  }
+})
+
 const onExporting = (e: any) => {
   const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
 
@@ -566,7 +639,7 @@ const onExporting = (e: any) => {
       .then(() => {
         console.log('pdf berhasil disimpan')
       })
-  } else {
+  } else if (e.format === 'xlsx') {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
 
@@ -633,65 +706,255 @@ const onExporting = (e: any) => {
     })
 
     e.cancel = true
-  }
+  } else {
-}
+    const generateRows = () => {
-
+      return data.value.map((item, i) => {
-const filterData = (params: any) => {
+        return new TableRow({
-  const { posko, uid, up3 } = params
+          children: [
-  const dateValue = params.periode.split(' s/d ')
+            { text: `${++i}`, field: 'no_laporan' },
-
+            { text: item.no_laporan, field: 'no_laporan' },
-  refetch({
+            { text: item.pembuat_laporan, field: 'pembuat_laporan' },
-    dateFrom: dateValue[0]
+            { text: item.waktu_lapor, field: 'waktu_lapor' },
-      ? dateValue[0].split('-').reverse().join('-')
+            { text: item.waktu_dialihkan, field: 'waktu_dialihkan' },
-      : new Date().toISOString().slice(0, 10),
+            { text: item.waktu_response, field: 'waktu_response' },
-    dateTo: dateValue[1]
+            { text: item.waktu_recovery, field: 'waktu_recovery' },
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-    }
-
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.dataDialihkanKePoskoLain,
             {
-    dateFrom: new Date().toISOString().slice(0, 10),
+              text: parseInt(item.durasi_response_time)
-    dateTo: new Date().toISOString().slice(0, 10),
+                ? formatWaktu(item.durasi_response_time)
-    posko: 0,
+                : '-',
-    idUid: 0,
+              field: 'durasi_response_time'
-    idUp3: 0
+            },
+            {
+              text: parseInt(item.durasi_recovery_time)
+                ? formatWaktu(item.durasi_recovery_time)
+                : '-',
+              field: 'durasi_recovery_time'
+            },
+            { text: item.nama_posko_lama, field: 'nama_posko_lama' },
+            { text: item.nama_posko_baru, field: 'nama_posko_baru' },
+            { text: item.status_akhir, field: 'status_akhir' },
+            { text: item.idpel_nometer, field: 'idpel_nometer' },
+            { text: item.nama_pelapor, field: 'nama_pelapor' },
+            { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+            { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+            { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+            { text: item.media, field: 'media' },
+            { text: item.posko, field: 'posko' }
+          ].map(
+            (cell) =>
+              new TableCell({
+                children: [
+                  new Paragraph({
+                    children: [
+                      new TextRun({
+                        text: cell.text,
+                        size: 4
+                      })
+                    ]
+                  })
+                ],
+                verticalAlign: VerticalAlign.CENTER
+              })
+          )
+        })
+      })
+    }
+
+    const doc = new Document({
+      sections: [
+        {
+          properties: {
+            page: {
+              size: {
+                orientation: PageOrientation.LANDSCAPE
+              }
+            }
+          },
+          children: [
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: 'PT. PLN(Persero)',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: `UNIT INDUK : ${
+                    reportMeta.value.uid
+                      ? reportMeta.value.uid.name.toUpperCase()
+                      : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                  }`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                    reportMeta.value.up3
+                      ? reportMeta.value.up3.name.toUpperCase()
+                      : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                  }`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: `POSKO : ${
+                    reportMeta.value.posko
+                      ? reportMeta.value.posko.name.toUpperCase()
+                      : 'Semua Posko'.toUpperCase()
+                  }`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.CENTER,
+              children: [
+                new TextRun({
+                  text: 'DAFTAR GANGGUAN DIALIHKAN KE POSKO LAIN',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.CENTER,
+              children: [
+                new TextRun({
+                  text: `PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Table({
+              width: {
+                size: 13950,
+                type: WidthType.DXA
+              },
+              rows: [
+                new TableRow({
+                  children: [
+                    { text: 'No', field: 'no' },
+                    { text: 'No Laporan', field: 'no_laporan' },
+                    { text: 'Pembuat Laporan', field: 'pembuat_laporan' },
+                    { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                    { text: 'Tgl Dialihkan', field: 'waktu_dialihkan' },
+                    { text: 'Tgl Response', field: 'waktu_response' },
+                    { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                    { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                    { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                    { text: 'Posko Awal', field: 'nama_posko_lama' },
+                    { text: 'Posko Tujuan', field: 'nama_posko_baru' },
+                    { text: 'Status', field: 'status_akhir' },
+                    { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                    { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                    { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                    { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                    { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                    { text: 'Sumber Lapor', field: 'media' },
+                    { text: 'Posko', field: 'posko' }
+                  ].map(
+                    (header) =>
+                      new TableCell({
+                        children: [
+                          new Paragraph({
+                            alignment: AlignmentType.CENTER,
+                            children: [
+                              new TextRun({
+                                text: header.text,
+                                bold: true,
+                                size: 4,
+                                allCaps: true
+                              })
+                            ]
+                          })
+                        ],
+                        verticalAlign: VerticalAlign.CENTER
+                      })
+                  )
+                }),
+                ...generateRows()
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.RIGHT,
+              children: [
+                new TextRun({
+                  text: `${dayTo}, ${dateToFormat}`,
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: '',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            }),
+            new Paragraph({
+              alignment: AlignmentType.RIGHT,
+              children: [
+                new TextRun({
+                  text: '(.........................................)',
+                  bold: true,
+                  size: 4
+                })
+              ]
+            })
+          ]
+        }
+      ]
+    })
+
+    Packer.toBlob(doc).then((blob) => {
+      console.log(blob)
+      saveAs(blob, 'Laporan Daftar Gangguan Dialihkan Ke Posko Lain.docx')
+      console.log('Document created successfully')
+    })
   }
-)
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataDetail.value = data
 }
-const showData = () => (showDetail.value = true)
-
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  posko: { id: 0, name: 'Semua Posko' },
-  periode: ''
-})
-
-onMounted(() => {
-  if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
-  }
-})
 </script>