defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement server side in daftar keluhan dialihkan ke unit lain

Browse Source
This commit is contained in:
kur0nek-o
2024-05-05 11:53:21 +07:00
parent 4e7dc2adae
commit b94201911f
3 changed files with 262 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
View File

@ -1,15 +1,16 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
<Type3 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="data">
<DxDataGrid
ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
v-if="loading == false"
:remote-operations="true"
:show-column-lines="true"
:show-row-lines="false"
:show-borders="true"
@ -22,6 +23,7 @@
column-resizing-mode="widget"
:word-wrap-enabled="false"
>
<DxLoadPanel :enabled="true" />
<DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" />
<DxPager
@ -41,13 +43,13 @@
<DxColumnFixing :enabled="true" />
<DxColumn
css-class="custom-table-column !align-top"
:allow-sorting="false"
css-class="custom-table-column !text-right"
:width="50"
alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number"
data-field="no"
caption="No"
cell-template="formatNumber"
/>
<DxColumn
:width="170"
@ -317,7 +319,6 @@
</div>
</div>
</DetailDialog>
<BufferDialog v-if="loading" />
</template>
<script setup lang="ts">
@ -325,8 +326,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue'
import CustomStore from 'devextreme/data/custom_store'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue'
import { reactive, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -341,16 +344,20 @@ import {
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const data = ref<any[]>([])
import type { IRequestOptions } from '@/types/requestParams'
const requestOptions = reactive<IRequestOptions>({
skip: 0,
take: 20,
requireTotalCount: true,
sort: null,
filter: null
})
const dataSelected = ref<any>({})
const dialogDetail = ref(false)
const loading = ref(false)
const reportData: any = ref(null)
const dataGridRef = ref<DxDataGrid | null>(null)
const filters = ref()
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -359,42 +366,137 @@ const reportMeta = ref({
periode: ''
})
const showDetail = () => (dialogDetail.value = true)
const allowTableRequest = ref(false)
const data = new CustomStore({
load: async (loadOptions: any) => {
if (allowTableRequest.value) {
loadOptions.requireTotalCount = true
const query = {
skip: loadOptions.skip,
take: loadOptions.take,
sort: loadOptions.sort ? loadOptions.sort : null,
filter: loadOptions.filter ? mapSearchOptions(loadOptions.filter) : null,
requireTotalCount: loadOptions.requireTotalCount,
...createQuery(filters.value)
}
return await requestGraphQl(queries.keluhan.daftar.ssdaftarKeluhanDialihkanKeUnitLain, query)
.then((result) => {
const response = result.data.data.ssdaftarKeluhanDialihkanKeUnitLain
let no = query.skip ?? 0
for (const data of response.data) {
data.no = ++no
}
return {
data: response.data,
totalCount: response.totalCount
}
})
.catch((err) => {
throw Error(err)
})
.finally(() => {
reportMeta.value = filters.value
})
} else {
return new Promise(function (resolve) {
resolve({
data: [],
totalCount: 0
})
})
}
}
})
const closeDialog = () => (dialogDetail.value = false)
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, e)
} else {
exportToDOCX(reportMeta, data)
}
}
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
clearSelection()
showDetail()
}
const resetData = () => {
data.value = []
allowTableRequest.value = false
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
const filterData = async (params: any) => {
resetData()
const handleRequestChange = (e: any) => {
if (e.name === 'searchPanel') {
if (e.value !== '') {
requestOptions.filter = createSearchOptions(e.value)
} else {
requestOptions.filter = null
}
}
if (e.name === 'paging') {
requestOptions.take = e.value
}
if (e.name === 'columns') {
const columnIndex = parseInt(e.fullName.match(/\[(\d+)\]/)[1])
const columnDataField = e.component.columnOption(columnIndex).dataField
requestOptions.sort = [
{
selector: columnDataField,
desc: e.value === 'desc'
}
]
}
}
const createSearchOptions = (keyword: string) => {
const dataGrid = dataGridRef.value!.instance!
const columns = dataGrid.getVisibleColumns()
const searchOptions = []
for (const column of columns) {
if (column.dataField === 'no' || !column.dataField) {
continue
}
searchOptions.push({
field: column.dataField,
value: keyword
})
}
return searchOptions
}
const mapSearchOptions = (searchOptions: any) => {
const result = searchOptions.map((option: any) => {
if (Array.isArray(option) && option[0] !== 'no') {
return {
field: option[0],
value: option[2]
}
}
})
return result.filter((item: any) => item)
}
const filterData = () => {
allowTableRequest.value = true
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
const createQuery = (params: any) => {
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
const query = {
return {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -405,141 +507,46 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loading.value = true
await requestGraphQl(queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarKeluhanDialihkanKeUnitLain
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
no_laporan: 'K5523020400288',
pembuat_laporan: 'CC.55.ANISA',
waktu_lapor: '04/02/2023 11:18:57',
waktu_dialihkan: '04/02/2023 12:49:36',
waktu_response: '04/02/2023 12:50:21',
waktu_recovery: '04/02/2023 13:06:53',
durasi_response_time: 5484,
durasi_recovery_time: 992,
id_unit_lama: 227,
nama_unit_lama: 'ULP MEDAN SELATAN',
id_unit_baru: 5,
nama_unit_baru: 'ULP DENAI',
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'IBU ELVIRA ',
alamat_pelapor:
'JL PASAR 3 GG PISANG NO.22 RT0/RW0 KEL BANDAR KALIFA KEC PERCUT SEI TUAN KAB DELI SERDANG SUMATRA UTARA',
no_telp_pelapor: '087882621344',
keterangan_pelapor:
'1 APP PRABAYAR TERTERA GAGAL. TIDAK BISA MEMASUKKAN PULSA. (PTL TIDAK PADAM ). SETELAH UPDATE VKRN 43. NO TOKEN : 38665587538675472633. SISA PULSA : 43.20 KWH PELANGGAN MENGHUBUNGI KEMBALI. UPDATE CC.52.ETA',
media: 'Call PLN 123'
},
{
no_laporan: 'K5423021005925',
pembuat_laporan: 'CC.54.HENDI',
waktu_lapor: '10/02/2023 20:24:35',
waktu_dialihkan: '10/02/2023 21:02:39',
waktu_response: '10/02/2023 21:36:20',
waktu_recovery: '10/02/2023 21:42:37',
durasi_response_time: 4305,
durasi_recovery_time: 377,
id_unit_lama: 233,
nama_unit_lama: 'ULP PURWOKERTO KOTA',
id_unit_baru: 236,
nama_unit_baru: 'ULP BANJARNEGARA',
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'BP EKO BUDIYANTO',
alamat_pelapor:
'ALAMAT LOKASI : DN TANJUNG TIRTA RT 5 RW 1 KEL DS TANJUNG TIRTA KEC PUNGGELAN KAB BANJARNEGARA JATENG, ACUAN LOKASI : DEKAT KELURAHAN',
no_telp_pelapor: '08121512224',
keterangan_pelapor:
'MOHON UNTUK DITINDAKLANJUTI PROSES PS NON PELANGGAN ( L/ 5500 VA ) MELALUI PLN 123 DENGAN NO AGENDA 522040132302100027 DAN NO REG 5220429004905 DIPERUNTUKAN UNTUK PENERANGAN BTS SELAMA 14 HARI MULAI PADA TGL 11/2/23 - 24/2/23 PUKUL 12:00 WIB PEMOHON MENGAKU SEBAGAI PIHAK YANG BERTANGGUNG JAWAB',
media: 'Call PLN 123'
},
{
no_laporan: 'K5423021005015',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '10/02/2023 18:01:21',
waktu_dialihkan: '10/02/2023 18:04:07',
waktu_response: '10/02/2023 18:13:47',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 746,
durasi_recovery_time: 33136328,
id_unit_lama: 227,
nama_unit_lama: 'ULP MEDAN SELATAN',
id_unit_baru: 225,
nama_unit_baru: 'ULP MEDAN KOTA',
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'Ervina Vina4',
alamat_pelapor: 'JL PSR MERAH GG SETIA UJUNG KEL BINJAI No.0 RT.0 RW.0 M DENAI',
no_telp_pelapor: '6285276706679',
keterangan_pelapor:
'MUTASI_K (G9923021098935:app) - sudah beli token.tapi gagal terus tolong PLN tindak lanjutin lebih cepat.terima kasih',
media: 'PLN Mobile'
},
{
no_laporan: 'K5423021004276',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '10/02/2023 16:20:21',
waktu_dialihkan: '11/02/2023 06:28:29',
waktu_response: '11/02/2023 13:39:37',
waktu_recovery: '11/02/2023 16:28:03',
durasi_response_time: 76756,
durasi_recovery_time: 10106,
id_unit_lama: 62,
nama_unit_lama: 'ULP KAYU AGUNG',
id_unit_baru: 82,
nama_unit_baru: 'ULP TUGU MULYO',
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'call center bmg',
alamat_pelapor:
'Desa Gading Raja Desa SP2 Kecamatan Padamaran Kabupaten Ogan Komering Ilir, Sumatera Selatan',
no_telp_pelapor: '6281225199487',
keterangan_pelapor: 'Seal in MCB KWH NA or Seal Papan OKA NA',
media: 'PLN Mobile'
},
{
no_laporan: 'K5423021001969',
pembuat_laporan: 'PLNMOBILE',
waktu_lapor: '10/02/2023 10:49:02',
waktu_dialihkan: '10/02/2023 10:53:35',
waktu_response: '10/02/2023 11:21:09',
waktu_recovery: '10/02/2023 12:15:16',
durasi_response_time: 1927,
durasi_recovery_time: 3247,
id_unit_lama: 238,
nama_unit_lama: 'UP3 TANJUNG PRIOK',
id_unit_baru: 194,
nama_unit_baru: 'UP3 BANDENGAN',
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'muhammad alinafia',
alamat_pelapor: 'blok a no 55',
no_telp_pelapor: '6282123607797',
keterangan_pelapor: 'K5423021001925',
media: 'PLN Mobile'
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
]
clearSelection()
showDetail()
}
const showDetail = () => (dialogDetail.value = true)
const onExporting = async (e: any) => {
const dataGrid = dataGridRef.value!.instance!
if (e.format === 'pdf' || e.format === 'document') {
reportData.value = await data.load()
}
})
if (e.format === 'pdf' && reportData.value) {
dataGrid.beginCustomLoading('')
const pdf = await exportToPDF(reportMeta, reportData)
if (pdf) {
dataGrid.endCustomLoading()
}
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, e)
} else if (e.format === 'document' && reportData.value) {
dataGrid.beginCustomLoading('')
const doc = await exportToDOCX(reportMeta, reportData)
if (doc) {
dataGrid.endCustomLoading()
}
}
}
</script>

38
src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
View File

@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo }
}
const exportToPDF = (reportMeta: any, data: any) => {
const exportToPDF = async (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta)
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 resultData = data.value.data
const doc = new jsPDF({
orientation: 'landscape'
})
@ -133,7 +134,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
'Nama ULP'
]
],
body: data.value.map((item: any, i: any) => [
body: resultData.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } },
item.no_laporan,
item.pembuat_laporan,
@ -204,12 +205,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
margin: { left: 230 }
})
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
console.log('pdf berhasil disimpan')
await doc
.save(`Laporan ${reportName}.pdf`, { returnPromise: true })
.then(() => {
console.log('PDF Exported')
})
.catch((error) => {
console.error('Error while exporting PDF', error)
})
return true
}
const exportToXLSX = (reportMeta: any, e: any) => {
const exportToXLSX = async (reportMeta: any, e: any) => {
const meta = formatMetaData(reportMeta)
const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`)
@ -262,11 +270,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet.mergeCells('A6:S6')
worksheet.mergeCells('A7:S7')
exportToExcel({
await exportToExcel({
component: e.component,
worksheet,
autoFilterEnabled: true,
topLeftCell: { row: 9, column: 1 }
topLeftCell: { row: 10, column: 1 }
}).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -276,15 +284,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true
}
const exportToDOCX = (reportMeta: any, data: any) => {
const exportToDOCX = async (reportMeta: any, data: 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 resultData = data.value.data
const generateRows = () => {
return data.value.map((item: any, i: any) => {
return resultData.map((item: any, i: any) => {
return new TableRow({
children: [
{ text: `${++i}`, field: 'no' },
@ -527,10 +536,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
]
})
Packer.toBlob(doc).then((blob) => {
await Packer.toBlob(doc)
.then((blob) => {
saveAs(blob, `Laporan ${reportName}.docx`)
console.log('Document created successfully')
console.log('DOCX Exported')
})
.catch((error) => {
console.error('Error while exporting DOCX', error)
})
return true
}
export { exportToPDF, exportToXLSX, exportToDOCX }

50
src/utils/api/api.graphql.ts
View File

@ -281,6 +281,56 @@ export const queries = {
}
}
`,
ssdaftarKeluhanDialihkanKeUnitLain: gql`
query ssdaftarKeluhanDialihkanKeUnitLain(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$skip: Int
$take: Int
$requireTotalCount: Boolean
$sort: [SortInput]
$filter: [FilterInput]
) {
ssdaftarKeluhanDialihkanKeUnitLain(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
skip: $skip
take: $take
requireTotalCount: $requireTotalCount
sort: $sort
filter: $filter
) {
totalCount
data {
no_laporan
pembuat_laporan
waktu_lapor
waktu_dialihkan
waktu_response
waktu_recovery
durasi_response_time
durasi_recovery_time
id_unit_lama
nama_unit_lama
id_unit_baru
nama_unit_baru
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
}
}
}
`,
keluhanBerdasarkanMedia: gql`
query daftarKeluhanBerdasarkanMedia(
$dateFrom: Date!