Refactor MonalisaLB_KADDalamPelaporan.vue and graphql.ts

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

@@ -1,7 +1,13 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters
+    :report-button="true"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       class="max-h-[calc(100vh-140px)] mb-10"
@@ -40,9 +46,10 @@
       <DxColumn
         :min-width="250"
         alignment="center"
-        data-field="nama_posko"
+        data-field="nama_ulp"
         caption="Nama Unit"
         css-class="custom-table-column"
+        cell-template="cell-left"
       />
       <DxColumn
         alignment="center"
@@ -53,7 +60,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="kepatuhan_akurasi_gangguan_berulang_bulan"
+            data-field="gangguan_berulang"
             data-type="number"
             caption="Jan 2020"
             css-class="custom-table-column"
@@ -61,7 +68,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="kepatuhan_akurasi_gangguan_berulang_total"
+            data-field="gangguan_total"
             data-type="number"
             caption="Total Gangguan"
             css-class="custom-table-column"
@@ -71,7 +78,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="kepatuhan_akurasi_keluhan_berulang_bulan"
+            data-field="komplain_pelanggan"
             data-type="number"
             caption="Jan 2020"
             css-class="custom-table-column"
@@ -79,7 +86,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="kepatuhan_akurasi_keluhan_berulang_total"
+            data-field="keluhan_total"
             data-type="number"
             caption="Total Keluhan"
             css-class="custom-table-column"
@@ -89,11 +96,21 @@
       <DxColumn
         :min-width="150"
         alignment="center"
-        data-field="persen_komplain_pelanggan"
+        data-field="komplain_pelanggan"
         data-type="number"
         caption="Komplain Pelanggan %"
         css-class="custom-table-column"
+        cell-template="percent"
       />
+
+      <template #percent="{ data }">
+        <p>{{ data.text }}%</p>
+      </template>
+      <template #cell-left="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -119,14 +136,17 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const tahunSekarang = ref(new Date().getFullYear())
-const showDetail = ref(false)
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -160,50 +180,31 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
-  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
-    $regional: String
-    $posko: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    kepatuhandanAkurasiDalamPelaporanBulanan(
-      regional: $regional
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      kepatuhan_akurasi_gangguan_berulang_bulan
-      kepatuhan_akurasi_gangguan_berulang_total
-      kepatuhan_akurasi_keluhan_berulang_bulan
-      kepatuhan_akurasi_keluhan_berulang_total
-      nama_posko
-      persen_komplain_pelanggan
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
-  regional: '',
-  posko: '',
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
-const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.laporan.bulanan.kepatuhandanAkurasiDalamPelaporanBulanan,
+  {
+    // regional: 0,
+    idUp3: 0,
+    idUid: 0,
+    idUlp: 0,
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
+  }
+)
+
+const filterData = (params: any) => {
+  const { regional, ulp, uid, up3, bulan, tahun } = params
+  bulanSekarang.value = bulan.id
+  tahunSekarang.value = tahun.id
+  tahunLalu.value = tahun.id - 1
   refetch({
-    regional: regional,
+    // regional: regional,
-    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUp3: up3 ? up3.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : 10,
+    bulan: bulan ? bulan.id : bulanSekarang.value,
-    tahun: bulan ? tahun.id : 2023
+    tahun: bulan ? tahun.id : tahunSekarang.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {

src/utils/graphql.ts

@@ -479,6 +479,38 @@ export const queries = {
               kpi_ens
             }
           }
+        `,
+        kepatuhandanAkurasiDalamPelaporanBulanan: gql`
+          query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+            #$regional: String
+            $idUid: Int
+            $idUp3: Int
+            $idUlp: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            kepatuhandanAkurasiDalamPelaporanBulanan(
+              #regional: $regional
+              idUid: $idUid
+              idUp3: $idUp3
+              idUlp: $idUlp
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              gangguan_berulang
+              gangguan_total
+              keluhan_berulang
+              keluhan_total
+              komplain_pelanggan
+            }
+          }
         `
       }
     }