Refactor month selection logic and improve code readability

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

@@ -155,7 +155,7 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setMonth('')">
           {{ data.text }}
         </p>
       </template>
@@ -461,7 +461,8 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const monthSelected = ref(1)
+const monthSelected = ref<any>(null)
+const agreeToShowDialog = ref(false)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -470,7 +471,11 @@ const reportMeta = ref({
 })
 
 const setMonth = (month: any) => {
-  monthSelected.value = getMonthNumber(month)
+  if (month != '') {
+    monthSelected.value = getMonthNumber(month)
+  } else {
+    monthSelected.value = null
+  }
 }
 
 const filterData = async (params: any) => {
@@ -545,19 +550,18 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (monthSelected.value != null) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  // wait for 2 seconds
-  setTimeout(() => {
-    if (selectedRowsData[0] != undefined) {
-      console.log('monthSelected', monthSelected.value)
-      dataSelected.value = selectedRowsData[0]
-      showDetail()
-    }
-  }, 2000)
+  if (selectedRowsData[0] != undefined) {
+    console.log('monthSelected', monthSelected.value)
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {