Refactor Type18.vue component

src/components/Form/FiltersType/Type18.vue

@@ -1,23 +1,31 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import SelectMulti from '@/components/SelectMulti.vue';
+import SelectMulti from '@/components/SelectMulti.vue'
 
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import {
-import { onMounted, ref } from 'vue';
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-const poskoPlaceholder = 'Semua Posko';
+const poskoPlaceholder = 'Semua Posko'
-const up3 = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder });
+const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const jenisTransakasi = [
   { id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
-  { id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi TM', },
+  { id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi TM' },
-  { id: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM', },
+  { id: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM' },
-  { id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' },
+  { id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
 ]
 const data = ref({
   uid: uid.value,
@@ -27,6 +35,35 @@ const data = ref({
   jenisTransaksi: [],
   group: 1
 })
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+const setTags = (value: any) => {
+  data.value.jenisTransaksi = value
+}
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -38,31 +75,48 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="selectedUid($event)" :data="itemsUid"
+      <Select
-        placeholder="Semua Unit Induk Distribusi/Wilayah" />
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        placeholder="Semua Unit Induk Distribusi/Wilayah"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3"
+      <Select
-        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" placeholder="Semua Posko" />
+      <Select
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        placeholder="Semua Posko"
+      />
     </div>
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Transaksi:</label>
 
-      <SelectMulti :tags="jenisTransakasi" placeholder="Semua Jenis Transaksi" useLabel label="Jenis Transaksi" />
+      <SelectMulti
+        @update:tags="setTags($event)"
+        :tags="jenisTransakasi"
+        placeholder="Semua Jenis Transaksi"
+        useLabel
+        label="Jenis Transaksi"
+      />
     </div>
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>