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) => {
+  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
+  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)
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {