Update version.json to 0.0.143-vm

src/components/Form/FiltersType/Type11.vue

@@ -6,7 +6,7 @@ interface SlaOption {
   max: string
 }
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -52,9 +52,6 @@ const totalMax = ref('5 Menit')
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const isHidden = ref(false)
 
@@ -64,21 +61,28 @@ const setDataMax = (value: any) => (totalMax.value = value)
 const getDataMax = () => totalMax.value
 
 const data = ref({
-  uid: uid.value,
-  up3: up3.value,
-  ulp: ulp.value,
+  uid: { id: 0, name: uidPlaceholder },
+  up3: { id: 0, name: up3Placeholder },
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   minTime: getDataMin().split(' ')[0],
   maxTime: getDataMax().split(' ')[0]
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
-  data.value.uid = value
+  data.value = {
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -89,10 +93,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
-  data.value.up3 = value
+  data.value = {
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -101,9 +107,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setMin = (value: any) => {
@@ -160,7 +168,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
 
@@ -168,7 +175,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -181,7 +187,6 @@ onMounted(() => {
         @update:selected="setUlp($event)"
         :data="itemsUlp"
         :placeholder="ulpPlaceholder"
-        :selected="ulp"
       />
 
       <Select
@@ -189,7 +194,6 @@ onMounted(() => {
         @update:selected="setUlp($event)"
         :data="itemsUlp"
         :placeholder="ulpPlaceholder"
-        :selected="ulp"
       />
     </div>