Update DxGrouping configuration in MonalisaGR_JumlahKaliGangguan.vue

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"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -419,7 +418,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -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<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+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<DxDataGrid | null>(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,9 +568,11 @@ 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) => {
+      data.value = [...queryResult.data.rekapitulasiPerJenisGangguan].map(
+        (item: any, index: number) => {
           return {
             no: ++index,
             sub_kelompok: item.sub_kelompok,
@@ -564,14 +614,20 @@ const filterData = (params: any) => {
               }
             }
           }
-      })
+        }
+      )
     }
 
     reportMeta.value = filters.value
   })
+
   onError((queryError) => {
     console.log(queryError)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue

@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />