From 1fc7c3874c4bd2ddda3701887a65501e918b9bec Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Thu, 28 Mar 2024 09:31:04 +0700 Subject: [PATCH] Update DxGrouping configuration in MonalisaGR_JumlahKaliGangguan.vue --- .../Rekap/RGangguan_JenisGangguan.vue | 164 ++++++++++++------ .../Rekap/MonalisaGR_JumlahKaliGangguan.vue | 2 +- 2 files changed, 111 insertions(+), 55 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue index 364ebe8..40d215f 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue @@ -22,7 +22,7 @@ :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" - @selection-changed="onSelectionChanged" + @selection-changed="onDataSelectionChanged" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" @@ -36,8 +36,7 @@ :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" - v-if="loading" - v-model:visible="loading" + v-model:visible="loadingData" :enabled="true" /> @@ -419,7 +418,7 @@ @@ -431,7 +430,7 @@ import Filters from '@/components/Form/Filters.vue' import Type1 from '@/components/Form/FiltersType/Type1.vue' import { formatWaktu } from '@/components/Form/FiltersType/reference' -import { onMounted, ref } from 'vue' +import { onMounted, ref, watch } from 'vue' import { DxDataGrid } from 'devextreme-vue' import { DxColumn, @@ -454,12 +453,23 @@ import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan' +import { apolloClient } from '@/utils/api/api.graphql' +import { provideApolloClient } from '@vue/apollo-composable' +const client = apolloClient() +provideApolloClient(client) const position = { of: '#data' } const showIndicator = ref(true) const shading = ref(true) const showPane = ref(true) const data = ref([]) +const dataSub = ref([]) +const dataSelected = ref() +const dataSubSelected = ref() +const dialogDetail = ref(false) +const closedialogDetail = () => (dialogDetail.value = false) +const loadingData = ref(false) +const loadingSubData = ref(false) const reportMeta = ref({ uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' }, @@ -467,14 +477,6 @@ const reportMeta = ref({ periode: '' }) -const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, { - dateFrom: new Date().toISOString().slice(0, 10), - dateTo: new Date().toISOString().slice(0, 10), - posko: '', - idUid: 0, - idUp3: 0 -}) - const onExporting = (e: any) => { if (e.format === 'pdf') { exportToPDF(reportMeta.value, data.value) @@ -495,21 +497,67 @@ const onExporting = (e: any) => { e.cancel = true } } + +const getDetail = () => { + // const dateValue = filters.value.periode.split(' s/d ') + // const selected = dataSelected.value + // 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: selected?.id_ulp ? selected?.id_ulp : 0, + // idUid: selected?.id_uid ? selected?.id_uid : 0, + // idUp3: selected?.id_up3 ? selected?.id_up3 : 0 + // } + // const { onResult, onError, loading } = useQuery( + // queries.keluhan.rekap.rekapKeluhanAllDetail, + // query + // ) + // onResult((queryResult) => { + // if (queryResult.data != undefined) { + // dataSub.value = queryResult.data.detailKeluhanAll + // } + // }) + // onError((error) => { + // console.log(error) + // }) + // watch(loading, (value) => { + // loadingSubData.value = value + // }) +} + const dataGridRef = ref(null) const clearSelection = () => { const dataGrid = dataGridRef.value!.instance! dataGrid.clearSelection() } -const onSelectionChanged = ({ selectedRowsData }: any) => { - const data = selectedRowsData[0] +const showDetail = () => { clearSelection() + dataSubSelected.value = null + dialogDetail.value = true + getDetail() +} + +const onDataSelectionChanged = ({ selectedRowsData }: any) => { + if (selectedRowsData[0] != undefined) { + dataSelected.value = selectedRowsData[0] + showDetail() + } +} + +const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { + const data = selectedRowsData[0] + dataSubSelected.value = data } const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { posko, uid, up3 } = params - refetch({ + const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, { dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), @@ -520,58 +568,66 @@ const filterData = (params: any) => { idUid: uid ? uid.id : 0, idUp3: up3 ? up3.id : 0 }) + onResult((queryResult) => { if (queryResult.data != undefined) { - data.value = queryResult.data.rekapitulasiPerJenisGangguan.map((item: any, index: number) => { - return { - no: ++index, - sub_kelompok: item.sub_kelompok, - kode: item.kode, - jenisGangguan: item.tipe_permasalahan, - laporan: { - total: item.total, - sudahSelesai: { - jml: item.total_selesai, - persen: item.persen_selesai - }, - belumSelesai: { - jml: item.total_inproses, - persen: item.persen_inproses - } - }, - responseTime: { - menit: { - total: item.total_durasi_response, - rataRata: item.avg_durasi_response, - max: item.max_durasi_response, - min: item.min_durasi_response - }, + data.value = [...queryResult.data.rekapitulasiPerJenisGangguan].map( + (item: any, index: number) => { + return { + no: ++index, + sub_kelompok: item.sub_kelompok, + kode: item.kode, + jenisGangguan: item.tipe_permasalahan, laporan: { - lebihSla: item.total_diatas_sla_response, - kurangSla: item.total_dibawah_sla_response - } - }, - recoveryTime: { - menit: { - total: item.total_durasi_recovery, - rataRata: item.avg_durasi_recovery, - max: item.max_durasi_recovery, - min: item.min_durasi_recovery + total: item.total, + sudahSelesai: { + jml: item.total_selesai, + persen: item.persen_selesai + }, + belumSelesai: { + jml: item.total_inproses, + persen: item.persen_inproses + } }, - laporan: { - lebihSla: item.total_diatas_sla_recovery, - kurangSla: item.total_dibawah_sla_recovery + responseTime: { + menit: { + total: item.total_durasi_response, + rataRata: item.avg_durasi_response, + max: item.max_durasi_response, + min: item.min_durasi_response + }, + laporan: { + lebihSla: item.total_diatas_sla_response, + kurangSla: item.total_dibawah_sla_response + } + }, + recoveryTime: { + menit: { + total: item.total_durasi_recovery, + rataRata: item.avg_durasi_recovery, + max: item.max_durasi_recovery, + min: item.min_durasi_recovery + }, + laporan: { + lebihSla: item.total_diatas_sla_recovery, + kurangSla: item.total_dibawah_sla_recovery + } } } } - }) + ) } reportMeta.value = filters.value }) + onError((queryError) => { console.log(queryError) }) + + watch(loading, (value) => { + loadingData.value = value + }) } const filters = ref() diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue index 607a676..04511e0 100755 --- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue +++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue @@ -25,7 +25,7 @@ column-resizing-mode="widget" :word-wrap-enabled="true" > - +