Refactor DKeluhan_ResponseTime.vue and api.graphql.ts

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -364,8 +364,8 @@ const showDetail = () => {
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -19,7 +19,7 @@
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
-      :word-wrap-enabled="true"
+      :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
@@ -194,9 +194,106 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Daftar Keluhan Selesai di Contact Center"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Contact Center:</h3>
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Induk Distribusi:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_uid" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Unit Pelaksana Pelayanan Pelanggan:
+        </h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_up3" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.alamat_pelapor"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.keterangan_pelapor"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Create By:</h3>
+        <InputText :readonly="true" :value="dataSelected?.pembuat_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah Lapor Ulang:</h3>
+        <InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
@@ -218,12 +315,37 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
 
 const onExporting = (e: any) => {
   const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@@ -419,15 +541,6 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  clearSelection()
-}
 
 const data = ref<any[]>([])
 
@@ -438,7 +551,8 @@ const { onResult, onError, loading, refetch } = useQuery(
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     idUlp: 0,
     idUid: 0,
-    idUp3: 0
+    idUp3: 0,
+    media: ''
   }
 )
 const filters = ref()
@@ -462,7 +576,8 @@ const filterData = (params: any) => {
       : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
+    idUp3: up3 ? up3.id : 0,
+    media: ''
   })
 
   onResult((queryResult) => {
@@ -471,7 +586,6 @@ const filterData = (params: any) => {
     }
 
     reportMeta.value = filters.value
-    console.log(queryResult.data)
   })
 
   onError((error) => {

src/utils/api/api.graphql.ts

@@ -143,6 +143,7 @@ export const queries = {
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
+          $media: String!
         ) {
           daftarKeluhanDiselesaikanCC123(
             dateFrom: $dateFrom
@@ -150,22 +151,28 @@ export const queries = {
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
+            media: $media
           ) {
-            alamat_pelapor
-            idpel_nometer
-            jumlah_lapor
-            pembuat_laporan
-            keterangan_pelapor
-            media
-            nama_uid
-            nama_ulp
-            nama_pelapor
             no_laporan
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            status_akhir
+            pembuat_laporan
+            waktu_lapor
+            waktu_recovery
+            jumlah_lapor
+            media
             nama_issuetype
             nama_subissuetype
-            no_telp_pelapor
-            status_akhir
-            waktu_recovery
           }
         }
       `,