Remove unused code and comments

src/components/Pages/PencarianData/PencarianData.vue

@@ -12,7 +12,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting=""
       :data-source="data"
@@ -35,8 +35,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -178,7 +177,11 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDetail" title="Daftar Pencarian Report Number" @on-close="closeDialog">
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Pencarian Report Number"
+    @on-close="closedialogDetail"
+  >
     <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>
@@ -253,13 +256,23 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 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)
 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 filters = ref({
   type: '',
   keyword: '',
@@ -267,10 +280,6 @@ const filters = ref({
   periode: ''
 })
 
-const closeDialog = () => {
-  dialogDetail.value = false
-}
-
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
@@ -278,37 +287,66 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  filters.value.type == 'Gangguan'
-    ? queries.pencarian.pencarianGangguan
-    : queries.pencarian.pencarianKeluhan,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    noLaporan: '',
-    namaPelapor: '',
-    noTelpPelapor: '',
-    alamatPelapor: '',
-    pembuatLaporan: ''
-  }
-)
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
+}
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { type, keyword, searchBy } = params
 
+  const { onResult, onError, loading, refetch } = useQuery(
+    filters.value.type == 'Gangguan'
+      ? queries.pencarian.pencarianGangguan
+      : queries.pencarian.pencarianKeluhan,
+    {
+      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),
+      noLaporan: searchBy == 'Nomor Laporan' ? keyword : '',
+      namaPelapor: searchBy == 'Nama Pelapor' ? keyword : '',
+      noTelpPelapor: searchBy == 'No Telepon' ? keyword : '',
+      alamatPelapor: searchBy == 'Alamat' ? keyword : '',
+      pembuatLaporan: searchBy == 'Pembuat' ? keyword : ''
+    }
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      if (type == 'Gangguan') {
+        data.value = queryResult.data.pencarianDataReportNumberGangguan
+      } else {
+        data.value = queryResult.data.pencarianDataReportNumberKeluhan
+      }
+    }
+  })
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
+}
+
+onMounted(() => {
   if (import.meta.env.DEV) {
-    if (type == 'Gangguan') {
+    if (filters.value.type == 'Gangguan') {
       data.value = [
         {
           id: 0,
@@ -4954,39 +4992,5 @@ const filterData = (params: any) => {
       ]
     }
   }
-
-  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),
-    noLaporan: searchBy == 'Nomor Laporan' ? keyword : '',
-    namaPelapor: searchBy == 'Nama Pelapor' ? keyword : '',
-    noTelpPelapor: searchBy == 'No Telepon' ? keyword : '',
-    alamatPelapor: searchBy == 'Alamat' ? keyword : '',
-    pembuatLaporan: searchBy == 'Pembuat' ? keyword : ''
-  })
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      if (type == 'Gangguan') {
-        data.value = queryResult.data.pencarianDataReportNumberGangguan
-      } else {
-        data.value = queryResult.data.pencarianDataReportNumberKeluhan
-      }
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loading.value = value
-  })
-}
-
-onMounted(() => {})
+})
 </script>