fix(filters): change code structure and data flow in filter type 1

src/components/Form/Filters.vue

@@ -1,44 +1,51 @@
 <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>
+</template>

src/components/Form/FiltersType/Type1.vue

@@ -1,58 +1,109 @@
 <script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchData,
+  items,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
 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 });
+// 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 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(() => {
+  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
+      :data="items"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
   </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>
+</template>

src/components/Form/FiltersType/Type18.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
@@ -44,4 +44,6 @@ const departments = [
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
     <DatePicker  />
   </div>
-</template>
+</template> -->
+
+<template></template>

src/components/Form/FiltersType/Type6.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
@@ -49,4 +49,6 @@ import { useTotalReport } from '@/stores/totalReport';
       <InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
     </div>
   </div>
-</template>
+</template> -->
+
+<template></template>