Refactor form filters in multiple components

src/components/Form/FiltersType/Type1.vue

@@ -76,12 +76,9 @@ onMounted(() => {
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker
+    <DatePicker @update:date-value="(value) => {
-      @update:date-value="
-        (value) => {
         data.periode = value
       }
-      "
+      " />
-    />
   </div>
 </template>

src/components/Form/FiltersType/Type10.vue

@@ -18,13 +18,13 @@ import InputNumber from '@/components/Form/InputNumber.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: ulp.value,
   periode: '',
   minJmlLapor: 1,
@@ -33,12 +33,12 @@ const data = ref({
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
@@ -78,6 +78,7 @@ onMounted(() => {
     <Select 
       @update:selected="setUp3($event)" 
       :data="itemsUp3" 
+      :selected="up3"
       :placeholder="up3Placeholder"
     />
   </div>
@@ -90,6 +91,7 @@ onMounted(() => {
     <Select
       @update:selected="setUlp($event)"
       :data="itemsUlp"
+      :selected="ulp"
       :placeholder="ulpPlaceholder"
     />
   </div>

src/components/Form/FiltersType/Type11.vue

@@ -19,7 +19,7 @@ import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
@@ -36,7 +36,7 @@ const sla = [
 ];
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: ulp.value,
   periode: '',
   minTime: 1,
@@ -45,12 +45,12 @@ const data = ref({
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
@@ -106,7 +106,7 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type13.vue

@@ -53,7 +53,7 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type18.vue

@@ -4,15 +4,33 @@ import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
-fetchUid();
+import { onMounted, ref } from 'vue';
 
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Posko';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
+const emit = defineEmits(['update:filters'])
 const jenisTransakasi = [
     { id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
     { id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM',  }, 
     { id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM',  },  
     { id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev'  },
   ]
-
+  const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  jenisTransaksi: [],
+  group: 1
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
@@ -25,14 +43,13 @@ const jenisTransakasi = [
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
-      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" placeholder="Semua Posko" />
   </div>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
@@ -46,6 +63,9 @@ const jenisTransakasi = [
   </div>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker  />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type3.vue

@@ -56,13 +56,13 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type6.vue

@@ -56,13 +56,13 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type7.vue

@@ -100,13 +100,13 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Pages/Gangguan/Table_5.vue

@@ -54,7 +54,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';

src/components/Pages/Keluhan/Table_21.vue

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