Refactor Select component and update Type1.vue

The commit message suggests that the developer refactored the Select component and made updates to the Type1.vue file.

src/components/Form/FiltersType/Type1.vue

@@ -2,27 +2,53 @@
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { ref } from '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 setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: uppPlaceholder };
+};
+
+const setUppp = (value: any) => {
+  uppp.value = value;
+  selectedUppp(value);
+  posko.value = { id: 0, name: poskoPlaceholder };
+};
+
+const setPosko = (value: any) => {
+  posko.value = value;
+  selectedPosko(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">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
+    <Select @update:selected="setUid($event)" :data="items" 
+    :placeholder="uidPlaceholder" />
   </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 Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
-      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUppp($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 @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+    <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/reference.ts

@@ -1,5 +1,5 @@
 
-import { getUid, getUp3,getPosko } from '@/utils/network';
+import { getUid, getUp3, getPosko } from '@/utils/network';
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts';
 import { useUp3Store } from '@/stores/up3';
@@ -8,28 +8,27 @@ interface Item {
   id: number;
   name: any;
 }
-
+const timeout = ref()
 const items = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
 const itemsPosko = ref<Item[]>([]);
 // Fetch data from the API using Axios
 const fetchData = async () => {
-  try {
-    const res = await getUid()
-    // console.log(res.data);
-
-    items.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
+    try {
+      const res = await getUid()
+      items.value = res.data.map((item: any) => (
+        {
+          id: item.id,
+          name: item.nama,
+        }
+      ));
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
 };
 
 const fetchDataUp3 = async (uid: number) => {
+
   try {
     const res = await getUp3(uid)
     itemsUp3.value = res.data.map((item: any) => (
@@ -38,11 +37,15 @@ const fetchDataUp3 = async (uid: number) => {
         name: item.nama,
       }
     ));
+
   } catch (error) {
     console.error('Error fetching data:', error);
   }
+
 };
 const fetchDataPosko = async (uppp: number) => {
+  clearTimeout(timeout.value)
+  timeout.value = setTimeout(async () => {
   try {
     const res = await getPosko(uppp)
     itemsPosko.value = res.data.map((item: any) => (
@@ -54,10 +57,12 @@ const fetchDataPosko = async (uppp: number) => {
   } catch (error) {
     console.error('Error fetching data:', error);
   }
+},300);
 };
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id);
   fetchDataUp3(value.id);
+  selectedUppp({id: 0, name: ''});
 }
 const selectedUppp = (value: any) => {
   useUp3Store().setData(value.id);
@@ -69,4 +74,4 @@ const selectedPosko = (value: any) => {
 
 
 
-export { selectedUid, selectedUppp, selectedPosko ,fetchData , items, itemsUp3, itemsPosko};
+export { selectedUid, selectedUppp, selectedPosko, fetchData, items, itemsUp3, itemsPosko };