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"
@@ -59,7 +56,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,

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,10 +1,7 @@
 <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>
-        }
-            " />
-    </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
       :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -13,7 +10,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="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,24 +161,25 @@ 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),
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
+  idUlp: 0,
-    idUid: 0,
+  idUid: 0,
-    idUp3: 0
+  idUp3: 0
-  })
+})
-  const filters = ref();
+const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
-    refetch({
+  refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    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),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        idUlp: idUlp ? idUlp.id : 0,
+    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"
@@ -13,8 +10,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -190,13 +187,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         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"
@@ -13,8 +10,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -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,
@@ -184,13 +181,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         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"
@@ -13,8 +10,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -83,7 +80,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -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,
@@ -184,13 +181,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         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"