Update page sizes in pagination components

src/components/Pages/Cico/LaporanCICO.vue

@@ -111,13 +111,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -181,9 +181,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Daftar Detail Jumlah WO Gangguan Individu"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -204,10 +204,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -829,11 +829,11 @@ const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
-const dialogDataSelected = ref(false)
+const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const closedialogDetail = () => (dialogDetail.value = false)
 
 const getDetail = () => {
   loadingSubData.value = true
@@ -871,11 +871,11 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
-const showDialogDataSelected = () => {
+const showDetail = () => {
   if (dataSelected.value != null) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDataSelected.value = true
+    dialogDetail.value = true
     getDetail()
   }
 }
@@ -911,7 +911,7 @@ const onExporting = (e: any) => {
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   dataSelected.value = selectedRowsData[0]
-  showDialogDataSelected()
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {