From 1af33222a3570abd891f4673fc0f2bb65dea4df9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sun, 31 Mar 2024 01:33:42 +0700
Subject: [PATCH] Refactor Type18.vue component

---
 src/components/Form/FiltersType/Type18.vue | 98 +++++++++++++++++-----
 1 file changed, 76 insertions(+), 22 deletions(-)

diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index d1a0a8e..a7ba6e3 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import SelectMulti from '@/components/SelectMulti.vue';
+import Select from '@/components/Select.vue'
+import SelectMulti from '@/components/SelectMulti.vue'
 
-import DatePicker from '@/components/DatePicker.vue';
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { onMounted, ref } from 'vue';
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const poskoPlaceholder = 'Semua Posko';
-const up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+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: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM', },
-  { id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' },
+  { id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi 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' }
 ]
 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"
-        placeholder="Semua Unit Induk Distribusi/Wilayah" />
+      <Select
+        @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"
-        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+      <Select
+        @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>