fix: daftar keluhan

src/components/Form/FiltersType/Type11.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-
-import { onMounted, ref, watch } from 'vue'
-import { useTotalDuration } from '@/stores/totalDuration';
-
+import { onMounted, ref } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -12,16 +10,16 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
-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 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 sla = [
@@ -33,7 +31,8 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-];
+]
+
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -42,54 +41,58 @@ const data = ref({
   minTime: 1,
   maxTime: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value;
-};
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
-  selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
-  data.value.up3 = value;
-};
+  up3.value = value
+  selectedUp3Ulp(value)
+  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value.up3 = value
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
-  selectedUlp(value);
-  data.value.ulp = value;
-};
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
+
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
   useTotalDuration().setDataMin(value)
-
 }
+
 const setMax = (value: any) => {
   data.value.maxTime = value
   useTotalDuration().setDataMax(value)
 }
+
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
-    setMin("1")
-    setMax("5")
+    setMin('1')
+    setMax('5')
     console.log('Durasi Menit')
     triggerInput.value = false
   } else if (value.id === 1) {
-    setMin("1")
-    setMax("45")
+    setMin('1')
+    setMax('45')
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    setMin("45")
+    setMin('45')
     setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
 }
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -98,30 +101,41 @@ onMounted(() => {
 
 <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="itemsUid" :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">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="up3" :placeholder="up3Placeholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="up3"
+      :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">Unit Layanan Pelanggan:</label>
 
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+      :selected="ulp"
+    />
   </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 @update:date-value="(value) => {
-      data.periode = value
-    }
-      " />
+    <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -136,5 +150,4 @@ onMounted(() => {
       </div>
     </div>
   </div>
-
 </template>