fix: anomali keluhan

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue

@@ -18,7 +18,7 @@
     />
   </Filters>
 
-  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :filters="filters" />
+  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :grouping="grouping" :filters="filters" />
   <Anomali_LAPPKU_LPP :data="dataSecond" :filters="filters" />
 </template>
 
@@ -43,6 +43,21 @@ const filters = ref({
   up3: 0
 })
 
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
+
 const resetData = () => {
   data.value = []
   dataSecond.value = []
@@ -53,6 +68,46 @@ const filterData = async (params: any) => {
   const { ulp, uid, up3, jenisLaporan } = params
   console.table('LAPPGU', jenisLaporan)
 
+  var groupList: any[] = [
+    {
+      data: '',
+      caption: 'Semua Unit'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Semua Unit') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   const dateValue = params.periode.split(' s/d ')
   const query = {
     dateFrom: dateValue[0]

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    @cell-click="onCellClicked"
     ref="dataGridRef"
     :data-source="data"
     v-if="loading == false"
@@ -20,7 +21,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
-    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
+    <DxGrouping :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -42,35 +43,15 @@
       cell-template="formatText"
     />
     <DxColumn
+      v-if="grouping.length > 0"
+      v-for="(group, index) in grouping"
+      :width="150"
       alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field=""
-      caption="Semua Unit"
+      :data-field="group.data"
+      :caption="group.caption"
       css-class="custom-table-column"
-      :group-index="0"
-    />
-    <DxColumn
-      alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field="id_uid"
-      caption="UID"
-      css-class="custom-table-column"
-      :group-index="1"
-      name="namaUID"
-      :calculate-group-value="(rowData: any) => rowData.nama_uid"
-    />
-    <DxColumn
-      alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field="id_up3"
-      caption="UP3"
-      css-class="custom-table-column"
-      :group-index="1"
-      name="namaUID"
-      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      cell-template="formatText"
+      :group-index="index"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
@@ -275,12 +256,13 @@
       </p>
     </template>
 
-    <DxSummary>
+    <DxSummary :calculate-custom-summary="calculateCustomSummary">
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_cc123"
-        summary-type="sum"
+        name="wo_cc123"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -288,7 +270,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_pln_mobile"
-        summary-type="sum"
+        name="wo_pln_mobile"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -296,7 +279,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_loket"
-        summary-type="sum"
+        name="wo_loket"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -304,7 +288,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_lainnya"
-        summary-type="sum"
+        name="wo_lainnya"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -312,7 +297,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_total"
-        summary-type="sum"
+        name="wo_total"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -320,24 +306,27 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_pln_mobile"
-        summary-type="sum"
-        css-class="!text-right"
+        summary-type="custom"
+        name="anomali_pln_mobile"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_cc123"
-        summary-type="sum"
-        css-class="!text-right"
+        summary-type="custom"
+        name="anomali_cc123"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="total_anomali"
-        summary-type="sum"
-        css-class="!text-right"
+        summary-type="custom"
+        name="total_anomali"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
 
@@ -345,24 +334,27 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_pln_mobile"
-        summary-type="avg"
+        summary-type="custom"
         css-class="!text-right"
+        name="persen_anomali_pln_mobile"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_cc123"
-        summary-type="avg"
+        summary-type="custom"
         css-class="!text-right"
+        name="persen_anomali_cc123"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="total_persen_anomali"
-        summary-type="avg"
+        summary-type="custom"
         css-class="!text-right"
+        name="total_persen_anomali"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
     </DxSummary>
@@ -730,7 +722,7 @@
     </div>
   </DetailDialog>
 
-  <BufferDialog v-if="loading" />
+  <BufferDialog v-if="loading || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -764,6 +756,7 @@ import {
   exportDetailToDOCX
 } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPT'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { getDataRowGroup } from '@/utils/helper'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -775,6 +768,10 @@ const props = defineProps({
   loading: {
     type: Boolean,
     default: false
+  },
+  grouping: {
+    type: Array as () => any[],
+    default: []
   }
 })
 const filters = ref<any>(computed(() => props.filters))
@@ -789,6 +786,9 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const mediaSelected = ref<any>(null)
 const reportMeta = ref<any>(computed(() => props.filters))
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+const groupIndex = ref(0)
 
 const setParameterRequest = (media: any) => {
   mediaSelected.value = media
@@ -800,6 +800,27 @@ const setParameterRequest = (media: any) => {
   }
 }
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    if (e.column.dataField == 'anomali_pln_mobile') {
+      setParameterRequest('PLN Mobile')
+    } else if (e.column.dataField == 'anomali_cc123') {
+      setParameterRequest('Call PLN 123')
+    } else if (e.column.dataField == 'total_anomali') {
+      setParameterRequest('')
+    } else {
+      setParameterRequest(null)
+    }
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const resetData = () => {
   dataSub.value = []
   dataSubSelected.value = null
@@ -814,20 +835,51 @@ const getDetail = async () => {
 
   const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
-  const query = {
+  let 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,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
     namaRegional: '',
     media: mediaSelected.value
   }
 
+  if (groupDialog.value) {
+    if (props.grouping[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (props.grouping[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    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,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      media: mediaSelected.value
+    }
+  }
+
   loadingSubData.value = true
   await requestGraphQl(
     jenisLaporan.name == 'Laporan Berulang Unit'
@@ -862,6 +914,135 @@ const getDetail = async () => {
     })
 }
 
+let wo_cc123 = 0
+let wo_pln_mobile = 0
+let wo_loket = 0
+let wo_lainnya = 0
+let wo_total = 0
+let anomali_pln_mobile = 0
+let anomali_cc123 = 0
+let total_anomali = 0
+let persen_anomali_pln_mobile = 0
+let persen_anomali_cc123 = 0
+let total_persen_anomali = 0
+
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'wo_cc123') {
+    if (options.summaryProcess === 'calculate') {
+      wo_cc123 += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_cc123
+    }
+  }
+
+  if (options.name === 'wo_pln_mobile') {
+    if (options.summaryProcess === 'calculate') {
+      wo_pln_mobile += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_pln_mobile
+    }
+  }
+
+  if (options.name === 'wo_loket') {
+    if (options.summaryProcess === 'calculate') {
+      wo_loket += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_loket
+    }
+  }
+
+  if (options.name === 'wo_lainnya') {
+    if (options.summaryProcess === 'calculate') {
+      wo_lainnya += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_lainnya
+    }
+  }
+
+  if (options.name === 'wo_total') {
+    if (options.summaryProcess === 'start') {
+      wo_cc123 = 0
+      wo_pln_mobile = 0
+      wo_loket = 0
+      wo_lainnya = 0
+    } else if (options.summaryProcess === 'calculate') {
+      wo_total = wo_cc123 + wo_pln_mobile + wo_loket + wo_lainnya
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_cc123 + wo_pln_mobile + wo_loket + wo_lainnya
+    }
+  }
+
+  if (options.name === 'anomali_pln_mobile') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_pln_mobile += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile
+    }
+  }
+
+  if (options.name === 'anomali_cc123') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_cc123 += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_cc123
+    }
+  }
+
+  if (options.name === 'total_anomali') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile = 0
+      anomali_cc123 = 0
+    } else if (options.summaryProcess === 'calculate') {
+      total_anomali = anomali_pln_mobile + anomali_cc123
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile + anomali_cc123
+    }
+  }
+
+  if (options.name === 'persen_anomali_pln_mobile') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_pln_mobile =
+        !isFinite(anomali_pln_mobile / wo_total) || anomali_pln_mobile == 0
+          ? 0
+          : (anomali_pln_mobile / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_pln_mobile / wo_total) || anomali_pln_mobile == 0
+          ? 0
+          : (anomali_pln_mobile / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'persen_anomali_cc123') {
+    if (options.summaryProcess === 'start') {
+      anomali_cc123 = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_cc123 =
+        !isFinite(anomali_cc123 / wo_total) || anomali_cc123 == 0
+          ? 0
+          : (anomali_cc123 / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_cc123 / wo_total) || anomali_cc123 == 0
+          ? 0
+          : (anomali_cc123 / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'total_persen_anomali') {
+    if (options.summaryProcess === 'start') {
+      persen_anomali_pln_mobile = 0
+      persen_anomali_cc123 = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = persen_anomali_pln_mobile + persen_anomali_cc123
+    }
+  }
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)