From 71f117569c98cd08be14ab0145e1995671622311 Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Mon, 18 Mar 2024 12:01:34 +0700 Subject: [PATCH] update detail dialog per posko --- .../Gangguan/Rekap/RGangguan_PerPosko.vue | 206 +++++++++++++----- 1 file changed, 148 insertions(+), 58 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue index 86bfb66..f35c592 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue @@ -34,8 +34,7 @@ :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" - v-if="loading" - v-model:visible="loading" + v-model:visible="loadingData" :enabled="true" /> @@ -568,7 +567,7 @@

No Laporan:

- +

Tgl Lapor:

- +

Tgl Datang:

- +

Tgl Nyala:

- +

Durasi Response Time:

- +

Durasi Recovery Time:

- +

Status:

- +

Referensi Marking:

- +

IDPEL/NO METER:

- +

Nama Pelapor:

- +

Alamat Pelapor:

- +

No Telp Pelapor:

- +

Keterangan Pelapor:

- +

Posko:

- +

Tindakan:

- +
-

Penyebab:

- +

Penyeban:

+
@@ -804,7 +843,7 @@ import Filters from '@/components/Form/Filters.vue' import { formatWaktu } from '@/components/Form/FiltersType/reference' import Type8 from '@/components/Form/FiltersType/Type8.vue' -import { onMounted, ref } from 'vue' +import { onMounted, ref, watch } from 'vue' import { DxDataGrid } from 'devextreme-vue' import { DxColumn, @@ -830,7 +869,11 @@ import { queries } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' import DetailDialog from '@/components/Dialogs/DetailDialog.vue' import InputText from '@/components/InputText.vue' +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) @@ -840,10 +883,55 @@ const dataSub = ref([]) const dataSelected = ref() const dataSubSelected = ref() const dialogDetail = ref(false) +const loadingData = ref(false) const loadingSubData = ref(false) +const getDetail = () => { + loadingSubData.value = true + const dateValue = filters.value.periode.split(' s/d ') + const ref = 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), + posko: ref.id_posko, + idUid: ref.id_uid, + idUp3: ref.id_up3 + } + + const { onResult, onError, loading, refetch } = useQuery( + queries.gangguan.rekap.gangguanAllDetail, + query + ) + + refetch(query) + + onResult((queryResult) => { + if (queryResult.data != undefined) { + dataSub.value = queryResult.data.detailGangguan + } + }) + + onError((error) => { + console.log(error) + }) + + watch(loading, (value) => { + loadingSubData.value = value + }) +} + const showDetail = () => { - dialogDetail.value = true + if (dataSelected.value != null) { + dataSub.value = [] + dataSubSelected.value = null + dialogDetail.value = true + getDetail() + } } const closeDialog = () => { @@ -881,7 +969,7 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { dataSelected.value = selectedRowsData[0] - console.log(data) + showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { @@ -889,28 +977,25 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { console.log(data) } -const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerPosko, { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - posko: 0, - idUid: 0, - idUp3: 0 -}) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { posko, uid, up3 } = params - refetch({ - dateFrom: dateValue[0] - ? dateValue[0].split('-').reverse().join('-') - : new Date().toISOString().slice(0, 10), - dateTo: dateValue[1] - ? dateValue[1].split('-').reverse().join('-') - : new Date().toISOString().slice(0, 10), - posko: posko ? posko.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0 - }) + + const { onResult, onError, loading, refetch } = useQuery( + queries.gangguan.rekap.gangguanPerPosko, + { + dateFrom: dateValue[0] + ? dateValue[0].split('-').reverse().join('-') + : new Date().toISOString().slice(0, 10), + dateTo: dateValue[1] + ? dateValue[1].split('-').reverse().join('-') + : new Date().toISOString().slice(0, 10), + posko: posko ? posko.id : 0, + idUid: uid ? uid.id : 0, + idUp3: up3 ? up3.id : 0 + } + ) + onResult((queryResult) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiGangguanPerPosko.sort((a: any, b: any) => @@ -921,9 +1006,14 @@ const filterData = (params: any) => { console.log(queryResult.loading) console.log(queryResult.networkStatus) }) + onError((error) => { console.log(error) }) + + watch(loading, (value) => { + loadingData.value = value + }) } const filters = ref()