Refactor form component and add Ulp store

src/components/Form/FiltersType/Type3.vue

@@ -1,29 +1,51 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
+import { ref } from 'vue';
+fetchData();
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(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 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="up3Placeholder" />
   </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">

src/stores/ulp.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUlpStore = defineStore('ulp', () => {
+    const ulp = ref()
+    const setData = (value: number) => {
+        ulp.value = value
+    }
+    const getData = () => {
+        return ulp.value
+    }
+    return {
+        setData,
+        getData,
+    }
+})