From 77b4eddadf74b508c49adcafd127a49aeac21e56 Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Mon, 25 Mar 2024 11:31:01 +0700 Subject: [PATCH] Refactor code: Remove console.log statements and fix column width in RKeluhan_ALL.vue --- .../Gangguan/Rekap/RGangguan_PerTanggal.vue | 3 - .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue | 12 +- .../Keluhan/Rekap/RKeluhan_BerdasarMedia.vue | 87 ++++++---- .../Rekap/RKeluhan_PerFungsiBidang.vue | 95 +++++++---- .../Rekap/RKeluhan_PerJenisKeluhan.vue | 100 +++++++---- .../Rekap/RKeluhan_PerKelompokKeluhan.vue | 94 +++++++---- .../Keluhan/Rekap/RKeluhan_PerTanggal.vue | 90 ++++++---- .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue | 73 ++++++-- .../Keluhan/Rekap/RKeluhan_RatingPerUnit.vue | 158 ++++++++++++------ src/utils/api/api.graphql.ts | 4 +- 10 files changed, 484 insertions(+), 232 deletions(-) diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue index 9abaa52..fe72954 100755 --- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue +++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue @@ -781,9 +781,6 @@ const filterData = (params: any) => { if (queryResult.networkStatus == 7) { loadingData.value = false } - console.log('loading', queryResult.loading) - console.log('networkStatus', queryResult.networkStatus) - console.log('stale', queryResult.stale) }) onError((error) => { diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue index 89a628b..11772d9 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue @@ -19,13 +19,11 @@ :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged" - :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" - :word-wrap-enabled="true" > - + @@ -44,7 +42,7 @@ :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" /> - + @@ -863,7 +857,7 @@ const getDetail = async () => { result.onResult((queryResult) => { if (queryResult.data != undefined) { - dataSub.value = queryResult.data.detailRekapitulasiKeluhanAll + dataSub.value = queryResult.data.detailKeluhanAll } }) diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue index ed09da0..a4ae507 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue @@ -132,7 +132,7 @@ (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery( - queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, - { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: 0, - idUid: 0, - idUp3: 0, - media: '' - } -) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { ulp, 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), - idUlp: ulp ? ulp.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0, - media: '' - }) + const { onResult, onError, loading, refetch } = useQuery( + queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, + { + 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, + media: '' + } + ) onResult((queryResult) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia } - console.log(queryResult.data) }) onError((error) => { @@ -553,7 +547,41 @@ const filterData = (params: any) => { }) } -const getDetail = () => {} +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 = () => { @@ -562,8 +590,8 @@ const clearSelection = () => { } const showDetail = () => { clearSelection() + dataSubSelected.value = null dialogDetail.value = true - console.log(dataSelected.value) getDetail() } @@ -599,14 +627,13 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } const filters = ref() diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue index 87fd888..fb0d8c8 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue @@ -400,7 +400,7 @@ (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery( - queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, - { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: 0, - idUid: 0, - idUp3: 0 - } -) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { ulp, 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), - idUlp: ulp ? ulp.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0 - }) + + const { onResult, onError, loading, refetch } = useQuery( + queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, + { + 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 + } + ) onResult((queryResult) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang } - console.log(queryResult.data) }) onError((error) => { @@ -826,7 +819,39 @@ const filterData = (params: any) => { } const getDetail = () => { - dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang + 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) @@ -836,6 +861,7 @@ const clearSelection = () => { } const showDetail = () => { clearSelection() + dataSubSelected.value = null dialogDetail.value = true getDetail() } @@ -872,17 +898,22 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } -const filters = ref({ groupBy: false }) +const filters = ref({ + uid: 0, + up3: 0, + ulp: 0, + periode: '', + groupBy: false +}) onMounted(() => { if (import.meta.env.DEV) { diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue index 4312c34..2dba16b 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue @@ -51,9 +51,8 @@ css-class="custom-table-column" :width="100" alignment="center" - :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" - data-field="no" + data-field="number" caption="No" cell-template="formatNumber" /> @@ -917,7 +916,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference' import { queries } from '@/utils/api/api.graphql' import { dummyData } from '@/utils/dummy' import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers' +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) @@ -931,38 +934,36 @@ const closedialogDetail = () => (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery( - queries.keluhan.rekap.keluhanPerJenisKeluhan, - { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: 0, - idUid: 0, - idUp3: 0 - } -) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { ulp, 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), - idUlp: ulp ? ulp.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0 - }) + const { onResult, onError, loading, refetch } = useQuery( + queries.keluhan.rekap.keluhanPerJenisKeluhan, + { + 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 + } + ) onResult((queryResult) => { if (queryResult.data != undefined) { - data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan + data.value = [...queryResult.data.rekapitulasiKeluhanPerJenisKeluhan] + .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan)) + .map((item: any, index: number) => { + return { + ...item, + number: index + 1 + } + }) } - console.log(queryResult.data) }) onError((error) => { @@ -975,7 +976,39 @@ const filterData = (params: any) => { } const getDetail = () => { - // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan + 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) @@ -985,6 +1018,7 @@ const clearSelection = () => { } const showDetail = () => { clearSelection() + dataSubSelected.value = null dialogDetail.value = true getDetail() } @@ -1021,21 +1055,27 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } const filters = ref() onMounted(() => { if (import.meta.env.DEV) { - data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan + data.value = [...dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan] + .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan)) + .map((item: any, index: number) => { + return { + ...item, + number: index + 1 + } + }) } }) diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue index b6befb8..43dbf19 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue @@ -53,7 +53,6 @@ alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" - data-field="no" caption="No" cell-template="formatNumber" /> @@ -412,7 +411,7 @@ (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery( - queries.keluhan.rekap.keluhanPerKelompokKeluhan, - { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: 0, - idUid: 0, - idUp3: 0 - } -) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { ulp, 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), - idUlp: ulp ? ulp.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0 - }) + const { onResult, onError, loading, refetch } = useQuery( + queries.keluhan.rekap.keluhanPerKelompokKeluhan, + { + 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 + } + ) onResult((queryResult) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan } - console.log(queryResult.data) }) onError((error) => { @@ -833,7 +825,39 @@ const filterData = (params: any) => { } const getDetail = () => { - dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan + 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) @@ -843,6 +867,7 @@ const clearSelection = () => { } const showDetail = () => { clearSelection() + dataSubSelected.value = null dialogDetail.value = true getDetail() } @@ -879,17 +904,22 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } -const filters = ref({ groupBy: false }) +const filters = ref({ + uid: 0, + up3: 0, + ulp: 0, + periode: '', + groupBy: false +}) onMounted(() => { if (import.meta.env.DEV) { diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue index 82b4a7b..f9fbd44 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue @@ -415,7 +415,7 @@ (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerTanggal, { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: '', - idUid: 0, - idUp3: 0 -}) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { ulp, 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), - idUlp: ulp ? ulp.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0 - }) + const { onResult, onError, loading, refetch } = useQuery( + queries.keluhan.rekap.keluhanPerTanggal, + { + 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 + } + ) onResult((queryResult) => { if (queryResult.data != undefined) { data.value = queryResult.data.rekapitulasiKeluhanPerTanggal } - console.log(queryResult.data) }) onError((error) => { @@ -833,7 +829,39 @@ const filterData = (params: any) => { } const getDetail = () => { - dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal + 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) @@ -843,6 +871,7 @@ const clearSelection = () => { } const showDetail = () => { clearSelection() + dataSubSelected.value = null dialogDetail.value = true getDetail() } @@ -879,17 +908,22 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } -const filters = ref({ groupBy: false }) +const filters = ref({ + uid: 0, + up3: 0, + ulp: 0, + periode: '', + groupBy: false +}) onMounted(() => { if (import.meta.env.DEV) { diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue index 0415487..168286a 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue @@ -49,11 +49,10 @@ @@ -915,7 +914,11 @@ import { useQuery } from '@vue/apollo-composable' import { formatWaktu } from '@/components/Form/FiltersType/reference' import { queries } from '@/utils/api/api.graphql' import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers' +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) @@ -929,19 +932,11 @@ const closedialogDetail = () => (dialogDetail.value = false) const loadingData = ref(false) const loadingSubData = ref(false) -const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, { - dateFrom: new Date('2023-10-01').toISOString().slice(0, 10), - dateTo: new Date('2023-10-01').toISOString().slice(0, 10), - idUlp: 0, - idUid: 0, - idUp3: 0 -}) - const filterData = (params: any) => { const dateValue = params.periode.split(' s/d ') const { ulp, uid, up3 } = params - refetch({ + const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, { dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10), @@ -955,9 +950,15 @@ const filterData = (params: any) => { onResult((queryResult) => { if (queryResult.data != undefined) { - data.value = queryResult.data.rekapitulasiKeluhanPerUnit + data.value = [...queryResult.data.rekapitulasiKeluhanPerUnit] + .sort((a, b) => a.nama_up3.localeCompare(b.nama_up3)) + .map((item, index) => { + return { + ...item, + number: index + 1 + } + }) } - console.log(queryResult.data) }) onError((error) => { @@ -970,7 +971,39 @@ const filterData = (params: any) => { } const getDetail = () => { - // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit + 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) @@ -980,8 +1013,8 @@ const clearSelection = () => { } const showDetail = () => { clearSelection() + dataSubSelected.value = null dialogDetail.value = true - console.log(dataSelected.value) getDetail() } @@ -1017,14 +1050,13 @@ const onExporting = (e: any) => { const onDataSelectionChanged = ({ selectedRowsData }: any) => { if (selectedRowsData[0] != undefined) { dataSelected.value = selectedRowsData[0] + showDetail() } - showDetail() } const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { const data = selectedRowsData[0] dataSubSelected.value = data - console.log(data) } const filters = ref() @@ -1438,6 +1470,13 @@ onMounted(() => { total_diatas_sla_recovery: 27 } ] + .sort((a, b) => a.nama_up3.localeCompare(b.nama_up3)) + .map((item, index) => { + return { + ...item, + number: index + 1 + } + }) } }) diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue index df825ee..ad4b4e8 100755 --- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue +++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue @@ -13,7 +13,7 @@ :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" - @selection-changed="onSelectionChanged" + @selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true" @@ -29,8 +29,7 @@ :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" - v-if="loading" - v-model:visible="loading" + v-model:visible="loadingData" :enabled="true" /> @@ -202,7 +201,7 @@ diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts index 804bcee..7988456 100755 --- a/src/utils/api/api.graphql.ts +++ b/src/utils/api/api.graphql.ts @@ -682,14 +682,14 @@ export const queries = { } `, rekapKeluhanAllDetail: gql` - query detailRekapitulasiKeluhanAll( + query detailKeluhanAll( $dateFrom: Date! $dateTo: Date! $idUlp: Int! $idUid: Int! $idUp3: Int! ) { - detailRekapitulasiKeluhanAll( + detailKeluhanAll( dateFrom: $dateFrom dateTo: $dateTo idUlp: $idUlp