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

feat: create server-side request in daftar gangguan dialihkan ke posko lain

Browse Source
This commit is contained in:
kur0nek-o 2024-04-22 17:18:51 +07:00
parent 35746ab297
commit 0710b2635d
3 changed files with 154 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

299
src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
View File

@ -1,14 +1,16 @@
<template>
<Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
<Filters @reset-form="resetData" @run-search="() => filterData(filters)" class="mb-4">
<Type1 @update:filters="(value) => (filters = value)" />
</Filters>
<div id="dataTable">
<DxDataGrid
ref="dataGridRef"
@option-changed="handleRequestChange"
:allow-column-reordering="true"
class="max-h-[calc(100vh-140px)] mb-10"
:data-source="data"
:remote-operations="true"
v-if="loading == false"
key-expr="no_laporan"
:show-column-lines="true"
@ -32,17 +34,6 @@
:show-navigation-buttons="true"
/>
<DxSelection mode="single" />
<!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
<!-- <DxLoadPanel
shading-color="rgba(0,0,0,0.4)"
:position="position"
:show-indicator="showIndicator"
:show-pane="showPane"
:shading="shading"
v-if="loading"
v-model:visible="loading"
:enabled="true"
/> -->
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
<DxExport
:enabled="true"
@ -53,7 +44,6 @@
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"
caption="No"
/>
@ -347,6 +337,11 @@
<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import CustomStore from 'devextreme/data/custom_store'
import { DxDataGrid } from 'devextreme-vue'
import {
DxColumn,
@ -357,29 +352,145 @@ import {
DxSelection
} from 'devextreme-vue/data-grid'
import { formatWaktu } from '@/components/Form/FiltersType/reference'
import { onMounted, ref } from 'vue'
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
import InputText from '@/components/InputText.vue'
import { ref, reactive } from 'vue'
import { queries, requestGraphQl } from '@/utils/api/api.graphql'
import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
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 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' },
posko: { id: 0, name: 'Semua Posko' },
periode: ''
})
const allowTableRequest = ref(false)
const data = new CustomStore({
load: (loadOptions: any) => {
if (allowTableRequest.value) {
let query: any
if (Object.keys(loadOptions.userData).length === 0) {
query = {
skip: loadOptions.skip,
take: loadOptions.take,
sort: loadOptions.sort ? loadOptions.sort : null,
filter: loadOptions.filter ? loadOptions.filter : null,
requireTotalCount: loadOptions.requireTotalCount,
...createQuery(filters.value)
}
} else {
query = loadOptions.userData
}
return requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
.then((result) => {
return {
data: result.data.data.daftarGangguanDialihkanKePoskoLain,
totalCount: 0
}
})
.catch((err) => {
throw Error(err)
})
.finally(() => {
reportMeta.value = filters.value
loading.value = false
})
} else {
return new Promise(function (resolve) {
resolve({
data: [],
totalCount: 0
})
})
}
}
})
const closeDialog = () => (dialogDetail.value = false)
const resetData = () => {
data.value = []
allowTableRequest.value = false
data.load()
}
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 === 'number' || !column.dataField) {
continue
}
searchOptions.push([column.dataField, '=', keyword])
if (column !== columns[columns.length - 1]) {
searchOptions.push('or')
}
}
return searchOptions
}
const filterData = (params: any) => {
allowTableRequest.value = true
data.load({
userData: {
...requestOptions,
...createQuery(params)
}
})
}
const createQuery = (params: any) => {
const { posko, uid, up3 } = params
const dateValue = params.periode.split(' s/d ')
const query = {
return {
dateFrom: dateValue[0]
? dateValue[0].split('-').reverse().join('-')
: new Date().toISOString().slice(0, 10),
@ -390,165 +501,25 @@ const filterData = async (params: any) => {
idUid: uid ? uid.id : 0,
idUp3: up3 ? up3.id : 0
}
loading.value = true
await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
.then((result) => {
if (result.data.data != undefined) {
data.value = result.data.data.daftarGangguanDialihkanKePoskoLain
} else {
data.value = []
}
reportMeta.value = filters.value
})
.catch((err) => {
console.error(err)
})
.finally(() => {
loading.value = false
})
}
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]
}
showDetail()
}
const showDetail = () => {
dialogDetail.value = true
clearSelection()
}
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 = [
{
no_laporan: 'G1423012400040',
pembuat_laporan: 'CC.14.ALFIAN',
waktu_lapor: '01/02/2023 13:53:36',
waktu_dialihkan: '24/01/2023 02:20:22',
waktu_response: null,
waktu_recovery: null,
durasi_response_time: null,
durasi_recovery_time: null,
id_posko_lama: 181701,
nama_posko_lama: 'POSKO ULP SIAK SRI INDRAPURA',
id_posko_baru: 181801,
nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
status_akhir: 'Dibatalkan',
idpel_nometer: '',
nama_pelapor: 'BP HABIB',
alamat_pelapor: 'JL PEMBANGUNAN RT 5 RW 2 DESA RAWANG TAUH KEC LUBUK DALAM KAB SIAK ',
no_telp_pelapor: '081365027399',
keterangan_pelapor: 'GANGGUAN BERULANG : G1423012400025, BANYAK RUMAH PADAM',
media: 'Call PLN 123'
},
{
no_laporan: 'G1223012400580',
pembuat_laporan: 'CC.12.TONI',
waktu_lapor: '01/02/2023 13:53:36',
waktu_dialihkan: '24/01/2023 17:30:32',
waktu_response: null,
waktu_recovery: null,
durasi_response_time: null,
durasi_recovery_time: null,
id_posko_lama: 181101,
nama_posko_lama: 'POSKO ULP PEKANBARU KOTA TIMUR',
id_posko_baru: 181101,
nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
idpel_nometer: '',
nama_pelapor: 'BP DAUT',
alamat_pelapor:
'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
no_telp_pelapor: '085278178766',
keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
media: 'Call PLN 123'
},
{
no_laporan: 'G1223012400580',
pembuat_laporan: 'CC.12.TONI',
waktu_lapor: '01/02/2023 13:53:36',
waktu_dialihkan: '24/01/2023 17:30:29',
waktu_response: null,
waktu_recovery: null,
durasi_response_time: null,
durasi_recovery_time: null,
id_posko_lama: 181111,
nama_posko_lama: 'POSKO ULP PEKANBARU KOTA BARAT',
id_posko_baru: 181101,
nama_posko_baru: 'POSKO ULP PEKANBARU KOTA TIMUR',
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
idpel_nometer: '',
nama_pelapor: 'BP DAUT',
alamat_pelapor:
'JL RAWAMANGUN SIMPANG ANGGREK RT01 RW8 KEL TANGERANG LUBUAY KEC BUKIT RAYA KOTA PEKANBARU RIAU ACUAN DEKAT KOLAM PANCING RIKI ',
no_telp_pelapor: '085278178766',
keterangan_pelapor: 'TRAFO MELEDAK, BANYAK RUMAH VOLTAGE TIDAK STABIL, TEGANGAN 120 V ',
media: 'Call PLN 123'
},
{
no_laporan: 'G1423012400611',
pembuat_laporan: 'cc.14.OKTA',
waktu_lapor: '01/02/2023 13:53:36',
waktu_dialihkan: '24/01/2023 15:39:23',
waktu_response: null,
waktu_recovery: null,
durasi_response_time: null,
durasi_recovery_time: null,
id_posko_lama: 181201,
nama_posko_lama: 'POSKO ULP SIMPANG TIGA',
id_posko_baru: 181131,
nama_posko_baru: '',
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
idpel_nometer: '',
nama_pelapor: 'IBU SURYANTI',
alamat_pelapor:
'JLN. KEPAU JAYA RT 01 RW 03 DESA KEPAU KEC. SIAK HULU KAB. KAMPAR PROV. RIAU. DIDEKAT SIMPANG PT. BENI',
no_telp_pelapor: '082246836428',
keterangan_pelapor: 'SR PUTUS (PTL PADAM) ',
media: 'Call PLN 123'
},
{
no_laporan: 'G5223012400639',
pembuat_laporan: 'CC.52.HARYO.SM',
waktu_lapor: '01/02/2023 13:53:36',
waktu_dialihkan: '24/01/2023 11:02:02',
waktu_response: null,
waktu_recovery: null,
durasi_response_time: null,
durasi_recovery_time: null,
id_posko_lama: 182601,
nama_posko_lama: 'POSKO ULP BAGAN BATU',
id_posko_baru: 181801,
nama_posko_baru: 'POSKO ULP PANGKALAN KERINCI',
status_akhir: 'Selesai(PEMADAMAN MELUAS)',
idpel_nometer: '',
nama_pelapor: 'BAPAK SAOR MARUDUT',
alamat_pelapor:
'DESA BANJAR PANJANG KECAMATAN KERUMUTAN KABUPATEN PELALAWAN PROVINSI RIAU ',
no_telp_pelapor: '085278020428',
keterangan_pelapor: 'TERKAIT NO LAPOR G5423012405161 STATUS DIBATALKAN. BANYAK RUMAH PADAM',
media: 'Live Chat PLN Mobile'
}
]
}
})
const onExporting = (e: any) => {
if (e.format === 'pdf') {
exportToPDF(reportMeta, data)

9
src/types/requestParams.ts Normal file
View File

@ -0,0 +1,9 @@
interface IRequestOptions {
skip: number
take: number
requireTotalCount: boolean
sort: null | Array<object>
filter: null | Array<any>
}
export type { IRequestOptions }

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

@ -2539,6 +2539,11 @@ export const queries = {
$posko: Int
$idUid: Int
$idUp3: Int
$skip: Int
$take: Int
$requireTotalCount: Boolean
$sort: [SortInput]
$filter: [FilterInput]
) {
daftarGangguanDialihkanKePoskoLain(
dateFrom: $dateFrom
@ -2546,6 +2551,11 @@ export const queries = {
posko: $posko
idUid: $idUid
idUp3: $idUp3
skip: $skip
take: $take
requireTotalCount: $requireTotalCount
sort: $sort
filter: $filter
) {
alamat_pelapor
pembuat_laporan