Refactor RGangguan_BerdasarMedia.vue and api.graphql.ts

2024-03-28 13:15:33 +07:00 · 2024-03-28 13:15:33 +07:00 · f478e63a19
commit f478e63a19
parent 0922277624
3 changed files with 132 additions and 105 deletions
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/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, {
-  //   fetchPolicy: 'network-only'
-  // })
+  // const { onResult, onError, refetch, loading } = useQuery(
+  //   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) => {
-  //   if (dataSub.value != value.detailGangguan) {
-  //     console.table(value.detailGangguan)
-  //   }
-  // })
-
-  // result.onError((error) => {
+  // 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 = []
-  dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDetail.value = true
+    getDetail()
+  }
 }

 const onExporting = (e: any) => {
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@ -88,13 +88,13 @@
      />

      <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
-          {{ data.text }}
+        <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
+          {{ 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]
-      ? 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),
+    tanggal: date.value,
    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()
+    }
  }
 }

--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@ -13,69 +13,9 @@ const instance = axios.create({
  signal: controller.signal
 })

-export const getGangguanDetail = async (data: any) => {
-  // controller.abort()
+export const requestGraphQl = async (query: string, data: any) => {
  return await instance.post('', {
-    query: `query detailGangguan(
-          $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
-          }
-        }`,
+    query: query,
    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