Refactor code: Remove console.log statements and fix column width in RKeluhan_ALL.vue

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

@@ -781,9 +781,6 @@ const filterData = (params: any) => {
     if (queryResult.networkStatus == 7) {
       loadingData.value = false
     }
-    console.log('loading', queryResult.loading)
-    console.log('networkStatus', queryResult.networkStatus)
-    console.log('stale', queryResult.stale)
   })
 
   onError((error) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -19,13 +19,11 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onDataSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
-      :word-wrap-enabled="true"
     >
-      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -44,7 +42,7 @@
         :formats="['pdf', 'xlsx', 'document']"
         :allow-export-selected-data="false"
       />
-      <DxColumnFixing :enabled="true" />
+      <!-- <DxColumnFixing :enabled="true" /> -->
 
       <DxColumn
         alignment="center"
@@ -61,7 +59,6 @@
         data-field=""
         caption="Semua Unit"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="0"
       />
       <DxColumn
@@ -70,7 +67,6 @@
         data-field="nama_regional"
         caption="Regional"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="1"
       />
       <DxColumn
@@ -79,7 +75,6 @@
         data-field="nama_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="2"
       />
       <DxColumn
@@ -88,7 +83,6 @@
         data-field="nama_up3"
         caption="UP3"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="3"
       />
 
@@ -863,7 +857,7 @@ const getDetail = async () => {
 
   result.onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailRekapitulasiKeluhanAll
+      dataSub.value = queryResult.data.detailKeluhanAll
     }
   })
 

src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue

@@ -132,7 +132,7 @@
         <DxDataGrid
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -494,7 +494,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { apolloClient } 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)
@@ -508,23 +512,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
-    media: ''
-  }
-)
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
+    {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -535,13 +529,13 @@ const filterData = (params: any) => {
       idUid: uid ? uid.id : 0,
       idUp3: up3 ? up3.id : 0,
       media: ''
-  })
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -553,7 +547,41 @@ const filterData = (params: any) => {
   })
 }
 
-const getDetail = () => {}
+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 = () => {
@@ -562,8 +590,8 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
-  console.log(dataSelected.value)
   getDetail()
 }
 
@@ -599,14 +627,13 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
-  console.log(data)
 }
 
 const filters = ref()

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -400,7 +400,7 @@
         <DxDataGrid
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -442,9 +442,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -767,9 +765,12 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
-import { dummyData } from '@/utils/dummy'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
+import { apolloClient } 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)
@@ -783,21 +784,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
-  refetch({
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
+    {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -807,13 +800,13 @@ const filterData = (params: any) => {
       idUlp: ulp ? ulp.id : 0,
       idUid: uid ? uid.id : 0,
       idUp3: up3 ? up3.id : 0
-  })
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -826,7 +819,39 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+  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)
@@ -836,6 +861,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
   getDetail()
 }
@@ -872,17 +898,22 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
-  console.log(data)
 }
 
-const filters = ref({ groupBy: false })
+const filters = ref({
+  uid: 0,
+  up3: 0,
+  ulp: 0,
+  periode: '',
+  groupBy: false
+})
 
 onMounted(() => {
   if (import.meta.env.DEV) {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue

@@ -51,9 +51,8 @@
         css-class="custom-table-column"
         :width="100"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
-        data-field="no"
+        data-field="number"
         caption="No"
         cell-template="formatNumber"
       />
@@ -917,7 +916,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
+import { apolloClient } 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)
@@ -931,22 +934,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.rekap.keluhanPerJenisKeluhan,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.keluhan.rekap.keluhanPerJenisKeluhan,
+    {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -956,13 +950,20 @@ const filterData = (params: any) => {
       idUlp: ulp ? ulp.id : 0,
       idUid: uid ? uid.id : 0,
       idUp3: up3 ? up3.id : 0
-  })
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
+      data.value = [...queryResult.data.rekapitulasiKeluhanPerJenisKeluhan]
+        .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
+        .map((item: any, index: number) => {
+          return {
+            ...item,
+            number: index + 1
+          }
+        })
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -975,7 +976,39 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
+  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)
@@ -985,6 +1018,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
   getDetail()
 }
@@ -1021,21 +1055,27 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
-  console.log(data)
 }
 
 const filters = ref()
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
+    data.value = [...dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan]
+      .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
+      .map((item: any, index: number) => {
+        return {
+          ...item,
+          number: index + 1
+        }
+      })
   }
 })
 </script>

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -53,7 +53,6 @@
         alignment="center"
         :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
-        data-field="no"
         caption="No"
         cell-template="formatNumber"
       />
@@ -412,7 +411,7 @@
         <DxDataGrid
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -454,9 +453,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -775,7 +772,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { apolloClient } 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)
@@ -789,22 +790,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.rekap.keluhanPerKelompokKeluhan,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.keluhan.rekap.keluhanPerKelompokKeluhan,
+    {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -814,13 +806,13 @@ const filterData = (params: any) => {
       idUlp: ulp ? ulp.id : 0,
       idUid: uid ? uid.id : 0,
       idUp3: up3 ? up3.id : 0
-  })
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -833,7 +825,39 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
+  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)
@@ -843,6 +867,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
   getDetail()
 }
@@ -879,17 +904,22 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
-  console.log(data)
 }
 
-const filters = ref({ groupBy: false })
+const filters = ref({
+  uid: 0,
+  up3: 0,
+  ulp: 0,
+  periode: '',
+  groupBy: false
+})
 
 onMounted(() => {
   if (import.meta.env.DEV) {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue

@@ -415,7 +415,7 @@
         <DxDataGrid
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -457,9 +457,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -778,7 +776,11 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { apolloClient } 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)
@@ -792,19 +794,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerTanggal, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUlp: '',
-  idUid: 0,
-  idUp3: 0
-})
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.keluhan.rekap.keluhanPerTanggal,
+    {
       dateFrom: dateValue[0]
         ? dateValue[0].split('-').reverse().join('-')
         : new Date().toISOString().slice(0, 10),
@@ -814,13 +810,13 @@ const filterData = (params: any) => {
       idUlp: ulp ? ulp.id : 0,
       idUid: uid ? uid.id : 0,
       idUp3: up3 ? up3.id : 0
-  })
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -833,7 +829,39 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
+  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)
@@ -843,6 +871,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
   getDetail()
 }
@@ -879,17 +908,22 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
-  console.log(data)
 }
 
-const filters = ref({ groupBy: false })
+const filters = ref({
+  uid: 0,
+  up3: 0,
+  ulp: 0,
+  periode: '',
+  groupBy: false
+})
 
 onMounted(() => {
   if (import.meta.env.DEV) {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue

@@ -49,11 +49,10 @@
       <DxColumn
         :width="100"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         data-type="number"
-        data-field="no"
+        data-field="number"
         cell-template="formatNumber"
       />
 
@@ -915,7 +914,11 @@ import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { apolloClient } 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)
@@ -929,19 +932,11 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
-
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -955,9 +950,15 @@ const filterData = (params: any) => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerUnit
+      data.value = [...queryResult.data.rekapitulasiKeluhanPerUnit]
+        .sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
+        .map((item, index) => {
+          return {
+            ...item,
+            number: index + 1
+          }
+        })
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -970,7 +971,39 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+  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)
@@ -980,8 +1013,8 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
-  console.log(dataSelected.value)
   getDetail()
 }
 
@@ -1017,14 +1050,13 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
-  console.log(data)
 }
 
 const filters = ref()
@@ -1438,6 +1470,13 @@ onMounted(() => {
         total_diatas_sla_recovery: 27
       }
     ]
+      .sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((item, index) => {
+        return {
+          ...item,
+          number: index + 1
+        }
+      })
   }
 })
 </script>

src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue

@@ -13,7 +13,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -29,8 +29,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" />
@@ -202,7 +201,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type8 from '@/components/Form/FiltersType/Type8.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -221,10 +220,106 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { apolloClient } 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 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 filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3 } = params
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.keluhan.rekap.keluhanPerRatingUnit,
+    {
+      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: ulp ? ulp.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0
+    }
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
+}
+
+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!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -253,52 +348,17 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const dataGridRef = ref<DxDataGrid | null>(null)
+
-const clearSelection = () => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataGrid = dataGridRef.value!.instance!
+  if (selectedRowsData[0] != undefined) {
-  dataGrid.clearSelection()
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  clearSelection()
+  dataSubSelected.value = data
 }
-
-const data = ref<any[]>([])
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.rekap.keluhanPerRatingUnit,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
 const filters = ref()
-
-const filterData = (params: any) => {
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3 } = params
-  refetch({
-    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: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
 </script>

src/utils/api/api.graphql.ts

@@ -682,14 +682,14 @@ export const queries = {
         }
       `,
       rekapKeluhanAllDetail: gql`
-        query detailRekapitulasiKeluhanAll(
+        query detailKeluhanAll(
           $dateFrom: Date!
           $dateTo: Date!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
-          detailRekapitulasiKeluhanAll(
+          detailKeluhanAll(
             dateFrom: $dateFrom
             dateTo: $dateTo
             idUlp: $idUlp