From b69d2024fef5575cf207e37d36725baf8305b815 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 15:34:15 +0700
Subject: [PATCH] Update Keluhan and Gangguan components

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 24 ++++++++--
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |  1 +
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        | 14 ++++--
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     | 25 +++++++----
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     | 22 +++++-----
 src/utils/api/api.graphql.ts                  | 44 +++++++++++++++++++
 6 files changed, 105 insertions(+), 25 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index ac43960..26db7cd 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -69,6 +69,7 @@
         css-class="custom-table-column"
         cell-template="formatText"
         :group-index="0"
+        v-if="filters?.uid ? filters?.uid.id == 0 : 0"
       />
       <DxColumn
         :width="150"
@@ -77,7 +78,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="1"
+        :group-index="filters?.uid.id != 0 ? 0 : 1"
       />
       <DxColumn
         :width="150"
@@ -86,7 +87,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="2"
+        :group-index="filters?.uid.id != 0 ? 0 : 2"
       />
       <DxColumn
         :width="150"
@@ -95,7 +96,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="3"
+        :group-index="filters?.uid.id != 0 ? 0 : 3"
       />
       <!-- <DxColumn
         :width="150"
@@ -1108,6 +1109,21 @@ const reportMeta = ref({
   periode: ''
 })
 
+const getDataRowGroup = (data: any): any => {
+  if (data.items) {
+    if (Array.isArray(data.items)) {
+      return getDataRowGroup(data.items)
+    } else {
+      if (data.items.collapsedItems) {
+      }
+    }
+  } else if (data.collapsedItems) {
+    return {}
+  } else {
+    return {}
+  }
+}
+
 const onCellClicked = (e: any) => {
   console.log('cell clicked', e)
   //   console.log('group cell clicked', e.column.caption)
@@ -1116,6 +1132,8 @@ const onCellClicked = (e: any) => {
     groupDialog.value = true
     groupIndex.value = e.row.groupIndex
     setAgreementDialog(e.column.caption)
+    const data = getDataRowGroup(e.data)
+    console.log('data', data)
     if (e.row.groupIndex == 0) {
       //
     } else if (e.row.groupIndex == 1) {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 63e6afa..1f51c5b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -24,6 +24,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxPaging :enabled="false" />
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
       <DxLoadPanel
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 46e47fd..9738ecd 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -67,8 +67,8 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field="tipe_keluhan"
-        caption="Jenis Keluhan"
+        data-field="grouping_tipe_keluhan"
+        caption=""
         name="tipeKeluhan"
         css-class="custom-table-column"
         :group-index="0"
@@ -777,7 +777,13 @@
 
           <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
-              {{ data.text }}
+              {{
+                isNumber(data.text)
+                  ? data.column.caption == '%'
+                    ? formatPercentage(data.text)
+                    : formatNumber(data.text)
+                  : data.text
+              }}
             </p>
           </template>
 
@@ -1033,7 +1039,7 @@ const getDetail = async () => {
     media: '',
     tanggal: '',
     namaIssuetype: '',
-    namaSubissuetype: ''
+    namaSubissuetype: selected?.tipe_keluhan ? selected?.tipe_keluhan : ''
   }
 
   loadingSubData.value = true
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 0e38f64..257da93 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -64,7 +64,7 @@
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="120"
@@ -836,6 +836,7 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -859,10 +860,18 @@ const filterData = async (params: any) => {
   }
 
   loadingData.value = true
-  await requestGraphQl(queries.keluhan.rekap.keluhanPerKelompokKeluhan, query)
+  await requestGraphQl(
+    params.groupBy
+      ? queries.keluhan.rekap.keluhanPerKelompokKeluhanUID
+      : queries.keluhan.rekap.keluhanPerKelompokKeluhan,
+    query
+  )
     .then((result) => {
+      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
-        data.value = result.data.data.rekapitulasiKeluhanPerKelompokKeluhan
+        data.value = isGroupBy.value
+          ? result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid
+          : result.data.data.rekapitulasiKeluhanPerKelompokKeluhan
       } else {
         data.value = []
       }
@@ -886,14 +895,14 @@ const getDetail = async () => {
     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,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    idUlp: 0,
+    idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
+    idUp3: 0,
+    namaRegional: '',
     isSelesai: progressSelected.value,
     media: '',
     tanggal: '',
-    namaIssuetype: '',
+    namaIssuetype: selected?.kelompok ? selected?.kelompok : '',
     namaSubissuetype: ''
   }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 6eb926d..44fc410 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -71,7 +71,7 @@
         caption="UID"
         css-class="custom-table-column"
         :group-index="0"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="170"
@@ -839,6 +839,7 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
@@ -864,6 +865,7 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.keluhan.rekap.keluhanPerTanggal, query)
     .then((result) => {
+      isGroupBy.value = params.groupBy
       if (result.data.data != undefined) {
         data.value = result.data.data.rekapitulasiKeluhanPerTanggal
       } else {
@@ -883,15 +885,15 @@ const getDetail = async () => {
   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,
+    dateFrom: selected?.tanggal_lapor
+      ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
+      : '',
+    dateTo: selected?.tanggal_lapor
+      ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
+      : '',
+    idUlp: 0,
+    idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
+    idUp3: 0,
     namaRegional: '',
     isSelesai: progressSelected.value,
     media: '',
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index a690bae..f8ccf8d 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -421,6 +421,50 @@ export const queries = {
           }
         }
       `,
+      keluhanPerKelompokKeluhanUID: gql`
+        query rekapitulasiKeluhanPerKelompokKeluhanUid(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPerKelompokKeluhanUid(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            kelompok
+            total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_durasi_response
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            total_durasi_recovery
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
       keluhanPerKelompokKeluhan: gql`
         query rekapitulasiKeluhanPerKelompokKeluhan(
           $dateFrom: Date!