Merge branch 'IntegrationTableWithFilter' of https://gitea.callysta-engineering.com/APKT/eis into development

src/components/Form/FiltersType/Type1.vue

@@ -17,7 +17,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
+const posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type10.vue

@@ -20,7 +20,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type11.vue

@@ -13,14 +13,13 @@ import {
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import InputNumber from '@/components/Form/InputNumber.vue'
 
 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const sla = [
   {
@@ -50,7 +49,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type12.vue

@@ -9,13 +9,15 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
   posko: ulp.value,
-  periode: ''
+  periode: '',
+  minDurasiResponseTime: 1,
+  maxDurasiResponseTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value;
@@ -27,7 +29,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
@@ -36,6 +38,40 @@ const setUlp = (value: any) => {
   selectedUlp(value);
   data.value.posko = value;
 };
+const triggerInput = ref(false)
+const sla = [
+  {
+    id: 0,
+    name: 'Durasi Menit'
+  },
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiResponseTime = 46
+    data.value.maxDurasiResponseTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -90,12 +126,30 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+        @update:selected="changeDuration($event)" 
+        :data="sla" 
+        placeholder="Durasi Menit"
+      />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiResponseTime =value
+          }
+          "
+        @value="data.minDurasiResponseTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiResponseTime = value
+          }
+          "
+        @value="data.maxDurasiResponseTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type13.vue

@@ -9,7 +9,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -28,7 +28,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type14.vue

@@ -1,27 +1,39 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { ref } from 'vue';
+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: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+
 </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">Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Distribusi/Wilayah"/>
+    <Select placeholder="Semua Distribusi/Wilayah" />
   </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"
-      >Area:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
 
     <Select placeholder="Semua Area" />
   </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"
-      >Posko:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
@@ -29,9 +41,9 @@
   <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>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -2,6 +2,21 @@
   import InputWithFilter from '../InputWithFilter.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { ref } from 'vue';
+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: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
 </script>
 
 <template>

src/components/Form/FiltersType/Type16.vue

@@ -19,7 +19,7 @@ const poskoPlaceholder = 'Semua Posko'
 const mediaPlaceholder = 'Semua Media'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
+const posko = ref({ id: "", name: poskoPlaceholder })
 const media = ref({ id: 0, name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
@@ -44,7 +44,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type2.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional,fetchUid,fetchUidWithRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { onMounted, ref } from 'vue';
 import { getMonthName } from '@/utils/texts';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -13,14 +13,14 @@ const bulanSelected = new Date().getMonth();
 const tahunSelected = new Date().getFullYear();
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
 const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
 const regional = ref({ id: 0, name: regionalPlaceholder });
 const emit = defineEmits(['update:filters'])
 // Find index of January
 const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
-
+console.log(bulanSelected)
 // Remove January if found
 if (bulanIndex !== -1) {
   months.splice(bulanIndex, 1);
@@ -42,6 +42,8 @@ const data = ref({
 
 const setRegional = (value: any) => {
   regional.value = value;
+  fetchUid(); 
+  // harusnya fetchUidWithRegional(value);
   selectedUid(value);
   uid.value = { id: 0, name: uidPlaceholder };
   data.value.regional = value;
@@ -57,7 +59,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type3.vue

@@ -8,7 +8,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -26,7 +26,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type4.vue

@@ -8,7 +8,7 @@ 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 ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -27,7 +27,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 

src/components/Form/FiltersType/Type5.vue

@@ -17,7 +17,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
+const posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type6.vue

@@ -10,7 +10,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -30,7 +30,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type7.vue

@@ -12,7 +12,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -31,7 +31,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -53,6 +53,13 @@ const sla = [
   }
 
 ]
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+}
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
@@ -63,7 +70,6 @@ const changeDuration = (value: any) => {
   } else if (value.id === 1) {
     data.value.minTime = 0
     data.value.maxTime = 45
-    console.log(data.value)
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
@@ -72,13 +78,8 @@ const changeDuration = (value: any) => {
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
-  console.log('value', data.value);
-  
 }
 watch(data, (newValue) => {
-  console.log('newValue', newValue.maxTime)
-
   emit('update:filters', newValue)
 })
 onMounted(() => {
@@ -91,32 +92,19 @@ onMounted(() => {
   <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 
-      @update:selected="setUid($event)" 
-      :data="itemsUid" 
-      :placeholder="uidPlaceholder"
-    />
+    <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>
 
-    <Select 
-      @update:selected="setUp3($event)" 
-      :data="itemsUp3" 
-      :placeholder="up3Placeholder"
-
-    />
+    <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">Posko:</label>
 
-    <Select 
-      @update:selected="setPosko($event)" 
-      :data="itemsPosko" 
-      :placeholder="poskoPlaceholder"
-    />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -132,32 +120,12 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select 
-      @update:selected="changeDuration($event)" 
-        
-      :data="sla" placeholder="Durasi Menit" />
+      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
-      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5"  >
-        <InputWithSuffix 
-        :default-value="`${data.minTime} Menit`"
-        :disabled="triggerInput"
-          @update:minuteValue="
-          (value :any)=> {
-            data.minTime =value
-          }
-          "
-         
-       />
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
-        :default-value="`${data.maxTime} Menit`"
-          @update:minuteValue="
-          (value :any)=> {
-            data.maxTime = value
-          }
-          "
-        :disabled="triggerInput"
-            />
+        <InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
       </div>
     </div>
   </div>

src/components/Form/FiltersType/Type8.vue

@@ -16,7 +16,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
+const posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -39,7 +39,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/Type9.vue

@@ -19,7 +19,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
+const posko = ref({ id: "" ,name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -42,7 +42,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 

src/components/Form/FiltersType/reference.ts

@@ -1,4 +1,4 @@
-import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp,getUidRegional, getRegional } from '@/utils/network'
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
 import { useUp3Store } from '@/stores/up3'
@@ -38,15 +38,18 @@ const itemsPosko = ref<Item[]>([]);
 const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
-const fetchRegional = () => {
-  itemsRegional.value = [
-    { id: "1", name: "Wilayah Sumatera" },
-    { id: "2", name: "Wilayah Jawa Bali" },
-    { id: "3", name: "Wilayah Kalimantan" },
-    { id: "4", name: "Wilayah Sulawesi" },
-    { id: "5", name: "Wilayah Nusa Tenggara" },
-    { id: "6", name: "Wilayah Maluku Papua" },
-  ]
+const fetchRegional =async () => {
+  try {
+  const res = await getRegional()
+    itemsRegional.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama.toUpperCase(),
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 }
 const fetchStatus = (data : any) => {
 
@@ -170,4 +173,4 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchUidWithRegional,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

src/components/Form/InputNumber.vue

@@ -22,7 +22,6 @@ const props = defineProps({
 const emit = defineEmits(['update:timeValue'])
 const timeValue = ref(1)
 watch(timeValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:timeValue', newValue)
 })
 

src/components/Form/InputWithSuffix.vue

@@ -21,15 +21,10 @@ const props = defineProps({
  
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref<any>(props.defaultValue)
+const menitValue = ref(props.defaultValue)
 watch(menitValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
-
-watch(() => props.defaultValue, (newValue) => {
-  menitValue.value = newValue
-})
 </script>
 
 <template>
@@ -45,6 +40,7 @@ watch(() => props.defaultValue, (newValue) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
+      :defaultValue="props.defaultValue"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"

src/components/Pages/Anomali/Table_61.vue

@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -111,7 +111,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Anomali/Table_62.vue

@@ -42,6 +42,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_63.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -79,6 +79,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_64.vue

@@ -66,7 +66,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()

src/components/Pages/Anomali/Table_65.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -87,6 +87,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Anomali/Table_66.vue

@@ -42,6 +42,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {

src/components/Pages/Cico/Table_60.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -34,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -43,7 +49,15 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { Type1 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -78,12 +92,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>

src/components/Pages/Ctt/Table_67.vue

@@ -1,5 +1,11 @@
 <template>
-    <div>
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
@@ -56,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -65,7 +71,15 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import Filters from '@/components/Form/Filters.vue'
+import { Type3 } from '@/components/Form/FiltersType'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +114,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3',
-        reportButton: true
-    })
-})
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>

src/components/Pages/Gangguan/Table_1.vue

@@ -1,12 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @update:filters="(value) => {
-        filters = value
-      }
+      filters = value
+    }
       " />
   </Filters>
 
-  <div id="data">
+  <div id="dataTable">
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
       :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
       :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -97,7 +97,7 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Tanggal Respon:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -111,21 +111,21 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Durasi Response Time:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Durasi Recovery Time:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko Awal:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -139,14 +139,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Status:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           IDPEL/NO METER:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -181,14 +181,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Sumber Laporan:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
     </div>
 
@@ -221,7 +221,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' }
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
+const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
@@ -293,16 +294,14 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
   }
 `
 const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
-  const posko = params.posko ? params.posko.id : ''
-  const uid = params.uid ? params.uid.id : 0
-  const up3 = params.up3 ? params.up3.id : 0
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko,
-    idUid: uid,
-    idUp3: up3
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -313,6 +312,8 @@ const filterData = (params: any) => {
             ...item,
             pembuat_laporan: '-',
             waktu_lapor: '-',
+            status_akhir: fetchStatus(item.status_akhir),
+            posko: item.posko_asal
           }
         ]
       })

src/components/Pages/Gangguan/Table_10.vue

@@ -188,16 +188,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 

src/components/Pages/Gangguan/Table_11.vue

@@ -257,15 +257,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_12.vue

@@ -184,15 +184,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_13.vue

@@ -186,15 +186,13 @@ query rekapitulasiGangguanPerTanggal(
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_14.vue

@@ -1,10 +1,10 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -145,24 +145,22 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   }
 `
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
 
 
@@ -177,7 +175,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-    
+
 }
 const filters = ref();
 </script>

src/components/Pages/Gangguan/Table_15.vue

@@ -120,15 +120,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
 

src/components/Pages/Gangguan/Table_16.vue

@@ -271,15 +271,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     const filters = useFiltersStore()
 

src/components/Pages/Gangguan/Table_17.vue

@@ -201,15 +201,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_18.vue

@@ -177,15 +177,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 const filterData = (params: any) => {
   
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_19.vue

@@ -150,15 +150,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 const filterData = (params: any) => {
 
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
     onResult(queryResult => {

src/components/Pages/Gangguan/Table_20.vue

@@ -155,15 +155,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_3.vue

@@ -68,6 +68,7 @@ const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
     const { minTime, maxTime, posko, uid, up3 } = params;
+    console.log(params)
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),

src/components/Pages/Gangguan/Table_7.vue

@@ -105,15 +105,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
+
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3?.id ? up3.id : 0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_8.vue

@@ -155,8 +155,8 @@ const filterData = (param: any) => {
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {

src/components/Pages/Gangguan/Table_9.vue

@@ -240,15 +240,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
+
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {