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

feat: implements server side to all daftar keluhan

Browse Source
This commit is contained in:
kur0nek-o 2024-05-05 18:44:42 +07:00
parent fddc43581d
commit 63d0a676fa
9 changed files with 1090 additions and 708 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

367
src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
View File

@ -1,15 +1,16 @@
<template> <template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4"> <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
<Type10 @update:filters="(value) => (filters = value)" /> <Type10 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
v-if="loadingData == false" :remote-operations="true"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
:show-borders="true" :show-borders="true"
@ -22,6 +23,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="false" :word-wrap-enabled="false"
> >
<DxLoadPanel :enabled="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager <DxPager
@ -42,11 +44,12 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
css-class="custom-table-column" :allow-sorting="false"
css-class="custom-table-column !text-right"
:width="50" :width="50"
alignment="center" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number" data-type="number"
data-field="no"
caption="No" caption="No"
/> />
<DxColumn <DxColumn
@ -311,7 +314,6 @@
:row-alternation-enabled="true" :row-alternation-enabled="true"
:hover-state-enabled="true" :hover-state-enabled="true"
@selection-changed="onDataSubSelectionChanged" @selection-changed="onDataSubSelectionChanged"
@exporting="onExporting"
:allow-column-resizing="true" :allow-column-resizing="true"
column-resizing-mode="widget" column-resizing-mode="widget"
> >
@ -327,11 +329,6 @@
/> />
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" /> <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
:formats="['pdf', 'xlsx', 'document']"
:allow-export-selected-data="false"
/>
<DxColumn <DxColumn
css-class="custom-table-column" css-class="custom-table-column"
@ -415,7 +412,8 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loadingData || loadingSubData" />
<BufferDialog v-if="loadingSubData" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -423,35 +421,42 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type10 from '@/components/Form/FiltersType/Type10.vue' import Type10 from '@/components/Form/FiltersType/Type10.vue'
import CustomStore from 'devextreme/data/custom_store'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue' import { reactive, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
DxColumnFixing, DxColumnFixing,
DxExport, DxPager, DxExport,
DxPager,
DxPaging, DxPaging,
DxSearchPanel, DxSearchPanel,
DxSelection DxSelection,
DxLoadPanel
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { formatNumber, isNumber } from '@/utils/numbers' import { formatNumber, isNumber } from '@/utils/numbers'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } import type { IRequestOptions } from '@/types/requestParams'
const showIndicator = ref(true)
const shading = ref(true) const requestOptions = reactive<IRequestOptions>({
const showPane = ref(true) skip: 0,
const data = ref<any[]>([]) take: 20,
requireTotalCount: true,
sort: null,
filter: null
})
const dataSub = ref<any[]>([]) const dataSub = ref<any[]>([])
const dataSelected = ref<any>() const dataSelected = ref<any>()
const dataSubSelected = ref<any>() const dataSubSelected = ref<any>()
const reportData: any = ref(null)
const dialogDetail = ref(false) const dialogDetail = ref(false)
const closedialogDetail = () => (dialogDetail.value = false) const dataGridRef = ref<DxDataGrid | null>(null)
const loadingData = ref(false)
const loadingSubData = ref(false) const loadingSubData = ref(false)
const detailType = ref('form') // form, table const detailType = ref('form')
const filters = ref() const filters = ref()
const reportMeta = ref({ const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@ -462,6 +467,154 @@ const reportMeta = ref({
periode: '' periode: ''
}) })
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.ssdaftarKeluhanMelaporLebihDariSatuKali,
query
)
.then((result) => {
const response = result.data.data.ssdaftarKeluhanMelaporLebihDariSatuKali
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 resetData = () => {
allowTableRequest.value = false
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
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 minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
return {
minJmlLapor: minJmlLapor,
maxJmlLapor: maxJmlLapor,
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
}
const setDetailType = (columnCaption: string) => { const setDetailType = (columnCaption: string) => {
if (columnCaption == 'Jml Lapor') { if (columnCaption == 'Jml Lapor') {
detailType.value = 'table' detailType.value = 'table'
@ -471,7 +624,6 @@ const setDetailType = (columnCaption: string) => {
} }
const getDetail = async () => { const getDetail = async () => {
const dateValue = filters.value.periode.split(' s/d ')
const selected = dataSelected.value const selected = dataSelected.value
const query = { const query = {
@ -497,17 +649,17 @@ const getDetail = async () => {
}) })
} }
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => { const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance! const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection() dataGrid.clearSelection()
} }
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dataSubSelected.value = null dataSubSelected.value = null
if (detailType.value == 'table') { if (detailType.value == 'table') {
getDetail() getDetail()
}else{ } else {
dialogDetail.value = true dialogDetail.value = true
} }
} }
@ -525,152 +677,29 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
} }
const closeDialog = () => (dialogDetail.value = false) const closeDialog = () => (dialogDetail.value = false)
const onExporting = async (e: any) => {
const dataGrid = dataGridRef.value!.instance!
const onExporting = (e: any) => { if (e.format === 'pdf' || e.format === 'document') {
if (e.format === 'pdf') { reportData.value = await data.load()
exportToPDF(reportMeta, data) }
if (e.format === 'pdf' && reportData.value) {
dataGrid.beginCustomLoading('')
const pdf = await exportToPDF(reportMeta, reportData)
if (pdf) {
dataGrid.endCustomLoading()
}
} else if (e.format === 'xlsx') { } else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, e) exportToXLSX(reportMeta, e)
} else { } else if (e.format === 'document' && reportData.value) {
exportToDOCX(reportMeta, data) dataGrid.beginCustomLoading('')
const doc = await exportToDOCX(reportMeta, reportData)
if (doc) {
dataGrid.endCustomLoading()
}
} }
} }
const resetData = () => {
data.value = []
dataSub.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
const query = {
minJmlLapor: minJmlLapor,
maxJmlLapor: maxJmlLapor,
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loadingData.value = true
await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarKeluhanMelaporLebihDariSatuKali
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loadingData.value = false
})
}
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
no_laporan: 'K5423020100003',
waktu_lapor: '01/02/2023 00:00:54',
waktu_response: '01/01/1970 00:00:00',
waktu_recovery: '01/01/1970 00:00:00',
jumlah_lapor: 1,
durasi_response_time: -1675209654,
durasi_recovery_time: 1709189971,
status_akhir: 'Dalam Proses Manager Unit',
idpel_nometer: '',
nama_pelapor: 'ROLLY DWI NOVIANDARU',
alamat_pelapor: 'TA MBAK BERAS RT1 CER No.ME RT.00 RW.00',
no_telp_pelapor: '6285785412365',
keterangan_pelapor: 'meter macet',
media: 'PLN Mobile',
nama_ulp: 'ULP BENJENG'
},
{
no_laporan: 'K5423020100006',
waktu_lapor: '01/02/2023 00:01:23',
waktu_response: '01/02/2023 00:01:59',
waktu_recovery: '01/02/2023 00:02:52',
jumlah_lapor: 1,
durasi_response_time: 36,
durasi_recovery_time: 53,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Doni',
alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
no_telp_pelapor: '62895391110909',
keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
media: 'PLN Mobile',
nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
},
{
no_laporan: 'K5423020100022',
waktu_lapor: '01/02/2023 00:06:30',
waktu_response: '01/02/2023 04:26:02',
waktu_recovery: '01/01/1970 00:00:00',
jumlah_lapor: 1,
durasi_response_time: 15572,
durasi_recovery_time: 33964409,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'Yolanda Palar',
alamat_pelapor: 'JL TANGGUL SELATAN No.0',
no_telp_pelapor: '6285256607777',
keterangan_pelapor:
'MUTASI_K (G9923020187811:meteran terblokir) - Kilometer Terblokir, Listrik Padam, Vouchers tidak bisa diisi. informasi dari petugas Aplikasi harus ganti kilometer. saya Naikan Daya dari Agustus 2022 Terblokirnya Hari ini bagaimana ya?',
media: 'PLN Mobile',
nama_ulp: 'ULP PALU KOTA'
},
{
no_laporan: 'K5423020100028',
waktu_lapor: '01/02/2023 00:09:30',
waktu_response: '01/01/1970 00:00:00',
waktu_recovery: '01/01/1970 00:00:00',
jumlah_lapor: 1,
durasi_response_time: -1675210170,
durasi_recovery_time: 1709189971,
status_akhir: 'Dalam Proses Manager Unit',
idpel_nometer: '',
nama_pelapor: 'Tisatin Najemi',
alamat_pelapor: 'JL ABADI 2 No. RT.47 RW.7 GT MANGGIS',
no_telp_pelapor: '6281349719849',
keterangan_pelapor: 'saya baru aja isi token listrik lewat bangking cuman gak mau masuk ',
media: 'PLN Mobile',
nama_ulp: 'ULP BANJARBARU'
},
{
no_laporan: 'K5423020100029',
waktu_lapor: '01/02/2023 00:09:39',
waktu_response: '01/02/2023 05:48:52',
waktu_recovery: '01/01/1970 00:00:00',
jumlah_lapor: 1,
durasi_response_time: 20353,
durasi_recovery_time: 33959439,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'fris jhon ferni',
alamat_pelapor: 'the royal griya loka blok o no 05',
no_telp_pelapor: '62895396277717',
keterangan_pelapor: 'MUTASI_K (G9923020187825:tekmik) - token gagal masuk',
media: 'PLN Mobile',
nama_ulp: 'ULP TABANAN'
}
]
}
})
</script> </script>

354
src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4"> <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
<Type11 <Type11
@update:filters="(value) => (filters = value)" @update:filters="(value) => (filters = value)"
:sla-options="[ :sla-options="[
@ -22,10 +22,11 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
v-if="loading == false" :remote-operations="true"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
:show-borders="true" :show-borders="true"
@ -38,6 +39,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="false" :word-wrap-enabled="false"
> >
<DxLoadPanel :enabled="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager <DxPager
@ -57,11 +59,12 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
css-class="custom-table-column" :allow-sorting="false"
css-class="custom-table-column !text-right"
:width="50" :width="50"
alignment="center" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number" data-type="number"
data-field="no"
caption="No" caption="No"
/> />
<DxColumn <DxColumn
@ -283,7 +286,6 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -291,8 +293,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue' import Type11 from '@/components/Form/FiltersType/Type11.vue'
import CustomStore from 'devextreme/data/custom_store'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue' import { reactive, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -310,59 +314,163 @@ import {
exportToDOCX, exportToDOCX,
exportToXLSX exportToXLSX
} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime' } from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } import type { IRequestOptions } from '@/types/requestParams'
const showIndicator = ref(true)
const shading = ref(true) const requestOptions = reactive<IRequestOptions>({
const showPane = ref(true) skip: 0,
take: 20,
requireTotalCount: true,
sort: null,
filter: null
})
const dataSelected = ref<any>() const dataSelected = ref<any>()
const dialogDetail = ref(false) const dialogDetail = 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' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: '',
minTime: '',
maxTime: ''
})
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.ssdaftarKeluhanRecoveryTime, query)
.then((result) => {
const response = result.data.data.ssdaftarKeluhanRecoveryTime
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 = () => { const closeDialog = () => {
dialogDetail.value = false dialogDetail.value = false
} }
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection()
}
const showDetail = () => {
clearSelection()
dialogDetail.value = true
}
const onSelectionChanged = ({ selectedRowsData }: any) => {
if (selectedRowsData[0] != undefined) {
dataSelected.value = selectedRowsData[0]
}
showDetail()
}
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)
} else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, e)
} else {
exportToDOCX(reportMeta, data)
}
}
const data = ref<any[]>([])
const loading = ref(false)
const resetData = () => { const resetData = () => {
data.value = [] allowTableRequest.value = false
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
} }
const filterData = async (params: any) => { const handleRequestChange = (e: any) => {
resetData() 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 dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3, minTime, maxTime } = params const { ulp, uid, up3, minTime, maxTime } = params
const query = { return {
dateFrom: dateValue[0] dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-') ? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10), : new Date().toISOString().slice(0, 10),
@ -375,124 +483,48 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0, idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0 idUp3: up3 ? up3.id : 0
} }
loading.value = true
await requestGraphQl(queries.keluhan.daftar.keluhanRecoveryTime, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarKeluhanRecoveryTime
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
} }
const filters = ref() const clearSelection = () => {
const reportMeta = ref({ const dataGrid = dataGridRef.value!.instance!
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, dataGrid.clearSelection()
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, }
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: '',
minTime: '',
maxTime: ''
})
onMounted(() => { const showDetail = () => {
if (import.meta.env.DEV) { clearSelection()
data.value = [ dialogDetail.value = true
{ }
no_laporan: 'K5423020100006',
waktu_lapor: '01/02/2023 00:01:23', const onSelectionChanged = ({ selectedRowsData }: any) => {
waktu_response: '01/02/2023 00:01:59', if (selectedRowsData[0] != undefined) {
waktu_recovery: '01/02/2023 00:02:52', dataSelected.value = selectedRowsData[0]
durasi_response_time: 36,
durasi_recovery_time: 53,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Doni',
alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
no_telp_pelapor: '62895391110909',
keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
media: 'PLN Mobile',
nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
},
{
no_laporan: 'K5423020100030',
waktu_lapor: '01/02/2023 00:10:39',
waktu_response: '01/02/2023 01:17:31',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 4012,
durasi_recovery_time: 33977641,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'wulan',
alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
no_telp_pelapor: '6285788900596',
keterangan_pelapor:
'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
media: 'PLN Mobile',
nama_ulp: 'ULP KUPANG'
},
{
no_laporan: 'K5423020100045',
waktu_lapor: '01/02/2023 00:16:57',
waktu_response: '01/02/2023 00:19:40',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 163,
durasi_recovery_time: 33981112,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'veri susanto',
alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
no_telp_pelapor: '6282150235722',
keterangan_pelapor:
'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
media: 'PLN Mobile',
nama_ulp: 'ULP SIANTAN'
},
{
no_laporan: 'K5423020100062',
waktu_lapor: '01/02/2023 00:29:48',
waktu_response: '01/02/2023 01:08:45',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 2337,
durasi_recovery_time: 33978167,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'Diki wahyudi',
alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
no_telp_pelapor: '6285770967966',
keterangan_pelapor:
'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
media: 'PLN Mobile',
nama_ulp: 'ULP RENGASDENGKLOK'
},
{
no_laporan: 'K5423020100089',
waktu_lapor: '01/02/2023 00:45:30',
waktu_response: '01/02/2023 01:00:27',
waktu_recovery: '01/02/2023 07:53:08',
durasi_response_time: 897,
durasi_recovery_time: 24761,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'SAHABATJAKARTA',
alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
no_telp_pelapor: '6281210701126',
keterangan_pelapor:
'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
media: 'PLN Mobile',
nama_ulp: 'ULP BOGOR KOTA'
}
]
} }
}) showDetail()
}
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> </script>

356
src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4"> <Filters @reset-form="resetData" @run-search="() => filterData()" class="mb-4">
<Type11 <Type11
@update:filters="(value) => (filters = value)" @update:filters="(value) => (filters = value)"
:sla-options="[ :sla-options="[
@ -22,10 +22,11 @@
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
v-if="loading == false" :remote-operations="true"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
:show-borders="true" :show-borders="true"
@ -38,6 +39,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="false" :word-wrap-enabled="false"
> >
<DxLoadPanel :enabled="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager <DxPager
@ -57,11 +59,12 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
css-class="custom-table-column" :allow-sorting="false"
css-class="custom-table-column !text-right"
:width="50" :width="50"
alignment="center" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number" data-type="number"
data-field="no"
caption="No" caption="No"
/> />
<DxColumn <DxColumn
@ -301,7 +304,6 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -309,8 +311,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type11 from '@/components/Form/FiltersType/Type11.vue' import Type11 from '@/components/Form/FiltersType/Type11.vue'
import CustomStore from 'devextreme/data/custom_store'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue' import { reactive, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -330,18 +334,176 @@ import {
exportToDOCX exportToDOCX
} from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime' } from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
const position = { of: '#data' } import type { IRequestOptions } from '@/types/requestParams'
const showIndicator = ref(true)
const shading = ref(true) const requestOptions = reactive<IRequestOptions>({
const showPane = ref(true) skip: 0,
take: 20,
requireTotalCount: true,
sort: null,
filter: null
})
const dataSelected = ref<any>() const dataSelected = ref<any>()
const dialogDetail = ref(false) const dialogDetail = 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' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: '',
minTime: '',
maxTime: ''
})
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.ssdaftarKeluhanResponseTime, query)
.then((result) => {
const response = result.data.data.ssdaftarKeluhanResponseTime
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 resetData = () => {
allowTableRequest.value = false
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
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, maxTime, minTime } = params
return {
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),
minDurasiResponseTime: minTime,
maxDurasiResponseTime: maxTime,
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
}
const closeDialog = () => { const closeDialog = () => {
dialogDetail.value = false dialogDetail.value = false
} }
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => { const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance! const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection() dataGrid.clearSelection()
@ -358,159 +520,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
} }
} }
const onExporting = (e: any) => { const onExporting = async (e: any) => {
if (e.format === 'pdf') { const dataGrid = dataGridRef.value!.instance!
exportToPDF(reportMeta, data)
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') { } else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, e) exportToXLSX(reportMeta, e)
} else { } else if (e.format === 'document' && reportData.value) {
exportToDOCX(reportMeta, data) dataGrid.beginCustomLoading('')
const doc = await exportToDOCX(reportMeta, reportData)
if (doc) {
dataGrid.endCustomLoading()
}
} }
} }
const data = ref<any[]>([])
const loading = ref(false)
const resetData = () => {
data.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3, maxTime, minTime } = params
const query = {
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),
minDurasiResponseTime: minTime,
maxDurasiResponseTime: maxTime,
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loading.value = true
await requestGraphQl(queries.keluhan.daftar.keluhanResponseTime, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarKeluhanResponseTime
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const filters = ref()
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: '',
minTime: '',
maxTime: ''
})
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
no_laporan: 'K5423020100006',
waktu_lapor: '01/02/2023 00:01:23',
waktu_response: '01/02/2023 00:01:59',
waktu_recovery: '01/02/2023 00:02:52',
durasi_response_time: 36,
durasi_recovery_time: 53,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Doni',
alamat_pelapor: 'JL KH WASYID NO 119 CILEGON No.0 RT.0 RW.0 CILEGON',
no_telp_pelapor: '62895391110909',
keterangan_pelapor: 'mohon info terkait prediksi pemakaian tenaga listrik',
media: 'PLN Mobile',
nama_ulp: 'ULP PRIMA KRAKATAU (TT/TM)'
},
{
no_laporan: 'K5423020100030',
waktu_lapor: '01/02/2023 00:10:39',
waktu_response: '01/02/2023 01:17:31',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 4012,
durasi_recovery_time: 33978014,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'wulan',
alamat_pelapor: 'DS OELETA No. RT.3 RW.2 ALAK',
no_telp_pelapor: '6285788900596',
keterangan_pelapor:
'MUTASI_K (G9923020187809:pemeriksaan ) - pulsa meter su babunyi .ketong isi gagal terus . apa bisa di konfirmasi kenapa begitu ',
media: 'PLN Mobile',
nama_ulp: 'ULP KUPANG'
},
{
no_laporan: 'K5423020100045',
waktu_lapor: '01/02/2023 00:16:57',
waktu_response: '01/02/2023 00:19:40',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 163,
durasi_recovery_time: 33981485,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'veri susanto',
alamat_pelapor: 'JL NURUL HUDA KOMP TERAS HOKILAND No.A6 RT.2 RW.3 DS KAPUR',
no_telp_pelapor: '6282150235722',
keterangan_pelapor:
'MUTASI_K (G9923020187794:cek kwh) - tidak bisa membeli vocer listrik,vocer listrik sudah mau habis',
media: 'PLN Mobile',
nama_ulp: 'ULP SIANTAN'
},
{
no_laporan: 'K5423020100062',
waktu_lapor: '01/02/2023 00:29:48',
waktu_response: '01/02/2023 01:08:45',
waktu_recovery: '01/01/1970 00:00:00',
durasi_response_time: 2337,
durasi_recovery_time: 33978540,
status_akhir: 'Dalam Proses Bidang Unit',
idpel_nometer: '',
nama_pelapor: 'Diki wahyudi',
alamat_pelapor: 'jl Galunggung amansari RT. 01 rw 01',
no_telp_pelapor: '6285770967966',
keterangan_pelapor:
'MUTASI_K (G9923020187796:token gagal) - token di masukan keterangan gagal',
media: 'PLN Mobile',
nama_ulp: 'ULP RENGASDENGKLOK'
},
{
no_laporan: 'K5423020100089',
waktu_lapor: '01/02/2023 00:45:30',
waktu_response: '01/02/2023 01:00:27',
waktu_recovery: '01/02/2023 07:53:08',
durasi_response_time: 897,
durasi_recovery_time: 24761,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'SAHABATJAKARTA',
alamat_pelapor: 'Stasiun Jln. Nyi Raja Permas',
no_telp_pelapor: '6281210701126',
keterangan_pelapor:
'NO AGENDA 538319912301199708\\nMOHON PERCEPATAN PASANG BARU ATAS NAMA CFC ST KA BOGOR..KARNA HARI RABU 1 FEBRUARI 2023 GERAI TERSEBUT MAU GRAND OPENING *5 MOHON DAPAT PRIORITAS INVESTASI KAMI DI KOTA BOGOR TSB TKSH',
media: 'PLN Mobile',
nama_ulp: 'ULP BOGOR KOTA'
}
]
}
})
</script> </script>

358
src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
View File

@ -1,15 +1,16 @@
<template> <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)" /> <Type3 @update:filters="(value) => (filters = value)" />
</Filters> </Filters>
<div id="data"> <div id="data">
<DxDataGrid <DxDataGrid
ref="dataGridRef" ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true" :allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10" class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data" :data-source="data"
v-if="loading == false" :remote-operations="true"
:show-column-lines="true" :show-column-lines="true"
:show-row-lines="false" :show-row-lines="false"
:show-borders="true" :show-borders="true"
@ -22,6 +23,7 @@
column-resizing-mode="widget" column-resizing-mode="widget"
:word-wrap-enabled="false" :word-wrap-enabled="false"
> >
<DxLoadPanel :enabled="true" />
<DxSelection mode="single" /> <DxSelection mode="single" />
<DxPaging :page-size="20" :enabled="true" /> <DxPaging :page-size="20" :enabled="true" />
<DxPager <DxPager
@ -41,11 +43,12 @@
<DxColumnFixing :enabled="true" /> <DxColumnFixing :enabled="true" />
<DxColumn <DxColumn
css-class="custom-table-column" :allow-sorting="false"
css-class="custom-table-column !text-right"
:width="50" :width="50"
alignment="center" alignment="center"
:calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
data-type="number" data-type="number"
data-field="no"
caption="No" caption="No"
/> />
<DxColumn <DxColumn
@ -274,7 +277,6 @@
</div> </div>
</div> </div>
</DetailDialog> </DetailDialog>
<BufferDialog v-if="loading" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -282,8 +284,10 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue' import InputText from '@/components/InputText.vue'
import Filters from '@/components/Form/Filters.vue' import Filters from '@/components/Form/Filters.vue'
import Type3 from '@/components/Form/FiltersType/Type3.vue' import Type3 from '@/components/Form/FiltersType/Type3.vue'
import CustomStore from 'devextreme/data/custom_store'
import { formatWaktu } from '@/components/Form/FiltersType/reference' import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue' import { reactive, ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue' import { DxDataGrid } from 'devextreme-vue'
import { import {
DxColumn, DxColumn,
@ -297,24 +301,182 @@ import {
} from 'devextreme-vue/data-grid' } from 'devextreme-vue/data-grid'
import { queries, requestGraphQl } from '@/utils/api/api.graphql' import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
const position = { of: '#data' } import type { IRequestOptions } from '@/types/requestParams'
const showIndicator = ref(true)
const shading = ref(true) const requestOptions = reactive<IRequestOptions>({
const showPane = ref(true) skip: 0,
take: 20,
requireTotalCount: true,
sort: null,
filter: null
})
const dataSelected = ref<any>() const dataSelected = ref<any>()
const dialogDetail = ref(false) const dialogDetail = 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' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: ''
})
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.ssdaftarKeluhanSelesaiTanpaIdPelanggan,
query
)
.then((result) => {
const response = result.data.data.ssdaftarKeluhanSelesaiTanpaIdPelanggan
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 resetData = () => {
allowTableRequest.value = false
const dataGrid = dataGridRef.value!.instance!
const dataGridDataSource = dataGrid.getDataSource()
dataGridDataSource.reload()
}
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
return {
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
}
const closeDialog = () => { const closeDialog = () => {
dialogDetail.value = false dialogDetail.value = false
} }
const dataGridRef = ref<DxDataGrid | null>(null)
const clearSelection = () => { const clearSelection = () => {
const dataGrid = dataGridRef.value!.instance! const dataGrid = dataGridRef.value!.instance!
dataGrid.clearSelection() dataGrid.clearSelection()
} }
const showDetail = () => { const showDetail = () => {
clearSelection() clearSelection()
dialogDetail.value = true dialogDetail.value = true
@ -327,159 +489,29 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
showDetail() showDetail()
} }
const onExporting = (e: any) => { const onExporting = async (e: any) => {
if (e.format === 'pdf') { const dataGrid = dataGridRef.value!.instance!
exportToPDF(reportMeta, data)
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') { } else if (e.format === 'xlsx') {
exportToXLSX(reportMeta, e) exportToXLSX(reportMeta, e)
} else { } else if (e.format === 'document' && reportData.value) {
exportToDOCX(reportMeta, data) dataGrid.beginCustomLoading('')
const doc = await exportToDOCX(reportMeta, reportData)
if (doc) {
dataGrid.endCustomLoading()
}
} }
} }
const data = ref<any[]>([])
const loading = ref(false)
const resetData = () => {
data.value = []
}
const filterData = async (params: any) => {
resetData()
const dateValue = params.periode.split(' s/d ')
const { ulp, uid, up3 } = params
const query = {
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),
idUlp: ulp ? ulp.id : 0,
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loading.value = true
await requestGraphQl(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarKeluhanSelesaiTanpaIdPelanggan
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
const filters = ref()
const reportMeta = ref({
uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
periode: ''
})
onMounted(() => {
if (import.meta.env.DEV) {
data.value = [
{
no_laporan: 'K5123020100019',
waktu_lapor: '01/02/2023 01:59:02',
waktu_response: '01/02/2023 05:22:50',
waktu_recovery: '01/02/2023 08:33:38',
durasi_response_time: 12228,
durasi_recovery_time: 11448,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'BP AHMAD',
alamat_pelapor:
'JL BENTENGAN TIMUR NO31 RT11/03, SUNTER JAYA, TANJUNG PRIOK, KOTA ADM. JAKARTA UTARA, DKI JAKARTA',
no_telp_pelapor: '082320000152',
keterangan_pelapor:
'MOHON BANTUAN PEMBATALAN PERMOHONAN PB NO AGENDA 545109912301319203 DIKARENAKAN PELANGGAN INGIN KE DAYA 2200 VA, PELANGGAN SUDAH MELAKUKAN PEMBAYARAN MELALAUI GOPAY TANGGAL 31/01/2023 PUKUL 18:49 WIB, NAMUN PEMBAYARAN BELUM MASUK, MOHON KONFRIMASI KE PELANGGAN, TERIMA KASIH. ',
media: 'Call PLN 123',
nama_ulp: 'UP3 TANJUNG PRIOK'
},
{
no_laporan: 'K5123020100021',
waktu_lapor: '01/02/2023 02:04:04',
waktu_response: '01/02/2023 02:26:01',
waktu_recovery: '01/02/2023 02:34:06',
durasi_response_time: 1317,
durasi_recovery_time: 485,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'IBU TITIN ',
alamat_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
no_telp_pelapor: '087786974290',
keterangan_pelapor: 'TIDAK BISAMALKUKANPEMBELIAN KETMELEBIHI BATAS MAXIMUM / SISA 100 KWH ',
media: 'Call PLN 123',
nama_ulp: 'ULP CIBITUNG'
},
{
no_laporan: 'K5223020100112',
waktu_lapor: '01/02/2023 04:16:48',
waktu_response: '01/02/2023 05:58:33',
waktu_recovery: '01/02/2023 12:02:23',
durasi_response_time: 6105,
durasi_recovery_time: 21830,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'BP HENDRIYANTO',
alamat_pelapor:
'JL.PALEM HIJAU, COKROKONTENG, RT.04 RW.2. KEL SIDOARUM. KEC GODEAN KAB SLEMAN PROV DIY',
no_telp_pelapor: '085921182228',
keterangan_pelapor:
'PELANGGAN TIDAK BISA INPUT TOKEN SETELAH UPDATE VKRN 43. (BELUM ADA) PETUGAS YANG MELAKUKAN PENGATURAN. SISA KWH: 385.41. PTL (HAMPIR PADAM). PELANGGAN PERNAH LAPOR DENGAN NO: K5223013102183, STATUS SELESAI, PELANGGAN TIDAK DIKONFIRMASI s.d 1X6 JAM. LAPOR KEMBALI CC.54.JULIANA TGL 01/02/23 12FZUS3 08.46 085921182228',
media: 'Live Chat PLN Mobile',
nama_ulp: 'ULP SEDAYU'
},
{
no_laporan: 'K5223020100116',
waktu_lapor: '01/02/2023 04:43:43',
waktu_response: '01/02/2023 08:06:28',
waktu_recovery: '01/02/2023 08:52:05',
durasi_response_time: 12165,
durasi_recovery_time: 2737,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'BP SELAMET',
alamat_pelapor:
'JL MUARA TAKUS NO.30 - RT- / RW- KEL MADRASHULU KEC MEDAN KOLONIA KOTA MEDAN > LOKASI BELAKANG SAN PLASA',
no_telp_pelapor: '0614510290',
keterangan_pelapor:
'LEBIH TAGIH . STAND AKHIR REK JANUARI, 2023 =19583, STAND APP 01/02/2023 = 16677,NOTE: PETUGAS CATER SELALU MENGINFORMASIKAN UNTUK LISTRIK AKAN DIGANTI KE BISNIS, PELANGGAN INGIN MENGETAHUI MAKSUD DAN TUJUAN, PETUGAS CATER DIJANJIKAN UNTUK MELAKUKAN PERGANTIAN KWH METER BARU NAMUN JUGA TIDAK DIREALISASI.',
media: 'Call PLN 123',
nama_ulp: 'ULP MEDAN KOTA'
},
{
no_laporan: 'K5223020100119',
waktu_lapor: '01/02/2023 04:48:12',
waktu_response: '01/02/2023 07:34:08',
waktu_recovery: '01/02/2023 11:50:28',
durasi_response_time: 9956,
durasi_recovery_time: 15380,
status_akhir: 'Selesai',
idpel_nometer: '',
nama_pelapor: 'Febry Cahjagraha_',
alamat_pelapor:
' JL PISANG GG.TALOK 3 SAREN NO., CATURTUNGGAL, DEPOK, KAB. SLEMAN, DAERAH ISTIMEWA YOGYAKARTA',
no_telp_pelapor: '089611011990',
keterangan_pelapor:
'PELANGGAN MENGAJUKAN PROSES TURUN DAYA (R2T/3500 VA - R1T/1300 VA) MELALUI APLIKASI PLN MOBILE DENGAN STATUS PERMOHONAN MENUNGGU VERIFIKASI PLN UNIT DAN STATUS PADA AP2T PERMOHONAN BELUM DISAHKAN MANAGER. YBS INGIN SEGERA DAPAT DITINDAKLANJUTI.',
media: 'Facebook',
nama_ulp: 'ULP YOGYAKARTA KOTA'
}
]
}
})
</script> </script>

42
src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
View File

@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo } return { dateFromFormat, dateToFormat, dayTo }
} }
const exportToPDF = (reportMeta: any, data: any) => { const exportToPDF = async (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const day = new Date().toLocaleString('id-ID', { weekday: 'long' }) const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const resultData = data.value.data
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'landscape' orientation: 'landscape'
}) })
@ -131,7 +132,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
'Nama ULP' 'Nama ULP'
] ]
], ],
body: data.value.map((item: any, i: any) => [ body: resultData.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } }, { content: ++i, styles: { halign: 'right' } },
item.no_laporan, item.no_laporan,
item.waktu_lapor, item.waktu_lapor,
@ -199,12 +200,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
margin: { left: 230 } margin: { left: 230 }
}) })
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { await doc
console.log('pdf berhasil disimpan') .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 meta = formatMetaData(reportMeta)
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`) const worksheet = workbook.addWorksheet(`${reportName}`)
@ -264,7 +272,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet.mergeCells('A7:P7') worksheet.mergeCells('A7:P7')
worksheet.mergeCells('A8:P8') worksheet.mergeCells('A8:P8')
exportToExcel({ await exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
@ -278,15 +286,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true 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 day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const resultData = data.value.data
const generateRows = () => { const generateRows = () => {
return data.value.map((item: any, i: any) => { return resultData.map((item: any, i: any) => {
return new TableRow({ return new TableRow({
children: [ children: [
{ text: `${++i}`, field: 'no' }, { text: `${++i}`, field: 'no' },
@ -532,10 +541,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
] ]
}) })
Packer.toBlob(doc).then((blob) => { await Packer.toBlob(doc)
saveAs(blob, `Laporan ${reportName}.docx`) .then((blob) => {
console.log('Document created successfully') saveAs(blob, `Laporan ${reportName}.docx`)
})
console.log('DOCX Exported')
})
.catch((error) => {
console.error('Error while exporting DOCX', error)
})
return true
} }
export { exportToPDF, exportToXLSX, exportToDOCX } export { exportToPDF, exportToXLSX, exportToDOCX }

42
src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
View File

@ -59,12 +59,13 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime } return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
} }
const exportToPDF = (reportMeta: any, data: any) => { const exportToPDF = async (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const day = new Date().toLocaleString('id-ID', { weekday: 'long' }) const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const resultData = data.value.data
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'landscape' orientation: 'landscape'
}) })
@ -144,7 +145,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
'Nama ULP' 'Nama ULP'
] ]
], ],
body: data.value.map((item: any, i: any) => [ body: resultData.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } }, { content: ++i, styles: { halign: 'right' } },
item.no_laporan, item.no_laporan,
item.waktu_lapor, item.waktu_lapor,
@ -210,12 +211,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
margin: { left: 230 } margin: { left: 230 }
}) })
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { await doc
console.log('pdf berhasil disimpan') .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 meta = formatMetaData(reportMeta)
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`) const worksheet = workbook.addWorksheet(`${reportName}`)
@ -275,7 +283,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet.mergeCells('A7:N7') worksheet.mergeCells('A7:N7')
worksheet.mergeCells('A8:N8') worksheet.mergeCells('A8:N8')
exportToExcel({ await exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
@ -289,15 +297,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true 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 day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const resultData = data.value.data
const generateRows = () => { const generateRows = () => {
return data.value.map((item: any, i: any) => { return resultData.map((item: any, i: any) => {
return new TableRow({ return new TableRow({
children: [ children: [
{ text: `${++i}`, field: 'no' }, { text: `${++i}`, field: 'no' },
@ -539,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
] ]
}) })
Packer.toBlob(doc).then((blob) => { await Packer.toBlob(doc)
saveAs(blob, `Laporan ${reportName}.docx`) .then((blob) => {
console.log('Document created successfully') saveAs(blob, `Laporan ${reportName}.docx`)
})
console.log('DOCX Exported')
})
.catch((error) => {
console.error('Error while exporting DOCX', error)
})
return true
} }
export { exportToPDF, exportToXLSX, exportToDOCX } export { exportToPDF, exportToXLSX, exportToDOCX }

42
src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
View File

@ -59,12 +59,13 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime } return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
} }
const exportToPDF = (reportMeta: any, data: any) => { const exportToPDF = async (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const day = new Date().toLocaleString('id-ID', { weekday: 'long' }) const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const resultData = data.value.data
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'landscape' orientation: 'landscape'
}) })
@ -144,7 +145,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
'Nama ULP' 'Nama ULP'
] ]
], ],
body: data.value.map((item: any, i: any) => [ body: resultData.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } }, { content: ++i, styles: { halign: 'right' } },
item.no_laporan, item.no_laporan,
item.waktu_lapor, item.waktu_lapor,
@ -210,12 +211,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
margin: { left: 230 } margin: { left: 230 }
}) })
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { await doc
console.log('pdf berhasil disimpan') .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 meta = formatMetaData(reportMeta)
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`) const worksheet = workbook.addWorksheet(`${reportName}`)
@ -275,7 +283,7 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet.mergeCells('A7:N7') worksheet.mergeCells('A7:N7')
worksheet.mergeCells('A8:N8') worksheet.mergeCells('A8:N8')
exportToExcel({ await exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
@ -289,15 +297,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true 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 day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const resultData = data.value.data
const generateRows = () => { const generateRows = () => {
return data.value.map((item: any, i: any) => { return resultData.map((item: any, i: any) => {
return new TableRow({ return new TableRow({
children: [ children: [
{ text: `${++i}`, field: 'no' }, { text: `${++i}`, field: 'no' },
@ -539,10 +548,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
] ]
}) })
Packer.toBlob(doc).then((blob) => { await Packer.toBlob(doc)
saveAs(blob, `Laporan ${reportName}.docx`) .then((blob) => {
console.log('Document created successfully') saveAs(blob, `Laporan ${reportName}.docx`)
})
console.log('DOCX Exported')
})
.catch((error) => {
console.error('Error while exporting DOCX', error)
})
return true
} }
export { exportToPDF, exportToXLSX, exportToDOCX } export { exportToPDF, exportToXLSX, exportToDOCX }

44
src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
View File

@ -48,12 +48,13 @@ const formatMetaData = (reportMeta: any) => {
return { dateFromFormat, dateToFormat, dayTo } return { dateFromFormat, dateToFormat, dayTo }
} }
const exportToPDF = (reportMeta: any, data: any) => { const exportToPDF = async (reportMeta: any, data: any) => {
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const day = new Date().toLocaleString('id-ID', { weekday: 'long' }) const day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const resultData = data.value.data
const doc = new jsPDF({ const doc = new jsPDF({
orientation: 'landscape' orientation: 'landscape'
}) })
@ -129,7 +130,7 @@ const exportToPDF = (reportMeta: any, data: any) => {
'Nama ULP' 'Nama ULP'
] ]
], ],
body: data.value.map((item: any, i: any) => [ body: resultData.map((item: any, i: any) => [
{ content: ++i, styles: { halign: 'right' } }, { content: ++i, styles: { halign: 'right' } },
item.no_laporan, item.no_laporan,
item.waktu_lapor, item.waktu_lapor,
@ -196,12 +197,19 @@ const exportToPDF = (reportMeta: any, data: any) => {
margin: { left: 230 } margin: { left: 230 }
}) })
doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => { await doc
console.log('pdf berhasil disimpan') .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 meta = formatMetaData(reportMeta)
const workbook = new Workbook() const workbook = new Workbook()
const worksheet = workbook.addWorksheet(`${reportName}`) const worksheet = workbook.addWorksheet(`${reportName}`)
@ -254,11 +262,11 @@ const exportToXLSX = (reportMeta: any, e: any) => {
worksheet.mergeCells('A6:O6') worksheet.mergeCells('A6:O6')
worksheet.mergeCells('A7:O7') worksheet.mergeCells('A7:O7')
exportToExcel({ await exportToExcel({
component: e.component, component: e.component,
worksheet, worksheet,
autoFilterEnabled: true, autoFilterEnabled: true,
topLeftCell: { row: 9, column: 1 } topLeftCell: { row: 10, column: 1 }
}).then(() => { }).then(() => {
workbook.xlsx.writeBuffer().then((buffer: any) => { workbook.xlsx.writeBuffer().then((buffer: any) => {
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`) saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@ -268,15 +276,16 @@ const exportToXLSX = (reportMeta: any, e: any) => {
e.cancel = true 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 day = new Date().toLocaleString('id-ID', { weekday: 'long' })
const date = new Date().getDate() const date = new Date().getDate()
const month = new Date().toLocaleString('id-ID', { month: 'long' }) const month = new Date().toLocaleString('id-ID', { month: 'long' })
const year = new Date().getFullYear() const year = new Date().getFullYear()
const meta = formatMetaData(reportMeta) const meta = formatMetaData(reportMeta)
const resultData = data.value.data
const generateRows = () => { const generateRows = () => {
return data.value.map((item: any, i: any) => { return resultData.map((item: any, i: any) => {
return new TableRow({ return new TableRow({
children: [ children: [
{ text: `${++i}`, field: 'no' }, { text: `${++i}`, field: 'no' },
@ -511,10 +520,17 @@ const exportToDOCX = (reportMeta: any, data: any) => {
] ]
}) })
Packer.toBlob(doc).then((blob) => { await Packer.toBlob(doc)
saveAs(blob, `Laporan ${reportName}.docx`) .then((blob) => {
console.log('Document created successfully') saveAs(blob, `Laporan ${reportName}.docx`)
})
console.log('DOCX Exported')
})
.catch((error) => {
console.error('Error while exporting DOCX', error)
})
return true
} }
export { exportToPDF, exportToXLSX, exportToDOCX } export { exportToPDF, exportToXLSX, exportToDOCX }

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

@ -52,6 +52,51 @@ export const apolloClient = () => {
export const queries = { export const queries = {
keluhan: { keluhan: {
daftar: { daftar: {
ssdaftarKeluhanSelesaiTanpaIdPelanggan: gql`
query ssdaftarKeluhanSelesaiTanpaIdPelanggan(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$skip: Int
$take: Int
$requireTotalCount: Boolean
$sort: [SortInput]
$filter: [FilterInput]
) {
ssdaftarKeluhanSelesaiTanpaIdPelanggan(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
skip: $skip
take: $take
requireTotalCount: $requireTotalCount
sort: $sort
filter: $filter
) {
totalCount
data {
no_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_response_time
durasi_recovery_time
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_ulp
}
}
}
`,
keluhanSelesaiTanpaIDPelanggan: gql` keluhanSelesaiTanpaIDPelanggan: gql`
query daftarKeluhanSelesaiTanpaIdPelanggan( query daftarKeluhanSelesaiTanpaIdPelanggan(
$dateFrom: Date! $dateFrom: Date!
@ -177,6 +222,55 @@ export const queries = {
} }
} }
`, `,
ssdaftarKeluhanResponseTime: gql`
query ssdaftarKeluhanResponseTime(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$minDurasiResponseTime: Int!
$maxDurasiResponseTime: Int!
$skip: Int
$take: Int
$requireTotalCount: Boolean
$sort: [SortInput]
$filter: [FilterInput]
) {
ssdaftarKeluhanResponseTime(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
minDurasiResponseTime: $minDurasiResponseTime
maxDurasiResponseTime: $maxDurasiResponseTime
skip: $skip
take: $take
requireTotalCount: $requireTotalCount
sort: $sort
filter: $filter
) {
totalCount
data {
no_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_response_time
durasi_recovery_time
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_ulp
}
}
}
`,
keluhanResponseTime: gql` keluhanResponseTime: gql`
query daftarKeluhanResponseTime( query daftarKeluhanResponseTime(
$dateFrom: Date! $dateFrom: Date!
@ -213,6 +307,55 @@ export const queries = {
} }
} }
`, `,
ssdaftarKeluhanRecoveryTime: gql`
query ssdaftarKeluhanRecoveryTime(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$minDurasiRecoveryTime: Int!
$maxDurasiRecoveryTime: Int!
$skip: Int
$take: Int
$requireTotalCount: Boolean
$sort: [SortInput]
$filter: [FilterInput]
) {
ssdaftarKeluhanRecoveryTime(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
minDurasiRecoveryTime: $minDurasiRecoveryTime
maxDurasiRecoveryTime: $maxDurasiRecoveryTime
skip: $skip
take: $take
requireTotalCount: $requireTotalCount
sort: $sort
filter: $filter
) {
totalCount
data {
no_laporan
waktu_lapor
waktu_response
waktu_recovery
durasi_response_time
durasi_recovery_time
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_ulp
}
}
}
`,
keluhanRecoveryTime: gql` keluhanRecoveryTime: gql`
query daftarKeluhanRecoveryTime( query daftarKeluhanRecoveryTime(
$dateFrom: Date! $dateFrom: Date!
@ -260,6 +403,56 @@ export const queries = {
} }
} }
`, `,
ssdaftarKeluhanMelaporLebihDariSatuKali: gql`
query ssdaftarKeluhanMelaporLebihDariSatuKali(
$dateFrom: Date!
$dateTo: Date!
$idUlp: Int!
$idUid: Int!
$idUp3: Int!
$minJmlLapor: Int!
$maxJmlLapor: Int!
$skip: Int
$take: Int
$requireTotalCount: Boolean
$sort: [SortInput]
$filter: [FilterInput]
) {
ssdaftarKeluhanMelaporLebihDariSatuKali(
dateFrom: $dateFrom
dateTo: $dateTo
idUlp: $idUlp
idUid: $idUid
idUp3: $idUp3
minJmlLapor: $minJmlLapor
maxJmlLapor: $maxJmlLapor
skip: $skip
take: $take
requireTotalCount: $requireTotalCount
sort: $sort
filter: $filter
) {
totalCount
data {
no_laporan
waktu_lapor
waktu_response
waktu_recovery
jumlah_lapor
durasi_response_time
durasi_recovery_time
status_akhir
idpel_nometer
nama_pelapor
alamat_pelapor
no_telp_pelapor
keterangan_pelapor
media
nama_ulp
}
}
}
`,
keluhanMelaporLebihDariSatuKali: gql` keluhanMelaporLebihDariSatuKali: gql`
query daftarKeluhanMelaporLebihDariSatuKali( query daftarKeluhanMelaporLebihDariSatuKali(
$minJmlLapor: Int! $minJmlLapor: Int!