Refactor RGangguan_BerdasarMedia.vue and api.graphql.ts

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -25,7 +25,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
       <!-- <DxPaging :page-size="40" :enabled="true" />
       <DxPager
@@ -495,13 +495,13 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -513,7 +513,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer">
+        <p class="cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -522,6 +522,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -537,6 +538,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -552,6 +554,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -1074,7 +1077,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
+import { requestGraphQl, queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -1096,6 +1099,8 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -1103,6 +1108,23 @@ const reportMeta = ref({
   periode: ''
 })
 
+const setAgreementDialog = (column: string) => {
+  console.log('column', column)
+
+  if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
+    agreeToShowDialog.value = true
+    if (column == 'Total') {
+      progressSelected.value = 0
+    } else if (column == 'Selesai') {
+      progressSelected.value = 1
+    } else {
+      progressSelected.value = 2
+    }
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
 const calculateCustomSummary = (options: any) => {
   if (options.name == 'persenSelesai') {
     console.log(options.component.persen_selesai)
@@ -1150,7 +1172,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiAllGangguan
-      loadingData.value = false
     }
 
     reportMeta.value = filters.value
@@ -1158,11 +1179,10 @@ const filterData = (params: any) => {
 
   onError((error) => {
     console.log(error)
-    loadingData.value = false
   })
 
   watch(loading, (value) => {
-    // loadingData.value = value
+    loadingData.value = value
   })
 }
 
@@ -1184,12 +1204,13 @@ const getDetail = async () => {
     idRegu: selected?.id_regu ? selected?.id_regu : 0,
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
-    media: selected?.media ? selected?.media : ''
+    media: selected?.media ? selected?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: ''
   }
 
-  await getGangguanDetail(query)
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
     .then((result) => {
-      // console.table(result.data.data.detailGangguan)
       dataSub.value = result.data.data.detailGangguan
     })
     .catch((err) => {
@@ -1199,28 +1220,25 @@ const getDetail = async () => {
       loadingSubData.value = false
     })
 
-  // const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
+  // const { onResult, onError, refetch, loading } = useQuery(
-  //   fetchPolicy: 'network-only'
+  //   queries.gangguan.rekap.gangguanAllDetail,
-  // })
+  //   query,
+  //   {
+  //     fetchPolicy: 'network-only'
+  //   }
+  // )
 
-  // result.onResult((queryResult) => {
+  // onResult((queryResult) => {
   //   if (queryResult.data != undefined) {
   //     dataSub.value = queryResult.data.detailGangguan
-  //     console.table(queryResult.data.detailGangguan)
   //   }
   // })
 
-  // watch(result, (value) => {
+  // onError((error) => {
-  //   if (dataSub.value != value.detailGangguan) {
-  //     console.table(value.detailGangguan)
-  //   }
-  // })
-
-  // result.onError((error) => {
   //   console.log(error)
   // })
 
-  // watch(result.loading, (value) => {
+  // watch(loading, (value) => {
   //   loadingSubData.value = value
   // })
 }
@@ -1234,10 +1252,12 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  dataSub.value = []
+  if (agreeToShowDialog.value) {
-  dataSubSelected.value = null
+    dataSub.value = []
-  dialogDetail.value = true
+    dataSubSelected.value = null
-  getDetail()
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue

@@ -88,13 +88,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
-          {{ data.text }}
+          {{ data.text == null || data.text == '' ? '-' : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setDate(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -515,6 +515,7 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const date = ref('2023-02-04')
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -522,35 +523,39 @@ const reportMeta = ref({
   periode: ''
 })
 
+const setDate = (value: any) => {
+  if (isNumber(value)) {
+    const tanggal = value < 10 ? `0${value}` : value
+    const dateValue = filters.value.periode.split(' s/d ')
+    const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal
+    console.log('date', dateYear)
+    date.value = dateYear
+  } else {
+    date.value = ''
+  }
+}
+
 const getDetail = () => {
   loadingSubData.value = true
-  const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
+    tanggal: date.value,
-      ? 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),
     posko: ref?.id_posko ? ref?.id_posko : 0,
     idUid: ref?.id_uid ? ref?.id_uid : 0,
     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
     media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.berdasarkanMediaDetail,
     query
   )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailRekapitulasiGangguanBerdasarkanMedia
     }
   })
 
@@ -604,7 +609,10 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-    showDetail()
+
+    if (date.value != '') {
+      showDetail()
+    }
   }
 }
 

src/utils/api/api.graphql.ts

@@ -13,69 +13,9 @@ const instance = axios.create({
   signal: controller.signal
 })
 
-export const getGangguanDetail = async (data: any) => {
+export const requestGraphQl = async (query: string, data: any) => {
-  // controller.abort()
   return await instance.post('', {
-    query: `query detailGangguan(
+    query: query,
-          $dateFrom: Date!
-          $dateTo: Date!
-          $posko: Int!
-          $idUid: Int!
-          $idUp3: Int!
-          $idRegu: Int!
-          $media: String!
-          $idUlp: Int!
-          $namaRegional: String!
-        ) {
-          detailGangguan(
-            dateFrom: $dateFrom
-            dateTo: $dateTo
-            posko: $posko
-            idUid: $idUid
-            idUp3: $idUp3
-            idRegu: $idRegu
-            idUlp: $idUlp
-            namaRegional: $namaRegional
-            media: $media
-          ) {
-            id
-            nama_regional
-            id_uid
-            nama_uid
-            id_up3
-            nama_up3
-            id_ulp
-            nama_ulp
-            id_posko
-            nama_posko
-            no_laporan
-            pembuat_laporan
-            waktu_lapor
-            waktu_response
-            waktu_recovery
-            durasi_dispatch_time
-            durasi_response_time
-            durasi_recovery_time
-            status_akhir
-            is_marking
-            referensi_marking
-            idpel_nometer
-            nama_pelapor
-            alamat_pelapor
-            no_telp_pelapor
-            keterangan_pelapor
-            media
-            nama_posko
-            jarak_closing
-            dispatch_oleh
-            diselesaikan_oleh
-            penyebab
-            tindakan
-            kode_gangguan
-            jenis_gangguan
-            nilai_rating
-          }
-        }`,
     variables: data
   })
 }
@@ -1365,6 +1305,61 @@ export const queries = {
           }
         }
       `,
+      berdasarkanMediaDetail: gql`
+        query detailRekapitulasiGangguanBerdasarkanMedia(
+          $tanggal: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $namaRegional: String!
+          $media: String!
+        ) {
+          detailRekapitulasiGangguanBerdasarkanMedia(
+            tanggal: $tanggal
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            namaRegional: $namaRegional
+            media: $media
+          ) {
+            alamat_pelapor
+            diselesaikan_oleh
+            dispatch_oleh
+            durasi_dispatch_time
+            durasi_recovery_time
+            durasi_response_time
+            id
+            id_posko
+            id_uid
+            id_ulp
+            id_up3
+            idpel_nometer
+            is_marking
+            jarak_closing
+            jenis_gangguan
+            keterangan_pelapor
+            kode_gangguan
+            media
+            nama_pelapor
+            nama_posko
+            nama_regional
+            nama_uid
+            nama_ulp
+            nama_up3
+            nilai_rating
+            no_laporan
+            no_telp_pelapor
+            pembuat_laporan
+            penyebab
+            referensi_marking
+            status_akhir
+            tindakan
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
       berdasarkanMedia: gql`
         query rekapitulasiGangguanBerdasarkanMedia(
           $dateFrom: Date!
@@ -1475,6 +1470,8 @@ export const queries = {
           $media: String!
           $idUlp: Int!
           $namaRegional: String!
+          $isSelesai: Int!
+          $tanggal: String
         ) {
           detailGangguan(
             dateFrom: $dateFrom
@@ -1486,6 +1483,8 @@ export const queries = {
             idUlp: $idUlp
             namaRegional: $namaRegional
             media: $media
+            isSelesai: $isSelesai
+            tanggal: $tanggal
           ) {
             id
             nama_regional