Refactor component and update references

src/components/Form/FiltersType/Type1.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUppp, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
 import { ref } from 'vue';
 fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -17,9 +17,9 @@ const setUid = (value: any) => {
   uppp.value = { id: 0, name: uppPlaceholder };
 };
 
-const setUppp = (value: any) => {
+const setUp3 = (value: any) => {
   uppp.value = value;
-  selectedUppp(value);
+  selectedUp3Posko(value);
   posko.value = { id: 0, name: poskoPlaceholder };
 };
 
@@ -40,7 +40,7 @@ const setPosko = (value: any) => {
   <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="setUppp($event)" :data="itemsUp3" :selected="uppp"
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
       :placeholder="uppPlaceholder" />
   </div>
 

src/components/Form/FiltersType/Type2.vue

@@ -1,42 +1,71 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
+import { selectedUid,  selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { ref } from 'vue';
+fetchData();
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const regionalPlaceholder = 'Semua Regional';
+const uppp = ref({ id: 0, name: up3Placholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const regional = ref({ id: 0, name: regionalPlaceholder });
+
+const setRegional = (value: any) => {
+  regional.value = value;
+  selectedUid(value);
+  uid.value = { id: 0, name: uidPlaceholder };
+};
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placholder };
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUp3Ulp(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">Regional:</label>
 
-    <Select placeholder="Semua Regional"/>
+    <Select @update:selected="setRegional($event)" :data="itemsRegional"  :placeholder="regionalPlaceholder" />
   </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 Induk Distribusi/Wilayah:</label>
 
-    <Select 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"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)"  :data="itemsUp3" :placeholder="up3Placholder"  />
   </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 Layanan Pelanggan:</label>
-      >Unit Layanan Pelanggan:</label
-    >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select @update:selected="setUlp($event)"  :data="itemsUlp" :placeholder="ulpPlaceholder"  />
   </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</label>
 
     <div class="grid grid-cols-2 gap-x-2">
-      <Select placeholder="Juli" />
+      <Select :data="months" placeholder="Pilih Bulan" />
-      <Select placeholder="2023" />
+      <Select :data="years" placeholder="Pilih Tahun" />
     </div>
   </div>
 </template>

src/components/Form/FiltersType/reference.ts

@@ -1,17 +1,42 @@
 
-import { getUid, getUp3, getPosko } from '@/utils/network';
+import { getUid, getUp3, getPosko ,getUlp} from '@/utils/network';
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts';
 import { useUp3Store } from '@/stores/up3';
 import { useRegionStore } from '@/stores/region';
+import { useUlpStore } from '@/stores/ulp';
+
 interface Item {
   id: number;
   name: any;
 }
+const months =[
+  {id:1, name: 'Januari'},
+  {id:2, name: 'Februari'},
+  {id:3, name: 'Maret'},
+  {id:4, name: 'April'},
+  {id:5, name: 'Mei'},
+  {id:6, name: 'Juni'},
+  {id:7, name: 'Juli'},
+  {id:8, name: 'Agustus'},
+  {id:9, name: 'September'},
+  {id:10, name: 'Oktober'},
+  {id:11, name: 'November'},
+  {id:12, name: 'Desember'},
+]
+// create 4 year back array
+const year = new Date().getFullYear();
+const years =ref<Item[]>([]);
+for (let i = 0; i < 5; i++) {
+  years.value.push({id:year-i, name: year-i})
+}
 const timeout = ref()
 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 () => {
     try {
@@ -43,11 +68,24 @@ const fetchDataUp3 = async (uid: number) => {
   }
 
 };
-const fetchDataPosko = async (uppp: number) => {
+const fetchDataUlp = async (up3: number) => {
+  try {
+    const res = await getUlp(up3)
+    itemsUlp.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+const fetchDataPosko = async (up3: number) => {
   clearTimeout(timeout.value)
   timeout.value = setTimeout(async () => {
   try {
-    const res = await getPosko(uppp)
+    const res = await getPosko(up3)
     itemsPosko.value = res.data.map((item: any) => (
       {
         id: item.id,
@@ -62,16 +100,22 @@ const fetchDataPosko = async (uppp: number) => {
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id);
   fetchDataUp3(value.id);
-  selectedUppp({id: 0, name: ''});
 }
-const selectedUppp = (value: any) => {
+const selectedUp3Posko = (value: any) => {
   useUp3Store().setData(value.id);
   fetchDataPosko(value.id);
 }
+const selectedUp3Ulp = (value: any) => {
+  useUp3Store().setData(value.id);
+  fetchDataUlp(value.id);
+}
 const selectedPosko = (value: any) => {
   usePostsStore().setData(value.id);
 }
+const selectedUlp = (value: any) => {
+  useUlpStore().setData(value.id);
+}
 
 
 
-export { selectedUid, selectedUppp, selectedPosko, fetchData, items, itemsUp3, itemsPosko };
+export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};

src/utils/network.ts

@@ -11,5 +11,6 @@ const getJenisTransaksi = async() => await instance.get('/jenisTransaksi');
 const getUp3 = async (
     uid: number,
 ) => await instance.get('/up3?uid=' + uid);
+const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3);
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp);
-export { getUid, getUp3, getPosko };
+export { getUid, getUp3, getPosko,getUlp,getMedia,getJenisTransaksi };