From 092227762477b9bf2ee15ed79c94edacdc78c66e Mon Sep 17 00:00:00 2001 From: Dede Fuji Abdul Date: Thu, 28 Mar 2024 10:12:58 +0700 Subject: [PATCH] add another dialog type --- .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 312 ++++++++++++++---- 1 file changed, 253 insertions(+), 59 deletions(-) diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue index 0a15f64..d0f71a3 100755 --- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue +++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue @@ -14,7 +14,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" @@ -36,8 +36,7 @@ :show-indicator="showIndicator" :show-pane="showPane" :shading="shading" - v-if="loading" - v-model:visible.sync="loading" + v-model:visible.sync="loadingData" :enabled="true" /> @@ -60,7 +59,7 @@ alignment="center" data-field="no_laporan" caption="No Laporan" - cell-template="cellCenter" + cell-template="formatText" /> - - @@ -202,10 +195,11 @@ -
+

No Laporan:

@@ -302,6 +296,130 @@ />
+ +
+
+ + + + + + + + + + + + + + + + + + +
+
+ +
+
+
+

No Laporan:

+ +
+ +
+

Create Date:

+ +
+ +
+

User:

+ +
+ +
+

Keterangan:

+ +
+
+
@@ -309,7 +427,7 @@ import Filters from '@/components/Form/Filters.vue' import Type6 from '@/components/Form/FiltersType/Type6.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, @@ -326,14 +444,25 @@ import { useQuery } from '@vue/apollo-composable' import { queries } from '@/utils/api/api.graphql' import { formatNumber, isNumber } from '@/utils/numbers' import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K' +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 dataSelected = 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 detailType = ref('form') // form, table + const filters = ref() const reportMeta = ref({ uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' }, @@ -343,63 +472,128 @@ const reportMeta = ref({ minJmlLapor: 1, maxJmlLapor: 1 }) -const dataGridRef = ref(null) -const clearSelection = () => { - const dataGrid = dataGridRef.value!.instance! - dataGrid.clearSelection() -} -const onSelectionChanged = ({ selectedRowsData }: any) => { - if (selectedRowsData[0] != undefined) { - dataSelected.value = selectedRowsData[0] + +const setDetailType = (columnCaption: string) => { + console.log('Column Caption', columnCaption) + + if (columnCaption == 'Jml Lapor') { + detailType.value = 'table' + } else { + detailType.value = 'form' } - clearSelection() - showDetail() } -const showDetail = () => (dialogDetail.value = true) +const getDetail = () => { + const dateValue = filters.value.periode.split(' s/d ') + const selected = dataSelected.value -const closeDialog = () => (dialogDetail.value = false) - -const { onResult, onError, loading, refetch } = useQuery( - queries.gangguan.daftar.melaporLebihDariSatuKali, - { - minJmlLapor: 1, - maxJmlLapor: 1, - dateFrom: new Date().toISOString().slice(0, 10), - dateTo: new Date().toISOString().slice(0, 10), - posko: 0, - idUid: 0, - idUp3: 0 - } -) - -const filterData = (params: any) => { - const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params - const dateValue = params.periode.split(' s/d ') - refetch({ - minJmlLapor: minJmlLapor ? minJmlLapor : 1, - maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1, + 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: posko ? posko.id : 0, - idUid: uid ? uid.id : 0, - idUp3: up3 ? up3.id : 0 + 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 showDetail = () => { + clearSelection() + dataSubSelected.value = null + dialogDetail.value = true + if (detailType.value == 'table') { + getDetail() + } +} + +const onDataSelectionChanged = ({ + selectedRowsData, + selectedRowKeys, + currentSelectedRowKeys, + element, + component +}: any) => { + if (selectedRowsData[0] != undefined) { + // console.log(selectedRowKeys) + // console.log(currentSelectedRowKeys) + // console.log(element) + // console.log(component) + + dataSelected.value = selectedRowsData[0] + showDetail() + } +} + +const onDataSubSelectionChanged = ({ selectedRowsData }: any) => { + const data = selectedRowsData[0] + dataSubSelected.value = data +} + +const closeDialog = () => (dialogDetail.value = false) + +const filterData = (params: any) => { + const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params + const dateValue = params.periode.split(' s/d ') + + const { onResult, onError, loading, refetch } = useQuery( + queries.gangguan.daftar.melaporLebihDariSatuKali, + { + minJmlLapor: minJmlLapor ? minJmlLapor : 1, + maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1, + 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.daftarGangguanMelaporLebihDariSatuKali } reportMeta.value = filters.value - console.log(queryResult.data) }) + onError((error) => { console.log(error) }) + + watch(loading, (value) => { + loadingData.value = value + }) } const onExporting = (e: any) => {