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 };

src/components/Select.vue

@@ -4,7 +4,7 @@ interface DataItem {
   name: string;
 }
 
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import {
   Combobox,
   ComboboxInput,
@@ -18,17 +18,37 @@ import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
 const props = defineProps({
   placeholder: {
     type: String,
-    default: ''
+    default: '0'
   },
   data: {
     type: Array as () => DataItem[],
     default: []
+  },
+  selected: {
+    type: Object as () => DataItem,
+    default: () => ({ id: 0, name: '' })
   }
 })
 const emit = defineEmits(["update:selected"])
 
 const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
 
+computed(() => {
+  if (props.selected.id === 0) {
+    selected.value = { id:0, name: props.placeholder }
+  }
+
+  console.log('selected', selected.value.name);
+  
+})
+
+watch(() => props.selected, (value) => {
+  if (value.id === 0) {
+    selected.value = { id:0, name: props.placeholder }
+  }
+})
+
+
 let selected = ref<DataItem>(data.value[0])
 let query = ref('')
 let filteredData = computed(() =>
@@ -44,9 +64,6 @@ let filteredData = computed(() =>
 
 const show = ref(false)
 
-onMounted(() => {
-})
-
 
 </script>
 
@@ -61,7 +78,7 @@ onMounted(() => {
           :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
           @click="show = true" @blur="show = false" defaultValue="" />
 
-        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>