Refactor code: Update posko value based on condition, remove console.log, and add setMonth function

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue

@@ -18,7 +18,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -34,8 +34,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" />
@@ -235,6 +234,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_response_time_bulan_ini"
+          column="total_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -243,6 +243,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="jumlah_gangguan_rpt_bulan"
+          column="jumlah_gangguan_rpt_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -251,6 +252,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="rpt_gangguan_bulan"
+          column="rpt_gangguan_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -259,6 +261,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_rct_bulan"
+          column="total_rct_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -267,6 +270,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="jumlah_gangguan_rct_bulan"
+          column="jumlah_gangguan_rct_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -275,6 +279,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="rct_gangguan_bulan"
+          column="rct_gangguan_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -283,6 +288,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_response_time_tahun_ini"
+          column="total_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -291,6 +297,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="jumlah_gangguan_rpt_sampai_bulan"
+          column="jumlah_gangguan_rpt_sampai_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -299,6 +306,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="rpt_gangguan_sampai_bulan"
+          column="rpt_gangguan_sampai_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -307,6 +315,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_recovery_time_tahun_ini"
+          column="total_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -315,6 +324,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="jumlah_gangguan_rct_sampai_bulan"
+          column="jumlah_gangguan_rct_sampai_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -323,13 +333,14 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="rch_gangguan_sampai_bulan"
+          column="rch_gangguan_sampai_bulan"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -341,7 +352,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left">
+        <p class="!text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -352,7 +363,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -376,7 +387,11 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 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 currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const position = { of: '#data' }
@@ -384,50 +399,46 @@ 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 { onResult, onError, loading, refetch } = useQuery(
-  queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
-  {
-    bulan: 10,
-    tahun: 2023,
-    // regional: '',
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+
 const filterData = (params: any) => {
-  const {
-    // regional,
-    ulp,
-    uid,
-    up3,
-    bulan,
-    tahun
-  } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
+    {
+      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+      idUlp: ulp ? ulp.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0,
+      bulan: bulan ? bulan.id : 10,
+      tahun: bulan ? tahun.id : 2023
+    }
+  )
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
 
-  refetch({
-    // regional: regional,
-    idUlp: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0,
-    bulan: bulan ? bulan.id : 10,
-    tahun: bulan ? tahun.id : 2023
-  })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.monalisaJumlahDurasiRptRctGangguan
     }
-    console.log(queryResult.data)
   })
+
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -456,19 +467,68 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
+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 onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
+}
+
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
 }
 
 const filters = ref<any>({
-  // regional: '',
-  // posko: '',
+  regional: '',
   uid: 0,
   up3: 0,
   bulan: 2,