Refactor filter components in Keluhan tables

src/components/Pages/Keluhan/Table_21.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+        <Type3 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_22.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type10 @update:filters="(value) => {
+        <Type10 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_23.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => {
+        <Type11 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_24.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => {
+        <Type11 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_25.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+        <Type3 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_26.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+        <Type3 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_27.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+        <Type3 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -12,8 +9,8 @@
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+                :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />

src/components/Pages/Keluhan/Table_28.vue

@@ -1,9 +1,6 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -37,10 +34,10 @@
           css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption="> SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-          css-class="custom-table-column" />
+          caption="> SLA" css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤ SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-          css-class="custom-table-column" />
+          caption="≤ SLA" css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
@@ -164,14 +161,14 @@ query rekapitulasiKeluhanAll
         }
 }`
 
-  const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,
   idUid: 0,
   idUp3: 0
-  })
+})
-  const filters = ref();
+const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -180,8 +177,9 @@ const filterData = (params: any) => {
     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: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id :0,
+    idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {

src/components/Pages/Keluhan/Table_29.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type13 @update:filters="(value) => {
+        <Type13 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -195,8 +192,9 @@ const filterData = (params: any) => {
         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: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id :0,
+        idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+        idUp3: up3 ? up3.id : 0
+    })
 
 
     onResult((queryResult) => {

src/components/Pages/Keluhan/Table_30.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
+        <Type3 @update:filters="(value) => filters = value" />
-                filters = value
-            }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -173,7 +170,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
             total_selesai
         }
 }`;
-const { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
     idUlp: 0,
@@ -189,8 +186,9 @@ const filterData = (params: any) => {
         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: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id :0,
+        idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+        idUp3: up3 ? up3.id : 0
+    })
 
 
     onResult(queryResult => {

src/components/Pages/Keluhan/Table_31.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type13 @update:filters="(value) => {
+        <Type13 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
@@ -173,7 +170,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
             total_selesai
         }
 }`;
-const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
     idUlp: 0,
@@ -189,8 +186,9 @@ const filterData = (params: any) => {
         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: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id :0,
+        idUid: uid ? uid.id : 0,
-        idUp3: up3? up3.id:0})
+        idUp3: up3 ? up3.id : 0
+    })
 
 
     onResult(queryResult => {

src/components/Pages/Keluhan/Table_32.vue

@@ -1,9 +1,6 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type13 @update:filters="(value) => {
+    <Type13 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"

src/components/Pages/Keluhan/Table_33.vue

@@ -1,9 +1,6 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type8 @update:filters="(value) => {
+    <Type8 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_34.vue

@@ -1,9 +1,6 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => {
+    <Type3 @update:filters="(value) => filters = value" />
-      filters = value
-    }
-      " />
   </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"

src/components/Pages/Keluhan/Table_35.vue

@@ -1,9 +1,6 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type8 @update:filters="(value) => {
+        <Type8 @update:filters="(value) => filters = value" />
-            filters = value
-        }
-            " />
     </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"