filter & storage

src/components/Form/Filters.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
   // components
   import Button from '@/components/Button.vue';
-
-  // icons
+  import { useSearchStore } from '@/stores/filtersAction';
+   // icons
   import {
     PhArrowsCounterClockwise, 
     PhFileText,
     PhMagnifyingGlass 
   } from '@phosphor-icons/vue';
-
+  const cariButton = useSearchStore()
   defineProps({
     reportButton: {
       type: Boolean,
@@ -26,7 +26,7 @@
     
     <div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
       <div class="filter-buttons flex gap-3 flex-wrap">
-        <Button label="Ulangi" style-type="outline" class-name="bg-white">
+        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
           <PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
         </Button>
 
@@ -34,8 +34,8 @@
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button label="Cari Data">
-          <PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
+        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
+          <PhMagnifyingGlass  size="18" class="ml-1" weight="regular" />
         </Button>
       </div>
     </div>

src/components/Form/FiltersType/Type1.vue

@@ -1,36 +1,101 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  const people = [
-    { id: 1, value: 'ULP GARUT', unavailable: true },
-    { id: 2, value: 'ULP SUMEDANG', unavailable: false },
-  ]
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { getUid, getUp3,getPosko } from '@/utils/network';
+import { ref } from 'vue'
+import { usePostsStore } from '@/stores/posts';
+import { useUp3Store } from '@/stores/up3';
+import { useRegionStore } from '@/stores/region';
+interface Item {
+  id: number;
+  name: any;
+}
+
+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);
+  }
+};
+
+const fetchDataUp3 = async (uid: number) => {
+  try {
+    const res = await getUp3(uid)
+    itemsUp3.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const fetchDataPosko = async (uppp: number) => {
+  try {
+    const res = await getPosko(uppp)
+    itemsPosko.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+const selectedUid = (value: any) => {
+  useRegionStore().setData(value.id);
+  fetchDataUp3(value.id);
+}
+const selectedUppp = (value: any) => {
+  useUp3Store().setData(value.id);
+  fetchDataPosko(value.id);
+}
+const selectedPosko = (value: any) => {
+  usePostsStore().setData(value.id);
+}
+
+fetchData();
+
 </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 :data=people placeholder="Semua Unit Induk Distribusi/Wilayah" />
+    <Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </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
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUppp($event)" :data="itemsUp3"
+      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 placeholder="Semua Posko" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" 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">Periode Tanggal:</label>
-
-    <DatePicker />
+    <DatePicker  />
   </div>
 </template>
+@/stores/up3