Update props names in Type17Keluhan.vue and Type17Gangguan.vue files

src/components/Form/FiltersType/Type17Keluhan.vue

@@ -25,9 +25,9 @@ const props = defineProps({
   reportType: {
     type: Array as PropType<any[]>,
     default: [
-      { id: 1, name: 'No Lapor' },
-      { id: 2, name: 'Nama Pelapor' },
-      { id: 3, name: 'Permasalahan' }
+      { id: 1, title: 'No Lapor' },
+      { id: 2, title: 'Nama Pelapor' },
+      { id: 3, title: 'Permasalahan' }
     ]
   },
   statusType: {
@@ -67,18 +67,14 @@ const props = defineProps({
   }
 })
 
-const searchBy = ref<any>(props.reportType[0].title)
-const status = ref(props.statusType[0])
-const sla = ref(props.slaType[0])
-
 const data = ref({
   uid: { id: 0, name: uidPlaceholder },
   up3: { id: 0, name: up3Placeholder },
   ulp: { id: 0, name: ulpPlaceholder },
-  status: status.value,
+  status: props.statusType[0],
   keyword: keyword.value,
-  searchBy: searchBy.value,
-  sla: sla.value,
+  searchBy: props.reportType[0].title,
+  sla: props.slaType[0],
   periode: ''
 })
 const renderUp3 = ref(false)
@@ -131,23 +127,31 @@ const setUlp = (value: any) => {
 }
 
 const setStatus = (value: any) => {
-  status.value = value
-  data.value.status = value
+  data.value = {
+    ...data.value,
+    status: value
+  }
 }
 
 const changeKeyword = (value: string) => {
-  keyword.value = value
-  data.value.keyword = value
+  data.value = {
+    ...data.value,
+    keyword: value
+  }
 }
 
 const changeReportTypeSelected = (id: any) => {
-  searchBy.value = props.reportType.find((item) => item.id == id)?.title
-  data.value.searchBy = searchBy.value
+  data.value = {
+    ...data.value,
+    searchBy: props.reportType.find((item) => item.id == id)?.title
+  }
 }
 
 const setSla = (value: any) => {
-  sla.value = value
-  data.value.sla = value
+  data.value = {
+    ...data.value,
+    sla: value
+  }
 }
 
 onMounted(() => {
@@ -205,7 +209,6 @@ onMounted(() => {
       <Select
         @update:selected="setStatus($event)"
         :data="statusType"
-        :selected="status"
         :placeholder="statusPlaceholder"
       />
     </div>
@@ -213,12 +216,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">SLA:</label>
 
-      <Select
-        @update:selected="setSla($event)"
-        :data="slaType"
-        :selected="sla"
-        :placeholder="slaPlaceholder"
-      />
+      <Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">

src/components/Pages/Transaksi/Transaksi.vue

@@ -28,7 +28,7 @@
 
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type17Gangguan v-if="tab == 'gangguan'" @update:filters="(value) => (filters = value)" />
-    <!-- <Type17Keluhan v-else @update:filters="(value) => (filters = value)" /> -->
+    <Type17Keluhan v-else @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
@@ -235,7 +235,7 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { Type17Gangguan } from '@/components/Form/FiltersType'
+import { Type17Gangguan, Type17Keluhan } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
@@ -401,7 +401,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3, status, keyword, searchBy, sla } = params
+  const { posko, ulp, uid, up3, status, keyword, searchBy, sla } = params
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -412,6 +412,7 @@ const filterData = async (params: any) => {
     idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
     tipe_sla: sla ? sla.id : 0,
     operator_sla: '',
     status_akhir: status ? status.name : '',