Add shading color to DxLoadPanel components

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -35,6 +35,7 @@
         :show-navigation-buttons="true"
       /> -->
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -543,6 +544,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -1014,12 +1016,11 @@ import {
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1043,7 +1044,15 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+  dataSelected.value = null
+  dataSubSelected.value = null
+}
+
 const filterData = (params: any) => {
+  resetData()
   loadingData.value = true
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
@@ -1063,6 +1072,7 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiAllGangguan
+      loadingData.value = false
     }
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
@@ -1070,17 +1080,18 @@ const filterData = (params: any) => {
 
   onError((error) => {
     console.log(error)
+    loadingData.value = false
   })
 
   watch(loading, (value) => {
-    loadingData.value = value
+    // loadingData.value = value
   })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
-  const ref = dataSelected.value
+  const selected = dataSelected.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -1089,43 +1100,59 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
-    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    posko: selected?.id_posko ? selected?.id_posko : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    idRegu: selected?.id_regu ? selected?.id_regu : 0,
+    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: selected?.media ? selected?.media : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
+  await getGangguanDetail(query)
+    .then((result) => {
+      // console.table(result.data.data.detailGangguan)
+      dataSub.value = result.data.data.detailGangguan
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
+  // const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
+  //   fetchPolicy: 'network-only'
+  // })
 
-  onError((error) => {
-    console.log(error)
-  })
+  // result.onResult((queryResult) => {
+  //   if (queryResult.data != undefined) {
+  //     dataSub.value = queryResult.data.detailGangguan
+  //     console.table(queryResult.data.detailGangguan)
+  //   }
+  // })
 
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  // watch(result, (value) => {
+  //   if (dataSub.value != value.detailGangguan) {
+  //     console.table(value.detailGangguan)
+  //   }
+  // })
+
+  // result.onError((error) => {
+  //   console.log(error)
+  // })
+
+  // watch(result.loading, (value) => {
+  //   loadingSubData.value = value
+  // })
 }
 const currentDataSelected = ref<any>(null)
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    if (currentDataSelected.value == dataSelected.value) {
-      dataSub.value = []
-      dataSubSelected.value = null
-      dialogDetail.value = true
-      getDetail()
-    }
+  if (currentDataSelected.value === dataSelected.value) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDetail.value = true
+    getDetail()
   }
 }
 
@@ -1263,9 +1290,11 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  if (dataSelected.value != selectedRowsData[0]) {
+  if (selectedRowsData[0] != dataSelected.value) {
     dataSelected.value = selectedRowsData[0]
     currentDataSelected.value = selectedRowsData[0]
+    console.log('new data selected')
+
     showDetail()
   }
 }