diff --git a/package-lock.json b/package-lock.json index f91d63d..12de4bc 100755 --- a/package-lock.json +++ b/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==", - "devOptional": true + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" }, "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", diff --git a/package.json b/package.json index 1904f9d..06ad148 100755 --- a/package.json +++ b/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", diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue index 6e744e7..9c39109 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue +++ b/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 - } -} - -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 + } else { + const generateRows = () => { + return data.value.map((item, i) => { + return new TableRow({ + children: [ + { text: `${++i}`, field: 'no_laporan' }, + { text: item.no_laporan, field: 'no_laporan' }, + { text: item.pembuat_laporan, field: 'pembuat_laporan' }, + { text: item.waktu_lapor, field: 'waktu_lapor' }, + { text: item.waktu_dialihkan, field: 'waktu_dialihkan' }, + { text: item.waktu_response, field: 'waktu_response' }, + { text: item.waktu_recovery, field: 'waktu_recovery' }, + { + text: parseInt(item.durasi_response_time) + ? formatWaktu(item.durasi_response_time) + : '-', + field: 'durasi_response_time' + }, + { + 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 + }) + ) + }) + }) } - 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 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 + }) + ] + }) + ] + } + ] + }) -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 + Packer.toBlob(doc).then((blob) => { + console.log(blob) + saveAs(blob, 'Laporan Daftar Gangguan Dialihkan Ke Posko Lain.docx') + console.log('Document created successfully') + }) } -}) +}