Fix select options in Filters.vue component

src/components/Form/Filters.vue

@@ -1,3 +1,4 @@
+<!-- ss -->
 <script setup lang="ts">
 // components
 import Button from '@/components/Button.vue'

src/components/Form/FiltersType/Type1.vue

@@ -4,24 +4,21 @@ import {
   selectedUid,
   selectedUp3Posko,
   selectedPosko,
-  fetchData,
+  fetchUid,
-  items,
+  itemsUid,
   itemsUp3,
   itemsPosko
 } from './reference'
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-// fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
-
 const emit = defineEmits(['update:filters'])
-
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
@@ -54,56 +51,35 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
+  fetchUid();
   emit('update:filters', data.value)
 })
 </script>
 
 <template>
   <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"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
-      >Unit Induk Distribusi/Wilayah:</label
-    >
 
-    <Select
+    <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
-      :data="items"
-      @update:selected="setUid($event)"
-      :placeholder="uidPlaceholder"
-      :selected="uid"
-    />
   </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"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
-      @update:selected="setUp3($event)"
-      :data="itemsUp3"
-      :selected="uppp"
-      :placeholder="uppPlaceholder"
-    />
   </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
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
-      @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">
     <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="
+        data.periode = value
-        (value) => {
+      }
-          data.periode = value
+      " />
-        }
-      "
-    />
   </div>
 </template>

src/components/Form/FiltersType/reference.ts

@@ -30,18 +30,17 @@ const years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
-const timeout = ref()
+const itemsUid = ref<Item[]>([]);
-const items = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
 const itemsPosko = ref<Item[]>([]);
 const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
 // Fetch data from the API using Axios
-const fetchData = async () => {
+const fetchUid = async () => {
   try {
     const res = await getUid()
-    items.value = res.data.map((item: any) => (
+    itemsUid.value = res.data.map((item: any) => (
       {
         id: item.id,
         name: item.nama,
@@ -82,8 +81,6 @@ const fetchDataUlp = async (up3: number) => {
   }
 }
 const fetchDataPosko = async (up3: number) => {
-  clearTimeout(timeout.value)
-  timeout.value = setTimeout(async () => {
     try {
       const res = await getPosko(up3)
       itemsPosko.value = res.data.map((item: any) => (
@@ -95,7 +92,6 @@ const fetchDataPosko = async (up3: number) => {
     } catch (error) {
       console.error('Error fetching data:', error);
     }
-  }, 300);
 };
 const fetchMedia = () => {
   itemsMedia.value = [
@@ -152,4 +148,4 @@ const selectedUlp = (value: any) => {
 
 
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchUid,fetchMedia,fetchStatus, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };