Merge branch 'dev-bagus' of https://github.com/defuj/eis into dev-defuj

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

@@ -28,7 +28,7 @@
     >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -36,7 +36,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -593,7 +593,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -601,7 +601,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -1045,6 +1045,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1064,11 +1066,7 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
 import { requestGraphQl, queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1082,6 +1080,7 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 import { getDataRowGroup } from '@/utils/helper'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1326,6 +1325,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1341,7 +1341,7 @@ const showDetail = () => {
   if (agreeToShowDialog.value) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -174,7 +174,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -182,7 +182,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -481,12 +481,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -515,6 +517,7 @@ import {
   exportDetailToXLSX,
   exportDetailToPDF
 } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -566,6 +569,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -578,7 +582,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
+  // dialogDetail.value = true
   getDetail()
 }
 

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

@@ -8,6 +8,7 @@
   >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -29,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -37,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -169,7 +170,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -177,7 +178,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -467,12 +468,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -500,6 +503,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -560,6 +564,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -573,7 +578,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (date.value != '') {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -29,7 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -37,7 +37,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -207,7 +207,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -215,7 +215,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -414,6 +414,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -421,7 +423,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -445,6 +447,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_CTTM'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -544,6 +547,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -556,7 +560,7 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -29,7 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -37,7 +37,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -455,7 +455,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -463,7 +463,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -753,6 +753,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -786,6 +788,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -839,6 +842,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -851,7 +855,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
+  // dialogDetail.value = true
   getDetail()
 }
 

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

@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -426,6 +426,8 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -453,6 +455,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

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

@@ -33,7 +33,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -41,7 +41,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -495,7 +495,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -503,7 +503,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -797,12 +797,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -831,6 +833,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -956,6 +959,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -969,7 +973,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -345,7 +345,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -353,7 +353,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -1099,12 +1099,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type18 from '@/components/Form/FiltersType/Type18.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -1135,6 +1137,8 @@ import {
 } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 import { getMonthNumber } from '@/utils/texts'
 import { getDataRowGroup } from '@/utils/helper'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -1219,6 +1223,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -1232,7 +1237,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -33,7 +33,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -41,7 +41,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -582,7 +582,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -590,7 +590,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -880,6 +880,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -915,6 +917,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -978,6 +981,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -991,7 +995,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -592,7 +592,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -600,7 +600,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -890,13 +890,15 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -923,6 +925,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -989,6 +992,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -1002,7 +1006,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -340,7 +340,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -348,7 +348,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -642,6 +642,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -673,6 +675,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -740,6 +743,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -753,7 +757,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -309,7 +309,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -317,7 +317,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -643,6 +643,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -676,6 +678,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -741,6 +744,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -754,7 +758,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

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

@@ -8,6 +8,7 @@
   >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -27,7 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -35,7 +36,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -299,7 +300,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -307,7 +308,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -633,6 +634,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -665,6 +668,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -734,6 +738,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -747,7 +752,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }

src/report/Gangguan/Rekap/RGangguan_ALL.ts

@@ -687,7 +687,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -719,7 +722,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts

@@ -440,7 +440,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -472,7 +475,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts

@@ -444,7 +444,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -476,7 +479,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_CTTM.ts

@@ -455,7 +455,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -487,7 +490,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts

@@ -602,7 +602,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -634,7 +637,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts

@@ -538,7 +538,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)

src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts

@@ -655,7 +655,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -687,7 +690,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_KTI.ts

@@ -521,7 +521,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -553,7 +556,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_PerPosko.ts

@@ -635,7 +635,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -667,7 +670,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_PerRegu.ts

@@ -706,7 +706,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -738,7 +741,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts

@@ -700,7 +700,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -732,7 +735,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts

@@ -451,7 +451,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 8, column: 1 }
+    topLeftCell: { row: 8, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -483,7 +486,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts

@@ -440,7 +440,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -472,7 +475,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(