Add new query for laporanCttKwhPeriksa and update customize-text in MonalisaLB_AgingComplaint.vue

src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue

@@ -12,7 +12,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -27,8 +27,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
+        v-model:visible="loadingData"
-        v-model:visible="loading"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -138,7 +137,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -155,17 +154,27 @@ 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 Filters from '@/components/Form/Filters.vue'
 import { Type3 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
+import Filters from '@/components/Form/Filters.vue'
 import gql from 'graphql-tag'
+import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
+
+const client = apolloClient()
+provideApolloClient(client)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataSelected = ref<any>()
 const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -196,37 +205,13 @@ const onExporting = (e: any) => {
   }
 }
 
-const GET_laporanCttKwhPeriksa = gql`
-  query laporanCttKwhPeriksa(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    laporanCttKwhPeriksa(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      dlpd
-      history_p2ti
-      nama_posko
-      rekomendasi_sistem_mendatangkan_petugas
-      total_wo
-      total_wo_cc123
-      total_wo_comcen
-      total_wo_loket
-      total_wo_pln_mobile
-    }
-  }
-`
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
-  refetch({
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.cttKwhPeriksa.laporanCttKwhPeriksa,
+    {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -236,38 +221,60 @@ const filterData = (params: any) => {
       posko: posko ? posko.id : '',
       idUid: uid ? uid.id : 0,
       idUp3: up3 ? up3.id : 0
-  })
+    }
+  )
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-        data.value = [
-          ...data.value,
-          {
-            ...item
     }
-        ]
-      })
-    }
-    console.log(queryResult.data)
   })
+
   onError((error) => {
     console.log(error)
   })
-}
-const { onResult, onError, loading, refetch } = useQuery(GET_laporanCttKwhPeriksa, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: '',
-  idUid: 0,
-  idUp3: 0
-})
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+  watch(loading, (value) => {
-  if (selectedRowsData[0] != undefined) {
+    loadingData.value = value
-    dataSelected.value = selectedRowsData[0]
+  })
-  }
-  showDetail()
 }
+
+const getDetail = () => {
+  const dateValue = filters.value.periode.split(' s/d ')
+  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
+  }
+
+  const { onResult, onError, loading } = useQuery(
+    queries.keluhan.rekap.rekapKeluhanAllDetail,
+    query
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailKeluhanAll
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
@@ -275,7 +282,21 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
+  getDetail()
+}
+
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
 }
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -209,27 +209,21 @@
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="
+          :customize-text="(e: any) => (isNumber(e.value) ? formatPercentage(e.value) : '0%')"
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
         />
         <DxTotalItem
           column="aging_complaint_keluhan"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="
+          :customize-text="(e: any) => (isNumber(e.value) ? formatPercentage(e.value) : '0%')"
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
         />
         <DxTotalItem
           column="avg_aging_complaint"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="
+          :customize-text="(e: any) => (isNumber(e.value) ? formatPercentage(e.value) : '0%')"
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
         />
 
         <DxGroupItem

src/utils/api/api.graphql.ts

@@ -3010,5 +3010,34 @@ export const queries = {
         }
       `
     }
+  },
+  cttKwhPeriksa: {
+    laporanCttKwhPeriksa: gql`
+      query laporanCttKwhPeriksa(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $posko: String
+        $idUid: Int
+        $idUp3: Int
+      ) {
+        laporanCttKwhPeriksa(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          posko: $posko
+          idUid: $idUid
+          idUp3: $idUp3
+        ) {
+          dlpd
+          history_p2ti
+          nama_posko
+          rekomendasi_sistem_mendatangkan_petugas
+          total_wo
+          total_wo_cc123
+          total_wo_comcen
+          total_wo_loket
+          total_wo_pln_mobile
+        }
+      }
+    `
   }
 }