Add grouping columns to MonalisaGR_GangguanBelumSelesai.vue

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

@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,6 +52,30 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
+      <DxColumn
+        alignment="center"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="1"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="2"
+      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
         <DxColumn
           :width="150"
@@ -438,6 +463,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPager,
   DxPaging,
@@ -483,14 +509,20 @@ const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
 const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
   const query = {
-    regional: regional.name == 'Semua Regional' ? null : regional.id,
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.nama_regional,
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
@@ -548,23 +580,22 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
+  const { bulan, tahun } = filters.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
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    bulan: bulan.id,
+    tahun: tahun.id,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanBelumSelesaiDetail, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        dataSub.value = result.data.data.detailMonalisaGangguanBelumSelesai
       } else {
         dataSub.value = []
       }