Update date picker in Form FiltersType components

src/components/DatePicker.vue

@@ -1,27 +1,40 @@
 <script setup lang="ts">
-import { useDateStore } from '@/stores/date';
-import { PhCalendarBlank } from '@phosphor-icons/vue';
+import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
+
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+
 const dateValue = ref('')
 const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
 })
-watch(dateValue, (newValue) => {
-  useDateStore().setDateValue(newValue);
 
+const emit = defineEmits(['update:dateValue'])
+
+watch(dateValue, (newValue) => {
+  emit('update:dateValue', newValue)
 })
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
-      :auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
+    <vue-tailwind-datepicker
+      v-model="dateValue"
+      :formatter="formatter"
+      separator=" s/d "
+      :shortcuts="false"
+      :auto-apply="false"
+      as-single
+      use-range
+      v-slot="{ value, placeholder }"
+    >
       <div class="flex">
         <div class="flex-1">
-          <button type="button"
-            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>

src/components/Form/Filters.vue

@@ -1,44 +1,52 @@
+<!-- ss -->
 <script setup lang="ts">
-  // components
-  import Button from '@/components/Button.vue';
-  import { useSearchStore } from '@/stores/filtersAction';
-   // icons
-  import {
-    PhArrowsCounterClockwise, 
-    PhFileText,
-    PhMagnifyingGlass 
-  } from '@phosphor-icons/vue';
-  const cariButton = useSearchStore()
-  defineProps({
-    reportButton: {
-      type: Boolean,
-      default: false
-    }
-  })
+// components
+import Button from '@/components/Button.vue'
+import { useSearchStore } from '@/stores/filtersAction'
+
+// icons
+import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
+const cariButton = useSearchStore()
+defineProps({
+  reportButton: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['runSearch'])
 </script>
 
 <template>
   <div class="filters rounded-2xl">
-
     <form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
       <slot></slot>
     </form>
 
     <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 @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" 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>
 
-        <Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
+        <Button
+          v-if="reportButton"
+          label="Lihat Laporan"
+          style-type="outline"
+          class-name="bg-white"
+        >
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
-          <PhMagnifyingGlass  size="18" class="ml-1" weight="regular" />
+        <Button @on:click="() => emit('runSearch')" label="Cari Data">
+          <PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
         </Button>
       </div>
     </div>
-    
   </div>
 </template>

src/components/Form/FiltersType/Type1.vue

@@ -1,58 +1,98 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, 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 });
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  fetchUid
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+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,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
 
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  uppp.value = { id: 0, name: uppPlaceholder };
-};
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
-  selectedUp3Posko(value);
-  posko.value = { id: 0, name: poskoPlaceholder };
-};
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
 
 const setPosko = (value: any) => {
-  posko.value = value;
-  selectedPosko(value);
-};
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+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">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select @update:selected="setUid($event)" :data="items" 
-    :placeholder="uidPlaceholder" />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :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>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
-      :placeholder="uppPlaceholder" />
+    <Select
+      @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 @update:selected="setPosko($event)" 
-    :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <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">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker  />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type10.vue

@@ -29,7 +29,10 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type11.vue

@@ -29,7 +29,10 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type12.vue

@@ -30,7 +30,10 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type13.vue

@@ -30,7 +30,10 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type14.vue

@@ -29,6 +29,9 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -20,6 +20,9 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type16.vue

@@ -35,6 +35,9 @@ fetchMedia();
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type17.vue

@@ -8,7 +8,10 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type18.vue

@@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 fetchData();
 
 const departments = [
@@ -20,7 +20,7 @@ const departments = [
   <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="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type2.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, 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';
@@ -33,6 +32,7 @@ const setUlp = (value: any) => {
   ulp.value = value;
   selectedUp3Ulp(value);
 };
+
 </script>
 
 <template>
@@ -45,7 +45,7 @@ const setUlp = (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 Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder"  />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder"  />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type3.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
+import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
 import { ref } from 'vue';
 fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -33,7 +33,7 @@ const setUlp = (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 Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -51,6 +51,9 @@ const setUlp = (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">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type4.vue

@@ -37,6 +37,9 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type5.vue

@@ -27,6 +27,9 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type6.vue

@@ -2,7 +2,7 @@
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 import { useTotalReport } from '@/stores/totalReport';
   fetchData();
   const changeMinReport = (value: any) => {
@@ -17,7 +17,7 @@ import { useTotalReport } from '@/stores/totalReport';
   <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="selectedUid($event)" :data="itemsUid"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -37,7 +37,10 @@ import { useTotalReport } from '@/stores/totalReport';
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type7.vue

@@ -61,7 +61,10 @@ import { ref } from 'vue';
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/Type8.vue

@@ -21,6 +21,9 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>

src/components/Form/FiltersType/Type9.vue

@@ -28,7 +28,10 @@
   <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) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">

src/components/Form/FiltersType/reference.ts

@@ -1,11 +1,10 @@
 
-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';
-
+import { useUp3Store } from '@/stores/up3';
+import { getUid, getUp3, getPosko, getUlp } from '@/utils/network';
+import { ref } from 'vue'
 interface Item {
   id: any;
   name: any;
@@ -30,73 +29,13 @@ 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 itemsUid = 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 {
-    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) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-
-};
-const fetchDataUlp = async (up3: number) => {
-  try {
-    const res = await getUlp(up3)
-    itemsUlp.value = res.data.map((item: any) => (
-      {
-        id: item.name,
-        name: item.name,
-      }
-    ));
-  } 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(up3)
-      itemsPosko.value = res.data.map((item: any) => (
-        {
-          id: item.nama,
-          name: item.nama,
-        }
-      ));
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-  }, 300);
-};
 const fetchMedia = () => {
   itemsMedia.value = [
   { id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile"},
@@ -115,6 +54,62 @@ const fetchMedia = () => {
   ]
 
 }
+// Fetch data from the API using Axios
+const fetchUid = async () => {
+  try {
+    const res = await getUid()
+    itemsUid.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 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) => {
+  try {
+    const res = await getPosko(up3)
+    itemsPosko.value = res.data.map((item: any) => ({
+      id: item.id,
+      name: item.nama
+    }))
+  } catch (error) {
+    console.error('Error fetching data:', error)
+  }
+}
+const fetchRegional = () => {
+  itemsRegional.value = [
+    { id: "1", name: "Wilayah Sumatera" },
+    { id: "2", name: "Wilayah Jawa Bali" },
+    { id: "3", name: "Wilayah Kalimantan" },
+    { id: "4", name: "Wilayah Sulawesi" },
+    { id: "5", name: "Wilayah Nusa Tenggara" },
+    { id: "6", name: "Wilayah Maluku Papua" },
+  ]
+}
 const fetchStatus = (data : any) => {
 
   const status  = [
@@ -132,24 +127,25 @@ const fetchStatus = (data : any) => {
   return name;
 }
 const selectedUid = (value: any) => {
-  useRegionStore().setData(value.id);
-  fetchDataUp3(value.id);
+  useRegionStore().setData(value.id)
+  fetchDataUp3(value.id)
 }
 const selectedUp3Posko = (value: any) => {
-  useUp3Store().setData(value.id);
-  fetchDataPosko(value.id);
+  if (value.id != 0) {
+    useUp3Store().setData(value.id)
+    fetchDataPosko(value.id)
+  }
 }
 const selectedUp3Ulp = (value: any) => {
-  useUp3Store().setData(value.id);
-  fetchDataUlp(value.id);
+  useUp3Store().setData(value.id)
+  fetchDataUlp(value.id)
 }
 const selectedPosko = (value: any) => {
-  usePostsStore().setData(value.id);
+  usePostsStore().setData(value.id)
 }
 const selectedUlp = (value: any) => {
-  useUlpStore().setData(value.id);
+  useUlpStore().setData(value.id)
 }
 
 
-
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp,fetchRegional, fetchUid,fetchMedia,fetchStatus, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

src/components/Pages/Gangguan/Table_1.vue

@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => {
+        console.log(filters)
+        filterData(filters)
+        }" class="mb-4">
+        <Type1 @update:filters="(value) => { filters = value }" />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
             :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
@@ -9,10 +15,8 @@
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxSelection mode="single" />
             <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
@@ -197,7 +201,8 @@
 </template>
 
 <script setup lang="ts">
-
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -207,17 +212,10 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-import { useDialogStore } from '@/stores/dialog'
-import { useFiltersStore } from '@/stores/filters'
-import { useDateStore } from '@/stores/date'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useUp3Store } from '@/stores/up3';
-import { useRegionStore } from '@/stores/region';
 import { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' };
 const showIndicator = ref(true);
@@ -296,14 +294,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_AL
     idUid: 0,
     idUp3: 0,
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+// const detected = computed(() => reportButton.isTriggerChange)
+const filterData =(filters: any) => {
+    console.log(filters)
+    const dateValue = filters().periode.split(' s/d ');
+    const posko = filters().posko ? filters().posko : ""
+    const up3 = filters().up3 ? filters().up3 : 0
+    const uid = filters().uid ? filters().uid : 0
     refetch({
         dateFrom: dateValue[0].split('-').reverse().join('-'),
         dateTo: dateValue[1].split('-').reverse().join('-'),
@@ -316,7 +313,7 @@ watch(detected, () => {
             queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
-                    status_akhir : fetchStatus(item.status_akhir)
+                    status_akhir: fetchStatus(item.status_akhir)
                 }];
             });
         }
@@ -327,20 +324,15 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     dataDetail.value = data
     console.log(data)
 }
-
 const showData = () => {
     showDetail.value = true
 }
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-    });
-})
+const filters = ref()
+
 </script>

src/components/Pages/MenuProvider.vue

@@ -1,30 +1,24 @@
 <template>
     <main
-        class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-            <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
-        </div>
-        <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
-                <component :is="filters.config.component" />
-            </Filters>
-
-            <slot></slot>
-        </div>
+      class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
+    >
+      <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
+        <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
+      </div>
+      <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
+        <slot></slot>
+      </div>
     </main>
-</template>
+  </template>
   
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-import { useFiltersStore } from '@/stores/filters';
+  <script setup lang="ts">
+  import { computed } from 'vue'
+  import { useRoute } from 'vue-router'
   
-import Filters from '../Form/Filters.vue'
+  // Dapatkan objek route dari vue-router
+  const route = useRoute()
   
-// Dapatkan objek route dari vue-router
-const route = useRoute()
+  // Dapatkan nama rute menggunakan computed property
+  const pageTitle = computed(() => route.name)
+  </script>
   
-// Dapatkan nama rute menggunakan computed property
-const pageTitle = computed(() => route.name)
-const filters = useFiltersStore()
-</script>

src/components/Select.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface DataItem {
-  id: any;
-  name: string;
+  id: any
+  name: any
 }
 
 import { ref, computed, watch } from 'vue'
@@ -29,25 +29,24 @@ const props = defineProps({
     default: () => ({ id: 0, name: '' })
   }
 })
-const emit = defineEmits(["update:selected"])
+const emit = defineEmits(['update:selected'])
 
-const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
+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 }
+    selected.value = { id: 0, name: props.placeholder }
   }
 })
 
+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('')
@@ -55,56 +54,82 @@ let filteredData = computed(() =>
   query.value === ''
     ? data.value
     : data.value.filter((item: DataItem) =>
-      item.name
-        .toLowerCase()
-        .replace(/\s+/g, '')
-        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
-    )
+        item.name
+          .toLowerCase()
+          .replace(/\s+/g, '')
+          .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+      )
 )
 
 const show = ref(false)
-
-
 </script>
 
 <template>
   <Combobox
-  @update:modelValue="value => emit('update:selected', value)"
-  v-model="selected" v-slot="{ open }">
+    @update:modelValue="(value) => emit('update:selected', value)"
+    v-model="selected"
+    v-slot="{ open }"
+  >
     <div class="relative mt-1">
       <div
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
-        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
-          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
-          @click="show = true" @blur="show = false" defaultValue="" />
+        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm"
+      >
+        <ComboboxInput
+          class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          :displayValue="(item: any) => (show || open ? '' : item.name)"
+          @change="query = $event.target.value"
+          @click="show = true"
+          @blur="show = false"
+          defaultValue=""
+        />
 
         <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>
-      <TransitionRoot :show="show || open" 
-      
-      leave="transition ease-in duration-100" leaveFrom="opacity-100"
-        leaveTo="opacity-0" @after-leave="query = ''">
-        <ComboboxOptions static
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-          <div v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700">
+      <TransitionRoot
+        :show="show || open"
+        leave="transition ease-in duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        @after-leave="query = ''"
+      >
+        <ComboboxOptions
+          static
+          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        >
+          <div
+            v-if="filteredData.length === 0 && query !== ''"
+            class="relative cursor-default select-none py-2 px-4 text-gray-700"
+          >
             Nothing found.
           </div>
 
-          <ComboboxOption v-for="item in filteredData" 
-          as="template" :key="item.id" :value="item"
-            v-slot="{ selected, active }">
-            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
-              'bg-teal-600 text-white': active,
-              'text-gray-900': !active
-            }">
-              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+          <ComboboxOption
+            v-for="item in filteredData"
+            as="template"
+            :key="item.id"
+            :value="item"
+            v-slot="{ selected, active }"
+          >
+            <li
+              class="relative cursor-default select-none py-2 pl-10 pr-4"
+              :class="{
+                'bg-teal-600 text-white': active,
+                'text-gray-900': !active
+              }"
+            >
+              <span
+                class="block truncate"
+                :class="{ 'font-medium': selected, 'font-normal': !selected }"
+              >
                 {{ item.name }}
               </span>
-              <span v-if="selected"  class="absolute inset-y-0 left-0 flex items-center pl-3"
-                :class="{ 'text-white': active, 'text-teal-600': !active }">
+              <span
+                v-if="selected"
+                class="absolute inset-y-0 left-0 flex items-center pl-3"
+                :class="{ 'text-white': active, 'text-teal-600': !active }"
+              >
                 <CheckIcon class="h-5 w-5" aria-hidden="true" />
               </span>
             </li>